最著名的有关用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. c++ 状态模式（state）

    /************************************************************************/ /* 状态模式 */ /************* ...

  2. 初探 Ext JS 6 (sencha touch/ext升级版)

    Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...

  3. ASP.NET 如何发现问题的方法

    1.打开IntelliTrace,查看遇到的问题: 2.打开IE8以上,按F12,启动js调试,查看遇到的错误:

  4. POJ 1330 Nearest Common Ancestors

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14698   Accept ...

  5. #ifdef 和 #if defined 的区别 -- 转

    #ifdef 和 #if defined 的区别在于,后者可以组成复杂的预编译条件,比如 #if defined (AAA) && defined (BBB) xxxxxxxxx #e ...

  6. JAVA多线程编程之生产者消费者模式

    Java中有一个BlockingQueue可以用来充当堵塞队列,下面是一个桌面搜索的设计 package net.jcip.examples; import java.io.File; import ...

  7. 让我们一起Go（十二）

    前言: 上篇中,我们讲到了在Go语言中如何定义方法,今天,我们将进一步深入Go语言的面向对象编程. 一.Go语言中的接口 首先来看一个最基本的接口: 和定义一个结构体类似,只不过将struct换成了i ...

  8. window.location 对象所包含的属性

    window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostname 当前 URL 的主机名 hre ...

  9. mysql安装出现error Nr.1045 (转)

    http://www.cnblogs.com/Ivan-j2ee/archive/2012/09/22/2698278.html 我们在windows下安装mysql时会出现Access denied ...

  10. apache 500错误

    一直以为开了error_log,没想没有加,于是折腾了好久. 开启error_log后,发现是xdebug的max_nesting_level值太小了. 还一个原因是.htaccess文件中的 < ...