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

  • 相关阅读:
    输入设备驱动
    Windows下Eclipse+PyDev安装Python开发环境
    Wireshark does not show SSL/TLS
    error trying to exec 'cc1plus': execvp: 没有那个文件或目录
    json 的key值不能是变量
    获取url参数(jq 扩展包)
    jsonp 完成跨域请求注意事项
    怎样删除数据库表中所有的数据
    sqlserver中数据的四种插入方式
    DataGridView
  • 原文地址:https://www.cnblogs.com/jkisjk/p/textarea_and_lazyRender.html
Copyright © 2011-2022 走看看