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

  • 相关阅读:
    python之《set》
    python之 《zip,lambda, map》
    python之 socketserver模块的使用
    iOS FMDB小试了一下
    人生要自强不息-路遇瞎子感悟
    iOS Node Conflict svn冲突
    iOS 隐藏Status Bar
    iOS NSURLSession 封装下载类
    iOS NSFileManager
    iOS prototype Cells
  • 原文地址:https://www.cnblogs.com/jkisjk/p/textarea_and_lazyRender.html
Copyright © 2011-2022 走看看