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

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

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

前端优化的重要性:

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

只有10%~20%的最终用户响应时间花在了从服务器端获取HTML文档上(后端优化有助于缩短这部分的时间),其余的80%~90%时间花在了下载页面中的所有组件上(前端优化有助于缩短这部分的时间),根据二八原则,我们应该更关注前端优化。[邓熔注:这数据不是猜测的,著者列举了十大网站的具体数据。]

前端优化的举措:

著者列举了14个举措(就是业界著名的网站性能14条),归纳方式有点散乱。我按我认为容易理解的方式,重新归纳如下:

  1. 减少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,把问题弄复杂了。“加载后下载”也可用于预先下载用户下一页需要的元素。]

  2. 充分利用并行下载:

    • 使用两个主机名。HTTP1.1建议浏览器从每个主机名并行下载两个元素,使用多个主机名能进行更多的并行下载,但由于带宽和CPU速度,过多的并行下载也会降低性能。Yahoo!的研究表明,使用两个主机名性能最优。

    • 将脚本放在底部,以避免对并行下载的影响。因为下载脚本时,并行下载是禁止的。

  3. 减小元素的大小:

    • 精简脚本。用JSMin精简外置脚本,这能移除所有的注释以及不必要的空白字符,使脚本减小20%。(内联的脚本也应该尽量精简)

    • 优化CSS。CSS中的注释和空白字符比较少,优化空间在于合并相同的类、移除不使用的类。同时,应避免使用CSS表达式,改用一次性表达式和使用事件处理器。因为CSS表达式会频繁求值,当页面滚动、甚至用户鼠标移动时都会求值。

    • 务必使用Gzip对脚本、样式表、html文档进行压缩,这通常能减小60%的数据量。删除注释、缩短URL等虽然也有用,但费事得多且效果微弱。

  4. 其他:

    • 避免没必要的重定向(例如在URL的结尾必须出现“/”但没有出现时),因为在重定向完毕并且html文档下载完毕之前,没有任何东西展示给用户;对于为了跟踪流量而使用的重定向,建议改用“referer”或“beacon + XMLHttpRequest”;对于为了转换新旧网站而进行的重定向,著者在P81上提供了解决方案。[邓熔注:关于流量监控方面,是否改用其他方案,还需要综合评估方案相应的数据统计易用性;关于P81上的解决方案,我不知道是否对SEO会有影响,改善性能的时候,也需要综合平衡SEO。]

    • 使用CDN(Content Delivery Network),缩小内容和用户的距离。

    • 将样式表放在顶部,这样能使内容在浏览器中逐步呈现。尽管整个页面的加载总耗时可能并无变化,但逐步呈现内容,能使用户感觉更快。[邓熔注:这也是滚动条的作用,有心理学依据。]

    • 适当减少主机名,以减少DNS查找。[邓熔注:这一点在实际操作中,需要综合平衡SEO策略、运维策略等。]

    • P96-102页探讨了Ajax下的优化问题。

附注:著者推荐了四个工具,HTTP请求图表使用 IBM Page Detailer
,响应时间的测量使用 Gomez
的Web监视服务,页面中的脚本及CSS分析使用 Firebug
,分析页面性能使用 YSlow

觉得文章有用?立即:和朋友一起 共学习 共进步!

建议继续学习:

  1. 高性能web服务器-读书笔记    (阅读:6342)

  2. Unix高级环境编程系列笔记    (阅读:3860)

  3. MySQL 应用小笔记    (阅读:3080)

  4. Unix高级环境编程系列笔记    (阅读:2980)

  5. JavaScript中级笔记    (阅读:2920)

  6. 《精通CSS+DIV》学习笔记    (阅读:2620)

  7. 读书笔记-交互设计精髓[1]    (阅读:2280)

  8. 读《Web 表单设计》    (阅读:1760)

  9. 《瞬间之美》读书笔记    (阅读:1600)

  10. 读书:《SEO实战密码》    (阅读:1580)

QQ技术交流群:445447336,欢迎加入!

扫一扫订阅我的微信号:IT技术博客大学习

原文 

https://blogread.cn/it/article/1050?f=hot1

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 《高性能网站建设指南》笔记

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址