[js]script,link位置以及渲染机制

baclt 2022-05-07 PM 11℃ 0条

script只指外链script
浏览器会在开始就并发下载资源,js,css图片等,所以在读取到script的时候有两种状态可能,下载完和没下载完

从上往下构建dom和cssom,然后去生成renderTree去进行渲染

同步script
主要是同步script,同步script会阻塞解析
碰到同步script会先检测是否下载完,如果没下载完会等待下载完然后执行完然后再接着进行dom和cssom的构建

首屏问题
主要要注意的就是首屏问题,如果碰到在body内的第一个同步script,且该script没有下载完,会先把前面的dom渲染出来,css也是根据前面解析的cssom
如果下载完了就单纯阻塞解析,并不会把前面的渲染出来
算是浏览器的一个优化机制,如果script连下载都还没下载完,就先把前面的渲染出来

defer和async
async是针对下载,读取到没下载的就先让他下载,下载完了立马阻塞解析,执行脚本
如果下载了就在同步的后面直接执行
defer是直接等待dom解析完(并不是渲染完),在domloaded钩子触发前执行

link位置问题
如果link放到body后,则会在第一次渲染完过后再次更新cssom导致重绘

一些问题
有说js会等待前面的link加载完成才去执行,从而阻塞解析,有待验证

标签: js

非特殊说明,本博所有文章均为博主原创。

评论已关闭