demo.html
<html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> document.addEventListener("DOMContentLoaded", function () { console.log("content loaded"); console.log($); f(); }) function f() { console.log(document.querySelectorAll("h1")); } </script> </head> <body> <h1 style="color:red">這是紅色的3</h1> <h1>head</h1> <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script> <script> console.log("parse finished"); </script> </body> </html>
在body最后有一段請求外部js的鏈接。
既然dom的解析完成是遇到</html>,那么在</html>之前的外部請求不就照樣阻塞dom樹的形成么，那么在這個js下載執行完成前，應該一直空白的，換句話說這個和將請求放在head中阻塞dom的結果不是一樣的么。然而實際效果是頁面上很快出現了文字，然后控制台過了很久才有輸出。
因為現代瀏覽器除了dom解析完成之后渲染外，為了提高用戶體驗，會有個first paint。部分內容將被解析並顯示，也就是瀏覽器能夠渲染不完整的dom