为什么scrip标签最好放在底部，link标签最好放在头部

前言

作为一个前端开发者，你可能听到过这么一个问题为什么script标签最好放在底部，link标签最好放在底部。今天呢，我们就从加载CSS文件和JS脚本分别对页面解析的影响来解释这个问题。

@import和link标签有什么区别

在解释文章开头这个问题之前，我们先来了解一下@import和link标签有什么区别。

1. @import只能加载CSS文件，而link标签除了加载CSS文件，还可以加载其他脚本文件，比如JS脚本文件。
2. link标签加载文件和页面加息是同时进行的，而@import加载CSS文件却是要等页面解析完才会加载。

CSS文件和JS脚本对DOM解析的影响

1. CSS文件加载不会阻塞DOM解析，但是会阻塞DOM渲染

   这里解释一下为什么CSS文件要阻塞DOM渲染不阻塞DOM解析：如果CSS不阻塞DOM渲染，那么当DOM解析完后会立即渲染出一个页面样式，当CSS加载完后，页面就会重新渲染成CSS样式，如此就造成用户体验差，渲染次数增加而导致开销大。

2. JS脚本加载会阻塞DOM解析，但浏览器会”偷看“DOM，预先下载相关资源

   同样的，也解释一下为什么JS文件要阻塞DOM解析：如果不阻塞，浏览器先解析后面的DOM，当加载完JS后，JS脚本里的内容会删后面的DOM，那么先前的解析就是无用功，所