前端系统学习-性能优化

1. 减少HTTP请求数：合并引用的文件、使用css Sprites合并图片。
2. 减少DNS逐级查找：使用缓存。
3. 避免重定向。
4. 让Ajax可缓存：Expires或者Cache-Control HTTP头。
5. 对Ajax用GET请求（我在GET与POST文章中讲到了POST会有两步发送）。
6. 延迟加载本页组件。
7. 预加载下一页组件。
8. 减少DOM（HTML 元素的对象、属性、访问它们的方法）元素的数量。
9. 跨域分离组件（我有讲跨域的文章）。
10. 尽量少用iframe：因为会阻塞页面加载且是非语义的。
11. 避免使用CSS表达式 。
12. 用代替@import
13. 把样式表放在顶部：用户看起来加载的快。
14. 减少DOM访问：缓存已访问过的元素的索引。
15. 使用事件委托（我有讲事件委托的文章）。
16. 把脚本放在底部：因为脚本会阻塞并行下载。
17. 把JavaScript和CSS放在外面，引用外部文件：因为这样可以使用缓存。
18. 压缩JacaScript和CSS：去掉空格换行。
19. 优化图片格式：比如GIF转化成PNG。
20. 不用HTML缩放图片：提前制作好所需尺寸的图片，直接引用。
21. cookie减负：清除或合并不必要的cookie，设置合适的过期时间。
22. 加上强缓存：Expires或者Cache-Control HTTP头。