绪言A,前端性能的重要性
至少80%的时间花在了显示 Web 页面上,而这是在HTML文档下载完毕之后发生的。
- 跟踪 Web 页面性能
- 时间花哪里了?
- 性能黄金法则
绪言B,HTTP 概述
对 HTTP 协议进行了简单的介绍,主要介绍与 Web 性能相关的部分。
- 压缩
- 条件 GET 请求
- Expires
- Keep-Alive
规则一,减少 HTTP 请求
介绍了为什么额外的 HTTP 请求会对性能产生巨大的影响,并介绍了减少 HTTP 请求的方法,包括图片地图、CSS Sprites、使用 data:模式的URL内联图片,以及合并脚本和样式表
- 图片地图
- CSS Sprites
- 内联图片
- 合并脚本和样式表
规则二,使用内容发布网络
强调使用内容发布网络的优势
- 内容发布网络
- 节省
规则三,添加 Expires 头
研究了一个简单的 HTTP 头是如何通过浏览器缓存来大幅改善 Web 页面性能的
- Expires 头
- Max-Age 和 mod_expires
- 空缓存 VS 完整缓存
- 不仅仅是图片
- 修订文件名
规则四,压缩组件
解释了压缩是如何工作的,以及如何为Web服务器启用压缩,并讨论了现今存在的一些兼容性问题
- 压缩是如何工作的
- 压缩什么
- 节省
- 配置
- 代理缓存
- 边缘情形
规则五,将样式表放到顶部
展示了样式表是如何影响页面呈现的
- 逐步呈现
- sleep.cgi
- 白屏
- 无样式内容的闪烁
- 前端工程师应该做什么
规则六,将脚本放到底部
展示了脚本是如何影响页面呈现的,以及脚本是如何下载到浏览器中的
- 脚本带来的问题
- 行下载
- 本阻塞下载
- 差情况:将脚本放在顶部
- 佳情况:将脚本放到底部
- 确的放置
规则七,避免 CSS 表达式
讨论了CSS表达式的使用和度量其影响的重要性
- 更新表达式
- 围绕问题展开工作
规则八,使用外部 JavaScript 和 CSS
介绍了如何权衡是内联 Javascript和Css还是将它们放到外部文件中
- 内联 VS 外置
- 典型的对比结果
- 主页
- 两全其美
规则九,减少 DNS 查找
强调了解析域名时的频繁查找所产生的影响
- DNS 缓存和 TTL
- 浏览器的视角
- 减少 DNS 查找
规则十,精简 JavaScript
量化了从Javascript中移除空白字符所带来的收益
- 精简
- 混淆
- 节省
规则十一,避免重定向
对使用重定向提出了警示,并给出了替代方案
- 重定向的类型
- 重定向是如何损伤性能的
- 重定向之外的其他选择
规则十二,删除重复脚本
展示了如何一个页面中包含两处相同的脚本会发生什么情况
- 重复脚本 —— 确有其事
- 重复脚本损伤性能
- 避免重复脚本
规则十三,配置 ETag
介绍了ETag是如何工作的,以及为什么对于任何拥有多于一台Web服务器的网站来说,默认的实现都是不好的
- ETag是什么
- ETag带来的问题
- ETag —— 用还是不用
- 现实世界中的 ETag
规则十四,使 Ajax 可缓存
强调了在使用 Ajax 时牢记这些性能法则的重要性
- Web 2.0、DHTML 和 Ajax
- 异步和即时
- 优化 Ajax 请求
- 现实世界中的 Ajax 缓存