布局和WEB效能

在初始頁面載入問題之外，「布局顛簸」是我在動態web應用程式中看到的最常見的效能問題。對於單頁應用程式尤其如此，它可以動態構建和銷毀檢視。但是，我常常對我遇到的web開發人員的數量感到驚訝，他們不知道導致瀏覽器做不必要的布局的模式（在mozilla社群中也稱為「重排」）。如果您使用webkit瀏覽器進行開發，可以使用大量工具來指出這些問題。

與幾乎所有其他ui工具包一樣，您的web瀏覽器具有自動布局的概念，其中頁面中的元素新增css樣式並指出螢幕上每個元素應該出現的位置。這可能是乙個昂貴的過程，並且由於顯而易見的原因，費用與頁面中元素的數量成比例增長。讓開發人員遇到麻煩的部分是web瀏覽器使用按需模型進行布局。它避免計算頁面的布局，直到它真正需要知道螢幕上的某些內容會出現。然而，這以令人驚訝的方式與dom api互動。考慮以下**：

elementa.classname = "a-style";
var heighta = elementa.offsetheight;  // layout is needed
elementb.classname = "b-style";       // invalidates the layout
var heightb = elementb.o

訪問offsetheight是dom api的一部分，需要瀏覽器具有最新的布局。重要的是要意識到改變樣式可能會使您剛剛完成的所有工作無效，因此第二次請求offsetheight需要執行另乙個布局。有時這是你的意圖，但更常見的是第二種布局是完全浪費的工作。比較，例如，這個類似的片段：

elementa.classname = "a-style";
elementb.classname = "b-style";
var heighta = elementa.offsetheight;   // layout is needed and calculated
var heightb = elementb.offsetheight;   // layout is up-to-date (no work)

由於這種行為，複雜的web應用程式在測量（計算）和更新（無效）布局時必須要注意。在我的簡單示例中，很容易發現問題，但是當使用解耦元件正確構建ui時，這可能是一項更加困難的任務。正確封裝ui元件實際上往往會使除錯這些問題變得更加困難，因為每個小部件都傾向於測量構造所需的事物，以最小化其抽象洩漏的程度。

曾經有一段時間發現這些問題非常困難。我曾經保留了所有開源瀏覽器的檢測版本，並且有一套針對ie的大量黑客攻擊（其中包括對本機**進行前導修補）。雖然chrome的情況已經好多了。幸運的是，修復chrome中的布局問題也會延續到其他瀏覽器。我這樣選擇的工具是speed tracer。不過，我有點偏頗，因為我建造它（當然有很多幫助）。還有乙個直接內置於chrome的dev tools中的面板，名為timeline。您在timeline和speed tracer中找到的跟蹤資料幾乎相同，因為timeline實際上建立在我們為speed tracer新增的儀器上。我仍然發現speed tracer對資料的呈現更加直觀，但同樣，我確實設計了大部分資料。如果您可以在timeline面板中找到自己的方式，那麼它確實具有積極開發並定期更新功能的好處。例如，他們最近新增了一種幀模式，用於逐幀組織定時資料。

廣州vi設計公司

如果不舉乙個例子，談論這個問題對我來說是愚蠢的。我在下面嵌入了乙個簡單的圖形，並新增了兩個按鈕來更新該圖形中的一些元素。第一種使用受布局顛簸影響的策略。第二個沒有。我將跳過詳細分析，以鼓勵您嘗試上面提到的工具。但是，**只是嵌入了我之前描述的兩種模式。

示例請見原文，這裡只是不能操作的

在我自己的膝上型電腦上使用chrome，第乙個策略大約需要250毫秒，第二個策略只需大約15毫秒。鑑於兩者表現相同，這是乙個相當大的差異。隨著應用程式越來越大，dom元素越多，應用於這些元素的樣式越多，問題就越嚴重。實際上，由於布局顛簸，我實際上看到非常大的應用需要幾秒鐘才能完成看似微不足道的更新。

當開發人員意識到存在這個問題時，他們正確地想知道dom api中可能導致布局的所有屬性和功能。有很多。我在2023年為webkit收集了乙份清單，我在下面列出了這個清單。然而，乙個更難回答的問題是，元素風格的變化會導致其布局失效。回答這個問題通常需要試用，錯誤和良好的工具，比如前面提到的兩個。

請記住，我只列出與html相關的物件。我故意忽略了webkit字首api和svg物件，但其中許多也可能導致布局。乙個令人驚訝的條目是element.innertext。

布局和WEB效能

Web效能 Css，JS 裝載和執行

web前端布局之flex布局

前端移動web 布局 flex布局

布局和WEB效能

Web效能 Css，JS 裝載和執行

web前端布局之flex布局

前端移動web 布局 flex布局

相關推薦