背景
昨天工作時遇見一個問題，問題是要求在頁面渲染出圖像之前刪除一個dom節點，但是由于一開始綁定在window.load的事件上，這會造成頁面上dom節點的一閃而過，這對用戶的影響是有的，那么如何才能在渲染出圖像之前將dom節點刪除呢？?? DOMContentLoaded就可以做到，因此下文就是對DOMContentLoaded事件的學習與理解。
DOMContentLoaded事件
當初始HTML文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架完成加載。(MDN)
問題
上述是MDN的官方說法，但是我們在網絡上又經常看見另外一套說法，如該文章：
DOM文檔加載的步驟為
解析HTML結構。
加載外部腳本和樣式表文件。
解析并執行腳本代碼。
DOM樹構建完成。//DOMContentLoaded
加載圖片等外部文件。
頁面加載完畢。//load
在第4步，會觸發DOMContentLoaded事件。在第6步，觸發load事件。
通過對比文章內容，對圖片加載，子框架加載，以及DomContentLoad事件的觸發時機并無異議，那么CSS樣式表是否必須加載完成之后才會觸發DOMContentLoaded呢？網上的說法貌似是需要加載完成才能觸發，但是MDN給出的說法則是不需要等待樣式表，那么我們自己寫代碼測試一下吧。??
上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.addEventListener('DOMContentLoaded',function(){
var obj = document.getElementsByClassName('divToTest')[0];
console.log(obj);
obj.parentElement.removeChild(obj);
})
</script>
<link rel="stylesheet" type="text/css" href="css/CSS_loadingSequence2.css" />
</head>
<body>
<div class="divToTest">
</div>
</body>
</html>
css/css_loadingSequence2.css
.divToTest{
width: 300px;
height: 300px;
background: green;
}
然后設置chrome的網絡狀態：
準備就緒接下來就是運行啦：
由上述測試可見DOMContentLoaded無需等待CSS樣式表的加載就會執行。
其實這個問題更往下分析就是CSS樣式表加載是否阻塞HTML的解析，結論是：CSS樣式的加載不阻塞HTML的解析，而CSS的執行會阻塞解析。推薦一篇文章css加載會不會造成文檔解析阻塞？有興趣的同學可以閱讀。
總結
由此可見遇見問題多看標準，?? 網上結論要通過自己測試總結，因為文章也有很多內容是推測的并非事實，真理總在自己手中。希望本門對大家有所幫助。
行文倉促，如有問題，還望指出。??
