前端性能优化简介

前端性能优化分为如下几个方面：

代码部署

• 代码的压缩与合并
• 图片、js、css等静态资源使用和主站不同域名地址存储（同一个域名会带上cookie），从而使得在传输资源时不会带上不必要的cookie信息
• 使用内容分发网络CDN
• 为文件设置Last-Modified、Expires和Etag等文件头
• 使用GZIP压缩传送
• 权衡DNS查找次数（使用不同域名会增加DNS查找）
• 避免不必要的重定向（加"/"）

编码

html

• 使用结构清晰，简单，语义化标签
• 避免空的src和href
• 不要在HTML中缩放图片

css

• 精简css选择器（层次不要太深）
• 把css放到顶部
• 避免@import方式引入样式
• css中使用base64图片数据格式取代图片，减少请求数，在线转base64网站：http://tool.css-js.com/base64.html，直接在引用图片处使用base64的数据（往往是小图片这么做——大的图片数据过多）
• 使用css动画来取代javascript动画
• 使用字体图标
• 使用css sprite（雪碧图）
• 使用svg图形
• 避免使用css表达式
• 避免使用css滤镜

javascript

• 减少引用库的个数
• 使用reuirejs或seajs异步加载js
• JS放到页面底部引入（这是理想状态，实际情况中往往放在顶部）
• 避免全局查找
• 使用原生方法
• 用switch语句代替复杂的if else语句
• 使用字面量表达式来初始化对象或数组
• 减少语句数，比如说多个变量声明可以写成一句
• 使用innerHTML取代复杂的元素注入
• 使用事件代理（事件委托）
• 避免多次访问dom选择集
• 高频触发事件设置使用函数节流
• 使用Web Storage缓存数据