zoukankan      html  css  js  c++  java
  • 高效将字符串转换为文档碎片

    我在《javascript 动态插入技术》中,就介绍了用innerHTML转换为文档碎片的技术了,这个被各大类库所取用。但事实上,如果我们的字符串没有th,tbody,col等需要通过包装才能动态生成的标签,也没有那个特烦人的script标签,我们在提高性能上还是有许多方法,如insertAdjacentHTML。但想使用insertAdjacentHTML,限制非常多的,如在IE下避开innerHTML为只读的元素,FF需要很高的版本才支持,加之调用对象(如jQuery)的元素往往只能是节点,不能是字符串,因此很多情况下,我们还是先需要把它转换为节点集合,而今天我介绍的是使用createContextualFragment直接将字符串转换为文档碎片!

    传统的innerHTML方式会产生一个多余的div元素做转换器,然后再使用createDocumentFragment创建一个文档碎片,一个个节点转移上去。如果使用createContextualFragment就可以避免这一步了。

    //http://www.cnblogs.com/rubylouvre/archive/2011/04/15/2016800.html
              var str = '<div><strong>test</strong></div>';
              var range =document.createRange();
              range.selectNodeContents(document.documentElement); 
              var fragment =range.createContextualFragment(str);
              document.body.appendChild(fragment);
    

    browerinnerHTMLcreateContextualFragment
    chrome123470
    chrome141540
    ff43633
    ff72418
    opera102817
    opera11.5187
  • 相关阅读:
    ThinkPHP教程_PHP框架之ThinkPHP(三)【系统常量与模板替换】
    ThinkPHP教程_PHP框架之ThinkPHP(二)【URL路径访问与模块控制器、URL四种模式、PATHINFO的两种模式、模板与控制器之间的关系】
    ThinkPHP教程_PHP框架之ThinkPHP(一)【入门和介绍、ThinkPHP版本和文件夹规范、项目入口文件】
    Markdown,技术简历编辑的一缕清风...
    Zend Studio 13.5的安装、破解和汉化
    原生JS配合AJAX完成省市县三级联动(带数据库、PHP+Smarty)
    DAL与数据库类型的对应关系
    mysql 学习
    关于MySQL的分区(partion)
    Response.Write,Page.RegisterClientScriptBlock和Page.RegisterStartupScript的区别
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2016800.html
Copyright © 2011-2022 走看看