早前浏览高机能JavaScript一书所做笔记。
一、Loading and Execution 加载和运转
从加载和运转角度优化，源于JavaScript运转会壅塞UI更新，JavaScript剧本的下载、剖析、运转历程当中，页面的下载和剖析历程都邑停下来守候，因为剧本可能在运转历程当中修正页面内容。
Script Positioning 剧本位置
将<script>标签放在只管靠近<body>标签底部的位置，只管削减对页面下载的影响。
Grouping Scripts 成组剧本
旨在削减http要求，将JavaScript剧本文件兼并打包，能够经由过程打包东西完成（固然能够手动兼并）或许及时东西，比方Yahoo! 的 combo handler，任何网站经由过程一个“团结句柄”URL指出包括YUI文件包中的哪些文件，服务器收到URL要求时，将文件兼并在一起后返回给客户端。
Nonblocking Scripts 非壅塞剧本
页面加载完成以后，再加载JavaScript源码，也就是window的load事宜发出后最先下载代码。
Deferred Scripts延期剧本HTML4为<script>标签定义的扩大属性：defer。假如你为<script>指定defer属性，表明此剧本不盘算修正DOM，代码能够稍后实行。IE4+/FF3.5+支撑。具有defer属性的剧本，能够放在页面的任何位置，能够和页面的其他资本一期并行下载，但会在DOM加载完成，onload事宜句柄被挪用之前实行。Dynamic Script Elements动态剧本元素
竖立一个script元素，指定src属性，然后在页面加载完成以后添加到页面的任何地方。一个简朴的通用demo：
function loadScript(url, callback) {
var script = document.createElement("script") script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}XMLHttpRequest Script Injection XHR剧本注入
运用XMLHttpRequest对象，将剧本注入到页面，和动态剧本元素有相似之处，先竖立XHR对象，然后经由过程get要领下载JavaScript文件，接着用动态<script>元素将JavaScript代码注入页面。
var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
var script = document.createElement ("script");
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
}
xhr.send(null);因为JavaScript的同源战略，剧本文件必需和页面安排在同一个域内，不能经由过程CDN下载，因而不常见于大型网页。
Recommended Nonblocking Pattern 引荐的非壅塞情势
先加载一个加载器，然后加载JavaScript。
比方上文中提到的loadScript要领就能够封装为一个低级的加载器，然后经由过程loadScript要领来加载其他剧本。只不过这个微型加载器要保证依靠关联会比较丑：
loadScript("./file1.js", function () {
loadScript("./file2.js", function () {
loadScript("./file3.js", function () {
//do something
})
})
})再比方YUI3，比方lazyload.js，比方lab.js。
二、Data Acess 数据接见
数据存储在那边，关联到代码运转时期数据被检索到的速率。JavaScript中有四种基本的数据存储位置：Literal values(直接量)、Variables(变量)、Array items(数组项)、Object members(对象成员)。关于直接量和局部变量的接见机能差别眇乎小哉，机能斲丧价值高一些的是全局变量、数组项、对象成员。
Managing Scope 治理作用
先相识一下作用域的道理
每个JavaScript函数都是一个对象，也能够叫函数实例，函数对象和其他对象一样，具有编程能够接见的属性和不能被递次接见，仅供JavaScript引擎运用的内部属性，一种有一个叫[[Scope]]的属性。[[Scope]]中包括函数作用域中对象的鸠合（作用域链），它示意当前函数环境中可接见的数据，以链式的情势存在。当一个函数被竖立后，作用域链中被放入可接见的对象。比方：
function add (a,b) {
var result = a + b;
return result;
}此时作用域链中被推入一个可变的全局对象（随意取个名叫“房间A”），代表了一切全局局限中的变量，包括window、document、navigator等的接见接口。
在函数运转时期，函数内部会竖立一个内部对象，称为运转期上下文。这个对象定义了函数运转时的环境，每次函数运转，这个上下文都是独一的，屡次挪用函数就会屡次竖立运转期上下文对象，函数实行终了，这个上下文对象会被烧毁。这个上下文环境也有本身的作用域链，用来剖析标识符（理解为寻觅变量），当一个运转期上下文被竖立时，它的作用域链被初始化，函数本身的[[Scope]]属性中的对象，根据本来的递次被复制到运转期上下文的作用域链中。此时运转期上下文会竖立一个新的对象，名叫“激活对象（取名叫“房间B”）”，“房间B”中存储了一切的局部变量、定名参数、参数鸠合和this的接口。然后“房间B”被推入到作用域链的前端。在方才所说的可变全局对象（“房间A”）的前面。
函数历程当中，每碰到一个变量，标识符辨认历程都要决议从那边取得或许存储数据。它会搜刮运转期上下文的作用域链，查找同名的标识符，搜刮事情从作用域链的前端最先查找，也就是适才的“房间B”那边查找，假如找到了，就是用对应的变量值，假如没找到就进入“房间A”举行查找，假如找到，就用对应的值，没有找到就以为这个标识符是未定义的("undefined")；在之前的add函数运转历程当中，result/a/b三个变量的查找实际上都举行了上述的搜刮历程，因而发作机能题目。当一个标识符所处位置越深，读写速率就越慢，所以函数中局部变量的接见速率是最快的，全局变量一般很慢，因为全局变量老是处于作用域链末了一个位置，前面的房间都找过了，没找到，才会过来他这里找。因而，就有了优化机能的方法：
用局部变量存储当地局限以外的变量值（假如这个变量值被屡次运用）
比方：
function foo() {
var a = document.getElementById("a"),
b = document.getElementsByTagName("div");
}这时候document被查找了两次，而且每次都要先找“房间B”，再找“房间A”才找到，这时候就能够用一个局部变量暂存document：
function foo() {
var doc = document,
a = doc.getElementById("a"),
b = doc.getElementsByTagName("div");
}削减运用动态作用域（Dynamic Scopes）
with()with能够暂时转变函数的作用域链，在某些特殊场景下，能够加速一些变量的接见。比方一个函数内屡次运用document：
function foo() {
var a = document.getElementById("a"),
b = document.getElementsByTagName("div");
console.log(a.className);
}能够改写为：
function foo() {
with(document){
var a = getElementById("a"),
b = getElementsByTagName("div");
console.log(a.className);
}
} 在这里，document对象以及document对象一切的属性，都被插进去到作用域的最前端，页面在寻觅”getElementById”要领是会首先从document对象属性中寻觅，而不须要从foo()的作用域中查找，然后再到全局作用域中举行查找，降低了二次查找的斲丧。然则在document对象的属性被推入作用域链的最前端的同时，其他局部变量都被推入作用域链第二的位置。上例中，在查找a的时候，会先从document对象属性中查找，没有才会从foo()的作用域中举行查找。如许带来的机能斲丧每每得不偿失。因而with必需慎用，只要在极个别的场景中才划算。try-cahch
当try中递次块发作毛病而转入catch块中时，递次会自动将非常对象推入作用域链的最前端。一样会转变作用域链，带来机能题目。因而在不得不必try-catch语句的时候，能够采纳下面的操纵体式格局：
try{
//do something
}catch(e){
handleError(e);
}在catch块中运转毛病处置惩罚函数，将毛病对象作为参数传给毛病处置惩罚函数，catch块中作用域链的转变就没什么影响了。others
另有一些其他的状况，比方：
function foo(f){
(f);
function returnWindow(){
return window;
}
var s = returnWindow();
}一般状况下，上述函数window就是window，然则假如我们实行：
foo("var window = 'I am not window';");这时候的window就不再是谁人window了。机能上的题目不说，只是变量作用域变得不可控了，带来其他的题目。同时，在一些当代浏览器中，比方Safari的Nitro引擎中，会铜鼓剖析代码来肯定哪些变量应该在恣意时候被接见，绕过传统作用域链查找，用标识符索引的体式格局疾速查找，以此来加速标识符辨认历程。然则碰到动态作用域的时候，引擎须要切回慢速的基于哈希表的标识符辨认要领，这里的浏览器引擎做的勤奋就没方法了。
closures慎用闭包
慎用闭包有两个方面的缘由。一是闭包必定存在函数嵌套，闭包内接见外部变量都邑经由起码两次的查找。更重要的题目在于，闭包须要接见外部变量，因而致使函数运转期的激活对象被保留，没法烧毁。援用一直存在于闭包的[[Scope]]属性中，不仅斲丧更多的内存开支，在IE中还会致使内存泄漏。
Object Members 对象成员
JavaScript中一切皆对象，对象的定名成员能够包括恣意数据范例，固然就能够包括函数。这里所说的对象成员，指的就是函数对象，函数对象的接见速率，比直接亮和局部变量要慢，某些浏览器的完成中，以至比数组还要慢。找到优化方法之前，须要先相识缘由。
Prototypes原型JavaScript中的对象是基于原型的，原型是对象的基本，定义并完成了一个新对象所必需具有的成员。原型对象为一切给定范例的对象实例同享，一切的实例同享原型对象的成员。一个对象经由过程一个内部属性绑定到本身的原型，在FF/Safari/Chrome中，这一对象被称为_proto_，任何时候竖立一个内置范例的实例，这些实例将自动具有一个Object作为他们的原型。
因而一个对象具有成员能够分为两类：实例成员（own成员）和原型成员。实例成员直接存在于实例本身，而原型成员则从对象成员继续。例：
var cat = {
name:"xiaohua",
age:1
}在这里，cat的实例成员就是name和age，原型成员就是cat._proto_中的成员属性，而cat._proto_属性是Object.prototype，在这里就是Object，以下挪用时：
console.log(cat.name);在挪用cat.name属性时，如今cat实例成员中查找，假如挪用cat.toString()要领时，一样先在cat的实例成员中查找，找不到的时候再到其原型成员中查找，和处置惩罚变量的历程相似，一样也就致使了机能题目。
Prototype Chains原型链
对象的原型决议了一个实例的范例，默许状况下，一切对象都是Object的实例，并继续了一切基本要领，当我们运用组织器竖立实例时，就竖立了别的一种范例的原型。
function Animal(name,age){
this.name = name,
this.age = age
}
Animal.prototype.sayHello = function(){
console.log("Hello,I am a " + this.name);
}
var cat = new Animal("cat",1);
var dog = new Animal("dog",1);cat是Animal的实例，cat._proto_是Animal.prototype，Animal.prototype._proto_是Object；dog和cat同享一个原型链，但各自具有本身的实例成员name和age。假如我们挪用了cat.toString()要领时，搜刮途径以下：
cat---cat._proto_(Animal.prototype)---cat._proto_.constructor(Animal)---cat._proto_.Constructor._proto_(Object);原型链每深切一个层级，就会带来更大的机能斲丧，速率也就会更慢。而关于实例成员的搜刮开支本身就大于接见直接量或许是局部变量，因而这类机能斲丧照样很值得去优化的。
Nested Members嵌套成员
比方：window.local.href；每碰到一个.；JavaScript引擎就会在该对象成员上实行一次剖析历程。比方假如href并非local的实例属性，剖析引擎就会去local的原型链去举行搜刮，由此带来严峻的机能斲丧。Caching Object Member Values缓存对象成员的值
上述的机能题目都是和对象成员有关，因而要只管防止对对象成员的搜刮，比方：
function foo(ele,className1,className2) {
return ele.className == className1 || ele.className == className2;
}在这里，我们接见了两次ele的className属性，然则这两次接见时，ele的className属性值是一样的，因而能够在这里用一个变量暂存ele.className的值，防止两次接见致使的两次搜刮历程。处置惩罚嵌套属性更须要用这类方法来处置惩罚。
针对数据接见致使的相干机能题目，重要的解决方法就是对数据举行暂存，比方将全局变量暂存为局部变量，削减作用域链的深切搜刮；将实例的属性暂存，削减对原型链的屡次深切搜刮；另一个就是削减运用动态作用域和闭包。
高机能JavaScript浏览简记（一）
高机能JavaScript浏览简记（二）
高机能JavaScript浏览简记（三）
