最著名的有关用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. 关于windows的service编程

    最近需要学习下windows的service编程框架,查了下msdn发现不知所云.于是谷歌之,发现了一个非常不错的文章,重点推荐讲的非常详细,深入,看完之后基本上就能很清楚windows的servic ...

  2. 转:php park、unpark、ord 函数使用方法（二进制流接口应用实例）

    在工作中,我也逐渐了解到park,unpark,ord对于二进制字节处理的强大. 下面我逐一介绍它们.     park,unpark,ord这3个函数,在我们工作中,用到它们的估计不多. 我在最近一 ...

  3. （转）Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条（三十一）

      异步任务相信大家应该不会陌生,那么本章内容MOMO将带领大家学习Unity中的一些异步任务.在同步加载游戏场景的时候通常会使用方法 Application.LoadLevel(“yourScene ...

  4. Redis内存数据库在Exchange会议室的应用

    本文论述了现有Exchange会议室应用现状和不足之处,并详细介绍了Redis内存数据库在Exchange会议室的应用,并给出了一种高性能的应用架构及采用关键技术和关键实现过程,最终实现大幅改进系统性 ...

  5. Oracle---.oracle函数

    数值型函数: 绝对值: ABS(x) [功能]返回x的绝对值 [参数]x,数字型表达式 [返回]数字 [示例] select abs(100),abs(-100) from dual;-------- ...

  6. SNF开发平台WinForm之十-Excel导入-SNF快速开发平台3.3-Spring.Net.Framework

    7.1运行效果: 2.Excel导入开发实现 2.1. 创建窗体,修改命名空间 新增的窗体命名“FrmImport表名”,这个导入窗口比较其它窗口会特殊一些,需要继承BaseFormImport父级窗 ...

  7. 论文第5章：Android绘图平台的实现

    面向移动设备的矢量绘图平台设计与实现 Design and Implementation of Mobile Device-oriented Vector Drawing Platform 引用本论文 ...

  8. AppStore下载慢的真实原因

    今天有个朋友说他的app下载很慢,他说下载其他的不会,就他的会很慢很卡.我心想这东西苹果的我也没办法了呀,不过我心里也想我平时下载挺快的呀.于是就开始试试.搜索了几个app下载发现确实是有快有慢,并且 ...

  9. mockito

    import org.junit.Assert;import org.junit.Before;import org.junit.Test;import org.junit.runner.RunWit ...

  10. Spring Remoting: Remote Method Invocation (RMI)--转

    原文地址:http://www.studytrails.com/frameworks/spring/spring-remoting-rmi.jsp Concept Overview Spring pr ...