手记

【前端】chrome 意料之外的操作

自动devtool

//快捷键中配置 
--auto-open-devtools-for-tabs

显示继承样式

compute 面板中勾线show all

定位未使用的css

  • 在聚焦DevTools的情况下,按Command+ Shift+ P(Mac)或 Control+ Shift+ P(Windows,Linux,Chrome OS),以打开“命令菜单”。
  • 开始输入coverage并选择显示覆盖率。覆盖选项卡出现。
  • 点击录制,即可。
  • 页面会重新加载,“覆盖率”选项卡概述了浏览器加载的每个文件中使用了多少CSS(和JavaScript)。绿色表示使用过的CSS。红色表示未使用的CSS。

样式添加

  • styles面板右上角的.cls .hover南
  • styles面板中样式右下角的…

动画优化

  • styles面板,→ ctrl+p
  • 输入> animate
  • 可进行动画重播、修改、优化

cache-control

  • network面板
  • ctrl+F
  • 输入cache-control

资源block

  • network面板,→ ctrl+p
  • 输入> block
  • 添加资源,重新请求页面
  • 进而可以模拟网络异常

界面渲染

  • CSSOM 树和 DOM 树合并成渲染树,然后用于计算每个可见元素的布局layout,并输出给绘制流程paint,将像素渲染render到屏幕上。
  • 优化上述每一个步骤对实现最佳渲染性能至关重要。
  • 从 DOM 树的根节点开始遍历每个可见节点,为其找到适配的 CSSOM 规则并应用它们
  • 最终输出的渲染同时包含了屏幕上的所有可见内容及其样式信息
  • 从渲染树的根节点开始进行遍历,计算每个对象在网页上的确切大小和位置,让设置的样式规则生效,即安排元素的几何布局
  • 将几何位置转化为屏幕对应的像素数值
  • 最后进行绘制

界面渲染阻止

  • CSS 被视为阻塞渲染的资源。
    • 基于css会转化为cssom, 一旦在页面底部,存在css。那么之前得到的渲染树,就可能变动很大,此时暂停渲染,重新生成cssom,生成渲染树,避免重复工作。
    • 界面配置了css资源,一旦没有生效,会体验不好。
  • js也会操作dom树,cssdom树,而不是渲染树,故会影响渲染树的生成。
    • 除非将 JavaScript 显式声明为异步,否则它会阻止构建 DOM
  • 媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲染

界面首屏加载优化

  • 最好利用 Lighthouse( Chrome 扩展程序or NPM 模块) 发现明显的 CRP 优化机会,然后使用 Navigation Timing API 设置您的代码,以便监控应用在实际使用过程中的性能。
    domLoading:这是整个过程的起始时间戳,浏览器即将开始解析第一批收到的 HTML 文档字节。
    domInteractive:表示浏览器完成对所有 HTML 的解析并且 DOM 构建完成的时间点。
    domContentLoaded:表示 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点,这意味着现在我们可以构建渲染树了。
    许多 JavaScript 框架都会等待此事件发生后,才开始执行它们自己的逻辑。因此,浏览器会捕获 EventStart 和 EventEnd 时间戳,让我们能够追踪执行所花费的时间。
    domComplete:顾名思义,所有处理完成,并且网页上的所有资源(图像等)都已下载完毕,也就是说,加载转环已停止旋转。
    loadEvent:作为每个网页加载的最后一步,浏览器会触发 onload 事件,以便触发额外的应用逻辑。
  • 优化从缓存或从网络获取资源所需的时间

参考文献:

本文作者:前端首席体验师(CheongHu)

0人推荐
随时随地看视频
慕课网APP