HTML 中 CSS 應該永遠位於 JavaScript 之前嗎？

應該始終讓 CSS 優先於 JavaScript 嗎？

傳統觀念：

長期以來，一種普遍的建議是將CSS 放在JavaScript 之前，理由是：

• 渲染執行緒需要呈現頁面的所有樣式資訊。
• 如果 JavaScript 包含在前面，JavaScript 引擎必須先解析所有內容，然後再繼續執行下一組資源。
• 這表示渲染線程無法完全顯示頁面，因為它沒有所需的所有樣式。

實際測試：

然而，實際測試顯示了截然不同的結果：

• JavaScript 不會開始執行，直到所有CSS 都下載完畢。
• 因此，將 JavaScript 包含在前面似乎更有效，因為 JavaScript 執行緒可以運行更長的時間。

結論：

• 對於桌面瀏覽器：在現代瀏覽器中，將CSS 放在JavaScript 之前不會帶來效能提升。在某些情況下，甚至會導致效能下降（例如 CSS 延遲時）。因此，您應該在 JavaScript 之後**連結到外部樣式表。
• 對於行動瀏覽器：證據表明，一些行動瀏覽器（例如​​ Android 版的 WebKit）仍然不會進行預測性解析。在這類瀏覽器上，將腳本放在 CSS 之前可能會造成效能損失。

技術解釋：

• 歷史悠久的瀏覽器會在遇到<script> 標記時停止解析HTML，下載腳本並執行它。而遇到 <link> 就會在取得 CSS 檔案的同時繼續解析 HTML。 </script>
• 現代瀏覽器實現了預測性解析，其中瀏覽器會「預測」HTML並提前下載資源，包括腳本。

瀏覽器支援：

• 大多數現代桌面和行動瀏覽器（約 85%）都支援預測性載入。

注意事項：

• 如果舊瀏覽器的效能不受關注，則在桌面瀏覽器上將腳本放在CSS 之後是一個明智的選擇。
• 在行動瀏覽器上，最佳實踐可能仍因裝置和作業系統而異。

以上是HTML 中 CSS 應該永遠位於 JavaScript 之前嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！