[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 的优化清单
  • 网络现状:性能提升指南:主要部分为资源优化的清单
  • 移动端体验优化手册:从用户感知角度入手的优化清单

你可能感兴趣的:(前端)