如何系统地进行前端性能优化【监控篇】
性能优化是前端领域一个亘古不变的热点话题。本系列文章将分监控、加载性能优化和运行时性能优化三章从实践角度来做具体分享 想要优化就必须得有度量。有了监控才能客观、系统地进行分析性能瓶颈、验证优化结果等。所以我们先从如何完整地监控开始 优化方法论 前端性能又分为加载性能和运行时性能 加载性能度量 加载性能就是用户从进入到页面到页面真正可用的这个过程的耗时。我们可以用一道经典的面试题入手:用户从键入url按下回车之后到看到页面这其中发生了什么? DNS解析:把域名解析成ip地址 TCP连接建立 发送http请求 服务器解析http请求并返回结果 浏览器解析返回结果 而我们要做的就是记录这些过程的耗时: 现代浏览器提供了 performance 对像供我们方便地提取这些数据。而且 兼容性 在这。其中 timing 对象详细记录每个节点的时间戳。 将相关时间节点相减就能得到相应过程的耗时。 作为开发,我们通常更关注从服务器读取的时间,所以取 fetchStart 为起点。 下面是一些常用的时间计算: const { fetchStart, domainLookupStart, domainLookupEnd, domInteractive, domContentLoadedEventStart } = performance.timing // DNS查找时间 domainLookupEnd