前端优化技巧（一）

允许转载，但请注明出处：http://blog.csdn.net/sysuzjz/article/details/41806145

闲暇没事整理了下前端常用的优化技巧，按目的分类如下：

1.  在文档开头显示一个加载中图案（俗称菊花） ，然后把不重要的JS文件放在文档末尾，
2.   给script标签添加defer属性

目的：防止JS文件阻塞页面加载

1. CSS精灵（将多张小图片集合到一张大图片中）
2. 合并JS文件（将多个JS文件集合到一个JS文件中）

目的：减少HTTP请求，缩短请求时间

1. 压缩CSS，JS文件
2. 缩短JS变量名（一字母变量）

目的：1. 减少文件大小，减少带宽占用

2. 防止代码被剽窃（开源代码除外）

1. 预先缓存DOM
2. 对DOM元素，多次创建，一次写入（如append节点，先把所有节点在代码中生成，然后一次append进文档中）
3. DOM数组长度要先缓存，而不是每次for循环都获取一次（对IE尤为如此）

目的：1. 减少DOM查找时间

2. 减少页面重绘（页面重绘需要消耗大量资源）

1. 尽量不使用全局变量
2. 将变量缓存，如with(document)（其实就是将全局变量转化为局部变量）
3. 函数调用尽量使用内建函数和内建构造
   

目的：1. 减少作用域链和原型链访问长度

2. 内建函数一般使用底层语言（C++，etc），效率更高

参考文献：http://bbs.html5cn.org/thread-2277-1-1.html