《高性能网站建设指南》笔记

最新推荐文章于 2024-09-16 23:33:40 发布

侠客行

最新推荐文章于 2024-09-16 23:33:40 发布

阅读量709

点赞数

分类专栏： web 前端开发文章标签：脚本 etag css 优化 html 服务器

web 前端开发专栏收录该内容

71 篇文章 0 订阅

订阅专栏

《高性能网站建设指南》，这是一本值得所有网站前端人员、网站开发人员、网站产品经理一读的好书。

《高》首先分析了网站的用户响应时间都花在哪里，然后在这个基础上归纳出提高性能的若干办法，最后以十大网站为例进行了实例解析。这本书，把我们之前关于网站性能的一些散碎了解，体系地串了起来。篇幅不长，认真读的话，两三天也就能读完了。

前端优化的重要性：

改进前端通常只要较少的时间和资源，例如修改Web服务器配置文件、将脚本和样式表放在特定位置、合并图片、合并脚本等，这些修改只需要几个小时或几天；而改进后端通常很麻烦，例如重新设计应用程序架构和代码、查找和优化临界代码路径、添加或改动硬件、对数据库进行分布化等，这些需要花费数周或数月。

只有10%～20%的最终用户响应时间花在了下载HTML文档上，其余的80%～90%时间花在了下载页面中的所有组件上。[邓熔注：这数据不是猜测的，著者列举了十大网站的具体数据。]

前端优化的举措：

著者列举了14个举措，归纳方式有点散乱。我按我认为容易理解的方式，重新归纳如下：

减少http请求次数（http请求次数对性能的影响很大）：
- 在图片方面，有三个具体方案：图片地图、CSS Sprites、内联图片三种，最值得关注的是CSS Sprites。
- 脚本和样式表也要合并，虽然合并有悖于模块化开发的原则，但非常有利于性能。
- 缓存可以使一些http请求转为调用客户端的已有资源。所以，必须关注Expires头的设置。另外，HTTP1.1引入了“Cache-Control”头，可以用“max-age”来设置缓存的时间长度。
- 移除ETag或者对ETag进行专门配置，以免影响缓存调取。因为默认配置的ETag，和原始服务器的属性相关，当多台服务器时，会导致缓存调取失败。（N台服务器，缓存调取成功的概率是1/N）
- 对于用户的着陆页（Landing Page），脚本和样式表究竟应该内联（写到html里）还是应该外置？内联有利于减少http请求数，外置有利于缓存。对这个问题的探讨，产生了所谓“加载后下载（Post-Onload Download）”的方案：内联，但在页面加载完成后通过onload事件，动态下载外部脚本和样式表。[邓熔注：除“加载后下载”之外，还有一个“动态内联”的方案，但涉及到Cookie，把问题弄复杂了。]
充分利用并行下载：
- 使用两个主机名。HTTP1.1建议浏览器从每个主机名并行下载两个元素，使用多个主机名能进行更多的并行下载，但由于带宽和CPU速度，过多的并行下载也会降低性能。Yahoo！的研究表明，使用两个主机名性能最优。
- 将脚本放在底部，以避免对并行下载的影响。因为下载脚本时，并行下载是禁止的。
减小元素的大小：
- 精简脚本。用JSMin精简外置脚本，这能移除所有的注释以及不必要的空白字符，使脚本减小20%。（内联的脚本也应该尽量精简）
- 优化CSS。CSS中的注释和空白字符比较少，优化空间在于合并相同的类、移除不使用的类。同时，应避免使用CSS表达式，改用一次性表达式和使用事件处理器。因为CSS表达式会频繁求值，当页面滚动、甚至用户鼠标移动时都会求值。
- 务必使用Gzip对脚本、样式表、html文档进行压缩，这通常能减小60%的数据量。删除注释、缩短URL等虽然也有用，但费事得多且效果微弱。
其他：
- 避免没必要的重定向（例如在URL的结尾必须出现“/”但没有出现时），因为在重定向完毕并且html文档下载完毕之前，没有任何东西展示给用户；对于为了跟踪流量而使用的重定向，建议改用“referer”（仅可监测流向内部的流量），或“beacon+XMLHttpRequest”（可检测所有流量，但方法较复杂）；对于为了转换新旧网站而进行的重定向，著者在P81上提供了解决方案。[邓熔注：关于流量监控方面，是否改用其他方案，还需要综合评估方案相应的数据统计易用性；关于P81上的解决方案，我不知道是否对SEO会有影响，改善性能的时候，也需要综合平衡SEO。]
- 使用CDN（Content Delivery Network），缩小内容和用户的距离。
- 将样式表放在顶部，这样能使内容在浏览器中逐步呈现。尽管整个页面的加载总耗时可能并无变化，但逐步呈现内容，能使用户感觉更快。[邓熔注：这也是滚动条的作用，有心理学依据。]
- 适当减少主机名，以减少DNS查找。[邓熔注：主机名通常是出于其他考虑而设置的，比如SEO策略、运维策略等，设置时避免泛滥即可。]
- P96-102页探讨了Ajax下的优化问题。