跟我学习javascript的异步脚本加载_javascript技巧

先来看这行代码:

<script src = "allMyClientSideCode.js"></script>

这有点儿……不怎么样。“这该放在哪儿?”开发人员会奇怪,“靠上点,放到<head>标签里?还是靠下点,放到<body>标签里?”这两种做法都会让富脚本站点的下场很凄惨。<head>标签里的大脚本会滞压所有页面渲染工作,使得用户在脚本加载完毕之前一直处于“白屏死机”状态。而<body>标签末尾的大脚本只会让用户看到毫无生命力的静态页面,原本应该进行客户端渲染的地方却散布着不起作用 的控件和空空如也的方框。

完美解决这个问题需要对脚本分而治之:那些负责让页面更好看、更好用的脚本应该立即加载,而那些可以待会儿再加载的脚本稍后再加载。但是怎样才能既滞压这些脚本,又能保证它们在被调用时的可用性呢?

一、<script>标签的再认识

现代浏览器中的<script>标签分成了两种新类型:经典型和非阻塞型。接下来讨论如何运用这两种标签来尽快加载页面。

1、阻塞型脚本何去何从?

标准版本的<script>标签常常被称作阻塞型标签。这个词必须放在上下文中进行理解:现代浏览器看到阻塞型<script>标签时,会跳过阻塞点继续读取文档及下载其他资源(脚本和样式表)。但直到脚本下载完毕并运行之后,浏览器才会评估阻塞点之后的那些资源。因此,如果网页文档的<head>标签里有5 个阻塞型<script>标签,则在所有这5 个脚本均下载完毕并运行之前,用户除了页面标题之外看不到任何东西。不仅如此,即便这些脚本运行了,它们也只能看到阻塞点之前的那部分文档。如果想看到<body>标签中正等待加载的那些好东西,就必须给像document.onreadystatechange 这样的事件绑定一个事件处理器。

基于上述原因,现在越来越流行把脚本放在页面<body>标签的尾部。这样,一方面用户可以更快地看到页面,另一方面脚本也可以主动亲密接触DOM 而无需等待事件来触发自己。对大多数脚本而言,这次“搬家”是个巨大的进步。

但并非所有脚本都一样。在向下搬动脚本之前,请先问自己2 个问题。

  • 该脚本是否有可能被<body>标签里的内联JavaScript 直接调用?答案可能一目了然,但仍值得核查一遍。
  • 该脚本是否会影响已渲染页面的外观?Typekit 宿主字体就是一个例子。如果把Typekit 脚本放在文档末尾,那么页面文本就会渲染两次,即读取文档时即刻渲染,脚本运行时再次渲染。

上述问题只要有一个答案是肯定的,那么该脚本就应该放在<head>标签中,否则就可以放在<body>标签中,文档形如:

<html>
<head>
  <!--metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
</head>
<body>
  <!-- content goes here -->
  <script src="bodyScripts.js"></script>
</body>
</html>

这确实大大缩短了加载时间,但要注意一点,这可能让用户有机会在加载bodyScripts.js 之前与页面交互。

2、 脚本的提前加载与延迟运行

上面建议将大多数脚本放在<body>中,因为这样既能让用户更快地看到网页,又能避免操控DOM之前绑定“就绪”事件的开销。但这种方式也有一个缺点,即浏览器在加载完整个文档之前无法加载这些脚本,这对那些通过慢速连接传送的大型文档来说会是一大瓶颈。

理想情况下,脚本的加载应该与文档的加载同时进行,并且不影响DOM 的渲染。这样,一旦文档就绪就可以运行脚本,因为已经按照<script>标签的次序加载了相应脚本。

如果大家已经读到这里了,那么一定会迫不及待地想写一个自定义Ajax 脚本加载器以满足这样的需求!不过,大多数浏览器都支持一个更为简单的解决方案。

<script defer src = "deferredScript.js">

添加defer(延迟)属性相当于对浏览器说:“请马上开始加载这个脚本吧,但是,请等到文档就绪且所有此前具有defer 属性的脚本都结束运行之后再运行它。”在文档<head>标签里放入延迟脚本,既能带来脚本置于<body>标签时的全部好处,又能让大文档的加载速度大幅提升!

不足之处就是,并非所有浏览器都支持defer属性。这意味着,如果想确保自己的延迟脚本能在文档加载后运行,就必须将所有延迟脚本的代码都封装在诸如jQuery 之$(document).ready 之类的结构中。

上一节的页面例子改进如下:

<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script defer src="deferredScripts.js"></script>
</head>
<body>
  <!-- content goes here -->
</body>
</html>

请记住deferredScripts 的封装很重要,这样即使浏览器不支持defer,deferredScripts 也会在文档就绪事件之后才运行。如果页面主体内容远远超过几千字节,那么付出这点代价是完全值得的。

3、 脚本的并行加载

如果你是斤斤计较到毫秒级页面加载时间的完美主义者,那么defer也许就像是淡而无味的薄盐酱油。你可不想一直等到此前所有的defer 脚本都运行结束,当然也肯定不想等到文档就绪之后才运行这些脚本,你就是想尽快加载并且尽快运行这些脚本。这也正是现代浏览器提供了async(异步)属性的原因。

<script async src = "speedyGonzales.js">
<script async src = "roadRunner.js">

如果说defer 让我们想到一种静静等待文档加载的有序排队场景,那么async 就会让我们想到混乱的无政府状态。前面给出的那两个脚本会以任意次序运行,而且只要JavaScript 引擎可用就会立即运行,而不论文档就绪与否。
对大多数脚本来说,async 是一块难以下咽的鸡肋。async 不像defer那样得到广泛的支持。同时,由于异步脚本会在任意时刻运行,它实在太容易引起海森堡蚁虫之灾了(脚本刚好结束加载时就会蚁虫四起)。
当我们加载一些第三方脚本,而且也不在乎它们谁先运行谁后运行。因此,对这些第三方脚本使用async 属性,相当于一分钱没花就提升了它们的运行速度。
上一个页面示例再添加两个独立的第三方小部件,得到的结果如下:

<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script src="deferredScripts.js" defer></script>
</head>
<body>
  <!-- content goes here -->
  <script async defer src="feedbackWidget.js"></script>
  <script async defer src="chatWidget.js"></script>
</body>
</html>

这个页面结构清晰展示了脚本的优先次序。对于绝大多数浏览器,DOM的渲染只会延迟至headScripts.js 结束运行时。进行DOM渲染的同时会在后台加载deferredScripts.js。接着,在DOM 渲染结束时将运行deferredScripts.js 和那两个小部件脚本。这两个小部件脚本在那些支持async 的浏览器中会做无序运行。如果不确定这是否妥当,请勿使用async!
二、可编程的脚本加载
虽然<script>标签简单得令人心动,但有些情况确实需要更精致的脚本加载方式。我们可能只想给那些满足一定条件的用户加载某个脚本,譬如白金会员或达到一定级别的玩家,也可能只想当用户单击激活时才加载某个特性,譬如聊天小部件。
1、直接加载脚本
我们可以用类似下面这样的代码来插入<script>标签。

var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = '/js/feature.js';
head.appendChild(script);

稍等,我们如何才能知道脚本何时加载结束呢?我们可以给脚本本身添加一些代码以触发事件,但如果要为每个待加载脚本都添加这样的代码,那也太闹心了。或者是另外一种情况,即我们不可能给第三方服务器上的脚本添加这样的代码。HTML5 规范定义了一个可以绑定回调的onload 属性。

script.onload = function() {
// 现在可以调用脚本里定义的函数了
};

不过, IE8 及更老的版本并不支持onload , 它们支持的是onreadystatechange。某些浏览器在插入<script>标签时还会出现一些“灵异事件”。而且,这里甚至还没谈到错误处理呢!为了避免
所有这些令人头疼的问题,在此强烈建议使用脚本加载库。

三、yepnope的条件加载
yepnope是一个简单的、轻量级的脚本加载库(压缩后的精简版只有1.7KB),其设计目标就是真诚服务于最常见的动态脚本加载需求。
yepnope 最简单的用法是,加载脚本并对脚本完成运行这一事件返回一个回调。

yepnope({
  load: 'oompaLoompas.js',
  callback: function() {
  console.log('oompa-Loompas ready!');
  }
});

还是无动于衷?下面我们要用yepnope 来并行加载多个脚本并按给定次序运行它们。举个例子,假设我们想加载Backbone.js,而这个脚本又依赖于Underscore.js。为此,我们只需用数组形式提供这两个脚本的位置作为加载参数。

yepnope({
  load: ['underscore.js', 'backbone.js'],
  complete: function() {
  // 这里是Backbone 的业务逻辑
  }
});

请注意,这里使用了complete(完成)而不是callback(回调)。

其差别在于,脚本加载列表中的每个资源均会运行callback,而只有当所有脚本都加载完成后才会运行complete。yepnope 的标志性特征是条件加载。给定test 参数,yepnope 会根据该参数值是否为真而加载不同的资源。举个例子,可以以一定的准确度判断用户是否在用触摸屏设备,从而据此相应地加载不同的样式表及脚本。

yepnope({
  test: Modernizr.touch,
  yep: ['touchStyles.css', 'touchApplication.js'],
  nope: ['mouseStyles.css', 'mouseApplication.js'],
  complete: function() {
  // 不管是哪一种情况,应用程序均已就绪!
  }
});

我们只用寥寥几行代码就搭好了舞台,可以基于用户的接入设备而给他们完全不同的使用体验。当然,不是所有的条件加载都需要备齐yep(是)和nope(否)这两种测试结果。yepnope 最常见的用法之一就是加载垫片脚本以弥补老式浏览器缺失的功能。

yepnope({
  test: window.json,nope: ['json2.js'],
  complete: function() {
  // 现在可以放心地用JSON 了
  }
});

页面使用了yepnope 之后应该变成下面这种漂亮的标记结构:

<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script src="deferredScripts.js" defer></script>
</head>
<body>
  <!-- content goes here -->
</body>
</html>

很眼熟?这个结构和讨论defer 属性那一节给出的结构一样,唯一的区别是这里的某个脚本文件已经拼接了yepnope.js(很可能就在deferredScripts.js 的顶部),这样就可以独立地加载那些根据条件再加载的脚本(因为浏览器需要垫片脚本)和那些想要动态加载的脚本(以便回应用户的动作)。结果将是一个更小巧的deferredScripts.js。
四、Require.js/AMD 模块化加载
开发人员想通过脚本加载器让混乱不堪的富脚本应用变得更规整有序一些,而Require.js 就是这样一种选择。Require.js 这个强大的工具包能够自动和AMD技术一起捋顺哪怕最复杂的脚本依赖图。
现在先来看一个用到Require.js 同名函数的简单脚本加载示例。

require(['moment'], function(moment) {
  console.log(moment().format('dddd')); // 星期几
});

require 函数接受一个由模块名称构成的数组,然后并行地加载所有这些脚本模块。与yepnope 不同,Require.js 不会保证按顺序运行目标脚本,只是保证它们的运行次序能满足各自的依赖性要求,但前提是
这些脚本的定义遵守了AMD(Asynchronous Module Definition,异步模块定义)规范。
案例一: 加载 JavaScript 文件

 <script src="./js/require.js"></script>
<script>
  require(["./js/a.js", "./js/b.js"], function() {
       myFunctionA();
       myFunctionB();
    });
</script>

如案例一 所示,有两个 JavaScript 文件 a.js 和 b.js,里面各自定义了 myFunctionA 和 myFunctionB 两个方法,通过下面这个方式可以用 RequireJS 来加载这两个文件,在 function 部分的代码可以引用这两个文件里的方法。

require 方法里的这个字符串数组参数可以允许不同的值,当字符串是以”.js”结尾,或者以”/”开头,或者就是一个 URL 时,RequireJS 会认为用户是在直接加载一个 JavaScript 文件,否则,当字符串是类似”my/module”的时候,它会认为这是一个模块,并且会以用户配置的 baseUrl 和 paths 来加载相应的模块所在的 JavaScript 文件。配置的部分会在稍后详细介绍。

这里要指出的是,RequireJS 默认情况下并没有保证 myFunctionA 和 myFunctionB 一定是在页面加载完成以后执行的,在有需要保证页面加载以后执行脚本时,RequireJS 提供了一个独立的 domReady 模块,需要去 RequireJS 官方网站下载这个模块,它并没有包含在 RequireJS 中。有了 domReady 模块,案例一 的代码稍做修改加上对 domReady 的依赖就可以了。
案例二: 页面加载后执行 JavaScript

 <script src="./js/require.js"></script>
<script>
  require(["domReady!", "./js/a.js", "./js/b.js"], function() {
       myFunctionA();
       myFunctionB();
    });
</script>

执行案例二的代码后,通过 Firebug 可以看到 RequireJS 会在当前的页面上插入为 a.js 和 b.js 分别声明了一个 < script> 标签,用于异步方式下载 JavaScript 文件。async 属性目前绝大部分浏览器已经支持,它表明了这个 < script> 标签中的 js 文件不会阻塞其他页面内容的下载。
案例三:RequireJS 插入的 < script>

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_"
 data-requiremodule="js/a.js" src="js/a.js"></script>

AMD推行一个由Require.js 负责提供的名叫define 的全局函数,该函数有3 个参数:

  • 模块名称,
  • 模块依赖性列表,
  • 在那些依赖性模块加载结束时触发的回调。

使用 RequireJS 来定义 JavaScript 模块
这里的 JavaScript 模块与传统的 JavaScript 代码不一样的地方在于它无须访问全局的变量。模块化的设计使得 JavaScript 代码在需要访问”全局变量”的时候,都可以通过依赖关系,把这些”全局变量”作为参数传递到模块的实现体里,在实现中就避免了访问或者声明全局的变量或者函数,有效的避免大量而且复杂的命名空间管理。
如同 CommonJS 的 AMD 规范所述,定义 JavaScript 模块是通过 define 方法来实现的。
下面我们先来看一个简单的例子,这个例子通过定义一个 student 模块和一个 class 模块,在主程序中实现创建 student 对象并将 student 对象放到 class 中去。
案例四: student 模块,student.js

define(function(){
   return {
    createStudent: function(name, gender){
       return {
         name: name,
         gender: gender
       };
    }
   };
 });

案例五:class 模块,class.js

 define(function() {
 var allStudents = [];
    return {
      classID: "001",
      department: "computer",
      addToClass: function(student) {
      allStudents.push(student);
      },
      getClassSize: function() {
      return allStudents.length;
      }
    };
   }
 );

案例六: 主程序

 require(["js/student", "js/class"], function(student, clz) {
   clz.addToClass(student.createStudent("Jack", "male"));
   clz.addToClass(student.createStudent("Rose", "female"));
   console.log(clz.getClassSize()); // 输出 2
 });

student 模块和 class 模块都是独立的模块,下面我们再定义一个新的模块,这个模块依赖 student 和 class 模块,这样主程序部分的逻辑也可以包装进去了。
案例七:依赖 student 和 class 模块的 manager 模块,manager.js

define(["js/student", "js/class"], function(student, clz){
  return {
    addNewStudent: function(name, gender){
    clz.addToClass(student.createStudent(name, gender));
    },
    getMyClassSize: function(){
    return clz.getClassSize();
    }
   };
});

案例八:新的主程序

require(["js/manager"], function(manager) {
   manager.addNewStudent("Jack", "male");
   manager.addNewStudent("Rose", "female");
   console.log(manager.getMyClassSize());// 输出 2
 });

通过上面的代码示例,我们已经清楚的了解了如何写一个模块,这个模块如何被使用,模块间的依赖关系如何定义。

其实要想让自己的站点更快捷,可以异步加载那些暂时用不到的脚本。为此最简单的做法是审慎地使用defer 属性和async 属性。如果要求根据条件来加载脚本,请考虑像yepnope 这样的脚本加载器。如果站点存在大量相互依赖的脚本,请考虑Require.js。选择最适合任务的工具,然后使用它,享受它带来的便捷。

以上就是关于javascript的异步脚本加载的全部内容,想对大家的学习有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
异步脚本加载
,以便于您获取更多的相关知识。

时间: 2024-11-01 20:08:22

跟我学习javascript的异步脚本加载_javascript技巧的相关文章

跟我学习javascript解决异步编程异常方案_javascript技巧

一.JavaScript异步编程的两个核心难点 异步I/O.事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络.文件访问功能,且使之在后端实现了较高的性能.然而异步风格也引来了一些麻烦,其中比较核心的问题是: 1.函数嵌套过深 JavaScript的异步调用基于回调函数,当多个异步事务多级依赖时,回调函数会形成多级的嵌套,代码变成 金字塔型结构.这不仅使得代码变难看难懂,更使得调试.重构的过程充满风险. 2.异常处理 回调嵌套不仅仅是使代码变得杂乱,也使得错误处理更复杂.这

基于javascript实现图片懒加载_javascript技巧

一.定义 图片延迟加载也称为懒加载,延迟加载图片或符合某些条件时才加载某些图片,通常用于图片比较多的网页.可以减少请求数或者延迟请求数,优化性能.  二.呈现形式 [1]延时加载,使用setTimeout或setInterval进行加载延迟,如果用户在加载前就离开,自然就不会进行加载. [2]条件加载,符合某些条件或者触发了某些条件才开始异步加载. [3]可视区域加载,仅仅加载用户可以看到的区域,这个主要监控滚动条来实现,一般距离用户看到的底边很近的时候开始加载,这样能保证用户下拉时图片正好接上

基于javascript实现图片预加载_javascript技巧

一.定义预加载图片是提升用户体验的一个好办法,提前加载用户所需的图片,保证图片快速.无缝发布,使用户在浏览器网站时获得更好用户体验.常用于图片画廊等应用中.[注意]若使用即时加载,加载的图片与页面的其他内容一起加载会增加页面的整体加载时间,所以使用window.onload比较合适.二.两种思路 1.使用背景图像 使用页面无用元素的背景图片预加载 <style> body{ margin: 0; } img{ width: 100px; height: 100px; } ul{ margin:

理解Javascript图片预加载_javascript技巧

预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

利用CSS、JavaScript及Ajax实现高效的图片预加载_javascript技巧

方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: 复制代码 代码如下: #preload-01 { background: url(yun_qi_img/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background: url(yun

解析javascript瀑布流原理实现图片滚动加载_javascript技巧

先科普下瀑布流吧 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像美丽说.淘宝网都有使用. 这是我实现的一个效果,就是怎么滚动都加载不玩.就跟瀑布一样流啊流! 这里的实现方式我们只说Js实现方法 实现原理: 对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度  3 最小列数 ,得到列数

20条学习javascript的编程规范的建议_javascript技巧

1.使用js文件管理代码 所有代码尽量放在js文件中,然后再html文件中使用script引入,引入时注意放在body标签后面,并且不使用type或者language. 2.书写缩进 使用4个空白格缩进,注意不要使用tab键进行缩进. 3.断句 注意行长,每行不超过80个字符,超过时要进行适当断句,断句应该再操作符后面进行,最理想的是在逗号(,)后面进行断句,断句后下一行使用8格缩进. 4.注解 一般使用单行注释,块注释一般用于文档. 5.变量声明 所有变量使用之前先声明,未声明的变量会自动作为

学习JavaScript设计模式之装饰者模式_javascript技巧

有时我们不希望某个类天生就非常庞大,一次性包含许多职责.那么我们就可以使用装饰着模式. 装饰着模式可以动态地给某个对象添加一些额外的职责,从而不影响这个类中派生的其他对象. 装饰着模式将一个对象嵌入另一个对象之中,实际上相当于这个对象被另一个对象包装起来,形成一条包装链. 一.不改动原函数的情况下,给该函数添加些额外的功能 1. 保存原引用 window.onload = function() { console.log(1); }; var _onload = window.onload ||

理解Javascript文件动态加载_javascript技巧

Javascript文件动态加载一直是比较困扰的一件事情,像网络上传的比较常见的做法: function loadjs(fileurl){ var sct = document.createElement("script"); sct.src = fileurl; document.head.appendChild(sct); } 然后我们来测试一下结果: <html> <head> <link rel="stylesheet" typ