zoukankan      html  css  js  c++  java
  • Textarea与懒惰渲染

    2008年有啊第一次性能优化时,我们曾用textarea来存贮需要懒惰渲染的节点。代码如下。

    <div>
    立即渲染内容
    <ul>
    <li>张三<img src="p01.jpg"/></li>
    <li>张四<img src="p02.jpg"/></li>
    </ul>
    </div>

    <div>
    <textarea id="lazyRender01" style="display:none">
    懒惰渲染内容
    <ul>
    <li>李三<img src="p11.jpg"/></li>
    <li>李四<img src="p12.jpg"/></li>
    </ul>
    </textarea>
    </div>
    <script>
    setTimeout(
    function(){//懒惰渲染
    var el =document.getElementById('lazyRender01');
    el.parentNode.innerHTML
    = el.value;
    },
    1000);
    </script>



    代码的好处是:让李三李四对应的内容,在懒惰渲染之前,不形成dom节点,不请求图片。

    但有的同学会问:“Textarea里的内容,对搜索引擎不友好。”
    没问题,这个也很好解决的:

    <div>
    立即渲染内容
    <ul>
    <li>张三<img src="p01.jpg"/></li>
    <li>张四<img src="p02.jpg"/></li>
    </ul>
    </div>

    <div>
    <script>document.write('<textarea id="lazyRender01" style="display:none">');</script>
    懒惰渲染内容
    <ul>
    <li>李三<img src="p11.jpg"/></li>
    <li>李四<img src="p12.jpg"/></li>
    </ul>
    </textarea>
    </div>
    <script>
    setTimeout(
    function(){//懒惰渲染
    var el =document.getElementById('lazyRender01');
    el.parentNode.innerHTML
    = el.value;
    },
    1000);

    </script>

    代码的区别很简单,只是把'<textarea id="lazyRender01">'这一段通过js的document.write输出来。

    但结果却有了很大的不同:就算浏览器不支持js,一切内容也还是能原样显示出来

  • 相关阅读:
    7.20 高博教育 方法
    7.20 高博教育 随机数字(练习)
    7.17 高博教育 流程控制02
    7月17号 高博教育 复习加逻辑运算符
    7月16号 高博教育 知识扩展
    7月16号 高博教育 知识点总结
    7月16号 高博教育 数据运算符和比较运算符
    链式线性表——课上练
    顺序线性表——课上练
    链栈——课上练
  • 原文地址:https://www.cnblogs.com/jkisjk/p/textarea_and_lazyRender.html
Copyright © 2011-2022 走看看