网站加载的过程:先解析HTML,根据HTML代码自顶向下构建DOM树,并且同时构建渲染树,如果遇到js文件,就会阻塞DOM树的构建,如果遇到css文件,将阻塞渲染树的构建;
因此,script标签最好放在</body>标签的前面,因为放在所有body中的标签后面不会出现网页加载时出现空白的情况,可以持续的给用户提供视觉反馈;
而css标签应该放在<head></head>标签之间,因为如果放在</body>标签的前面,那么当DOM树构建完成了,渲染树才构建,当渲染树构建完成之后浏览器也不得不重新渲染整个页面,这样就造成了资源的浪费,放在<head></head>之间可以保证浏览器边构建边渲染,效率比较高。
注:script标签中的defer和async属性:使构建DOM树的过程和js文件的加载异步进行,即边下载外部脚本文件边执行后面的命令;
但是defer是等页面全部渲染完了之后再执行,而async是当外部脚本文件下载完了就终端渲染并执行脚本文件;
如果有多个defer脚本,会按照在页面出现的顺序加载,而多个async脚本是哪个先下载完就先执行哪个。
小结:
script标签放在</body>之前
css标签放在<head></head>之间