前端优化总结和技巧（原创）

　　这两天把自己以往的一些经验总结一下，希望对自己以后的开发更有帮助。分类总结下，前端开发中的优化方法和技巧。可以一起交流。

一、减少http请求数量（简单粗暴，效果最佳）

　　1、对于图片，适当使用css sprite。

　　2、适当进行css、js文件的合并和压缩。

　　3、（大图片可以使用浏览器的本地缓存，在首次访问的时候保存到浏览器缓存中，典型的是HTML5的manifest缓存机制以及LocalStorage等）

　　当然合并也不是随意的，大量的合并和应用sprite会牺牲代码的可维护性，为以后的更新造成麻烦。

二、良好的书写规范

　　1、css文件放在head中。

　　2、js文件（阻塞浏览器渲染）放在下面。

　　3、避免使用css表达式expression等。

　　4、尽量避免使用内联样式。

三、js优化

　　dom优化是js优化的关键，因为dom操作室最浪费时间和内存的。

　　 1、 能放到DOM操作之外的操作就放到外面,DOM操作要尽量少.

　　　　如：

// 不好的做法
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    list.appendChild(item);
}   
 
 
// 更好的做法
// 使用容器存放临时变更， 最后再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
    var item = document.createElement("li");
    item.appendChild(document.createTextNode("Option " + i);
    fragment.appendChild(item);
}
list.appendChild(fragment);

　　2、 大范围操作先把容器隐藏,在其中操作完成后,再显示.

　　3、 样式操作不要注意修改属性,直接替换class、

　　4、用变量保存DOM对象而不是多次获取,同时减少操作DOM属性的次数.即dom缓存

　　5、合理的事件委托，在用jquery是链式调用等。

其中2.3和浏览器的渲染原理有关。可以查看陈浩大神的文章--浏览器的渲染原理。

四、按需加载、异步加载等。

　　1、html5的async、defer、localstronge等

　　2、js实现按需加载

　　3、js实现图片预取缓存、

　　4、ajax等。