JavaScript的阻塞特性是所有浏览器在下载 JavaScript代码的时候,会阻止其他一切活动,比如其他资源的下载,内容的呈现等,直到 JavaScript代码下载、解析、执行完毕后才开始继续并行下载其他资源并渲染内容。
为了提高用户体验,新一代浏览器都支持并行下载 JavaScript代码,但是 JavaScript代码的下载仍然会阻塞其他资源的下载(例如图片、CSS文件等)。
为了防止 JavaScript修改DOM树,浏览器需要重新构建DOM树,所以就会阻塞其他资源的下载和渲染。
嵌入的 JavaScript代码会阻塞所有内容的呈现,而外部 JavaScript代码只会阻塞其后内容的显示,两种方式都会阻塞其后资源的下载。也就是说,外部脚本不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。
CSS本来是可以并行加载的,但是当CSS后面跟着嵌入的 JavaScript代码的时候,该CSS就会阻塞后面资源的下载。
而当把嵌入的 JavaScript代码放到CSS前面时,就不会出现阻塞的情况了(在IE6下CSS都会阻塞加载)。
根本原因是因为浏览器会维持HTML中CSS和 JavaScript代码的顺序,样式表必须在嵌入的 JavaScript代码执行前先加载、解析完。而嵌入的 JavaScript代码会阻塞后面的资源加载,所以就会出现CSS阻塞资源加载的情况。