首先渲染的前提是生成渲染樹，所以 HTML 和 CSS 肯定會(huì)阻塞渲染。如果你想渲染的越快，你越應(yīng)該降低一開始需要渲染的文件大小，并且扁平層級(jí)，優(yōu)化選擇器。然后當(dāng)瀏覽器在解析到 script 標(biāo)簽時(shí)，會(huì)暫停構(gòu)建 DOM，完成后才會(huì)從暫停的地方重新開始。也就是說，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載 JS 文件，這也是都建議將 script 標(biāo)簽放在 body 標(biāo)簽底部的原因。
當(dāng)然在當(dāng)下，并不是說 script 標(biāo)簽必須放在底部，因?yàn)槟憧梢越o script 標(biāo)簽添加 defer 或者 async 屬性。當(dāng) script 標(biāo)簽加上 defer 屬性以后，表示該 JS 文件會(huì)并行下載，但是會(huì)放到 HTML 解析完成后順序執(zhí)行，所以對(duì)于這種情況你可以把 script 標(biāo)簽放在任意位置。對(duì)于沒有任何依賴的 JS 文件可以加上 async 屬性，表示 JS 文件下載和解析不會(huì)阻塞渲染。
京公網(wǎng)安備 11010802030320號(hào)