前言

　　本章主要讲述如何加载脚本使得用户能有良好的用户体验，而核心内容就是JavaScript的异步加载。之前写过一篇不得不说的JavaScript异步加载，相似的内容就不多加描述，讲些不同的东西，主要讲下JavaScript文件加载器labjs的常用方法。

流水账

　　脚本位置：推荐将所有的<script>标签尽可能放到<body>标签的底部，也就是</body>之前，这样就能在执行js代码之前将用户界面呈现出来，改善用户体验。

　　组织脚本：由于每个<script>标签初始下载时都会阻塞页面渲染，所以减少页面包含的<script>标签数量有助于改善这一情况。通常一个大型网站或者网络应用需要依赖数个JavaScript文件，你可以把多个文件合并成一个，这样只需要一个<script>标签，就可以减少性能消耗，实质是减少了http请求。

　　无阻塞的脚本：defer、动态脚本元素、XMLHttpRequest脚本注入（和动态脚本元素技术相比的优点是你可以下载JavaScript代码但不立即执行，但是因为同源策略所以有很大的局限性）、LazyLoad类库。

LABjs

　　接下来就是labjs的时间了，labjs是一个js文件加载器，而requirejs和seajs则是模块加载器，模块加载器一般可以降级为文件加载器使用。labjs通过优雅的语法（script和wait 链式）实现了这两大特性，核心是性能优化，可以管理文件依赖，并且“异步”执行。下面通过具体的例子来简单讲讲这两大api的用法。

　　如果你只需实现动态脚本元素技术那样的多个脚本并发“异步”执行，那实在太简单不过了：

$LAB  .script("script1.js")
  .script("script2.js");

　　当然你也可以用数组或者对象的方式传参，详细可以参考文档，我也会在下一篇中详细介绍labjs的常用api。

　　如果说加载完两个文件（或者多个），你需要一个回调，这时候就要用到wait了：

$LAB
  .script("script1.js")
  .script("script2.js")
  .script("script3.js")
  .wait(function() {  // 等待所有script加载完再执行这个代码块
      // ...
  });

　　如何管理文件依赖？也很简单：

$LAB
  .script("script1.js") // script1, script2, and script3 相互不依赖, 可以按照任意的顺序执行
  .script("script2.js")
  .script("script3.js")
  .wait(function(){
    console.log("Scripts 1-3 are loaded!");
  })
  .script("script4.js") // 必须等待script1.js,script2.js,script3.js执行完毕之后才能执行
  .wait(function(){initScript4Func();});

　　script4依赖script1、script2和script3，通过以上代码依赖文件能够异步并行执行，而等它们三个文件执行完后执行script4，效率大大提升。需要特别注意的是，script中只能包含.js结尾的文件（或者对象、数组），而不能是一个匿名的js函数，如果是则会立即执行。

高性能JavaScript 加载和执行的更多相关文章

  1. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  2. 加快JavaScript加载和执行效率

    JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...

  3. 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded

    在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...

  4. [转]JavaScript 的性能优化：加载和执行

    原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...

  5. 【转】js JavaScript 的性能优化：加载和执行

    JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...

  6. JavaScript 的性能优化：加载和执行

    随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...

  7. 浏览器中Javascript的加载和执行

    在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...

  8. 高性能JavaScript-JS脚本加载与执行对性能的影响

    在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...

  9. 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...

随机推荐

  1. [java]byte和byte[]与int之间的转换

    1.byte与int转换 public static byte intToByte(int x) {   return (byte) x;   }   public static int byteTo ...

  2. 使用 xtrabackup 进行MySQL数据库物理备份

    0. xtrabackup的功能 能实现的功能: 非阻塞备份innodb等事务引擎数据库. 备份myisam表会阻塞(需要锁). 支持全备.增量备份.压缩备份. 快速增量备份(xtradb,原理类似于 ...

  3. RedHat Linux 9.0的安装+入门指南(图文并茂)

    一,准备工作1,购买或下载Redhat9的安装光盘(3张盘)或镜像文件2,在硬盘中至少留2个分区给安装系统用,挂载点所用分区推荐4G以上,交换分区不用太大在250M左右比较适合,文件系统格式不论,反正 ...

  4. 2. Docker - 安装

    一.Docker介绍 1. Docker是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上, 也可以实现虚拟化. 容器时完全使用沙 ...

  5. 描述Linux系统开机到登陆界面的启动过程（计时2分钟）

    简述: 1.开机BIOS自检 2.MBR引导 3.grub引导菜单 4.加载内核kernel 5.启动init进程 6.读取inittab文件,执行rc.sysinit,rc等脚本 7.启动minge ...

  6. 瘟疫公司中国版（Android）手动破解内购

    前言 洒家近日下载了个瘟疫公司中国版(安卓版)(com.easymobi.plagueinc.mi ,版本 1.1.2(5)(.mi 小米版)),发现游戏需要内购而且价格不菲. 需求 root权限 文 ...

  7. 手动添加jar包到maven

    废话不说,先上图,后说明: 1.登录系统 2.跟着箭头和方框走,一直到 Select Artifact(s) to Upload... 按钮 3.点击Select Artifact(s) to Upl ...

  8. 准备使用 Office 365 中国版--购买

    Office 365中国版支持两种购买方式,Web Direct(在线购买)和CSP(代理商购买).如果客户的企业规模不大(几十个用户,小于100用户)或者是个人/家庭购买,可以直接选择在线购买方式. ...

  9. ExecutorType 的类型

  10. python黑客编程之端口爆破

    #coding:utf-8 from optparse import OptionParser import time,re,sys,threading,Queue import ftplib,soc ...