《高性能JavaScript》（读书笔记）

摘要：加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。异步加载，和，浏览器不会失去响应它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。插件，可以让回调函数在页面结构加载完成后再运行。

js代码在执行过程中会阻塞浏览器的其他进程，比如用户界面的绘制。每次遇到script标签，页面都必须停下里等待代码下载，执行，然后继续处理其他部分。下面是几种能减少js对性能影响的方法：

如果在中加载js文件那么由于脚本会阻塞页面渲染，直到它们全部下载并执行完，页面渲染才会继续，表现为明显的延迟，显示空白页面。
IE8 firefox3.5 safari4 chrome2都允许并行下载js文件，所以script标签在下载时不会相互影响，但是仍然会阻塞其他资源的下载
因此 推荐将script标签放置在body标签的底部，减少对页面下载的影响

页面中的script标签越少，加载也就越快，响应也就越迅速

html4 为script标签定义了一个扩展属性defer。此属性指明本元素所包含的脚本不会修改DOM,因此代码可以安全地延迟执行。
到了html5中 defer属性仅当src属性申明时才生效
html5中引入了async属性 用于异步加载脚本 与defer的相同点是采用并行下载，不产生阻碍，区别在与执行时机
async是加载完成之后自动执行，defer需要等待页面完成后执行（写法为defer="defer" async="true"）

推荐的无阻塞模式：
向页面中添加大量js的推荐做法需两步：先添加动态加载所需的代码，然后化妆初始化页面所需要的剩下的代码。第一部分代码尽量精简，一旦初始化代码就位，就用它来加载剩余的js

推荐的 工具有LAB.js和require.js
LAB.js:

*LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。
作者：玉伯
链接：https://www.zhihu.com/questio...
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。*

用法：（转自阮一峰博客）

引用文字下面根据ScriptJunkie的文章，举一个最简单的例子，来说明这两个函数库的基本用法。更高级的用法，请参阅它们的文档。
　　
　　
　　
　　
　　
　　
上面这段代码，将依次加载4个javascript文件：script1.js、script2-a.js、script2-b.js和script3.js。在加载完前三个文件后，运行两个函数initScript1()和initScript2()；加载完第四个文件后，再运行函数initScript3()。
下面，用LABjs对其进行改写：
　　
　　
首先，$LAB对象替代了
　　
　　
　　
　　
　　
这段代码依次加载多个js文件。
这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
require.js的诞生，就是为了解决这两个问题：
　　（1）实现js文件的异步加载，避免网页失去响应；
　　（2）管理模块之间的依赖性，便于代码的编写和维护。
二、require.js的加载
使用require.js的第一步，是先去官方网站下载最新版本。
下载后，假定把它放在js子目录下面，就可以加载了。
　　
有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：
　　
async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。
加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：
　　
data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。
三、主模块的写法
上一节的main.js，我把它称为"主模块"，意思是整个网页的入口代码。它有点像C语言的main()函数，所有代码都从这儿开始运行。
下面就来看，怎么写main.js。
如果我们的代码不依赖任何其他模块，那么可以直接写入javascript代码。
　　// main.js
　　alert("加载成功！");
但这样的话，就没必要使用require.js了。真正常见的情况是，主模块依赖于其他模块，这时就要使用AMD规范定义的的require()函数。
　　// main.js
　　require(["moduleA", "moduleB", "moduleC"], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});
require()函数接受两个参数。第一个参数是一个数组，表示所依赖的模块，上例就是["moduleA", "moduleB", "moduleC"]，即主模块依赖这三个模块；第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA，moduleB和moduleC，浏览器不会失去响应；它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。
下面，我们看一个实际的例子。
假定主模块依赖jquery、underscore和backbone这三个模块，main.js就可以这样写：
　　require(["jquery", "underscore", "backbone"], function ($, _, Backbone){
　　　　// some code here
　　});
require.js会先加载jQuery、underscore和backbone，然后再运行回调函数。主模块的代码就写在回调函数中。
四、模块的加载
上一节最后的示例中，主模块的依赖模块是["jquery", "underscore", "backbone"]。默认情况下，require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。
使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。
　　require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});
上面的代码给出了三个模块的文件名，路径默认与main.js在同一个目录（js子目录）。如果这些模块在其他目录，比如js/lib目录，则有两种写法。一种是逐一指定路径。
　　require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});
另一种则是直接改变基目录（baseUrl）。
　　require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});
如果某个模块在另一台主机上，也可以直接指定它的网址，比如：
　　require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});
require.js要求，每个模块是一个多带带的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数。
五、AMD模块的写法
require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。
具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：
　　// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});
加载方法如下：
　　// main.js
　　require(["math"], function (math){
　　　　alert(math.add(1,1));
　　});
如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。
　　define(["myLib"], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});
当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。
六、加载非规范的模块
理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？
回答是可以的。
这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。
举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。
　　require.config({
　　　　shim: {
  "underscore":{
　　　　　　　　exports: "_"
　　　　　　},
　　　　　　"backbone": {
　　　　　　　　deps: ["underscore", "jquery"],
　　　　　　　　exports: "Backbone"
　　　　　　}
　　　　}
　　});
require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。
比如，jQuery的插件可以这样定义：
　　shim: {
　　　　"jquery.scroll": {
　　　　　　deps: ["jquery"],
　　　　　　exports: "jQuery.fn.scroll"
　　　　}
　　}
七、require.js插件
require.js还提供一系列插件，实现一些特定的功能。
domready插件，可以让回调函数在页面DOM结构加载完成后再运行。
　　require(["domready!"], function (doc){
　　　　// called once the DOM is ready
　　});
text和image插件，则是允许require.js加载文本和图片文件。
　　define([
　　　　"text!review.txt",
　　　　"image!cat.jpg"
　　　　],
function(review,cat){
　　　　　　console.log(review);
　　　　　　document.body.appendChild(cat);
　　　　}
　　);
类似的插件还有json和mdown，用于加载json文件和markdown文件。

在js中，数据存储的位置会对代码整体性能产生重大影响。数据存储共有4中方式：字面量，变量，数组项，对象成员

字面量（字符串，数字，布尔值，对象，数组，函数，正则表达式以及null undefined）只代表自身 不存储在特定位置
访问字面量和局部变量的速度最快，相反，访问数组元素和对象成员相对较慢
在没有优化的js引擎 的浏览器中 ，建议尽可能使用局部变量。一个好的经验法则是：如果某个跨作用域的值在函数中被引用一次以上，那么就把它存储到局部变量里
eg:for 循环之前 var len = obj.length 而不是直接将obj.length写在for循环中
局部变量存在于作用域链的起始位置，因此访问局部变量比访问跨作用域的变量更快。变量在作用域链中的位置越深，访问所需时间就越长。全部变量处于作用域的最末端，因此访问速度也是最慢的。

嵌套的成员对象会明显影响性能
属性或方法在原型链中的位置越深，那么访问速度就越慢
通过把常用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能，局部变量的访问速度更快

1.最小化DOM访问次数，尽可能在js端处理
2.如果需要多次访问某个DMO节点，使用局部变量存储它的应用
3.小心处理HTML集合，因为它实时连系着底层文档。把集合的长度缓存到一个变量中，并在迭代中使用它，如果需要经常操作集合，那么建议把它拷贝到一个数组中
4.使用速度更快的API 如:document.querySelectorALL()

1.引自阮老师的 网页性能管理详解
http://www.ruanyifeng.com/blo...

引用文字一、网页生成的过程
要理解网页性能为什么不好，就要了解网页是怎么生成的。
网页的生成过程，大致可以分成五步。
HTML代码转化成DOM
CSS代码转化成CSSOM（CSS Object Model）
结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
生成布局（layout），即将所有渲染树的所有节点进行平面合成
将布局绘制（paint）在屏幕上
这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步。
"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）。
二、重排和重绘
网页生成的时候，至少会渲染一次。用户访问的过程中，还会不断重新渲染。
以下三种情况，会导致网页重新渲染。
修改DOM
修改样式表
用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）
重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。
需要注意的是，"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。
三、对于性能的影响
重排和重绘会不断触发，这是不可避免的。但是，它们非常耗费资源，是导致网页性能低下的根本原因。
提高网页性能，就是要降低"重排"和"重绘"的频率和成本，尽量少触发重新渲染。
前面提到，DOM变动和样式变动，都会触发重新渲染。但是，浏览器已经很智能了，会尽量把所有的变动集中在一起，排成一个队列，然后一次性执行，尽量避免多次重新渲染。
div.style.color = "blue";
div.style.marginTop = "30px";
上面代码中，div元素有两个样式变动，但是浏览器只会触发一次重排和重绘。
如果写得不好，就会触发两次重排和重绘。
div.style.color = "blue";
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + "px";
上面代码对div元素设置背景色以后，第二行要求浏览器给出该元素的位置，所以浏览器不得不立即重排。
一般来说，样式的写操作之后，如果有下面这些属性的读操作，都会引发浏览器立即重新渲染。
offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()
所以，从性能角度考虑，尽量不要把读操作和写操作，放在一个语句里面。
// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";
// good
var left = div.offsetLeft;
var top  = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";
一般的规则是：
样式表越简单，重排和重绘就越快。
重排和重绘的DOM元素层级越高，成本就越高。
table元素的重排和重绘成本，要高于div元素
四、提高性能的九个技巧
有一些技巧，可以降低浏览器重新渲染的频率和成本。
第一条是上一节说到的，DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。
第二条，如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。
第三条，不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。
// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
// good 
el.className += " theclassname";
// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
第四条，尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode() 方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。
第五条，先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。
第六条，position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。
第七条，只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。
第八条，使用虚拟DOM的脚本库，比如React等。
第九条，使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染（详见后文）。

这是记录总结的前三章，以后陆续会有补充