JS性能DOM优化

什么是DOM?

  •  用于操作XML和HTML文档的应用程序
  1. Dom节点  2. Dom树   3.Dom API

DOM优化

  • 浏览器会把js和dom独立实现,js每次操作dom,都会增加一次耗时,为了提高dom性能,就要尽可能减少js对dom的操作,

以下是两个测试

 1   <script>
 2         window.onload=function(){
 3             var div=document.getElementById(‘div‘);
 4             var str=‘‘;
 5             console.time(‘test1‘);
 6             for(var i=0;i<5000;i++){
 7                 div.innerHTML+=‘a‘;
 8             }
 9             console.timeEnd(‘test1‘);//FireFox下 测试时间152ms
10
11             console.time(‘test2‘);
12             for(i=0;i<5000;i++){
13                 str+=‘a‘;
14             }
15             div.innerHTML=str;
16             console.timeEnd(‘test2‘);//FireFox下 测试时间1.36ms
17         };
18     </script>
19 </head>
20 <body>
21 <div id="div"></div>
22 </body>

可以明显看出,test2只操作了一次dom,性能提高了很多

  • 减少DOM操作的方法:
  1. 使用节点克隆 node.cloneNode()代替创建新的重复节点
  2. 使用局部变量代替访问节点集合,例如

    var doc=document;
       var div=doc.getElementById(‘div‘);
       var input=doc.getElementById(‘input‘);
  3. 尽量用只获取元素节点的获取方式,例如 使用children代替childNodes    firstElementChild代替firstChild
  4. 选择器API: 使用querySelectorAll(除IE8以下的浏览器都得到良好支持)

DOM与浏览器

  • 重排:改变页面内容的过程
  • 重绘:重排结束之后,浏览器显示内容的过程

可以通过以下的方式减少重排和重绘的过程,从而提升浏览器性能

  1. 尽量在appendChild()前面进行操作

     1 for(var i=0;i<50000;i++){
     2     var li=document.createElement(‘li‘);
     3     //不推荐
     4     ul.appendChild(li);
     5     li.innerHTML=‘li‘;
     6  }
     7 for(i=0;i<5000;i++){
     8      var li=document.createElement(‘li‘);
     9      //推荐
    10      li.innerHTML=‘li‘;
    11      ul.appendChild(li);
    12}
  2. 使用cssText合并dom操作
  3. 缓存布局信息. 例如:

     1 window.onload = function(){
     2     var oDiv = document.getElementById(‘div1‘);
     3     var L = oDiv.offsetLeft;
     4     var T = oDiv.offsetTop;
     5     setInterval(function(){
     6         L++;
     7         T++;
     8         oDiv.style.left = L + ‘px‘;
     9         oDiv.style.top = T + ‘px‘;
    10     },30);
    11 };
  4. 利用文档碎片

    1 window.onload = function(){
    2     var oUl = document.getElementById(‘ul1‘);
    3     var oFrag = document.createDocumentFragment();
    4     for(var i=0;i<5000;i++){
    5         var oLi = document.createElement(‘li‘);
    6         oFrag.appendChild(oLi);
    7     }
    8     oUl.appendChild(oFrag);
    9 }; 

 DOM与事件

  • 通过事件代理(事件委托)来提升浏览器性能

     1  console.time(‘test1‘);
     2       for(i=0;i<oLi.length;i++){
     3            oLi[i].onclick=function(){
     4                   alert(1);
     5                };
     6         }
     7 console.timeEnd(‘test1‘);//火狐下测试 18ms
     8 //下面是事件代理绑定事件
     9 console.time(‘test2‘);
    10        oUl.onclick=function(e){
    11              e=e || event;
    12              var t=e.target || e.srcElement;
    13              if(t.nodeName.toLowerCase()==‘li‘){
    14                  t.onclick=function(){
    15                      alert(1);
    16                 };
    17             }
    18         };
    19  console.timeEnd(‘test2‘);//火狐下测试 1.54ms

DOM与前端模板

  • 更好的对逻辑和视图进行分离,MVC框架的基础
时间: 2024-10-25 01:02:31

JS性能DOM优化的相关文章

JS性能--DOM编程之重排与重绘

浏览器下载完页面中的所有组件----HTML标记,Js,CSS,图片等之后会解析并生成两个内部数据结构: DOM树  -------- 表示页面结构 渲染树   -------- 表示DOM节点如何显示 DOM树中的每一个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点). 渲染树中的节点被称为“帧“或者”盒“,符合CSS模型的定义,理解页面元素为一个具体填充(padding),边距(marging),边框(borders)和位置(position)的盒子

JS性能优化笔记搜索整理

通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x=x+1;在不影响功能的情况下可以简写为x++; 二. 变量名方法名尽量在不影响语意的情况下简单.(可以选择首字母命名) eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength. 三. 关于JS的循环,循环是一种常用的流程控制. JS提供了三种循环:for(;;).while

js 性能优化 篇一

JS性能优化 摘自:http://www.china125.com/design/js/3631.htm 首先,由于JS是一种解释型语言,执行速度要比编译型语言慢得多.(注:,Chrome是第一款内置优化引擎,将JS编译成本地代码的浏览器,其它浏览器也陆续实现了JS的编译过程.但是,即使到了编译执行JS的新阶段,仍然会存在低效率的代码.)以下总结一些可以改进代码的整体性能的方法. 1.注意作用域 记住一点,随着作用域中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加.所以,访问全局变量

我所经历的JS性能优化

转自http://www.cnblogs.com/koking/archive/2011/10/17/2215665.html 折腾了好几天,纠结了好几天,郁闷了好几天,终于在今天可以释怀了,留下其中的苦乐辛酸来和大家分享. 事情是这样子的,上周接到一个需求,其中涉及到一个好友选择的组件,就是单机左侧某个群组下的好友后该好友移动到右侧,视为选择了它,另外每个群组还有全选,折叠和展开等功能.组件在开发过程中,遇到了在2000条数据的时候,搜索会变的很卡,IE8下为2s左右,IE6更长,我在最初的优

js性能优化-事件委托(2)

<!DOCTYPE HTML><html><head> <meta charset="utf-8" /> <title>js性能优化</title> <script type="text/javascript" src="script/jquery.js"></script></head><body><ul id='lis

js性能优化文章集锦

总结的js性能优化方面的小知识http://www.it165.net/pro/html/201503/35336.html 如何优化你的JS代码http://www.php100.com/html/webkaifa/javascript/2012/0619/10568.html 我所经历的JS性能优化http://www.cnblogs.com/koking/archive/2011/10/17/2215665.html DOM性能瓶颈与Javascript性能优化http://www.cnb

stb前端开发js性能优化总结

js性能优化 javascript是一种解释型语言,性能无法达到和C.C++等编译语言的水平,但还是有一些方法来改进. 1.循环 JavaScript中的循环方式有for(;;).while().for(in)3种.其中for(in)的效率极差,因为for(in)执行过程中需要查询散列键.for(;;)和while()比较,while循环的效率要优于for(;;). 2.局部变量和全局变量 局部变量的访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的堆栈当中的. 3.不使用e

网页渲染优化和JS性能提升

自学前端有一段时间了,在网上学习总结了点网页的渲染性能和JS性能提升的方法,有利于写出更加优秀的代码 1. 不要使用GIF图片实现loading效果,这样会降低CPU消耗: 2. 禁止使用iframe,会阻塞父文档onload事件:搜索引擎的检索程序无法解读这种页面,不利于SEO: 3. 使用CSS3代码替代JS动画,尽可能避免重绘重排以及回流: 4. 对于一些小图标,可以使用base64位编码,以减少网络请求: 5. 网页Gzip,CDN托管,data缓存 ,图片服务器: 6. 前端模板 JS

JS性能优化

下面是一些关于客户端JS性能的一些优化的小技巧: 1.[顶]关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推 荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2.如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中