关于DOM操作的性能优化
最著名的有关用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操作的性能优化的更多相关文章
- DOM操作的性能优化
DOM操作的真正问题在于 每次操作都会出发布局的改变.DOM树的修改和渲染. React解决了大面积的DOM操作的性能问题,实现了一个虚拟DOM,即virtual DOM,这个我们一条条讲. 所以关于 ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- DOM操作的性能问题
造成DOM操作性能差的原因:1.DOM操作的实现和ECMAscript的实现是两个独立的部分,之间通过接口来完成相应的DOM操作. 2.实时查询文档得到HTML集合,重复执行查询操作.特别是lengt ...
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 学习 CLR 源码:连续内存块数据操作的性能优化
目录 C# 原语类型 1,利用 Buffer 优化数组性能 2,BinaryPrimitives 细粒度操作字节数组 提高代码安全性 3,BitConverter.MemoryMarshal 4,Ma ...
- Attribute操作的性能优化方式
Attribute是.NET平台上提供的一种元编程能力,可以通过标记的方式来修饰各种成员.无论是组件设计,语言之间互通,还是最普通的框架使 用,现在已经都离不开Attribute了.迫于Attribu ...
- 【redis常用的键值操作及性能优化】
服务端 启动redis服务 { // -a:指定密码 -h:指定主机 -p:指定端口 } //让redis 服务中断崩溃 //保存和关闭 //后台备份 //设置登录密码 //redis-benchma ...
- 前端页面卡顿?或是DOM操作惹的祸,需优化代码
文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...
- DOM操作优化
文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...
随机推荐
- 转战farbox
好久没更新博客了,感觉在博客园这种技术为主的博客里面写太多东西写得太杂了,平时的阅读体验非常糟糕,我一直都是一个喜欢记录的人,以前经常有在笔记本上写日记的习惯,但是自从用了网上博客之后,好像就再也没有 ...
- 通过 Storyboard 快速搭建一系列连贯性的视图控制器
此例子只是一个简单的 Demo,这里没有过多介绍如何去实现,网上有很多关于 Storyboard 技术的介绍,请自行搜索. 效果如下: iPhone 5s iPhone 6 iPhone 6 ...
- [转]MySQL与MongoDB的操作对比
MySQL与MongoDB都是开源的常用数据库,但是MySQL是传统的关系型数据库,MongoDB则是非关系型数据库,也叫文档型数据库,是一种NoSQL的数据库.它们各有各的优点,关键是看用在什么地方 ...
- C#简易播放器(基于开源VLC)
可见光通信技术(Visible Light Communication,VLC)是指利用可见光波段的光作为信息载体,不使用光纤等有线信道的传输介质,而在空气中直接传输光信号的通信方式.LED可见光通信 ...
- JAVA & JSON详解
JSON定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类 ...
- C# 事件和委托
相信大家在面试的时候会经常问到事件和委托的区别,为什么.net中需要事件和委托这样类似的问题吧,对于一些初学者来说可平时用的过程中也不知道为什么, 只知道这样用,而对于其中的实现机制不是很清楚, 所以 ...
- ruby -- 基础学习(二) 外键配置实现级联删除
该系列学习基于rails4.0 数据表:admins (id, name, address), articles (id, admin_id, title) admin_id 是表articles中的 ...
- swift实现冒泡排序
刚刚坐着没事干,就用swift语言写了写冒泡排序,还望高手指点.拍砖!哈哈! 废话不多说,上代码! import Cocoa var array = [,,,,,,,,,,,,,,,,,] print ...
- Guzzle – 构建 RESTful Web 服务的 PHP HTTP 框架
Guzzle 减轻了发送 HTTP 请求和创建 Web 服务客户端的痛苦.它包含建立一个强大的网络服务客户端的工具,包括:服务描述定义的输入和输出的 API,资源迭代器遍历分页资源,尽可能有效地发送大 ...
- UWP开发入门(十八)——使用ContentControl减少页面元素数量
我们今天学习一下ContentControl,主要介绍如何使用ContentControl搭配DataTemplate来进行界面的复用,以及通过ContentTemplateSelector进一步减少 ...