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

最新推荐文章于 2025-04-15 11:57:41 发布

Sheldon_Law

最新推荐文章于 2025-04-15 11:57:41 发布

阅读量1w

点赞数 6

分类专栏：前端文章标签： chrome 性能优化前端 timeline

本文链接：https://blog.csdn.net/code_for_free/article/details/52503047

版权

前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用Chrome DevTools中的Timeline工具进行前端性能优化，包括页面加载速度和帧率的提升。通过实际案例演示了如何发现并解决性能瓶颈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。

先上学习资料：

直接上图（在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>