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

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

for(var i=0,len=value.length;i<len;i++){

  ul.innerHTML+=”<li>”+value[i]+”</li>”; //避免这种频繁操作

}

  

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

Var itemHtml=””;

for(var i=,len=value.length;i<len;i++){

  itemHtml+=”<li>”+value[i]+”</li>”; //避免这种频繁操作

}

ul.innerHTML=intemHtml;

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

innerHTML属性的内存和性能问题的更多相关文章

  1. JavaScript 事件对内存和性能的影响

    程序代码: <%-- Created by IntelliJ IDEA. User: 乔克叔叔 Date: 2017/12/26 Time: 16:45 To change this templ ...

  2. WPF学习笔记二 依赖属性实现原理及性能分析

    在这里讨论依赖属性实现原理,目的只是学习WPF是怎么设计依赖属性的,同时更好的使用依赖属性. 首先我们来思考一个简单的问题:我们希望能验证属性的值是否有效,属性变更时进行自己的处理.回顾一下.net的 ...

  3. innerHTML属性

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  4. 标签的innerHTML属性和html()

    在新公司开发编码的时候,经常写js代码:有时候就需要往某个标签里添加一些html脚本或者要拿到某个标签里的html脚本,那么就会用到innerHTML和html. 1.innerHTML属性 w3sc ...

  5. Android内存、性能是程序永恒的话题

    内存.性能是程序永恒的话题,实际开发中关于卡顿.OOM也经常是打不完的两只老虎,关于卡顿.OOM的定位方法和工具比较多,这篇文章也不打算赘述了,本章主要是来整理一下JVM的内存模型以及Java对象的生 ...

  6. JavaScript 中的内存和性能、模拟事件(读书笔记思维导图)

    由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序.在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体 ...

  7. 利用 gperftools 对nginx mysql 内存管理 性能优化

    利用 gperftools 对nginx 与 mysql  进行 内存管理  性能优化 降低负载. Gperftools 是由谷歌开发.官方对gperftools 的介绍为: These tools ...

  8. HTML DOM innerHTML 属性及实现图片连续播放

    定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 语法 tablerowObject.innerHTML=HTML 实例 下面的例子返回了表格行的 inner H ...

  9. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

随机推荐

  1. python3没有了xrange

    升级到python3的同学应该会注意到以前经常用的xrange没了! 是的,python3的range就是xrange.直接看效果!   Python 2.7.13 (v2.7.13:a06454b1 ...

  2. UOJ#80. 二分图最大权匹配 模板

    #80. 二分图最大权匹配 描述 提交 自定义测试 从前一个和谐的班级,有 nlnl 个是男生,有 nrnr 个是女生.编号分别为 1,…,nl1,…,nl 和 1,…,nr1,…,nr. 有若干个这 ...

  3. 过滤html标签的一个函数

    str_replace(array(' ', '&', '"', ''', '“', '”', '—', '<', '>', '·', '…', '&'), ar ...

  4. FTP主动模式与被动模式说明

    FTP是仅基于TCP的服务,不支持UDP.与众不同的是FTP使用2个端口,一个数据端口和一个命令端口(也可叫做控制端口).通常来说这两个端口是21(命令端口)和20(数据端口).但FTP工作方式的不同 ...

  5. Django项目:CRM(客户关系管理系统)--35--27PerfectCRM实现King_admin编辑复选框

    #admin.py # ————————01PerfectCRM基本配置ADMIN———————— from django.contrib import admin # Register your m ...

  6. Javascript实现多行字符串

    打开百度首页,进入控制台的时候,我们在console控制台总可以看到一段文字: 这些文字是如何显示在控制台的呢?? Javascript中的函数被看作是一个对象拥有自己的方法,其中一个小方法fn.to ...

  7. 常用长度单位PX/EM/PT/百分比转换公式与对照表

    PX.PT.EM.ex和in等都是我们常用的长度单位,尤其在网页的字体大小中经常用到.但是你知道PX.PT和EM之间是如何进行准换的吗?这里icech为大家找到了一个px.pt.em和percent大 ...

  8. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...

  9. ZOJ3195 Design the city [2017年6月计划 树上问题04]

    Design the city Time Limit: 1 Second      Memory Limit: 32768 KB Cerror is the mayor of city HangZho ...

  10. sublime3安装javascript控制台环境 方法1

    Sublime Text 3    http://www.sublimetext.com/3 node.js        http://nodejs.cn/download 1.安装完成后. 2.打 ...