网页性能优化和优化目标

一  Network 中的两个指标

DOMContentLoaded: HTML 文档被完全加载和解析完成的时间；如果希望 DOM 在用户请求页面后尽可能快地解析，可以将JS文件异步化

Load：总资源的加载时间，适当的拆包，资源的压缩等可以减小Load的时间

二、Network瀑布图

点击其中一个请求，查看其中的各项数据

 

•  Queueing 请求排队时间
• DNS Lookup DNS查找时间
• Initial connection TCP建立连接的时间
• SSL 如果为https协议则需要安全认证
• Waitng(TTFB)  资源请求发送到接收资源的时间，反应了后台处理请求的能力以及网络情况
• Content Download 资源下载时间

三、Lighthouse

一共两个需要注意的指标

• First Content Paint 白屏时间
• Speed Index 速度指数 小于4则表示优秀

四、RAIL测量模型

•  Response 相应时间，指的是用户做一些操作时页面能给到用户反馈的时间，控制在50ms内
• Animation 动画 每10ms产生一帧
• Idle 主线程空闲时间 前端尽量不做一些大计算量需要耗时间的事情
• Load 网络资源加载时间 在5S时间内完成所有内容的加载并且支持交互

五、性能测量工具

• Chrome DevTools
• Lighthouse
• WebPageTest