[2017专题] 性能优化

并不是新内容，而是搬运过去的专题。

性能测量

• Chrome 中的 Lighthouse 测量工具
• 这些指标都是什么意思：初次渲染 FP、初次有内容的渲染 FCP、初次有意义的渲染 FMP、初次交互时延 TTFI 和初次持续交互时延 TTCI、标识视觉完成度的速度指标 Speed Index
• 使用 Paint Timing API 加强性能表现
• 帧的解剖：详解每帧中的各个子部分

网络优化 & 资源优化

• SSR vs CSR：比较了服务器端渲染和浏览器端渲染
• 更快的 DOM 加载策略：推断式加载、异步加载、延迟加载与预加载
• 自动化图片优化：各个不一样图片格式的压缩比和适用场景
• Yelp 是如何无损压缩图片的：从 CDN 角度实现图片优化的部分：侦测可压缩 PNG 并转化为 JPEG、动态 JPEG 质量控制、更改 JPEG 编码器
• Webfont 优化策略

渲染优化

• 关键渲染路径
• 无线性能优化：粘合过程

清单

• 前端资源优化清单：大纲式清单，相对较全
• AMP 优化，为什么 AMP 如此快：AMP 的优化清单
• 网络现状：性能提高指南：主要部分为资源优化的清单
• 移动端体验优化手册：从用户感知角度入手的优化清单