與佈局詹克的鬥爭

網頁渲染完成並不意味著其佈局就固定不變。媒體資源（如圖片）的加載可能會因其大小導致佈局發生變化，在流式佈局中，圖片大小通常只有在渲染後才能確定。字體加載和重排佈局也會造成這種情況，或者XHR請求會帶來更多內容添加到頁面上。我們一直在努力防止佈局發生抖動——這就是我所說的佈局抖動（layout jank）。它很煩人，沒有人喜歡它。最好的情況是，它會讓你在閱讀時失去位置；最壞的情況是，你可能會點擊到自己根本不想點擊的東西。

在嘗試理解新的佈局不穩定性API並與朋友們討論時，Eric Portis 說了一些非常有見地的觀點。基本上，佈局抖動是一個問題，並且正在多方面努力解決：

• 從內容/創作層面解決問題：我們現在有了intrinsicsize作為HTML屬性和aspect-ratio作為CSS屬性。兩者都是為了解決這個問題而設計的，儘管它們目前還沒有很好的瀏覽器支持，需要使用DIY的長寬比盒子來代替。此外，像更改UA樣式表以擴大aspect-ratio有效性的想法也是如此。
• 從瀏覽器行為層面解決問題：滾動錨定也是為了解決這個問題而設計的。它現在默認啟用是一個很大的進步。如果您需要，仍然可以通過CSS（通過overflow-anchor ）來控制它。
• 衡量問題和原因：佈局不穩定性API就是為此而設計的，它可以用來啟用監控它的工具。

以上是與佈局詹克的鬥爭的詳細內容。更多資訊請關注PHP中文網其他相關文章！