提高网页性能

时间  2019-11-11
标签 提高 网页 性能 栏目 HTML 繁體版
原文   原文链接

以前作pc端的时候基本不是特别会特别去关注页面尤为是js的性能，即便作也是主要针对图片，最近作手机端的一个座位图页，大概有1000个左右做为，要根据触摸滑动来实时改变位置，大小，颜色，等等。在谷歌浏览器那叫一个流畅~当在安卓机上实验时，简直卡爆了，因而。。优化，花了将近1个星期时间，主要是针对js的优化，由于数据是ajax实时取来生成的。原本打算就此次优化作一次简单的总结，无心中看到一篇好文章，把我用到的没用到的基本都总结了，因而特此分享出来。css

固然其实关于js有几点特别须要注意的是，若是是touch移动，尽可能改变元素的transform而非top，left，具体实际写个小demo就清楚了，差的时间不是一星半点。还有要尽可能合并相同的功能的语句，在以前的页面中，为了简洁明了，我列了以下的js语句；html

$(obj).data("ab","ab");css3

......web

$(obj).data("cd","cd");     ajax

而后修改后变成了相似这样   $(obj).(attr,{"abc":"abc",....."cd":'cd'});正则表达式

在两段代码先后分别console了时间，（尽可能少用alert），不可思议，时间差异将近200ms。数组

尽可能少用全局变量.浏览器

若是在手机端，能够用css3实现的动画，尽可能不要用js，那样会更流畅，具体用安卓测试会很明显。缓存

尽可能减小dom操做，若是必定须要dom操做，尽可能合并，尤为是修改css的时候，尽可能经过css类的添加来实现，效能会高不少。app

避免屡次重复引用。

好了，仍是上正菜吧。。    

HTML部分

  1. 语义化HTML：好处在于可使代码简洁清晰，支持不一样设备，利于搜索引擎，便于团队开发；
  2. 减小DOM节点：加速页面渲染；
  3. 给图片加上正确的宽高值：这能够减小页面重绘，同时防止图片缩放；
  4. 防止src属性和link的href属性为空：当值为空时，浏览器极可能会把当前页面当成其属性值加载；
  5. 正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；
  6. 连接为目录或首页的地址后面加”/”，如http://www.5icool.org/；
  7. 用LINK而不用@import方式导入样式；
  8. 样式放在页头，JS放在页尾；
  9. 缩小favicon.ico并缓存；

CSS部分

  1. 避免使用 CSS Expressions(CSS表达式)：如
  2. 避免使用 CSS Filter（CSS滤镜）；
  3. 使用CSS缩写，减小代码量；
  4. 经过CSSSprites把同类图片合成一张，减小图片请求；
  5. 减小查询层级：如.header .logo要好过.header .top .logo；
  6. 减小查询范围：如.header>li要好过.header li；
  7. 避免TAG标签与CLASS或ID并存：如a.top、button#submit；
  8. 删除重复的CSS；

JavaScript 性能调优

JavaScript 语言因为它的单线程和解释执行的两个特色，决定了它自己有不少地方有性能问题，因此可改进的地方有很多。

eval 的问题：

比较下述代码：

清单 1. eval 的问题
 var reference = {}, props = “p1”; 
 eval(“reference.” + props + “=5”) 

 var reference = {}, props = “p1”; 
 reference[props] = 5

有“eval”的代码比没有“eval”的代码要慢上 100 倍以上。

主要缘由是：JavaScript 代码在执行前会进行相似“预编译”的操做：首先会建立一个当前执行环境下的活动对象，并将那些用 var 申明的变量设置为活动对象的属性，可是此时这些变量的赋值都是 undefined，并将那些以 function 定义的函数也添加为活动对象的属性，并且它们的值正是函数的定义。可是，若是你使用了“eval”，则“eval”中的代码（实际上为字符串）没法预先识别其上下文，没法被提早解析和优化，即没法进行预编译的操做。因此，其性能也会大幅度下降。

Function 的用法：

比较下述代码：

清单 2. function 的用法
 var func1 = new Function(“return arguments[0] + arguments[1]”);
 func1(10, 20); 

 var func2 = function(){ return arguments[0] + arguments[1] };
 func2(10, 20);

这里相似以前提到的“eval”方法，这里“func1”的效率会比“func2”的效率差不少，因此推荐使用第二种方式。

函数的做用域链（scope chain）：

JavaScript 代码解释执行，在进入函数内部时，它会预先分析当前的变量，并将这些变量纳入不一样的层级（level），通常状况下：

局部变量放入层级 1（浅），全局变量放入层级 2（深）。若是进入“with”或“try – catch”代码块，则会增长新的层级，即将“with”或“catch”里的变量放入最浅层（层 1），并将以前的层级依次加深。

参考以下代码：

清单 3. 函数做用域链
 var myObj = … .. 
… .. 
 function process(){ 
 var images = document.getElementsByTagName("img"), 
 widget = document.getElementsByTagName("input"), 
 combination = []; 
 for(var i = 0; i < images.length; i++){ 
 combination.push(combine(images[i], widget[2*i])); 
 } 
 myObj.container.property1 = combination[0]; 
 myObj.container.property2 = combination[combination.length-1]; 
 }

这里咱们能够看到，“images”，“widget”，“combination”属于局部变量，在层 1。“document”，“myObj”属于全局变量，在层 2。

变量所在的层越浅，访问（读取或修改）速度越快，层越深，访问速度越慢。因此这里对“images”，“widget”，“combination”的访问速度比“document”，“myObj”要快一些。因此推荐尽可能使用局部变量，可见以下代码：

清单 4. 使用局部变量
 var myObj = … .. 
… .. 
 function process(){ 
 var doc = document;
 var images = doc.getElementsByTagName("img"), 
 widget = doc.getElementsByTagName("input"), 
 combination = []; 
 for(var i = 0; i < images.length; i++){ 
 combination.push(combine(images[i], widget[2*i])); 
 } 
 myObj.container.property1 = combination[0]; 
 myObj.container.property2 = combination[combination.length-1]; 
 }

咱们用局部变量“doc”取代全局变量“document”，这样能够改进性能，尤为是对于大量使用全局变量的函数里面。

再看以下代码：

清单 5. 慎用 with
 var myObj = … .. 
… .. 
 function process(){ 
 var doc = document; 
    var images = doc.getElementsByTagName("img"), 
 widget = doc.getElementsByTagName("input"), 
 combination = []; 
 for(var i = 0; i < images.length; i++){ 
 combination.push(combine(images[i], widget[2*i])); 
 } 
 with (myObj.container) {
 property1 = combination[0];
 property2 = combination[combination.length-1];
				 }
 }

加上“with”关键字，咱们让代码更加简洁清晰了，可是这样作性能会受影响。正如以前说的，当咱们进入“with”代码块时，“combination”便从原来的层 1 变到了层 2，这样，效率会大打折扣。因此比较一下，仍是使用原来的代码：

清单 6. 改进 with
 var myObj = … .. 
… .. 
 function process(){ 
 var doc = document; 
 var images = doc.getElementsByTagName("img"), 
 widget = doc.getElementsByTagName("input"), 
 combination = []; 
 for(var i = 0; i < images.length; i++){ 
 combination.push(combine(images[i], widget[2*i])); 
 } 
 myObj.container.property1 = combination[0];
 myObj.container.property2 = combination[combination.length-1];
      }

可是这样并非最好的方式，JavaScript 有个特色，对于 object 对象来讲，其属性访问层级越深，效率越低，好比这里的“myObj”已经访问到了第 3 层，咱们能够这样改进一下：

清单 7. 缩小对象访问层级
 var myObj = … .. 
… .. 
 function process(){ 
 var doc = document; 
    var images = doc.getElementsByTagName("img"), 
 widget = doc.getElementsByTagName("input"), 
 combination = []; 
 for(var i = 0; i < images.length; i++){ 
 combination.push(combine(images[i], widget[2*i])); 
 } 
 var ctn = myObj.container;
 ctn.property1 = combination[0];
 ctn.property2 = combination[combination.length-1];
      }

咱们用局部变量来代替“myObj”的第 2 层的“container”对象。若是有大量的这种对对象深层属性的访问，能够参照以上方式提升性能。

字符串（String）相关

字符串拼接

常常看到这样的代码：

清单 8. 字符串简单拼接
 str += “str1” + “str2”

这是咱们拼接字符串经常使用的方式，可是这种方式会有一些临时变量的建立和销毁，影响性能，因此推荐使用以下方式拼接：

清单 9. 字符串数组方式拼接
 var str_array = []; 
 str_array.push(“str1”); 
 str_array.push(“str2”); 
 str = str_array.join(“”);

这里咱们利用数组（array）的“join”方法实现字符串的拼接，尤为是程序的老版本的 Internet Explore（IE6）上运行时，会有很是明显的性能上的改进。

固然，最新的浏览器（如火狐 Firefox3+，IE8+ 等等）对字符串的拼接作了优化，咱们也能够这样写：

清单 10. 字符串快速拼接
 str +=“str1”
 str +=“str2”

新的浏览器对“+=”作了优化，性能略快于数组的“join”方法。在不久的未来更新版本浏览器可能对“+”也会作优化，因此那时咱们能够直接写：str += “str1” + “str2”。

隐式类型转换

参考以下代码：

清单 11. 隐式类型转换
 var str = “12345678”, arr = []; 
 for(var i = 0; i <= s.length; i++){ 
 arr.push( str.charAt(i)); 
 }

这里咱们在每一个循环时都会调用字符串的“charAt”方法，可是因为咱们是将常量“12345678”赋值给“str”，因此“str”这里事实上并非一个字符串对象，当它每次调用“charAt”函数时，都会临时构造值为“12345678”的字符串对象，而后调用“charAt”方法，最后再释放这个字符串临时对象。咱们能够作一些改进：

清单 12. 避免隐式类型转换
 var str = new Stirng(“12345678”), arr = []; 
 for(var i = 0; i <= s.length; i++){ 
 arr.push( str.charAt(i)); 
 }

这样一来，变量“str”做为一个字符串对象，就不会有这种隐式类型转换的过程了，这样一来，效率会显著提升。

字符串匹配

JavaScript 有 RegExp 对象，支持对字符串的正则表达式匹配。是一个很好的工具，可是它的性能并非很是理想。相反，字符串对象（String）自己的一些基本方法的效率是很是高的，好比“substring”，“indexOf”，“charAt”等等，在咱们须要用正则表达式匹配字符串时，能够考虑一下：

  1. 是否可以经过字符串对象自己支持的基本方法解决问题。
  2. 是否能够经过“substring”来缩小须要用正则表达式的范围。

这些方式都可以有效的提升程序的效率。

关于正则表达式对象，还有一点须要注意，参考以下代码：

清单 13. 正则表达式
 for(var i = 0; i <= str_array.length; i++){ 
 if(str_array[i].match(/^s*extra\s/)){ 
……………………
 } 
 }

这里，咱们往“match”方法传入“/^s*extra\s/”是会影响效率的，它会构建临时值为“/^s*extra\s/”的正则表达式对象，执行“match”方法，而后销毁临时的正则表达式对象。咱们能够这样作：

清单 14. 利用变量
 var sExpr = /^s*extra\s/;
 for(var i = 0; i <= str_array.length; i++){ 
 if(str_array[i].match(sExpr)){ 
……………………
 } 
 }

这样就不会有临时对象了。

setTimeout 和 setInterval

“setTimeout”和“setInterval”这两个函数能够接受字符串变量，可是会带来和以前谈到的“eval”相似的性能问题，因此建议仍是直接传入函数对象自己。

利用提早退出

参考以下两段代码：

清单 15. 利用提早退出
  // 代码 1
 var name = … .; 
 var source = …… ; 
 if(source.match(/ …… /)){ 
……………………………
 } 


 // 代码 2
 var name = … .; 
 var source = …… ; 
 if(name.indexOf( … ) &&source.match(/ …… /)){ 
……………………………
 }

代码 2 多了一个对“name.indexOf( … )”的判断，这使得程序每次走到这一段时会先执行“indexOf”的判断，再执行后面的“match”，在“indexOf”比“match”效率高不少的前提下，这样作会减小“match”的执行次数，从而必定程度的提升效率。

 

 

DOM 操做性能调优

JavaScript 的开发离不开 DOM 的操做，因此对 DOM 操做的性能调优在 Web 开发中也是很是重要的。

Repaint 和 Reflow

Repaint 也叫 Redraw，它指的是一种不会影响当前 DOM 的结构和布局的一种重绘动做。以下动做会产生 Repaint 动做：

  1. 不可见到可见（visibility 样式属性）
  2. 颜色或图片变化（background, border-color, color 样式属性）
  3. 不改变页面元素大小，形状和位置，但改变其外观的变化

Reflow 比起 Repaint 来说就是一种更加显著的变化了。它主要发生在 DOM 树被操做的时候，任何改变 DOM 的结构和布局都会产生 Reflow。但一个元素的 Reflow 操做发生时，它的全部父元素和子元素都会放生 Reflow，最后 Reflow 必然会致使 Repaint 的产生。举例说明，以下动做会产生 Repaint 动做：

  1. 浏览器窗口的变化
  2. DOM 节点的添加删除操做
  3. 一些改变页面元素大小，形状和位置的操做的触发

减小 Reflow

经过 Reflow 和 Repaint 的介绍可知，每次 Reflow 比其 Repaint 会带来更多的资源消耗，咱们应该尽可能减小 Reflow 的发生，或者将其转化为只会触发 Repaint 操做的代码。

参考以下代码：

清单 16. reflow 介绍
 var pDiv = document.createElement(“div”); 
 document.body.appendChild(pDiv);----- reflow
 var cDiv1 = document.createElement(“div”); 
 var cDiv2 = document.createElement(“div”); 
 pDiv.appendChild(cDiv1);----- reflow
 pDiv.appendChild(cDiv2);----- reflow

这是咱们常常接触的代码了，可是这段代码会产生 3 次 reflow。再看以下代码：

清单 17. 减小 reflow
 var pDiv = document.createElement(“div”); 
 var cDiv1 = document.createElement(“div”); 
 var cDiv2 = document.createElement(“div”); 
 pDiv.appendChild(cDiv1); 
 pDiv.appendChild(cDiv2); 
 document.body.appendChild(pDiv);----- reflow

这里便只有一次 reflow，因此咱们推荐这种 DOM 节点操做的方式。

关于上述较少 Reflow 操做的解决方案，还有一种能够参考的模式：

清单 18. 利用 display 减小 reflow
 var pDiv = document.getElementById(“parent”); 
 pDiv.style.display = “none”----- reflow

 pDiv.appendChild(cDiv1); 
 pDiv.appendChild(cDiv2); 
 pDiv.appendChild(cDiv3); 
 pDiv.appendChild(cDiv4); 
 pDiv.appendChild(cDiv5); 
 pDiv.style.width = “100px”; 
 pDiv.style.height = “100px”; 

 pDiv.style.display = “block”----- reflow

先隐藏 pDiv，再显示，这样，隐藏和显示之间的操做便不会产生任何的 Reflow，提升了效率。

特殊测量属性和方法

DOM 元素里面有一些特殊的测量属性的访问和方法的调用，也会触发 Reflow，比较典型的就是“offsetWidth”属性和“getComputedStyle”方法。

图 1. 特殊测量属性和方法

图 1. 特殊测量属性和方法

这些测量属性和方法大体有这些：

  • offsetLeft
  • offsetTop
  • offsetHeight
  • offsetWidth
  • scrollTop/Left/Width/Height
  • clientTop/Left/Width/Height
  • getComputedStyle()
  • currentStyle(in IE))

这些属性和方法的访问和调用，都会触发 Reflow 的产生，咱们应该尽可能减小对这些属性和方法的访问和调用，参考以下代码：

清单 19. 特殊测量属性
 var pe = document.getElementById(“pos_element”); 
 var result = document.getElementById(“result_element”); 
 var pOffsetWidth = pe.offsetWidth;
 result.children[0].style.width  = pOffsetWidth; 
 result.children[1].style.width  = pOffsetWidth; 
 result.children[2].style.width  = pOffsetWidth; 
…………其余修改…………

这里咱们能够用临时变量将“offsetWidth”的值缓存起来，这样就不用每次访问“offsetWidth”属性。这种方式在循环里面很是适用，能够极大地提升性能。

样式相关

咱们确定常常见到以下的代码：

清单 20. 样式相关
 var sElement = document.getElementById(“pos_element”); 
 sElement.style.border = ‘ 1px solid red ’
 sElement.style.backgroundColor = ‘ silver ’
 sElement.style.padding = ‘ 2px 3px ’
 sElement.style.marginLeft = ‘ 5px ’

可是能够看到，这里的每个样式的改变，都会产生 Reflow。须要减小这种状况的发生，咱们能够这样作：

解决方案 1：

清单 21. className 解决方案
 .class1 { 
 border: ‘ 1px solid red ’
 background-color: ‘ silver ’
 padding: ‘ 2px 3px ’
 margin-left: ‘ 5px ’
 } 
 document.getElementById(“pos_element”).className = ‘class1’ ;

用 class 替代 style，能够将原有的全部 Reflow 或 Repaint 的次数都缩减到一个。

解决方案 2：

清单 22. cssText 解决方案
 var sElement = document.getElementById(“pos_element”); 
 var newStyle = ‘ border: 1px solid red; ’ + ‘ background-color: silver; ’ + 
                                 ‘ padding: 2px 3px; ’ + “margin-left: 5px;”
 sElement.style.cssText += newStyle;

一次性设置全部样式，也是减小 Reflow 提升性能的方法。

XPath

一个页面上每每包含 1000 多页面元素，在定位具体元素的时候，每每须要必定的时间。若是用 id 或 name 定位可能效率不会太慢，若是用元素的一些其余属性（好比 className 等等）定位，可能效率有不理想了。有的可能只能经过遍历全部元素（getElementsByTagName）而后过滤才能找到相应元素，这就更加低效了，这里咱们推荐使用 XPath 查找元素，这是不少浏览器自己支持的功能。

清单 23. XPath 解决方案
 if(document.evaluate){ 
 var tblHeaders = document.evaluate(“//body/div/table//th”);
 var result = tblHeaders.iterateNext(); 
 while(result) { 
 result.style.border = “1px dotted blue”; 
 result ………………
 result = xpathResult.iterateNext(); 
 } 
 } else{ //getElementsByTagName() ……
 // 处理浏览器不支持 XPath 的状况
………………………………
 }

浏览器 XPath 的搜索引擎会优化搜索效率，大大缩短结果返回时间。

HTMLCollection 对象

这是一类特殊的对象，它们有点像数组，但不彻底是数组。下述方法的返回值通常都是 HTMLCollection 对象：

  • document.images, document.forms
  • getElementsByTagName()
  • getElementsByClassName()

这些 HTMLCollection 对象并非一个固定的值，而是一个动态的结果。它们是一些比较特殊的查询的返回值，在以下状况下，它们会从新执行以前的查询而获得新的返回值（查询结果），虽然多数状况下会和前一次或几回的返回值都同样：

  • Length 属性
  • 具体的某个成员

因此，HTMLCollection 对象对这些属性和成员的访问，比起数组来要慢不少。固然也有例外，Opera 和 Safari 对这种状况就处理的很好，不会有太大性能问题。

参考以下代码：

清单 24. HTMLConnection 对象
 var items = [“test1”, “test2”, “test3”, ……………… ];
 for(var i = 0; i < items.length; i++){ 
………………………………
 } 

 var items = document.getElementsByTagName(“div”);
 for(var i = 0; i < items.length; i++){ 
…………………………………… . 
 }

上述两端代码，下面的效率比起上面一段要慢不少，由于每个循环都会有“items.length”的触发，也就会致使“document.getElementsByTagName(..)”方法的再次调用，这即是效率便会大幅度降低的缘由。咱们能够这样解决：

清单 25. HTMLConnection 对象解决方案
 var items = document.getElementsByTagName(“div”); 
 var len = items.length
 for(var i = 0; i < len; i++){ 
…………………………………… . 
 }

这样一来，效率基本与普通数组同样。

动态建立 script 标签

加载并执行一段 JavaScript 脚本是须要必定时间的，在咱们的程序中，有时候有些 JavaScript 脚本被加载后基本没有被使用过 （好比：脚本里的函数历来没有被调用等等）。加载这些脚本只会占用 CPU 时间和增长内存消耗，下降 Web 应用的性能。因此推荐动态的加载 JavaScript 脚本文件，尤为是那些内容较多，消耗资源较大的脚本文件。

清单 26. 建立 script 标签
 if(needXHR){ 
 document.write(“<script type= ’ test\/JavaScript ’ src= 'dojo_xhr.js' >”); 
 } 
 if(dojo.isIE){ 
 document.write(“<script type= ’ test\/JavaScript ’ src= 'vml.js' >”); 
 }
 
参考连接：http://www.5icool.org/a/201306/a1924.html
                 http://www.ibm.com/developerworks/cn/web/1107_zhouxiang_tunejs/
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程