最著名的有关用js操作dom的观点是：js和dom是独立的小岛，用桥实现两者的联系，但桥很窄，要过路费，所以我们要尽最大可能减少过桥的次数。下面代码演示了用js操作dom的innerHTML，且一下修改5000次：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>testcss</title>

<style>

</style>

<script type="text/javascript">

window.onload=function(){

  var odiv=document.getElementById('d1');

  var str='';

 console.time('hello');//用于后台计时

  for(var i=0;i<5000;i++)

  {

    odiv.innerHTML+='a';   //不停的延长innerHTML，5000次

  }

  console.timeEnd('hello');//用于后台计时

}

</script>

</head>

<body>

  <div id='d1'>dddd</div>

</body>

</html>

以上代码运行起来是十分消耗性能的，虽然各浏览器处理时间不一样，但很明显，都很吃力。以下是谷歌和火狐浏览器的处理时间：

谷歌：

火狐：

很明显火狐在处理这种操作方面明显优于谷歌。

上述代码用了最笨的方式，‘过桥’的次数也达到5000次，可以说是最笨的方式了。那倒不如，先把这5000次的处理都放在js这座岛上，5000次处理完后直接把结果一次性交给dom，也就只过桥一次：

var str=''; 
 console.time('hello');

  for(var i=0;i<5000;i++)

  {

   str+='a';    //5000次后得到结果str（5000个a）

  }

  odiv.innerHTML+='a';  //一次性交给dom，只过桥一次

  console.timeEnd('hello');

以上是改进代码，极大极大的节省了性能：

谷歌：

火狐：

这样改进后提升的性能不是简简单单的几倍，而是上千倍。当然了一下处理5000次在工作中几乎碰不到，但这种方法值得留意。

还有一些提高性能的技巧：

在选择dom节点时尽可能使用querySelector()  ，querySelectorAll()  （IE8以下不支持）

还有在插入节点时应先设置好innerHTML再最后一步用appendChild()插入，能提高性能，（上篇代码的注释中提到），如果在节点已经插入后再设置其innerHTML又会多了一步浏览器的重排和重绘。关于重绘和重排请看我的这篇文章 和 另一篇文章 。

利用cssText：在改变dom的css样式时，如果要改变多个css属性，尽量少用  节点.style.XX='XXX';而是用  节点.style.cssText='width:200px; height:200px; background:red;' 这种方式。

缓存布局信息：把浏览器每次都要获取的信息保存为一变量，用 这个变量进行累加，那么浏览器就不用每次都获取。

少用字符串拼接，因为字符串拼接的原理要比你想象中的“费劲”，例如：var str='tom';  str=str+'cat';  最终结果str=“tomcat”。看似轻松，但对浏览器来说其处理字符串拼接过程是先创建一个长度为6的字符串（tomcat的长度为6），然后先往里填充tom，再往里填充cat，最后一步把之前的str=‘tom’ 销毁掉。这样就生成了新的字符串，而不是想象中的只是在str=‘tom’后面直接追加cat那么简单。虽然新版本浏览器性能够强悍，但作为前端我们接触最多的就是浏览器，所以我们要爱她，呵护她。（注意是“她”哦）

大量创建元素节点时使用createDocumentFragment();

等，关于性能提高笔记上还有很多很多这里推荐雅虎性能优化军规，不再一一叙述。

关于DOM操作的性能优化的更多相关文章

  1. DOM操作的性能优化

    DOM操作的真正问题在于 每次操作都会出发布局的改变.DOM树的修改和渲染. React解决了大面积的DOM操作的性能问题,实现了一个虚拟DOM,即virtual DOM,这个我们一条条讲. 所以关于 ...

  2. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  3. DOM操作的性能问题

    造成DOM操作性能差的原因:1.DOM操作的实现和ECMAscript的实现是两个独立的部分,之间通过接口来完成相应的DOM操作. 2.实时查询文档得到HTML集合,重复执行查询操作.特别是lengt ...

  4. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  5. 学习 CLR 源码：连续内存块数据操作的性能优化

    目录 C# 原语类型 1,利用 Buffer 优化数组性能 2,BinaryPrimitives 细粒度操作字节数组 提高代码安全性 3,BitConverter.MemoryMarshal 4,Ma ...

  6. Attribute操作的性能优化方式

    Attribute是.NET平台上提供的一种元编程能力,可以通过标记的方式来修饰各种成员.无论是组件设计,语言之间互通,还是最普通的框架使 用,现在已经都离不开Attribute了.迫于Attribu ...

  7. 【redis常用的键值操作及性能优化】

    服务端 启动redis服务 { // -a:指定密码 -h:指定主机 -p:指定端口 } //让redis 服务中断崩溃 //保存和关闭 //后台备份 //设置登录密码 //redis-benchma ...

  8. 前端页面卡顿？或是DOM操作惹的祸，需优化代码

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

  9. DOM操作优化

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

随机推荐

  1. Reveal-Plugin-for-Xcode 自动结合 Reveal 进行 UI 分析

    下载地址:https://github.com/shjborage/Reveal-Plugin-for-Xcode 还记得之前我们如何使用 Reveal UI 分析工具进行实时查看 UI 的结构吗?如 ...

  2. cordova 学习笔记

    0.sdk安装 http://spring.io/guides/gs/android/ 1.安装(node.js 需要安装https://nodejs.org/) on OS X and Linux: ...

  3. (转)使用Custom Draw实现ListCtrl的重绘

    使用Custom Draw实现ListCtrl的重绘   common control 4.7版本介绍了一个新的特性叫做Custom Draw,这个名字显得模糊不清,让人有点摸不着头脑,而且MSDN里 ...

  4. asp.net 客户端上传文件全路径获取方法

    asp.net  获取客户端上传文件全路径方法: eg:F:\test\1.doc 基于浏览器安全问题,浏览器将屏蔽获取客户端文件全路径的方法,只能获取到文件的文件名,如果需要获取全路径则需要另想其他 ...

  5. Access导出csv 内容添加双引号 vba

    要求:导出的csv文件,用文本工具打开时,文字内容需要有双引号,如下:"1","name1","name2","" 我之 ...

  6. MyBatis 元素类型为 "configuration" 的内容必须匹配 ".....

    修改MyBatis配置文件时,添加typeAliases节点,报了一个BuilderException: org.apache.ibatis.exceptions.PersistenceExcepti ...

  7. 【Head-First设计模式】C#版-学习笔记-开篇及文章目录

    原文地址:[Head-First设计模式]C#版-学习笔记-开篇及文章目录 最近一年断断续续的在看技术书,但是回想看的内容,就忘了书上讲的是什么东西了,为了记住那些看过的东西,最好的办法就是敲代码验证 ...

  8. android小技巧和注意事项

    在listView 或者 gridView 的使用中,通常不仅仅为了展现数据,更多的是操作数据.于是当控件重合在一起时,我们需要添加事件.就会出现一个问题,当点击一个控件和长按这个控件时,常常出现长按 ...

  9. 让服务器apache/iis/nginx支持.apk/ipa文件下载

    服务器iis支持.apk文件下载的设置 IIS服务器不能下载.apk文件的原因:iis的默认MIME类型中没有.apk文件,所以无法下载. IIS服务器不能下载.apk文件的解决办法:既然.apk无法 ...

  10. [python实用代码片段]python获取当前时间的前一天，前一周，前一个月

    python获取当前时间的前一天,前一周,前一个月. 实用python的datetime.timedelta方法,避免了有的月份是30和31等不同的情况. 获取前一个月的时间,方法实现:首先datet ...