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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>testcss</title>
  6. <style>
  7.  
  8. </style>
  9. <script type="text/javascript">
  10. window.onload=function(){
  11.  
  12. var odiv=document.getElementById('d1');
  13. var str='';
  14.  
  15. console.time('hello');//用于后台计时
  16. for(var i=0;i<5000;i++)
  17. {
  18. odiv.innerHTML+='a'; //不停的延长innerHTML,5000次
  19. }
  20. console.timeEnd('hello');//用于后台计时
  21.  
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <div id='d1'>dddd</div>
  27. </body>
  28. </html>

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

谷歌:

火狐:

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

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

  1. var str=''; 
  1. console.time('hello');
  2. for(var i=0;i<5000;i++)
  3. {
  4. str+='a'; //5000次后得到结果str(5000个a)
  5.  
  6. }
  7. odiv.innerHTML+='a'; //一次性交给dom,只过桥一次
  8. 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. 转战farbox

    好久没更新博客了,感觉在博客园这种技术为主的博客里面写太多东西写得太杂了,平时的阅读体验非常糟糕,我一直都是一个喜欢记录的人,以前经常有在笔记本上写日记的习惯,但是自从用了网上博客之后,好像就再也没有 ...

  2. 通过 Storyboard 快速搭建一系列连贯性的视图控制器

    此例子只是一个简单的 Demo,这里没有过多介绍如何去实现,网上有很多关于 Storyboard 技术的介绍,请自行搜索. 效果如下: iPhone 5s   iPhone 6   iPhone 6 ...

  3. [转]MySQL与MongoDB的操作对比

    MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoDB则是非关系型数据库,也叫文档型数据库,是一种NoSQL的数据库.它们各有各的优点,关键是看用在什么地方 ...

  4. C#简易播放器(基于开源VLC)

    可见光通信技术(Visible Light Communication,VLC)是指利用可见光波段的光作为信息载体,不使用光纤等有线信道的传输介质,而在空气中直接传输光信号的通信方式.LED可见光通信 ...

  5. JAVA & JSON详解

    JSON定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类 ...

  6. C# 事件和委托

    相信大家在面试的时候会经常问到事件和委托的区别,为什么.net中需要事件和委托这样类似的问题吧,对于一些初学者来说可平时用的过程中也不知道为什么, 只知道这样用,而对于其中的实现机制不是很清楚, 所以 ...

  7. ruby -- 基础学习(二) 外键配置实现级联删除

    该系列学习基于rails4.0 数据表:admins (id, name, address), articles (id, admin_id, title) admin_id 是表articles中的 ...

  8. swift实现冒泡排序

    刚刚坐着没事干,就用swift语言写了写冒泡排序,还望高手指点.拍砖!哈哈! 废话不多说,上代码! import Cocoa var array = [,,,,,,,,,,,,,,,,,] print ...

  9. Guzzle – 构建 RESTful Web 服务的 PHP HTTP 框架

    Guzzle 减轻了发送 HTTP 请求和创建 Web 服务客户端的痛苦.它包含建立一个强大的网络服务客户端的工具,包括:服务描述定义的输入和输出的 API,资源迭代器遍历分页资源,尽可能有效地发送大 ...

  10. UWP开发入门(十八)——使用ContentControl减少页面元素数量

    我们今天学习一下ContentControl,主要介绍如何使用ContentControl搭配DataTemplate来进行界面的复用,以及通过ContentTemplateSelector进一步减少 ...