前言：

　　向HTML页面中插入JavaScrip的主要方法，就是使用<script>标签。主要探讨<script>标签的在HTML页面的渲染机制。对应的业务场景：从js的加载机制，去优化首次加载页面白屏时间过长的问题

要点：

　　1.script标签用外链的src引入文件时，内嵌的js代码无效。

　　2.只要不存在defer和async属性，浏览器都会按照script元素在页面中出现的先后顺序对他们依次进行解析（文件下载和代码执行）。换句话说，在第一个script元素包含的代码解析完成后，第二个script包含的代码才会被解析，然后第三个，第四个……。这种方式会阻塞页面的渲染。

　　3.defer：延迟脚本。脚本会被延迟到整个页面都解析完毕后再运行。相当于告诉浏览器立即下载，但是延迟执行。这种方式不阻塞页面的渲染。h5规范要求脚本按照出现的顺序执行，因此第一个延迟的脚本会优先于第二延迟脚本执行，都会先于DOMContentLoaded事情。在现实中，可能顺序不能一定得到保证。ps：用最新谷歌浏览器测试过，能保证顺序。

　　4.async：异步脚本。与defer类似，告诉浏览器立即下载文件，但是延迟执行，也不阻塞页面渲染。但是不能保证执行顺序。所有，带有async属性的script文件之间无法保证顺序，不应该有包含互相依赖的js代码。

补充：来自阮一峰博客对defer和async异同点说明

defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

总结：

　　一点思考：

　　1、一般性都要保证js文件的引入顺序就是它的执行顺序，所以async慎用。

　　2、script的解析包括：js文件的下载和执行。下载可不阻塞页面渲染，执行一定会阻塞页面渲染（有待考究）。

　　3、假如defer在现代浏览器（特别是移动端），都能遵循h5规范按顺序执行。那么是否可以在每个script标签加上defer属性，优点如下：1.js文件解析不阻塞HTML页面的渲染。2.js文件解析可分为两步，第一步下载js文件，相较不加defer属性的多个script标签而言，加了defer可实现异步并行下载script文件（有待考究）；第二部解析js文件，按顺序同步执行js代码。以此达到最快的js解析速度（下载js文件效率提高）。

　　以上总结是一些思考，有些地方有待demo测试验证。