同步加载和异步加载的理解

在浏览器解析HTML的时候，遇到script标签立即开始加载javaScript并执行，这个过程会阻塞后面内容的呈现，也就是说会是后面的标签在javaScript执行完成后才呈现，同时也会阻塞后面组件的加载，也就是说script标签后面的组件如图片等在javaScript执行完成后才开始加载，这就是我们说的同步加载，显然我们在页面上使用javaScript的时候，如果位置放置不当，将严重影响浏览器渲染的效率，所以我们一般把javaScript放在页面的最底部，避免浏览器在解析javaScript的时候出现资源阻塞。如果把script标签放在页面的首部且javaScript文件加载需要花很长的时间的话，页面会出现较长时间的白屏。
在浏览器解析HTML的时候，如果遇到标签的时候，向服务器放出请求来获得css文件，与此同时浏览器继续往下解析HTML文件，构建DOM树，这就是我们说的异步加载，这里我们可以看到，加载css文件的是时候，浏览器仍可以继续做其他的工作，所以我们一般在页面的首部就引入css文件。那么如果css文件较大，DOM树已经构建完成很久，CSSOM还没有构建完成会出现什么情况呢？不同的浏览器有不同的做法，比如chrome认为，样式都没有，painting是没有意义的，于是chrome会出现白屏，直到CSSOM构建完成；firefox观点与chrome不同，firefox认为还是给用户看点东西吧，就算样式还没加载好，要不人家用户以为咱浏览器出现问题了把咱给卸载了咋办，于是firefox会先给用户看点东西，等到CSSOM加载好了又突然把样式给加上了，吓用户一跳，这就是我们说的无样式内容闪烁。上面说javaScript是同步加载的不怎么好，css是异步加载的甚合我意，那么咱能不能把javaScript也给弄成异步加载的呢？不仅能，而且有两种方式:给script加上defer属性：有了async属性之后,加载和渲染后续文档的过程将与script.js的加载和执行同时进行,这也实现了javaScript与后续文档的异步加载,但async属性不能保证顺序,因为script.js加载好了就直接开始执行.