处理 JavaScript、DOM 和 CSS

[mdmunjurulhaquesiam]

使用 Chrome DevTools，您可以优化网站的一些要点。例如JavaScript、样式表 (CSS) 和 DOM。也就是说，根据维基百科，文档对象模型是：

用于表示结构为语言和平台中立的文档的官方 W3C 标准。

这些功能允许您检查和分析网站的关键元素。此阶段对于纠正错误至关重要，如果没有 DevTool，就很难改进这些错误。

优化总阻塞时间
TBT（或总阻塞时间）是一个实验室指标，定义网页在变为可交互之前的交互时间。低 TBT 相当于资源的良好用户体验，因为它衡量的是加载和交互之间的时间量。

Chrome 开发者工具 TBT
但如何以清晰、简单的方式衡量 TBT？在 Chrome DevTools 上，当您测量互联网上页面的性能时，总阻塞时间（即首次内容绘制 (FCP) 和交互时间 (TTI) 之间的距离）显示在性能面板的页脚中。

彻底研究性能面板
当然，Chrome DevTool 的基本点之一是可以分析指标，从而加快和提高门户的性能。主要功能是灯塔，可以让你获取海量的信息。例如：

表现。
可达性。
搜索引擎优化。
改进建议。
渐进式网络应用程序。
所有这一切都适用于桌面和移动设备。只需单击“生成报告”即可获取您需要的所有结果，以了解可以改进的内容。通过优化各个步骤，您可以获得具体的结果。

模拟特定设备
您是否正在寻找一种简单有效的方法来了解您的网站在您以外的设备（可能是智能手机或平板电脑）上的外观？只需打开 Chrome DevTools 面板并单击位于左上角的设备工具栏图标。现在选择设备类型。

优化累积布局偏移
Core Web Vitals 的世界对于优化网站性能会变得越来越重要吗？这就是调试累积布局移位 (CLS) 事件很有用的原因。

该通道位于体验部分。我们很清楚，这个网页故障与页面加智利电话号码库 载后元素的浮动有关，很难评估和记录。总而言之，这并不像加载网页那样可以观察到十分之几。然而，Chrome DevTools 性能面板中有一个部分可以为您提供帮助。

混凝土测量 chrome 开发工具
我说的是体验区域：要查找页面上导致布局移位的视觉抖动问题，您需要选择布局更改以在“摘要”选项卡中查看详细信息。您想了解转变发生的点吗？

解决方案很简单，将鼠标悬停在“移自”和“移至”字段上。因此，您可以在实验室阶段进行干预和纠正，如果一切正常，请将更改应用到网页或模板。

了解有关该主题和工具的更多信息
如果您想了解 Core Web Vitals 宇宙的演变、该主题将如何发展以及它在优化网页和在线项目工作中的重要性，您可以遵循在线活动开发人员的课程。chrome .com/devsum​​mit。关注一下，很有趣！

欲了解更多信息： 如何选择插件来加速 WordPress

您想优化您的网站吗？
Chrome DevTools 对于实现这一目标当然至关重要，但有一点需要补充：您需要了解指标和技术发展，实施更改是基本步骤，为了获得最