与布局垃圾的斗争

网页渲染完成并不意味着其布局就固定不变。媒体资源（如图片）的加载可能会因其大小导致布局发生变化，在流式布局中，图片大小通常只有在渲染后才能确定。字体加载和重排布局也会造成这种情况，或者XHR请求会带来更多内容添加到页面上。我们一直在努力防止布局发生抖动——这就是我所说的布局抖动（layout jank）。它很烦人，没有人喜欢它。最好的情况是，它会让你在阅读时失去位置；最坏的情况是，你可能会点击到自己根本不想点击的东西。

在尝试理解新的布局不稳定性API并与朋友们讨论时，Eric Portis 说了一些非常有见地的观点。基本上，布局抖动是一个问题，并且正在多方面努力解决：

• 从内容/创作层面解决问题：我们现在有了intrinsicsize作为HTML属性和aspect-ratio作为CSS属性。两者都是为了解决这个问题而设计的，尽管它们目前还没有很好的浏览器支持，需要使用DIY的长宽比盒子来代替。此外，像更改UA样式表以扩大aspect-ratio有效性的想法也是如此。
• 从浏览器行为层面解决问题：滚动锚定也是为了解决这个问题而设计的。它现在默认启用是一个很大的进步。如果您需要，仍然可以通过CSS（通过overflow-anchor）来控制它。
• 衡量问题和原因：布局不稳定性API就是为此而设计的，它可以用来启用监控它的工具。

以上是与布局垃圾的斗争的详细内容。更多信息请关注PHP中文网其他相关文章！