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,一切内容也还是能原样显示出来

  • 相关阅读:
    Linux文件目录结构一览表
    Linux一切皆文件(包含好处和弊端)
    Linux使用注意事项(新手必看)
    为什么建议使用虚拟机来安装Linux?
    开发中出现的问题
    为什么很多公司都在招测试开发?
    Linux cat查看文件,查找关键字(grep),统计(wc -l)
    性能测试
    Linux的感性理解
    使用Python循环插入10万数据
  • 原文地址:https://www.cnblogs.com/jkisjk/p/textarea_and_lazyRender.html
Copyright © 2011-2022 走看看