解读30个提高Web程序执行效率的好经验

时间:2023-03-08 16:33:07
解读30个提高Web程序执行效率的好经验

其实微博是个好东西,关注一些技术博主之后,你不用再逛好多论坛了,因为一些很好的文章微博会告诉你,最近看到酷勤网推荐的一篇文章《30个提高Web程序执行效率的好经验》,文章写得不错,提到一些经验都比较实用,是我们每一个做前端开发的人员都必须知道的。本人逐条解读一下,个人意见可能比较浅薄,看看大家对各个经验点怎么看了。

1、尽量避免使用DOM。当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用。创建页面元素的时候尽量不要使用DOM的document.createElement/appendChild()方法来创建,换用设置innerHTML的方法来替换。

jiuye:

过多使用DOM会增加DOM树的规模,进而影响文档遍历以及查找元素的性能。如果使用DOM元素的使用,建议使用如下方法进行:

var obj = document.getElementById("myId");
obj.XXX...;

2、eval()有问题,new Fuction()构造函数也是,尽量避免使用它们。

jiuye:

使用eval()或new Function()构造函数作用于字符串表示的源码时,js引擎都需要将源码转换成可执行代码。这样的操作是很消耗资源的要比简单的函数调用慢100倍以上。

同时,eval()函数效率特别低,由于事先无法知晓传给 eval 的字符串中的内容,eval在其上下文中解释要处理的代码,也就是说编译器无法优化上下文,因此只能有浏览器在运行时解释代码。这对性能影响很大。newFunction()构造函数比eval()略好,因为使用此代码不会影响周围代码,但是他的速度也快不到哪里去。

可以通过重写eval()来替换直接使用eval(),通过创建匿名函数的方法来替换new Function()。

3、拒绝使用with语句。 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with里的代码在编译时期是完全未知的。

jiuye:

with的效率很低,with结构又创建了一个作用域,以便使用变量时脚本引擎搜索。这本身只轻微的影响性能。但严重的是编译时不知道此作用域内容,因此编译器无法像对其他作用域(如函数产生的作用域)那样对之优化。

可以使用变量引用对象,然后使用变量访问对象属性。但是此种方法要求属性非文字类型。

先来看一个with的使用:

with( test.info ) {
name = 'John';
sex = 'male';
}

再看看使用变量引用对象的实例:

var obj = test.infor;
obj.name = 'John';
obj.sex = 'male';

4、使用for()循环替代for…in循环。因为for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的List,需要多检查一次。

jiuye:

for...in循环需要脚本引擎创建所有可枚举的属性列表,然后检查是否存在重复。

5、把try-catch语句放在循环外面,不要放在循环里面,因为异常是很少发生的,放在外面避免每次都要执行它们。

jiuye:

其实不仅仅是循环,因为try-catch-finally结构比较特殊。和其他语法结构不同,它在当前作用域中创建新变量。每当catch执行时,就会将捕获到的exception对象赋给一个变量。这个变量不属于任何脚本。它在catch语句开始时被创建,在结束时被销毁。由于此函数比较特殊,且是在运行时动态创建动态销毁,有些浏览器对其的处理并不高效。把catch语句放在关键循环中将极大影响性能。如果可能,应在js中不频繁被调用的地方进行异常处理,或通过检查某种动作是否被支持来避免使用。

6、不要过多使用全局变量,全局变量的生命周期贯穿整个js的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚本引擎需要搜索整个全局命名空间。

7、fullName += 'John'; fullName += 'Holdings';执行速度快于fullName += 'John' + 'Holdings'。

jiuye:

这个不知道该怎么去解释一下,至少我本人在js编码时不会写出这样的语句:fullName += 'John' + 'Holdings'。

8、如果你需要把多个字符串连接起来,最好是把他们做成一个数组,然后调用join()方法实现这个操作。这种方式在生成HTML片段时尤其有效。

jiuye:

这个主意赞的,以前没注意到!!!

9、对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。例如val1 < val2 ? val1 : val2;执行速度快于Math.min(val1, val2);,类似的,myArr.push(newEle);慢于myArr[myArr.length] = newEle。

jiuye:

总之一句话,能用js简单实现的东东就别用函数了,调用函数处理时性能肯定要比直接处理来的慢一点的。

10、将函数的引用作为参数传递到setTimeout()和setInterval()里优于将函数名作为字符串参数传递(硬编码)。例如,setTimeout(“someFunc()”, 1000)执行效率慢于setTimeout(someFunc, 1000)。

jiuye:

setTimeout()setInterval()方法类似于eval()。如果传进参数是字符串,则在一段时间之后,会和eval()一样执行字符串值,当然其低效率也和eval()一样低。但这些方法也可以接受函数作为第一个参数。在一段时间后将调用此函数,但此函数可在编译时被解释和优化,也就是说会有更好的性能。

使用字符串作为参数:

setInterval('myFunction()',1000);
setTimeout('alert(111);',500);

再来看看下面这个做法是不是更舒服点呢?

setInterval(myFunction,1000);
setTimeout(function() {
alert(111);
},500);

11、当进行遍历操作时避免使用DOM操作。通过像getElementsByTagName()这 种方法得到的DOM元素队列都是动态的;有可能在你还没有对它遍历完成时,它已经被改变。这有可能导致死循环。

12、当你对对象的成员(属性或方法)进行反复操作时,先存储对它们的引用。例如var getTags = document.getElementsByTagName; getTags(‘div’)。

jiuye:

这里其实说的和1是一类问题,不要频繁操作DOM。

13、在任何的代码段里,在局部变量范围外存放一个这个局部变量的引用。例如:

function foo(arr) {
var a = ‘something’;
//变量a对于下面的代码就是范围外变量,这个变量的引用在很多情况下会有用处。
for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) {
//do something
}
}

14、for(var i=0; i < someArray.length; i++) {…}的执行效率慢于for (var i=0, loopLen=someArray.length; i<loopLen; i++) {…}。

15、在HTTP头信息里加入缓存控制过期和最大存活时间标记。

16、优化CSS。要使用<link>方式,而不要使用@import方式。

jiuye:

关于前端页面CSS的优化我前面的文章有介绍过,这里不再赘述。同样针对js来说也是需要去做优化的。

17、使用CSS技术来优化图片资源。

jiuye:

这一点对移动网站的开发来说尤为重要,图片的处理是移动网站性能提升的一个很大的制约点。目前有所为的CSS“雪碧”技术、响应式图片显示等多种技术可以来做这个事情。

18、用GZip方式压缩 .js 和 .css 文件。如果你使用的是Apache,在 .htaccess 里设置压缩方式,你的HTML, XML 和 JSON 也同时会被压缩。

19、使用JavaScript压缩工具。除了使用YUI和JSMin外,你还可以试一试Google Closure。

20、优化每个页面上的各种资源,把它们拆分到各个子域上,这么它们就能够并行下载。

jiuye:

可以把页面中引用的js文件、CSS文件、静态图片资源都统统扔到CDN上面去。

21、将CSS样式表放在页面的最顶端,这样能方便包括IE在内的浏览器进行解析。

jiuye:

同时提醒一下,js的引用放到页面底部</body>的前面。

22、尽量将DOM结构保持的越简单越好。DOM的体积会影响相关的操作效率,像查找,遍历,DOM改动都有影响。document.getElementsByTagName(‘*’).length这 个值越小越好。

jiuye:

在开发页面的时候保持页面的“干净”、“清洁”,不要过多使用元素,能简化一定要简化。

23、注意你使用的选择器。例如,如果你想获取一个ul下的直接子元素,使用jQuery(“ul > li”)而不要使用jQuery(“ul li”)。

24、当切换元素的可见性时(display),请记住:element.css({display:none})的 速度快于element.hide() 和 element.addClass(‘myHiddenClass’)。除非在一个循环里,我选择element.addClass(‘myHiddenClass’), 这样会使代码更简洁。

25、当你使用完对DOM的引用变量后,要把它置为NULL。

26、使用AJAX时,GET的执行效率高于POST。所以要尽量使用 GET 方式。只是要注意一点,IE只允许你用GET传送2K的数据。

jiuye:

本人目前开发过程中暂时不要考虑IE,所以我这个伪前端比你们正牌前端要开放些*些,哈哈~写了好多了,玩笑一下,娱乐一把!

27、小心使用脚本动画。没有硬件的支持,动画会执行的很慢。尽量避免使用那些没有实际价值的动画效果。

jiuye:

当然,现在有CSS3之后,一些CSS3的转换,变换等动画效果同时也要考虑执行的性能问题,因为山寨机,低端移动设备对CSS3的动画支持性能还不是很牛逼的!

28、如果你的background-image对于这个图片的容器太小的话,请避免使 用background-repeat。如果你的背景图片需要来回填充很多次才能充满背景,那么将background-repeat属性设置成 background-image 和repeat-x 或 repeat-y来 达到填充背景的效果的做法是不明智的,这种填充方式的效率特别的低。你应该尝试使用一个足够大的图片来做background-image并 且使用background-repeat: no-repeat。

jiuye:

这个就要辛苦下UED的MMs。

29、布局时不要使用<table>。<table>在浏览器完全把它画出来之前需要反复绘制好几次。因为DOM 中<table>是很少见的一种之后输出的会影响之前输出的显示效果的元素。对于表格数据来说,你可以使用table-layout:fixed; 这是一种更有效的现实算法,根据CSS 2.1技术说明,这种写法可以让表格一行一行的输出。

jiuye:

虽然有有效的现实算法来弥补<table>布局的缺点,但是本人是实在不愿意使用<table>布局,尤其在移动页面开发中,有<div>布局为什么不用?现在还有CSS3的盒式布局,都比较牛逼的!

30、尽可能的使用原始JavaScript。限制JavaScript框架的使用。

jiuye:

不要滥用js框架,不过针对我目前的移动网站开发来说,虽然很苦逼的用jQuery,但是想jQuery Mobile、zepto等都是很优秀的移动开发js框架。当然如果视觉上有各自的风格和严格要求,jQuery Mobile就不建议,个人感觉jQuery Mobile的最大好处就是提供了一套标准的UI组件。