gso性能优化记录

关于作者

  • 马隆博(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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞