浏览器中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); // undefinedvar i = 1;alert(i);
</script>

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

<script>var i;alert(i); // undefinedi = 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并执行的过程暂时描述到此，后期继续补充。

转载于:https://www.cnblogs.com/tesky0125/p/4619554.html

浏览器中Javascript的加载和执行相关推荐

HTML 中 JavaScript 的加载方式
HTML中 JavaScript 的加载方式前言相信各位前端的小伙伴都用过script元素,今天我们就来好好聊一聊它. script元素将JavaScript插入HTML的主要方法是使用〈〉元素 ...
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
JavaScript 的性能优化：加载和执行
概览无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
html 执行外部js的函数,javascript – Chrome扩展程序：加载并执行外部脚本
我无法在我的chrome扩展程序中加载和执行外部js-script.看起来和 this question一样,但我仍然无法弄清楚为什么它在我的情况下不起作用. 我的想法是,我希望在我的内容脚本中有一些 ...
高性能javascript 文件加载阻塞
高性能javascript javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序: 如果将脚本放在head内,那么再脚本执行 ...
高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响优化页面加载性能的原则之一是将scri ...
script标签的加载解析执行
看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 html页面中的<script>标签中的内容(直接 ...
25.使用getScript()方法异步加载并执行js文件
使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件,它的调用格式如下所示: jQuery.getScript(url,[callback])或$.getScript( ...
vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法
详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...

浏览器中Javascript的加载和执行

浏览器中Javascript的加载和执行相关推荐

最新文章

热门文章