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

  • 相关阅读:
    #Laravel笔记# 使用SMTP发送邮件功能
    #Laravel笔记# 监听事件
    idea 常见问题
    python常见函数汇总
    双DNN排序模型:在线知识蒸馏在爱奇艺推荐的实践
    机器学习算法GBDT
    Hive表数据同步到es
    目标检测资料
    zeppelin的介绍与使用
    Java汉字获取拼音、笔划、偏旁部首
  • 原文地址:https://www.cnblogs.com/jkisjk/p/textarea_and_lazyRender.html
Copyright © 2011-2022 走看看