网站加载的过程：先解析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>之间
扫一扫
1048
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
