在動態html中呈現外部，內部，內聯CSS樣式之間的區別

Question

有一篇關於瀏覽器內部工作原理的文章。 在“動態頁面”下，說明了如何使用JavaScript將動態CSS應用於網頁。

頁面可能由於JavaScript或觸發交互過程的部分用戶交互而改變：

（來源： https : //developer.mozilla.org/en/Introduction_to_Layout_in_Mozilla ）

• 如果添加或刪除了DOM元素，則瀏覽器的典型響應是按照幾乎先前的順序執行前面描述的渲染過程。

• 如果更改了元素的樣式屬性，則需要重新計算該元素的樣式，並重新繪制頁面並重新繪制

  • 瀏覽器可以通過對樣式進行重新批處理來對它們進行排隊，從而對其進行優化
  • 但是，腳本通常會回讀它們剛進行的更改，這需要刷新重新樣式化隊列
  • 為了獲得更好的性能，請批量更改樣式，然后批量讀取它們，以減少刷新隊列的頻率

• 一些樣式更改比較便宜：

  • 更改大小/位置將不需要重新計算樣式，而僅需要重排和重新繪制

  • 顏色變化不需要重塗，而只需重塗

  • 滾動也不需要重新計算，但是通常僅以增量方式進行重新繪制，甚至可能不需要完全重新繪制（但固定背景圖像之類的東西則需要完全重新繪制）。 因此，通過程序滾動來移動元素比通過修改樣式屬性來移動元素要快

• 由於位置或大小的變化，重流通常是遞歸的（從根到葉子）

  • 子級中的某些屬性更改可以觸發整個祖先直到根的更改。 示例：高度變化

  • 父級中的某些屬性更改可以觸發所有后代的更改，直到葉子。 示例：寬度變化

  • 瀏覽器可以檢測到只有一部分樹可以更改，並且僅在該子樹上進行重排

但是我不明白，當使用javascript動態應用css樣式更改時，是否對所有類型的css樣式更改應用相同的過程順序（外部，內部和內聯）？ 還是有些不同？ 如果不同，則渲染過程的哪些部分將應用於外部？ 內部？ 和內聯？

Answer 1

如果使用外部CSS，則流量將與鏈接中所示的相同。 否則，如果您使用內部或內聯CSS，最終CSS僅在HTML頁面中，因此它將在HTML的第一步中加載。

但是，不建議添加內聯或內部樣式，因為這也會花費很多時間來顯示基本頁面。

Answer 2

是。 大部分過程是相同的。 但是請記住，只有已更新的元素上的樣式才會重新繪制。 您不必重新繪制整個頁面，只需重新繪制已更改的區域即可。

始終將樣式與標記分開是一種很好的做法。 HTML應該作為頁面的結構存在於其文件中，然后CSS應該存在於其文件中，以在外部資源中維護對設計的控制，以便於編輯。 腳本編寫也是如此。