网页前端技术之Javascript同步加载和执行

如今的前端技术中，javascript（以下简称 js）异步加载的方案曾经很多。在研讨异步加载前，我们对同步加载了解的够多么？

同步加载大约意思为：阅读器解析文档的进程中，遇到加载 js 文件的代码，暂停文档解析，执行加载的代码，等候文件下载，等候文件中的代码执行完成，然后继续文档解析。

所以异步加载就是：阅读器解析文档进程中，遇到加载 js 文件的代码，暂停文档解析，执行加载代码，然后继续文档解析。不等候文件的下载。

同步加载的几种状况：

1、包括代码的 <script></script> 标签。虽然没有网络央求，但也可以当做是加载了文档外部的一段代码。标签内的代码按顺序执行，假设出现多个标签对，按标签对的出现顺序执行。

2、设置 src 属性的 <script></script> 标签。按标签的出现顺序执行。老的阅读器中，加载也是按顺序的：一个文件下载完成后，才末尾下载下一个文件。较新的阅读器中（IE8+ 、FireFox3.5+ 、Chrome4+ 、Safari4+），为了减小央求时间以优化体验，下载可以是并行的，但是执行顺序还是依照标签出现的顺序。

3、在 <script></script> 标签中的代码，或许经过 src 援用的文件中，运用 document.write() 来写入的 js 代码。代码中也有下面 1 和 2 两种状况，执行顺序也是依照出现的先后。在 IE 中有个例外，在 <script></script> 标签中，假定有这种 document.write(‘<script src=””><\/script>’) 加载文件的代码，则文件会放到 </script> 标签闭合处才执行。

同步加载的执行顺序：

由于中心 js 言语并不包括任何线程机制，并且阅读器端 js 也没添加任何线程机制，所以阅读器端 js 是单线程的（或许像单线程一样任务）。因此 js 代码只能按顺序执行，就算阅读器为了体验可以并行下载多个 js 文件，但就算一般文件下载的特别快，也得按顺序被执行。

同步加载的运用：

1、我们往常在网站制造开发中用的基本上都是同步加载。比如先加载一个 jQuery 库文件，接上去就可以运用 $ 符号了。原理上，是由于 js 代码的运转环境是在一个全局对象里，代码声明全局变量和函数，实践是在修正全局对象的属性，这些修正会被坚持着，所以下一段代码可以运用上一段代码声明的全局变量和函数。

2、常用于跨域央求数据的 JSONP。我们在本站声明一个回调函数，然后向外站央求一个 js 文件，文件中的代码是用外站的数据对本站函数停止调用，就完成了运用外站数据的目的。虽然函数是本站声明的，数据是外站的，外站调用本站函数，但是把它了解为同步加载和执行就复杂了。

3、前端优化中的 “脚本尽量放在页面底部” 这条规则，也很好解释。由于是同步加载和执行，js 的加载和执行都会阻塞页面的解析，假设时间长了，体验很不好，所以将脚本尽量放在底部，影响最小。

几个容易混杂的效果：

1、将 document.write(‘<script src=””><\/script>’) 这类代码，移到 window.onload 事情中，算异步加载么？

还是同步加载。这样改其实是改动了这段加载代码的执行机遇，推延到文件加载完成时才执行，但并没有改动加载的方式。

2、同步加载第 3 中状况中，假设嵌套了很多层，执行顺序是怎样的？比如，在被加载的 js 文件中，又用 document.write() 来加载了一个 js 文件。

还是按出现顺序来执行。依据单线程的模型，只能逐一解析和执行。

最后站在阅读器的角度总结下：由于阅读器的 js 是单线程的，而且 js 都运转在 window 这个全局对象中，所以必需逐一解析、加载和执行 <script></script> 标签中包括的代码或文件；为了保证这种顺序，需求同步加载 js 文件。