闲暇没事整理了下前端常用的优化技巧,按目的分类如下:
- 在文档开头显示一个加载中图案(俗称菊花) ,然后把不重要的JS文件放在文档末尾,
- 给script标签添加defer属性
目的:防止JS文件阻塞页面加载
- CSS精灵(将多张小图片集合到一张大图片中)
- 合并JS文件(将多个JS文件集合到一个JS文件中)
目的:减少HTTP请求,缩短请求时间
- 压缩CSS,JS文件
- 缩短JS变量名(一字母变量)
目的:1. 减少文件大小,减少带宽占用
2. 防止代码被剽窃(开源代码除外)
- 预先缓存DOM
- 对DOM元素,多次创建,一次写入(如append节点,先把所有节点在代码中生成,然后一次append进文档中)
- DOM数组长度要先缓存,而不是每次for循环都获取一次(对IE尤为如此)
目的:1. 减少DOM查找时间
2. 减少页面重绘(页面重绘需要消耗大量资源)
- 尽量不使用全局变量
- 将变量缓存,如with(document)(其实就是将全局变量转化为局部变量)
- 函数调用尽量使用内建函数和内建构造
目的:1. 减少作用域链和原型链访问长度
2. 内建函数一般使用底层语言(C++,etc),效率更高
前端优化技巧(一)
原文:http://www.cnblogs.com/smght/p/4369730.html