CSS和JS加载对HTML解析有什么影响

@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，那么先前的解析就是无用功，所以JS文件会阻塞解析。
   但是在实际开发中，我们本不想加载JS脚本的时阻塞DOM解析，因为这会使得用户体验差。那么有没有解决方法呢？
   首先是在script标签中加入async属性或者defer属性，也就是异步加载或者延迟