三：网站性能优化 Website Performance Optimisation

[EthanLin-TWer]

Website Performance Optimisation

先推荐两份必读经典：

• 官方文档 是搞性能优化一定要看的，这里有 中文版
• How Browsers Work: Behind the scenes of modern web browsers - by Tali Garsiel & Paul Irish 也是一篇经典文章必然要看，这里是 中文版

目录

• 3.1 关键渲染路径 Critical Rendering Path：3.1 关键渲染路径 Critical Rendering Path  #158
• 3.2 优化 CRP（一）：3.2 优化 CRP（一） Optimize Critical Rendering Path I #159
• 3.3 优化 CRP（二）：3.3 优化 CRP（二）Optimize Critical Rendering Path II #160
• 3.4 应用的生命周期：3.4 应用的生命周期 App's Lifecycle #161
• 3.5 向 60 fps 进发（一）：JavaScript 优化、Styles 优化 及 Layout 优化 3.5 向 60 fps 进发（一）：JavaScript 优化、Styles 优化 及 Layout 优化 #166
• 3.6 向 60 fps 进发（二）：Composite 优化 与 Painting 优化 3.6 向 60 fps 进发（二）：Composite 优化 与 Painting 优化 #186
• 3.7 使用 Chrome DevTools 进行性能分析 3.7 使用 Chrome DevTools 进行性能分析 #187

CRP #158 介绍了浏览器渲染的五个步骤，所有优化是围绕这五个步骤展开的。这些优化从大面上可以分为两类 #161 ：

• 优化加载时间。主要是优化 CRP 中的 DOM - CSSOM - Render 这三段，优化理论和实践在 3.2 优化 CRP（一） Optimize Critical Rendering Path I #159 3.3 优化 CRP（二）Optimize Critical Rendering Path II #160 中谈及
• 优化响应时间。目标是达到 60 fps 的响应频率，涉及 CRP 的所有阶段 JavaScript - CSSOM(Style) - Render - Layout - Composite - Paint，优化手段在 3.5 向 60 fps 进发（一）：JavaScript 优化、Styles 优化 及 Layout 优化 #166 3.6 向 60 fps 进发（二）：Composite 优化 与 Painting 优化 #186 中

#187 中介绍了一些实用的手法。

Todo & Toread

实际上，剩下这个 issue 的一些 todo，花去了18个小时完成项目二。回头再来补充这块内容，interleaving 嘛。

• visualizer of html dom/cssom tree rendering
• 图片优化理论和实践，归并到 3.2 优化 CRP（一） Optimize Critical Rendering Path I #159 3.3 优化 CRP（二）Optimize Critical Rendering Path II #160 中去
• 如何使图片加载不 block 首屏加载？
• 缓存策略
  • https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching
• CSS 加载方式区别？：<onscript>, <link rel="preload" />, <link media="print" />, @import
• dom 各个事件是什么？domCompleted, domLoadCompleted
• Better Digital Marketing: favicon, meta tags(Google Tag Manager https://www.youtube.com/watch?v=KRvbFpeZ11Y)
• 把笔记总结到 Udacity
• 反省下，所谓的「快速学习」为什么在项目三启动的时候不 work。我想用 KnockoutJS 写产品代码， 过分复杂化的用上了 ES6 和webpack，但过早地陷入语法细节和错误，浪费了很多时间，shit

Rethink

• 60fps CRP 优化，对于一个应用来说，能不能宽容到一旦配置完即能自动工作？对于不同的应用来说，有没有套路或模板可以快速启动套用
• 为什么要把 CSS 放到页面底端？会阻塞浏览器渲染么？
  • http://harttle.com/2016/11/26/static-dom-render-blocking.html

总路线图

网上就没搜到。这可以是自己产出的一个东西。

Possible best resources

• https://aerotwist.com/blog/dont-guess-it-test-it/
• https://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
• https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
• https://www.html5rocks.com/en/tutorials/speed/scrolling/
• https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
• https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count
• https://developers.google.com/web/updates/2016/09/re-rastering-composite
• https://developers.google.com/web/tools/chrome-devtools/rendering-tools/
• http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/
• https://www.smashingmagazine.com/2013/06/pinterest-paint-performance-case-study/
• https://www.youtube.com/watch?v=z0_jD8nO5Zw
• 吹毛求疵的追求优雅高性能JavaScript jawil/blog#2 (comment)
• http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
• http://www.voidcn.com/article/p-yegadyaa-dn.html
• http://jankfree.org/
• https://github.com/mikejoyceio/website-optimization

最核心理念和知识

• http://ife.baidu.com/
• https://github.com/barretlee/performance-column/issues
• http://fex.baidu.com/blog/2014/03/fis-optimize/
• http://div.io/topic/371
• https://blog.guchengf.me/improve-web-performance/
• http://web.jobbole.com/82551/
• https://www.igvita.com/slides/2012/web-performance-for-the-curious/#19
• https://github.com/herbertliu/OMS

最佳的信息源

• 高性能网站建设指南:前端工程师技能精髓

[JimmyLv]

羡慕！

[EthanLin-TWer]

@JimmyLv 大哥……