提高网页稳定性：布局不稳定性测量与新接口建议

在现代网页设计和开发中，布局稳定性是用户体验的一个重要方面。一个网站在加载内容或执行某些操作时，页面布局发生变化，可能会引起用户体验的严重下降。这种布局的变化被称为布局不稳定，它会使用户的阅读和交互中断，导致阅读或交互的连贯性被破坏。为了改善这一问题，提出了一种新的规范，即布局不稳定性规范，以量化和减少网页布局不稳定。 该规范定义了一个新的性能指标“布局偏移分数”（Layout Shift Score），这是一种用于测量网页布局不稳定性的方法。该分数由用户代理在浏览会话期间计算，并将通过新的接口公开。布局偏移分数将帮助开发者和网站运营者了解他们的页面在用户体验方面存在的问题，并采取措施以提高网页的稳定性。 布局偏移分数的计算涉及动画帧（也称为“时间点”），在每个动画帧中会计算布局偏移得分。布局偏移得分是对该帧期间文档中可见布局不稳定性的严重程度的一个近似值。如果没有布局不稳定性，动画帧的得分是0。得分越高，说明对应的不稳定度越高。计算得分时会使用一组特定的值和两个中间值，这些值反映了视觉元素的变化程度。 在定义布局不稳定性的过程中，引入了“转移节点”（shifted nodes）的概念。转移节点是指在两个连续动画帧中视觉表示的起始位置发生变化的DOM节点，而且这种变化不是由用户输入（如点击、按键等）引起的。简单来说，就是节点在屏幕上的位置移动了。需要注意的是，如果节点的大小发生变化，但起始位置保持不变，这样的节点不被视为转移节点。这有助于排除因节点尺寸变化（比如通过附加子项）而导致的位置变化。 在布局不稳定性规范中，有两个关键的中间值：可见内容的最大布局偏移（Maximum Layout Shift，简称MLS）和布局偏移分数（Layout Shift Score）。这些中间值帮助计算每帧的布局偏移得分，并最终得出整个会话的布局偏移分数。这些得分能够反映用户所经历的布局不稳定程度，是性能优化的重要参考。 为了解决布局不稳定性问题，开发者需要关注那些可能导致页面布局变化的元素，比如异步加载的图像、广告、视频等。开发者可以采取措施，例如提前指定图像大小、避免在内容加载时动态改变布局、使用CSS transform属性代替对布局影响较大的属性等方法，来减少布局的不稳定性。 此规范的提出对优化网页性能有着重要的意义，它有助于提升用户体验，减少因布局变化带来的困扰。同时，它也为开发者提供了一种新的衡量和优化网页性能的方法。最终，布局不稳定性规范将成为网页性能评估和优化中的一个重要工具。 标签中的“Makefile”可能与该主题不直接相关，但在软件开发中，Makefile文件用于自动化编译和构建过程。这暗示了，虽然这个压缩包子文件可能包含了与布局不稳定性相关的代码或工具，但具体内容可能需要结合实际的压缩文件内容来进一步理解。 压缩包子文件的文件名称列表中的“layout-instability-master”可能表示这是一个与布局不稳定性问题相关的代码库或项目，其中“master”表明这可能是项目的主分支或版本，包含了项目的核心功能和最新的更新。