标签：
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport，发现其中的基础还是值得分析的。
从标题分析，可以加个Javascript的加载和执行分为两个阶段：加载、执行。而加载即浏览器下载JS脚本的过程，执行时浏览器JS引擎解释执行的过程。
接下来先分析JS脚本加载的过程，加载方式可分为同步加载和异步加载。
同步加载即浏览器加载JS过程中停止对HTML元素的解析，保证JS执行的安全一致性，但如果JS中包含大量计算时，会导致阻塞页面的渲染。常见的JS加载是通过<script>标签置于<head>内加载，这种方式会导致加载时阻塞对HTML元素的渲染，导致页面短暂空白。因此，建议将<script>便签置于</body>前，可以在HTML渲染完成后加载JS文件。即
传统加载方式：
<head>
<script src=‘yourscript.js‘></script>
</head>
推荐加载方式：
<head></head>
<body>
...
<script src=‘yourscript.js‘>
</script>
</body>
异步加载也称动态加载，即在后期动态加载JS。常见的动态JS加载有以下几种方式。
1.document.write(‘yourscript.js‘);//这种方式在各浏览器行为不一致
2.动态修改<script></script>的src
3.动态插入<script>标签，可在<script>脚本中，也可在onload中
<script>
var s = document.createElement(‘script‘);
s.type = ‘text/javascript‘;
s.src = ‘yourscript.js‘;
var x = document.getElementsByTagName(‘script‘)[0];
x.parentNode.insertBefore(s, x);
</script>
4.XHR结合eval
var xhr = new XmlHttpRequest();
xhr.onreadstatechange = function(){
if(xhr.readyState==4)
{
if(xhr.status==200)
{
eval(xhr.responseText);
}
}
}
xhr.open("GET",yourscript.js‘,true);
xhr.send(null);
5.defer和async属性。
<script src=‘yourscript.js‘ async/defer ></script>
二者都在onload之前执行完成，可用于不修改DOM的JS脚本加载。不同之处在与，defer下载的JS按顺序执行，而async不能保证执行顺序。
接下来分析脚本的执行流程。执行可分为解释与执行两个过程。
在脚本解释的过程中，会对var和function做不同的处理，var定义的对象赋值undefined，而function定义的对象赋值为函数体。
在后期补充例子解释这部分，理解为什么提倡单一var的原理。
在脚本执行过程中，会阻塞HTML元素的渲染，当脚本执行完成后，接着渲染后续HTML。对外部脚本会将JS加载完成并执行。页面中的<script>以块为单位执行，块内共享变量。
待补充案例。
关于浏览器加载JS并执行的过程先暂时描述到此，后期继续补充。
标签：
原文地址：http://www.cnblogs.com/tesky0125/p/4619554.html
