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