最著名的有关用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. UML2

    UML中有3种构造块:事物.关系和图,事物是对模型中最具有代表性的成分的抽象:关系是把事物结合在一起:图聚集了相关的的事物.具体关系图标如下 说明:构件事物是名词,是模型的静态部分.行为事物是动态部分 ...

  2. 十四、EnterpriseFrameWork框架核心类库之简易ORM

    在写本章前先去网上找了一下关于ORM的相关资料,以为本章做准备,发现很多东西今天才了解,所以在这里也对ORM做不了太深入的分析,但还是浅谈一下EFW框架中的设计的简易ORM:文中有一点讲得很有道理,D ...

  3. mysql 启动错误-server PID file could not be found

    [root@centos var]# service mysqld stop MySQL manager or server PID file could not be found!       [F ...

  4. SNF开发平台WinForm之二-开发-单表表单管理页面-SNF快速开发平台3.3-Spring.Net.Framework

    2.1运行效果: 2.2开发实现: 2.2.1 这个开发与第一个开发操作步骤是一致的,不同之处就是在生成完代码之后,留下如下圈红程序,其它删除. 第一个开发地址:开发-单表表格编辑管理页面 http: ...

  5. SpringMVC Controller 返回值的可选类型

    spring mvc 支持如下的返回方式:ModelAndView, Model, ModelMap, Map,View, String, void. ModelAndView @RequestMap ...

  6. AngularJS的学习--TodoMVC的分析

    最近一段时间一直在看AngularJS,趁着一点时间总结一下. 官网地址:http://angularjs.org/ 先推荐几个教程 1. AngularJS入门教程 比较基础,是官方Tutorial ...

  7. mysql按汉语拼音首字母排序

      如果数据表table的某字段name的字符编码是utf8_general_ci :   SELECT *  FROM `table` ORDER BY convert(name USING gbk ...

  8. Sprint Three 回顾与总结&发表评论&团队贡献分

    ● 一.回顾与总结 (1)回顾 燃尽图: Sprint计划-流程图: milestones完成情况如下: (2)总结 从sprint one到three,我们团队配合十分默契,互相帮助,虽然遇到了不少 ...

  9. sprint5.0

    团队成员完成自己认领的任务. 燃尽图:理解.设计并画出本次Sprint的燃尽图的理想线.参考图6. 每日立会更新任务板上任务完成情况.燃尽图的实际线,分析项目进度是否在正轨.每天的例会结束后的都为任务 ...

  10. 重构第19天 提取工厂类(Extract Factory Class)

    理解:本文中的“提取工厂类”是指如果要创建的对象很多,则代码会变的很复杂.一种很好的方法就是提取工厂类. 详解:一般来说我们需要在代码中设置一些对象,以便获得它们的状态,从而使用对象,所谓的设置通常来 ...