如何利用Chrome DevTools优化网页性能

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这篇内容是极客时间每日一课的学习笔记，本来是记录在了幕布上面，但分享到部落之后发现体验效果并不好，写作平台这么好的东西不能再束之高阁了。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"为啥要做性能优化？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端性能直接关系到产品的用户体验与经营结果。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"解决前端性能的关键点"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如何定义前端性能的标准，并获取到标准对应的指标值，从而发现影响页面性能的问题。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"如何定义页面性能的指标体系？"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"我们需要关注的性能指标"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"request数、打包大小、load时间、FCP:首次内容绘制、LCP:最大内容绘制，代表最核心的内容被加载的时间、TBT:累积阻塞时间评估网站资源加载在执行和阻塞的时间。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"使用ChromeDevTools来测试性能指标"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/11/11d00457447ff4c8a856bcef2a2abe1d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"性能分析的插件Lighthouse"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/99/9985e18f080d1cce58b010402aebda18.png","alt":null,"title":"","style":[{"key":"width","value":"100%"},{"key":"bordertype","value":"none"}],"href":"","fromPaste":false,"pastePass":false}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"生成Performance报告后，重点关注以下指标"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"First Contentful Paint（FCP）"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当用户启动页面加载与呈现首屏内容之间的时间,时间越长，白屏时间越长。可以通过骨架屏等手段，尽量将页面分批分层逐步加载，加强用户的体验感受。尽可能少得等待。"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Largest Contentful Paint(LCP)"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"测量网站中最大的元素，何时呈现在屏幕上，可以近似理解为最主要的内容对用户的可见时间，LCP主要受服务器响应时间、存在渲染阻止的JavaScript和CSS、资源加载时间、客户端渲染时间四个因素的影响。"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Total Bloking Time(TBT)"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"总阻塞时间。用来量化加载的响应能力，累积主线程被阻塞并会影响用户操作反馈的总时间。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"为了找到FCP与LCP的阻塞点，建议打开Chrome DevToos过滤器的Capture screenshots选项。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我的Chrome版本是 85.0.4183.83，勾选Performance中的Screenshots选项，在访问目标页面之前，点击Record，就能很直观得得到页面的各个阶段的性能情况。"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/07/07db38427808d44bde29fa9f3e466be6.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"华为内部性能指标的建议值"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/09/09755331a91207e74d8177dd43c3177f.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"四个性能优化方向"}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"减少第三方代码的影响"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"减少主线程工作，我们可以使用LightHouse里面的long main-thread task来看"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"减少JS执行时间，我们可以使用LightHouse里面的JavaScript execution time"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"保持低请求的数量和小传输"}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Chrome团队的RAIL模型("},{"type":"link","attrs":{"href":"https://web.dev/rail/)","title":null},"content":[{"type":"text","text":"https://web.dev/rail/)"}]}]},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"RAIL是以用户为中心的性能模型，它将性能分解为以下四个方面："}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Response"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Animation"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Idle"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":1,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Load"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"写在最后"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最后，我想说的是，以前只会去学买的专栏，很少打开《每日一课》这个产品，最近发现能学到不少东西。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"15分钟的分享，我花了差不多两个小时来消化。不管是解决问题的思路、还是一个工具，都是能立即就能用得上的，所以，千万不要错过。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}