将异步脚本加载给我学习Javaｓｃｒｉｐｔ
首先看看这行代码：有点……不太好，应该在哪里开发者在标签上是不是很奇怪还是把它放在标签上这两种做法使丰富的脚本站点苦不堪言。标签中的大脚本将使所有页面呈现停滞，允许用户在脚本加载之前一直停留在白色屏幕上。标签后面的大脚本只会使用户看到静态页面而没有活力。应该在客户端呈现的地方分散了无效的控件和空盒。
为了完美地解决这个问题，我们需要区分和征服脚本。那些负责使页面看起来更好和更好使用的脚本应该立即加载，稍后加载的脚本稍后会被加载。但是，怎样才能抑制这两个脚本并确保在调用它们时调用它们呢
首先，重新认识标签。
现代浏览器中的标签分为经典和非封锁两种，接下来我们将讨论如何使用这两个标签来尽快加载页面。
1。什么是阻塞脚本
标签的标准版本通常称为封锁标签。这个词必须在上下文中理解。当一个现代浏览器看到一个封闭的标签，它会跳过堵点，继续阅读文件和其他资源的下载（脚本和样式表）。但直到脚本下载并运行，浏览器将评估资源背后的阻塞点。因此，如果有5块在网页的标签标签，在所有5脚本下载并运行，用户不会看到任何东西除了网页标题。不仅如此，即使脚本运行，他们只能在阻塞点查看文档的一部分。如果你想看到等待加载标签中的好东西，你必须绑定一个事件处理程序，喜欢document.onreadystatechange事件。
由于这些原因，现在把脚本放在页面标签的结尾变得越来越流行，一方面，用户可以更快地看到页面，另一方面，脚本也可以主动地触摸DOM，而不必等待事件触发本身，对于大多数脚本来说，这一举动是一个很大的进步。
但是并不是所有的脚本都是一样的，在把脚本移下来之前，先问自己2个问题。
脚本可以直接由标签中的内联Javaｓｃｒｉｐｔ调用吗答案可能很清楚，但还是值得检查的。
脚本影响呈现页面的外观吗主机的Typekit字体就是一个例子。如果Typekit脚本放在文档的最后，网页文本将呈现两次，并立即提交文件时读取，和剧本再次渲染脚本运行时。
只要一个答案是肯定的，脚本应该放在标签中，否则它可以放在标签中，比如文档：
这也大大缩短加载时间，但要注意，这可能会给用户一个互动的机会之前的页面加载bodyｓｃｒｉｐｔs.js。
2。脚本的预加载和延迟运行
这表明大多数脚本应该放在它，因为它允许用户查看网页的速度和避免操纵DOM事件之前准备的开销。但是有这样一个缺点是，浏览器无法加载这些脚本在加载一个完整的文档，这是通过慢速连接，发送大文件的一大瓶颈。
理想情况下，脚本的加载应该在文档加载的同时进行，并且不影响DOM的呈现，这样，一旦文档准备好，就可以运行脚本了，因为相应的脚本已按标签的顺序加载。
如果已经读过这篇文章，您就迫不及待地编写一个定制的Ajax脚本加载程序来满足这一需求！然而，大多数浏览器支持更简单的解决方案。
添加延迟（延迟）性能相当于浏览器：请立即加载脚本，请等到文件准备就绪，所有脚本运行后延迟性能运行。将延迟脚本到文档标签不仅可以把剧本的全部好处的标签，也使其大文件的加载速度大大提高！
缺点是并非所有浏览器都支持延迟属性，这意味着如果要确保在加载文档之后延迟脚本可以运行，必须将所有延迟脚本代码封装为jQuery的$（文档）这样的结构。
最后一节中的页面示例改进如下：
记住，deferredｓｃｒｉｐｔs封装很重要，即使浏览器不支持延迟，deferredｓｃｒｉｐｔs将运行文档准备事件之后，如果页面的内容远远超过几千字节，它的成本是值得的。
3，脚本的并行加载
如果你已经超过了毫秒页面加载时间完美主义者，那么延迟可能看起来像一个低盐酱油无味无味。你不想等到所有延迟脚本正在运行。当然，你不想等到文件都准备好了，所以你要载入尽快和尽可能快地运行它们。这也就是为什么现代浏览器提供异步的原因（异步）属性。
如果推迟使我们想起一个有序的排队现场等待文件加载，然后异步将提醒我们，混乱的无政府状态。两脚本，前面给出的，运行在任何命令，他们跑只要Javaｓｃｒｉｐｔ引擎是立即可用，无论文件是否准备好了没有。
对于大多数的脚本，异步是鸡肋，难以下咽。如果没有广泛支持推迟。同时，因为异步脚本将运行在任何时候，它太容易引起海森堡的蚁害。（当脚本结束加载时，将有四个Ant蠕虫）。
当我们将一些第三方脚本，而不在乎他们跑一跑。因此，使用async属性这第三方脚本，不花一分钱相当于增加他们的速度。
在前一个页面示例中添加了两个独立的第三方小部件，结果如下：
这个页面结构清晰显示脚本的优先级，浏览器的绝大部分，DOM渲染只会一直延迟到headｓｃｒｉｐｔs.js.while DOM渲染结束了，deferredｓｃｒｉｐｔs.js加载的背景。然后，在DOM渲染最后的deferredｓｃｒｉｐｔs.js和两个插件脚本将运行。这两个插件脚本将在这些浏览器支持异步无序运行。如果不确定这是否是适当的，不要使用异步！
两。可编程脚本加载
虽然标签很简单，但有些东西确实需要更复杂的脚本加载，我们可能只想将某些脚本加载到满足某些条件的用户，如白金会员或达到一定水平的玩家。当他们点击激活时，他们可能只想加载一些功能，比如聊天小部件。
1。直接加载脚本
我们可以使用如下代码插入标签。
VaR的头= document.getelementsbytagname（很）{ 0 }；
VaR脚本= document.createelement（'ｓｃｒｉｐｔ）；
ｓｃｒｉｐｔ.src = / / JS JS的特征；
head.appendchild（剧本）；
等一下，我们怎么知道脚本是什么时候加载的我们可以添加一些代码，脚本本身触发事件，但是如果你想为每个脚本添加此代码加载，太吵了。或者在另一个案例中，我们添加一些代码的脚本在第三方服务器是不可能的。HTML5规范定义了一个onload属性可以绑定回调。
ｓｃｒｉｐｔ.onload =函数（）{
现在可以在脚本中定义函数调用。
}；
然而，IE8和旧版本不支持onload，他们支持onreadystatechange。一些浏览器也有一些特别的事件时，插入标签，我们甚至还没有讨论错误处理这里。因为害怕
强烈建议使用脚本来加载库中的所有这些头痛。
三、有条件的加载了yepnope
Yepnope是一个简单的、轻量级的脚本加载库（压缩版只有1.7kb）。它的设计目标是真诚地服务于最常见的动态脚本加载需求。
最简单的使用了yepnope是加载脚本并返回一个回调事件的脚本运行完毕。
Yepnope（{
负载：'oompaloompas JS，
回调函数（）{
console.log（'oompa-loompas准备！；
}
}）；
还是无动于衷这里我们使用了yepnope加载多个脚本并在给定的顺序运行它们。例如，假设我们要加载backbone.js，这个脚本是依赖于underscore.js.for这个目的，我们只需要在加载参数数组提供的两个脚本的位置。
Yepnope（{
负载：{ 'underscore .js，'backbone .js}，
完成：函数（）{
下面是主干的业务逻辑
}
}）；
请注意，这里是完整的，而不是回调（回调）。
不同的是，在脚本加载列表运行回调的各种资源，并完成运行，只有当所有的脚本加载，加载了yepnope签名功能是有条件的。给定的测试参数，将不同的资源负载了yepnope根据参数是否是不是真的。例如，某种程度的准确性被用来确定用户是否是使用触摸屏设备上加载不同的样式表和脚本，因此。
Yepnope ({
测试：modernizr.touch，
是的：{ 'touchstyles。CSS，JS 'touchapplication'}，
没有：{ 'mousestyles。CSS，JS 'mouseapplication'}，
完成：函数（）{
无论何种情况下，应用程序已经完成！
}
}）；
我们只使用几行代码的阶段，并且可以使用他们基于用户接入设备的一个完全不同的体验。当然，不是所有的条件下需要准备的是两试验结果（是）不（没有）。对了yepnope最常见的用途是加载垫脚本来弥补旧的浏览器所缺少的功能。
Yepnope（{
测试：window.json，没有：{ 'json2 .js}，
完成：函数（）{
现在可以安全地使用JSON
}
}）；
当页面使用了yepnope，它应该成为继美的标记结构：
很熟悉吗这种结构的结构和讨论defer属性的部分是相同的，唯一不同的是，有一个镶嵌yepnope.js（脚本文件可能已经在deferredｓｃｒｉｐｔs。顶部JS），以便它可以独立加载根据脚本的加载条件（因为浏览器需要垫脚本）和那些谁想要动态加载脚本（这样他们可以响应用户的动作），结果将是一个较小的deferredｓｃｒｉｐｔs.js。
四，要求。
开发商想把凌乱的丰富的脚本应用程序更整洁有序的通过一个脚本程序，和Require.js是一个choice.require.js，一个强大的工具，可以自动消除最复杂的脚本依赖图与AMD技术。
现在看一个简单的脚本，使用require.js同名函数的一个例子。
要求（{ 'moment}，功能（矩）{
console.log（矩）。格式（（'dddd '））； / /周
}）；
require函数接受模块名称数组，然后加载所有这些脚本模块并联。不像了yepnope，Require.js不保证顺序目标脚本的运行，只有确保订单能满足各自的依赖需求，但前提是，
这些脚本的定义符合AMD（异步模块定义、异步模块定义）规范。
案例1：加载Javaｓｃｒｉｐｔ文件
要求（{ 。 / / a.js JS
MyFunctionA（）；
MyFunctionB（）；
}）；
作为一个案例显示，有两个Javaｓｃｒｉｐｔ文件a.js和b.js，myfunctiona和myfunctionb内每个定义了两个方法，RequireJS可以用来加载两个文件通过以下方式，这种方法可以参考代码的功能部分的两个文件。
这个字符串数组参数要求的方法允许不同的值时，该字符串结束。JS，或启动 /，或是一个URL，RequireJS认为用户是直接加载Javaｓｃｒｉｐｔ文件，否则，当字符串是与我/模块，它会认为这是一个模块，以路径的URL地址和用户配置加载Javaｓｃｒｉｐｔ文件的相应模块，配置部分将在后面详细介绍。
需要指出的是，RequireJS默认情况下重要的并不能保证myfunctiona和myfunctionb必须在页面加载完成后执行，需要确保页面加载后执行脚本时，提供一个单独的requirejs Domready模块的requirejs需要下载该模块的官方网站，它不包括在requirejs。与Domready模块，这样一个代码稍加修改加上Domready依赖。
案例二：在加载页面后执行Javaｓｃｒｉｐｔ
要求（{Domready！
MyFunctionA（）；
MyFunctionB（）；
}）；
在执行案件两，代码通过萤火虫，我们可以看到，requirejs将当前页上插入a.js和b.js，声明一个标签分开，这是用来下载Javaｓｃｒｉｐｔ文件异步。async属性当前大多数浏览器的支持，这说明这个标签的js文件不会阻止其他网页内容的下载。
案例三：requirejs插入
<脚本类型=文本/ javaｓｃｒｉｐｔ字符集=UTF-8async = 数据requirecontext =_
数据requiremodule =JS / a.jssrc=JS / a.js>
AMD实现了一个全局函数称为定义，这是由require.js，其中有3个参数：
模块名称，
模块依赖列表，
在依赖模块的负载结束时触发的回调。
使用requirejs定义Javaｓｃｒｉｐｔ模块
这里的Javaｓｃｒｉｐｔ模块并不像传统的Javaｓｃｒｉｐｔ代码相同，因为它不需要访问全局变量，模块化设计使Javaｓｃｒｉｐｔ代码在访问全局变量的需要，都可以通过全局变量的依赖参数的模块体，为了避免访问或声明全局变量或功能，有效地避免了大型和复杂的空间管理。
在CommonJS AMD的描述，对Javaｓｃｒｉｐｔ模块的定义是通过定义方法实现。
现在让我们看一个简单的例子。通过定义一个学生模块和一个类模块，我们可以在主程序中创建学生对象，并将学生对象放入类中。
案例四：学生模块，student.js
定义（函数（）{（））
返回{
CreateStudent：功能（姓名，性别）{
返回{
姓名，
性别：性别
}；
}
}；
}）；
案例五：类模块，class.js
定义（函数（）{（））
VaR的学生= { }；
返回{
classid：001
部门：计算机
AddToClass：功能（学生）{
AllStudents.push（学生）；
}，
getclasssize：函数（）{
返回allstudents.length；
}
}；
}
）；
案例六：主程序
需要（{）学生
Clz.addToClass（student.createstudent（杰克
Clz.addToClass（student.createstudent（玫瑰
Console.log（（CLZ。getclasssize））； / /输出2
}）；
学生模块和类模块是独立的模块。接下来，我们将定义一个新模块，它依赖于学生和类模块，以便主程序部分的逻辑也可以打包。
案例七：依靠学生和班级模块管理模块，manager.js
定义（{）学生
返回{
addnewstudent：功能（姓名，性别）{
Clz.addToClass（student.createstudent（姓名，性别））；
}，
getmyclasssize：函数（）{
返回clz.getclasssize（）；
}
}；
}）；
案例八：一个新的主程序
要求（{） }，函数（Manager）{
manager.addnewstudent（杰克
manager.addnewstudent（玫瑰
Console.log（（经理。getmyclasssize））； / /输出2
}）；
通过上面的代码示例，我们已经清楚地理解了如何编写模块、如何使用模块、以及如何定义模块之间的依赖关系。
事实上，你想让你的网站变得更快，你可以加载这些脚本，暂时不能使用。最简单的办法是使用defer属性和仔细async属性。如果你需要加载的脚本的基础条件，考虑一个脚本加载器喜欢了yepnope。如果有大量的网站相互依存的脚本，把Require.js.Choose最好的工具的任务，然后用它来享受它带来的便利。
以上是javaｓｃｒｉｐｔ加载的异步脚本的全部内容，对大家学习很有帮助。