浏览器中Javascript的加载和执行

在刚学习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>
<body></body>

推荐加载方式：

<head></head>
<body>
...
<script src='yourscript.js'>
</script>
</body>

使用一个例子加上一张序列图来描述HTML加载JS/CSS的流程，其中各个步骤均是同步的，会阻塞下一步解析。

<html>
<head>
<link></link>
<script><script>
</head>
<body>
<div></div>
<script></script>
</body>
</html>

异步加载也称动态加载，即在后期动态加载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属性。

二者都在onload之前执行完成，可用于不修改DOM的JS脚本加载。不同之处在与，defer下载的JS按顺序执行，而async不能保证执行顺序。

接下来分析脚本的执行流程。执行可分为解释与执行两个过程。

在脚本解释的过程中，会对var和function做不同的处理，var定义的对象赋值undefined，而function定义的对象赋值为函数体。

我们用示例来解释上面的意思。首先看解释器对var的处理。

<script>
    alert(i); // undefined
    var i = 1;
    alert(i); 
</script>

上述代码在解释器中进行转换为：

<script>
    var i;
    alert(i); // undefined
    i = 1;
    alert(i); 
</script>

这样就能理解为什么i值为undefinded。接下来我们看看对function的处理。

<script>
    alert(func); // function(){alert('out')}
    var func = function(){
        alert('out');
    };
    alert(func); 
</script>

上述代码在解释器中进行转换为：　　

<script>
    var func = function(){
        alert('out');
    };
    alert(func); // function(){alert('out')}
    alert(func); 
</script>

这就是解释器对var和function的不同处理，function的声明和函数体定义都会被提前。

另外，脚本解释过程中，以<script>以块为单位执行，块间可共享变量。对外部脚本会将JS加载完成并执行，而且JS脚本在执行的过程中会阻塞后续HTML页面的渲染。

<script>
    alert(i); // error 该块内后续代码不执行
    i = 1;
    alert(i); 
</script>
<script>
    var j=0;    
    alert(j); //
</script>

上面这个例子解释了脚本以块为单位执行的原理，虽然第一个<script>会报异常，但并不影响第二个<script>的执行。

<script>
    var i = 1;
    alert(i); //1
</script>
<script>
    alert(i); //1
</script>

通过上例结果，可解释两个<script>之间是可以共享变量的。这也就是为什么加载jquery.min.js后，在任何<script>中都可以使用$来引用jQuery。　

关于浏览器加载JS并执行的过程暂时描述到此，后期继续补充。

posted @ 2015-09-24 15:26 tesky0125 阅读(3182) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

浏览器中Javascript的加载和执行

公告