前端性能优化

最近看了篇前端性能优化方面的文章，总结了些要点如下：

content方面

• 减少HTTP请求，合并文件，采用CSS sprite，inline image等
• 减少DNS查询，进行DNS缓存，将需要请求的资源分布于多台主机，平衡并行下载的压力
• 尽量避免重定向，减少中间的多余访问
• 使Ajax请求可缓存
• 对于非必须组件进行延迟加载，未来需要的组件进行预加载
• 减少DOM元素的数量
• 将资源分布于不同域的服务器上，提高并行下载的速率
• 尽量减少iframe的数量

服务器方面

• 使用CDN
• 添加expires或者cache-control
• 对组件使用Gzip压缩
• 配置Etag
• 避免src为空的img标签

cookie方面

• 减小cookie大小
• 引入资源的域名不要包含cookie

CSS方面

• 将样式表置于页面顶部
• 尽量不使用CSS表达式
• 不使用 @import引入样式

JavaScript方面

• 将JS脚本置于页面底部
• 将JS与CSS从外部引入
• 压缩JS与CSS
• 删除不需要的脚本
• 减少DOM访问
• 合理设计事件监听器

图片方面

• 优化图片，对图片进行压缩等
• 优化CSS sprite
• 不要在HTML中拉伸图片
• 使favicon.ico尽量小且可缓存