高性能JavaScript 加载和执行
前言
本章主要讲述如何加载脚本使得用户能有良好的用户体验，而核心内容就是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 加载和执行的更多相关文章
- 怎么样加快JavaScript加载和执行效率
概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
- 加快JavaScript加载和执行效率
JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- [转]JavaScript 的性能优化：加载和执行
原文链接:http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs- JavaScript 的性能优化: ...
- 【转】js JavaScript 的性能优化：加载和执行
JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...
- JavaScript 的性能优化：加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- 浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
- 高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
随机推荐
- 解决easy ui 1.4datebox控件不能清空的问题
用easy ui遇到这个问题,在网上找到了解决方案,不过是1.3.6版本的.现提供1.4版本的修改的具体位置和代码. 我们用的是这个 修改位置:12739行,添加代码: , { text: funct ...
- SQL Server 2012实施与管理实战指南(笔记)——Ch3Alwayson可用组
3.AlwaysOn可用组 Alwayson支持的,是一个可用性组,每个可用性组是包含了多个用户数据库的容器,可用性组内的数据库可以作为一个整体进行故障转移. AlwaysOn关键特性: 一.类似集群 ...
- 用批处理来自动化项目编译及部署（附Demo）
阅读目录 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 介绍 详细 处理 结论 Demo下载 介绍 一个项目从立项开始,可能就已经根据公司的配置模板将 ...
- 说下查询动作 Pivot
上一篇说了一下查询5步走~然后就几天_(:з」∠)_ ~今天继续说一下其中 表里面操作符里面的 Pivot ~ Pivot 在实现行转列的时候灰常有用.通常一个例子 ), ),LoginTime TI ...
- MySQL用户无法登陆问题
安装完MySQL后,我们通常添加拥有相应权限的普通用户用来访问数据库.在使用普通用户(假设为tom)本地登录数据库的时候,经常会出现无法登录的情况,但是从其他的mysql客户端却可以登录.在本地使用t ...
- ubuntu下apache2 安装 配置 卸载 CGI设置 SSL设置
一.安装.卸载apache2 apache2可直接用命令安装 sudo apt-get install apache2 卸载比较麻烦,必须卸干净,否则会影响ap ...
- C++变量和函数
变量可根据作用域和类型分为 (动态)全局变量,静态全局变量,(动态)局部变量,静态局部变量 全局变量:定义在函数外,在源程序其他cpp文件中访问需要extern修饰 静态局部变量:生命周期相比局部变量 ...
- Mac brew命令
一.简介 Brew又叫Homebrew,是MAC中的一款软件包管理工具,通过brew可以很方便的在MAC中安装软件或者是卸载软件. 二.安装 ruby -e "$(curl -fsSL ht ...
- POJ3107Godfather[树形DP 树的重心]
Godfather Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 6121 Accepted: 2164 Descrip ...
- POJ3783Balls[DP 最坏情况最优解]
Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 907 Accepted: 598 Description T ...