博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
innerHTML属性的内存和性能问题
阅读量:5086 次
发布时间:2019-06-13

本文共 877 字,大约阅读时间需要 2 分钟。

使用innerHTML替换子节点可能会导致浏览器的内存占用问题,尤其是在IE中,问题更加明显。在删除带有时间处理程序或引用了其他js对象子树是,就有可能导致内存占用问题。假设某个元素有一个事件处理程序,在使用前某个属性将该该元素从文档树种删除后,元素与时间处理程序之间的绑定关系在内存中并没有一并删除。如果这种情况频繁出现,页面占用的内存数量就会明显增加。因此在使用innerHTML时,最好先手工删除要被替换的元素的所有事件处理程序.

不过,使用innerHTML这个属性,仍然还是可以为我们提供很多便利的。一般来说,在插入大量新HTML标记时,使用innerHTML属性与通过多次DOM操作先创建节点再指定他们之间的关系相比,效率要高得多。这是因为在设置innerHTML时,就会创建一个html解析器。这个解析器是在浏览器级别的代码基础上运行的,因此比执行js快得多。不可避免地,创建和销毁html解析器也会带来性能损失,所以最好能够将创建innerHTML的次数控制在合理范围内。例如,下列代码使用innerHTML创建了很多列表项:

for(var i=0,len=value.length;i
  • ”+value[i]+”
  • ”; //避免这种频繁操作}

      

    这种每次循环都设置一次innerHTML的做法效率很低。而且,每次循环还要从innerHTML中读取一次信息,及以为这每次循环要访问两次innerHTML。最好的做法是单独构建字符串,然后在一次性地将结果字符串赋值给innerHTML,想这样:

    Var itemHtml=””;for(var i=0,len=value.length;i
  • ”+value[i]+”
  • ”; //避免这种频繁操作}ul.innerHTML=intemHtml;

     

    这个例子的效率高得多,因为它只对innerHTML执行了一次渎职操作。

     

    转载于:https://www.cnblogs.com/wangdan0915/p/8136332.html

    你可能感兴趣的文章
    中文脏话识别的解决方案
    查看>>
    CSS之不常用但重要的样式总结
    查看>>
    Python编译错误总结
    查看>>
    URL编码与解码
    查看>>
    日常开发时遇到的一些坑(三)
    查看>>
    Eclipse 安装SVN插件
    查看>>
    深度学习
    查看>>
    TCP粘包问题及解决方案
    查看>>
    构建之法阅读笔记02
    查看>>
    添加按钮
    查看>>
    移动端页面开发适配 rem布局原理
    查看>>
    Ajax中文乱码问题解决方法(服务器端用servlet)
    查看>>
    会计电算化常考题目一
    查看>>
    阿里云服务器CentOS6.9安装Mysql
    查看>>
    剑指offer系列6:数值的整数次方
    查看>>
    js 过滤敏感词
    查看>>
    poj2752 Seek the Name, Seek the Fame
    查看>>
    软件开发和软件测试,我该如何选择?(蜗牛学院)
    查看>>
    基本封装方法
    查看>>
    bcb ole拖拽功能的实现
    查看>>