HTML页面中JS的加载原理： 在加载HTML页面的时候，在外链的JS文件中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行它，在这个过程中，页面的渲染和用户互交完全被阻塞。由于现代浏览器都允许并行下载JS文件，因此<script>标签在下载外部资源时不会阻塞其他的<script>标签。遗憾的是JS下载过程仍然会阻塞其他资源的下载。
浏览器从页面顶部逐行读取代码后，不同的产品使用了不同的策略。
chrome采用的方式是立刻渲染读取到的html，如果遇到js脚本则立刻执行，执行完成后继续渲染下面的html。
firefox是先逐行读取html代码，但并不立即渲染。如果读到js代码就会即刻执行，等页面读取完毕一并渲染html。
经过对二者的测试，得出chrome的方式使用户会尽早的看到页面样式，体验更好。
<!DOCTYPE html>
<html>
<head>
<title>测试浏览器渲染</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: navy;
color:#ffffff;
}
</style>
</head>
<body>
<img src="icon.png">
<div>渲染html</div>
<div id="test">正在执行...</div>
<script type="text/javascript" src="jquery.js"></script>
<script>
var end = 400000;
for(i=1;i<end;i++)
{
$("#test").html("执行js"+i);
}
</script>
</body>
</html>
分别在chrome v45.0.2454.93 m和firefox v42.0测试。