爲什麼GIF會導致Chrome在每一幀都佈局整個文檔？

我一直在努力尋找/防止爲什麼我的網頁在Firefox中凍結，我使用Chrome的開發人員時間線來跟蹤佈局和塗料（在Chrome上不會出現凍結，這是Firefox的一個大問題，大約有300 UI瓷磚在頁面上）爲什麼GIF會導致Chrome在每一幀都佈局整個文檔？

這是可以理解的gifs導致在每一幀的油漆（遠遠比gif本身更大的油漆面積，但不幸） - 但我不明白爲什麼Chrome報告「整個文檔」佈局之前框架 - 因爲GIF的大小是不變的，它應該只會導致我認爲的油漆

我猜這些「整個文檔」佈局導致firefox凍結當文檔上有很多元素

（我研究過迴流/佈局，深入重新繪製，但沒有任何物品覆蓋的GIF，通過查看時間表，我要說的GIF是主要的資源豬）

來源

2014-09-28 Kaan Soral

更仔細的檢查和測試之後，我能夠防止整個文檔的佈局通過利用GIF div容器，如：

<div style="position: absolute; right: 0px; top: 10px; width: 45px; height: 15px; overflow: hidden"> 
    <img src="/gif_url" style="vertical-align: top"/> 
</div>

問題可能是因爲GIF的定位出現，既浮動情況：右的位置是：絕對的，即使在img元素具有固定的高度和寬度（可能與其他定位樣式一樣）

我沒有深入探討這個問題，看不到什麼觸發了完整的文檔佈局，但是，什麼不是，好像是一個好主意，把每個gif都封裝在一個blocker div中，以確保瀏覽器計算出部分佈局（我猜有可能是的風格，或許能達到這個內嵌的組合，但我還沒有推開它尚未）

- EDIT（多檢查後） -

原來根本原因是引導2.3.2的img的默認「最大寬度：100％」風格

刪除該定義佔用佈局由gif造成

如果頁面上即使有一個gif，該樣式也應該被刪除/取消 - 否則在每個gif框架中，整個文檔將由瀏覽器進行佈局（在這種情況下爲chrome，可能還有其他人）

來源

2014-09-28 03:09:36

觀察到這樣一個小的gif（頁面和UI中不是非常重要的部分）可能導致此類中斷也很有趣。我很高興終於開始使用Chrome時間軸，爲我開啓了一個新世界 – 2014-09-28 03:13:37

爲什麼GIF會導致Chrome在每一幀都佈局整個文檔？

回答

相關問題