当前位置: 秋叶网络博客 前端编程 ◊ 前端脚本代码之效率优化

前端脚本代码之效率优化

作者:秋了秋 发表时间:2015年05月04日

代码在浏览器中执行是要时间的,只不过很多时候,这个时间非常短,短到让我们感觉不到,这不等同于网页内容的下载,比起代码执行时间,网页加载是个可以明确感知到速度的东西,比如我们打开一个网页,加载进度条一直在那转转转,其实就是在下载网页所需的文件。而这里说的代码执行不等同于这个。

代码执行需要时间,都是瞬间的事,我们感知不到,但是如果代码写得不好的话,这个时间就会延长的,尤其是js的执行,同一种方法,用js可以有很多种写法。但是各自的执行时间是不一样的,用一个糟糕的写法将会严重降低代码执行效率,慢到可以让你感觉到它的存在~

自己就犯过这样的错误,比如:

for(i=0,i<$("#obj").height(),i++){
//这里放循环的内容
}

这样就导致了每执行一次循环内容都要去document.getelementById("obj"),众所周知document.getelementById方法是去整个网页文档代码中寻找匹配的元素。这个效率是很低的,况且它每执行一次就要运行一下这个方法,如果i的值非常大的话,而你又在网页中多处用了这种for循环,如果循环内容是个实时动画的话,将会明显感知到动画的迟缓性。良好的写法是将$("#obj").height()存入缓存:

var abc=$("#obj");
for(i=0,$abb=$abc.height(),i<abb,i++){
//这里放循环的内容
}

除了js脚本有效率之称外,css同样有效率高低之分,css是给浏览器渲染页面的基石。基石打得不好,将给浏览器造成麻烦。

最近又遇到一个奇葩的问题,众所周知,同一个元素同一属性被定义了两次,浏览器只认最后一个属性,即前面的被后面的覆盖,虽然出来的效果是我们想要的后面的那个效果。但是浏览器对这个页面的这个元素渲染了两次,这是要花时间成本的,虽然时间短得让我们感觉不到。可是我碰到的问题是时间长得无法让我想象:

<div id="fff"><p>秋叶网络博客</p><p class="uur">www.wuover.com</p></div>
#fff P{-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8);}
#fff .uur{-webkit-transform: scale(0.8);-moz-transform: scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8);}

就像这样,在一个页面中重复把.uur同一属性transform写了两次,结果页面直接打不开~~,但是单独运行这段代码又可行在页面中有众多css3渲染的情况下是不行的,js冲突导致页面打不开这很好理解,css冲突这就是稀奇了。

现在给大家整理一些网页性能小tips给大家参考,养成良好的代码书写习惯: 1、jQuery类型的变量最好加个$前缀;时常将jQuery选择器返回的内容存进变量以便重用,避免重复遍历文档。

var $products = $("div.ehyduct");

2、id选择器比类选择器快

var $products = $(".pro"); // 慢
var $products = $("#pro"); // 快

3、多级查找中,右边尽量指定得详细点而左边则尽量简单点

$("p.at .ez");//优化前
$(".at td.ez");// 优化后

4、指定查找范围

$('.class');//原始代码
$('.class', '#class-container');//在#class-container容器范围内进行查找

5、不要使用通配符万能选择器

$('div.container > *'); // 差
$('div.container').children(); // 棒

6、ID已经是唯一了,不需要具体

$('.outer-container #inner'); // 差
$('#inner');//干净利落,好!

7、不要处理不存在的元素

$("#nosuchthing").slideUp();// 丧尽天良的做法:jQuery后台要执行三遍查询后才会知道这个元素其实根本不存在从而放弃
// 应该这样
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {$mySelection.slideUp();}

8、尽量不要把js写在内联html上

<a id="myLink" href="#">my link</a> <!--内联绑定 不好 -->
$("#myLink").on("click", myEventHandler);//js中绑定,好!

9、表在链接里面嵌参数,请使用专门的参数设置来传递

// 不易阅读的代码...
$.ajax({
url: "something.php?param1=test1&param2=test2",
....
});// 更易阅读...
$.ajax({
url: "something.php",
data: { param1: test1, param2: test2 }
});

提供标准的ajax模版一份参考:

var jqxhr = $.ajax({
url: url,
type: "GET", // 默认为GET,你可以根据需要更改
cache: true, // 默认为true,但对于script,jsonp类型为false,可以自行设置
data: {}, // 将请求参数放这里.
dataType: "json", // 指定想要的数据类型
jsonp: "callback", // 指定回调处理JSONP类型的请求
statusCode: { // 如果你想处理各状态的错误的话
404: handler404,
500: handler500
}
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

10、用链式保存变量

$("#myDiv").addClass("error").show();

11、巧用数组形式传递多个属性

$myLink.attr("href", "http://www.mizuiren.com").attr("title", "my link").attr("rel", "external"); // 糟糕:调用了三次attr
// 不错,只调用了一次attr
$myLink.attr({
href: "http://www.mizuiren.com",
title: "my link",
rel: "external"
});

12、尽量不要用js操作css

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // 不好
//nice!
css:.error {color: red;font-weight: bold;}
js:$("#mydiv").addClass("error");

13、能用js尽量少用jq,浏览器要先把jq转变成原生js。。。

$("#myId"); // 多少还是会逊色于...
document.getElementById("myId");
0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/351.html
目录: 前端编程 | 标签: 代码执行效率 | 12645次阅读