这两天把自己以往的一些经验总结一下,希望对自己以后的开发更有帮助。分类总结下,前端开发中的优化方法和技巧。可以一起交流。
一、减少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等。