一、原因
（1）JS引擎
早先时候浏览器的内核由两部分构成，分别是渲染引擎和JS引擎，但是谷歌推出V8引擎后，使得JS运行速度加快不少，所以导致JS引擎独立出来，目前说到浏览器内核一般都只谈论渲染引擎。
（2）JS引擎工作原理
1、获得服务器传回的文档后，浏览器渲染引擎开始解析文档
2、当解析是遇到script标签时，会暂停解析，将控制权移交到JS引擎
3、根据script引用的资源的情况，向服务器发起请求，进行JS脚本文件加载，然后执行（放入内存）
4、等JS引擎执行完毕后，再将控制权还给渲染引擎，渲染引擎继续进行文档解析
正是由于这种控制权的移交，所以一旦资源加载时间过长，网页就会进入白屏状态或者卡死状态，直到加载完成。所以需要进行JS脚本文件加载优化处理。
PS：浏览器支持并行加载静态文件（如图片、css文件、js文件），但是有限制，比如Chorme在HTTP 1.1协议下，只支持最多6个文件并行加载，所以还要考虑文件合并等方式。
二、优化方案
（1）放置在<body>底部
优先考虑让渲染引擎渲染出DOM树来，即尽早触发DOMContentLoaded事件，使得页面脱离白屏状态。但这个方案在移动端，如苹果safari、安卓browser里无效。
（2）defer加载（仅指加载JS文件）
使用方法:
<script src="script.js" defer></script>
这是HTML4.0提出的属性，严格按照<script>脚本顺序加载，但会延迟执行JS脚本，即加载完成后继续解析文档，文档解析完成后再执行JS脚本。
（3）async加载（异步加载JS文件）
<script src="script.js" async="async"></script>
这是HTML 5新定义的<script>属性。当渲染引擎解析文档时，遇到script标签不会停止解析，而是继续解析，同时并行加载<script>标签中请求的资源。当<script>中的资源加载完成后，此时渲染浏览器才会暂停解析文档，将控制权交给JS引擎，执行指定脚本文件，执行完成后再移交控制权给渲染引擎继续解析文档（解析未完成的情况下）。
async属性通过异步加载文件的方式解决了阻塞的问题，但是也因为异步执行的问题，导致文件加载顺序和执行顺序不同。
（4）动态添加<script>加载
通过JS动态添加<script>标签进行加载，但是这样会导致JS文件是在load事件发生后在加载的，失去了浏览器自身并行加载的优势。
（5）使用jQuery中的getScript（）方法
$.getScript（"script.js",function(){...}）; 回调函数在成功获取文件后执行。