Web 页面性能分析笔记

网页慢的原因不一定只是前端，所以需要结合Network一起看

如何评价一个页面打开得快不快，可以用两个指标描述，一个是ready的时间，另一个是load的时间。

如下示例表示，read时间是2.72s，load时间是4.74s。

DOMContentLoaded: 2.72s |Load 4.74s

chrome devtools

• devtools练习网站
• 全新Chrome Devtool Performance使用指南
• 如何使用 Timeline 工具
• Chrome DevTools中文手册
• Effective前端7：加快页面打开速度
• Chrome开发者工具详解(2)：Network面板
• segmentfault-Chrome DevTools — Timeline
• 我不知道的 Chrome Network 面板技巧

性能优化

• 性能调优的一些技巧总结：前后端
• 完整攻略！让你的网页加载时间降低到 1s 内！：前端

GTmetrix工具

• gtmetrix：网站性能评测工具，在线
• 优化网站加载时间（GTmetrix）

其他工具

• caniuse：CSS兼容性检测