gso性能优化记录

2024年1月22日 208次阅读 来源: 马隆博

关于作者

  • 马隆博(Lenbo Ma)，Java，Javascript
  • Blog: http://mlongbo.com
  • E-Mail: mlongbo@gmail.com
  • 文章编写于: 2014/08/30

转载请注明出处:

http://mlongbo.com/gsoxing-neng-you-hua-ji-lu/

自gso发布上线，之后的一段时间内因为忙于工作的事情，没有再更新维护。

当初一时兴起，只用了很短的时间便完成了代码编写及上线部署。一直想着要再优化整理下代码，最近也一直在努力做这些事情。

直到今日，算是告一段落。接下来，我从几点简单说一下都做了哪些事情。

CDN

不得不说，七牛的服务确实很赞，他们提供的免费目前已足够gso使用。
我主要是将css，图片放到了七牛上。gso中使用的js并不多，所以没有做缓存。

压缩

包括css压缩，以及使用node compression模块进行压缩(压缩效果正在测试中..)。

HTML解析

对google查询结果的解析使用了node-jquery模块。优化之后速度提高了将近900ms, 主要改进了以下方面:

  1. 改进选择器使用。 jquery中最快的选择器是: id选择器和标签选择器，因为jquery内部会调用js的原生方法(比如getElementById())。
    其次是: class选择器，同理，chrome中有原生getElementByClassName(), 所以速度也不会太慢，而我之前一直使用的是class属性选择器….
    最慢的选择器当属: 伪类选择器和属性选择器, 比如$(':hidden')和$('[attribute=value]')。

  2. 做好缓存。使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于反复使用.

  3. 正确使用循环。javascript原生的for和while，要比jquery的.each方法快。另外，你可以使用node运行一下下面的代码:


var arr = [];
while(arr.length < 5000000){
    arr.push(arr.length);
}


console.time("for in");
for(var i in arr) {
}
console.timeEnd("for in");


console.time("i++"); 
var length = arr.length;
for(var i=0; i<length; i++) {
}
console.timeEnd("i++"); 

console.time("i--");
var length = arr.length;
for(var i=length; i--;) {
}
console.timeEnd("i--");


console.time("map");
arr.map(function(){});
console.timeEnd("map");


console.time("filter");
arr.filter(function(){});
console.timeEnd("filter");


console.time("forEach");
arr.forEach(function(){});
console.timeEnd("forEach");


console.time("some");
arr.some(function(){});
console.timeEnd("some");


console.time("every");
arr.every(function(){return true;});
console.timeEnd("every");

总之，继续加油~

    原文作者：马隆博
    原文地址: https://segmentfault.com/a/1190000000656262
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞