JS加载执行有几种不同的情况，正常流程、带有defer 属性、带有async 属性。下面是对这几种不同的情况进行描述。
正常流程
1.浏览器一边下载HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
2.解析过程中，浏览器发现<script> 标签，就暂停解析，把网页渲染的控制权转交给JavaScript 引擎。
3.如果<script> 标签引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
4.JavaScript 引擎执行完成，控制权转交给渲染引擎，恢复往下解析HTML 网页。
注意：
1.加载外部脚本时，浏览器会暂停页面渲染，等待脚本下载并执行完成之后，再继续渲染。原因是JavaScript 可以修改DOM，所以必须吧控制权让给它，否则会导致复杂的线程竞赛的问题。
2.如果外部脚本加载时间很长（一直无法完成下载），那么浏览器就会一直等待脚本下载完成，造成网页长时间失去响应，浏览器就会呈现“假死”状态，这称为“阻塞效应”。
3.当有多个<script> 标签时，浏览器会同时并行下JavaScript 文件，但是，执行时会保证先执行前面的JavaScript 文件，然后执行后面的JavaScript 文件，即使后者先下载完成，也是如此。也就是说，脚本的执行顺序由它们在页面中的出现的顺序决定，这是为了保证脚本之间的依赖关系不受到破坏。
4.解析和执行CSS， 也会产生阻塞效应。FireFox 浏览器会等到脚本前面的所有样式都下载并解析完，再执行脚本；Webkit 则是一旦发现脚本引用了样式，就会暂停执行脚本，等到样式表下载并解析完，再恢复执行。
5.对于来自同一域名的资源，比如脚本、样式表、图片文件等，浏览器一般有限制，同时最多下载6~20个资源，即最多同时打开的TCP 连接有限制，这是为了防止对服务器造成太大压力。如果是来自不同域名的资源，就没有这个限制。所以，通常把静态文件放在不同的域名之下，以加快下载速度。
带有defer 属性
1.浏览器开始解析HTML 网页。
2.解析过程中，发现带有defer 属性的<script> 标签。
3.浏览器继续往下解析HTML 网页，同时并行下载<script> 标签加载的外部脚本。
4.浏览器完成解析HTML 网页，此时再回过头执行已经下载完成的脚本。
注意：
1.有了defer 属性，浏览器下载脚本文件的时候，不会阻塞页面渲染。下载的脚本文件在DOMContentLoaded 事件触发前执行（即刚刚读取完</html>标签），而且可以保证执行顺序就是它们在页面上出现的顺序。
2.对于内置而不是加载外部脚本的script 标签，以及动态生成的script 标签，defer 属性不起作用。另外，使用defer 加载的外部脚本不应该使用document.write 方法。
带有async 属性
1.浏览器开始解析HTML 网页。
2.解析过程中，发现带有async 属性的<script> 标签。
3.浏览器继续往下解析HTML 网页，同时并行下载<script> 标签中的外部脚本。
4.脚本下载完成，浏览器暂停解析HTML 网页，开始执行下载的脚本。
5.脚本执行完毕，浏览器回复解析HTML 网页。
注意：
1.async 属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。
2.async 属性可以拨正下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行哪个脚本。另外，使用async 属性的脚本文件里面的代码，不应该使用document.write 方法。
defer 属性和async 属性
1.一般来说，如果脚本之间没有依赖关系，就使用async 属性，如果脚本之间有依赖关系，就使用defer 属性。
2.如果同时使用async 和defer 属性，后者不起作用，浏览器行为由async 属性决定。