---
tags: Head
---
# 網頁的生命週期 - Load 與 DOMContentLoaded的區別

Load：事件是在完成js 、css樣式表和image等資源加載完成時被觸發
提示：load是html裡面的資源下載完，但不包括動態引入的js，只管 html 文件裡面標籤引入的資源

DOMContentLoaded：是在HTML文檔的加載並解析完成時觸發，而不用等待CSS樣式表和 image的加載完成

理解的幾點
1）js 加載於欲操作的HTML元素之前，代碼有可能出錯，因為DOM結構還沒有加載完成，若js中操作DOM會報錯
2） js 的下載是並行的，解析也是並行的，但執行時串行的
3） js 會在下載完成後立即解析和執行，這時js會占用cpu資源，導致沒有 cpu資源去渲染，從而阻塞渲染
4）load資源加載完時，DOM未必繪製完
5）js沒加載完，但是html是可以解析完並且繪製出來的

1）defer屬性的腳本瀏覽器會立即下載，但延遲執行，延遲到瀏覽器遇到</html>標籤後再執行
2）async屬性的腳本都在它下載結束之後立即執行