前端性能优化利器：Chrome Timeline学习及实践

来源：互联网发布：飘零网络验证编辑：程序博客网时间：2024/06/05 08:32

Timeline

Chrome相信是绝大部分前端工程师的基础开发调试环境，正所谓，工欲善其事必先利其器，当然这里说的不是打磨Chrome，说的是怎么用好Chrome。

基础介绍

chrome tool

在Chrome里打开（鼠标右键选择检查/Mac下CMD+option+i）开发界面，如上图。简单介绍一下各个tab对应的作用：

Element：页面元素的选定，实时修改css样式。
Console：查看程序输出信息。
Sources：页面的所有资源（HTML文档，js，css，图片）。
Network：按时间顺序展示了页面加载过程及后续过程的所有网络请求。
Timeline：最为强大的工具，按时间顺序展示页面加载过程及后续过程的网络请求、页面渲染过程、JS运行时长、页面帧率、CPU/GPU使用情况等。
Profiles：监控CPU使用情况，内存分配情况等，深入分析阶段会用到。
Application：以前好像叫Resource，改名了，里面包含service worker，storage，cache相关信息。
Security：安全相关吧，很少接触，望大神补充。
Audits：性能优化相关，chrome会重新加载页面并进行评估和给出意见（gzip，缓存等）
Adblock是自己装的去广告插件，请忽略。

主角出场

上面说的一些相信大家在开发的过程中都非常熟悉（不熟悉的同学自己先去把各个tab点一遍吧，纸上得来终觉浅），下面重点讲一下Timeline。

先上学习资料：

使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能(译文，年代较远，不过分析思路可参考)
Chrome开发者文档
知乎：chrome里的timeline如何使用？

直接上图（在timeline下刷新页面可得）：

chrome timeline

绿色框：监测选项（网络，js执行，截屏，内存，渲染）
黄色框：监测内容，依次是FPS，CPU，屏幕截图，网络请求，js执行详情
黑色框：选中区域的详情

性能优化

工具终究是为需求服务的，我们的需求是性能优化，那么什么是性能优化，性能优化对初学者来说比较抽象，概念也比较广泛，这里转换概念成确保用户体验，用户体验也不够具体，我们转换成，避免出现用户体验不好的情况，那就是卡。

卡有两种，一种是页面加载慢（主要原因在网络上），看能不能减少加载（压缩，GZIP，缓存，预加载/只加载当前页面资源），另一种是页面帧率低（低于60FPS），会在视觉上有卡顿，从网上找了个DEMO。

基于前面的分析，性能优化在于两点：
1，在timeline中观测页面资源加载情况（时长，顺序），降低页面加载时长。
2，在timeline中观测FPS情况（由上图可知，变红部分是帧率较低，是需要重点优化的地方），这个时候观测底下的JS执行耗时，能分析出哪部分耗时过长，导致帧率下降。

实践

基本原理和操作方式在前面都提及了，这里说说我最近做的一个小优化。

基于timeline的数据，在某一小段我发现：
timeline：性能优化分析

请注意红色框的内容，Chrome提醒我强制回流会有性能问题，上面那个get innerHeight也引起了我的注意，第一个想法是，因为设置了元素高度造成了回流？

timeline分析

果然：

timeline分析

关于这个什么时候设置高度会导致recalculate styles，我写了个DEMO：具体分析写在了代码里面。

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>innerHeight cause recalculate style</title>  </head>  <body>    <section id="section">      <header>结论</header>      <ul>        <li>console.log会耗费性能（与打印的内容多少有关），产品上尽量去除</li>        <li>监听window.onload会耗费性能</li>        <li>获取innerHeight不会导致recalculate</li>        <li>页面渲染完成前设置height会导致recalculate</li>        <li>页面渲染完成后设置height会导致recalculate</li>      </ul>      <footer>end</footer>    </section>    <script>      //js会阻塞页面加载，所以下面的脚本不会导致recalculate      var section = document.querySelector("#section");      var height = window.innerHeight;      section.style.height = height + "px";      //下面脚本执行时页面已渲染完成，再次改变为不同的height会到导致recalculate      setTimeout(function() {        var section = document.querySelector("#section");        var height = window.innerHeight;        section.style.height = height + 20 + "px";      },1000)    </script>  </body></html>

接下来的事情就很简单了，我只要在页面渲染过程中就指定组件高度，而不是在组件加载完成（页面已经渲染完）再指定组件高度，就不会导致recalculate了。