High-performance JavaScript finishing summary
On front-end performance optimization: first thought is Yahoo military regulations 34
and recently read "high-performance JavaScript"
Probably the majority of the book that sort of knowledge of the case and add some personal understanding of
this reference book has a special performance of Yahoo research team, with 34 military regulations so there are many similarities
there are irregularities in the comments area please correct me, thank ~
Conventions : many words are abbreviated syntax example refers Document doc, important points represent the code bit is omitted, the codeword is not easy (/ folded hands)
1. load and execute
- JavaScript is single-threaded, so load and execute the JavaScript is loaded from top to bottom and then continue to perform a complete load to the next file, will block the page loads resources, so the JavaScript files in the body tag normally within the bottom, after many end developer on the body outside the label below, this is a bad place, there are two: 1, 2 non-standard, may cause js page elements can not get a result of an error. The label on the bottom of the inner body to ensure the implementation of the front page rendering is complete js
<body>
js... //正确
</body>
<!-----------------------分界线---------------------------->
<body>
</body>
js... //错误- Merge script, each <script> tag initialization downloads will block page rendering, so reduce the page <script> tag number can play a role in optimization, embedded script external scripts GM, in addition HTTP will bring additional performance consumption, merge download a 100KB file faster, so the script can be downloaded more than 4 to 1 25KB file, reducing the <script> tag number 2, to reduce (for external scripts), although it consumes a lot of HTTP requests to bring tools to help us complete the merger work, but the principle still need to know under.
Special case: the period of embedded script immediately outside the chain behind css label, will lead to: inline scripts in order to ensure the implementation of the time to get the most accurate style information, go wait outside the chain style sheets download, so It can cause obstruction to wait for a page to download the style sheet. as follows:
//错误示范
<link ... href='...'>
<script>
内嵌脚本...
</script>- Three methods of non-blocking JavaScript Downloads:
1. Use the defer attribute <script> tag, defer Description: whether the provisions of the script execution delayed until the page loads up.
2. Use dynamically created <script> element to download and execute code, commonly known as dynamic script injection, is recommended: script dynamically loaded in the head tag safer than the body tag, particularly the implementation of the script in the page loads, when the body not all content when loading is completed, IE may be error
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'a.js';
document.querySelectorAll('head')[0].appendChild(script);3. Use the XHR object and inject JavaScript code to download the page, commonly used tools such as LazyLoad library (lazy loading) LAB.js etc.
2. Data Access
- JavaScript four basic data access location:
1. literal: own behalf, without a specific location, comprising: a string, number, Boolean, objects, arrays, functions, regular expressions and null and undefined
2. Local variables: var / let / const keyword data defined the storage unit
3. the array elements: a memory array within JavaScript objects, numerically indexed, index starts from 0
4. Object member: JavaScript objects stored inside, the index string
access from a local variable and literal minimal consumption performance (negligible), and an array of objects when data is slightly higher.
Recommendation: literals and make use of the local variables (variables themselves after the release operation method, used to manually set to null or undefined too), and reduce the use of an array of objects, such as the value of a function of a reference scope chanting more than once, it can be stored into a local variable used
var doc = document.querySelectorAll... ,
a = doc.getElement... ,
b = doc.getElement... ,
c = doc.getElement... ;- Scope
Each function is represented as an object is an instance of Function, Function object provides an internal property [[scope]] js engine reads only the attribute (topic: css think of scoped properties, when used in vue assembly, changed pattern files to act only on the assembly) [[scope]] contains a collection of objects in a domain of the role of a function is created, the set is a function of the scope chain. When creating the execution environment, the scope chain is initialized to [[scope]] object properties, appear in the order, copied to the scope chain execution environment. Then the execution environment creates an 'active object', 'active object' as a function of the operating variable object, including all local variables, named parameters, parameter set and this, when the implementation of environmental destruction, activity objects are also destroyed.
When the function is executed, a face of each variable, are subjected to a resolution process identifier (identifier deeper position, corresponding to the slower read variable) to determine where to retrieve or store data.
Not well understood, an analogy, A B containing scope scopes, scopes B comprising C scopes, according to a variable to find a corresponding identifier C scope, if not found at the C-scope, it the scope of the search will go to B, B scope did not find, go a search scope, the search process consume the performance is still above example, document is a global variable, the variable is found when searching in the final global variables , it is placed in the local variable will be found more quickly.
TIPS: two different portions of the same name in the scope chain variable exists, the identifier is found while traversing the scope of the first, first find the back shield. Each browser identifier resolution rate differences.
Recommendation: Whenever possible, use local variables
with statement and try catch statements scope chain can be varied, with statement to avoid changing the scope chain, because it makes all the local variables of the scope chain appears in the second object,
function aa() {
with(document){ //访问document变快了，访问其他局部变量变慢了
var bd = body,
links = getElementsByTagName('a'),
i = 0,
len = links.length;
...
}
}Then try catch is to try block inside processing error thrown catch block, the scope chain is changed, when the catch block statement is finished, the scope chain will return to its previous state
- Dynamic scope
with, try catch, or contain eval () function can be considered dynamic scope, but they are only in the process of implementation of dynamic scope, it can not be detected by looking at the code structure, dynamics when necessary recommended only in scope
- Closure
function assignEvents() {
var id = '2341321';
document.querySelectorAll('#aaa').onclick = function (event) {
saveDom(id);
}
}
var idNew = id; //undefinedAs a local variable, id can only be visited in the current scope, the scope will not visit, but this event handler in the scope, you can get local variables id, it becomes a method saveDom outside assignEvents get assignEvents local variables id. To achieve this function closures [[scope]] property refers to an object assignEvents scope chain execution environment (object id attribute), when execution, execution environment destruction, active objects should also be destroyed, but because closure introduced, resulting in the active object is activated, it can not be destroyed, which requires more memory space. Since the use of non-native IE JavaScript DOM object to achieve the object, the closure may cause a memory leak. Because of the scope of views on cross saveDom variable id, so the closure will bring the performance of consumption, the solution is: common cross-scoped variables are stored in a local variable
- Object members
Most object-oriented JavaScript code is written (custom objects, BOM / DOM), it will lead to very frequent access object members. So objects also have access to optimize the local
nesting members: Objects can be nested within other members of the
nesting time is proportional to the depth of reading
- Prototype chain
Recommend an answer, the first Soviet Mexican orange answer, look compared to the previous stereotyped answer, this is easier to understand
on the prototype chain
3. DOM programming * * (common performance bottleneck)
Three questions:
1. Access and modify the DOM element
2. Modify the DOM element style and rearrangements lead to redraw
3. By DOM event handling and user interaction
- JUDGMENT
DOM: document object module document object model, can be understood as the operating program interface documentation
Why slow DOM, DOM operations are expensive, simple to understand is that two independent functions via an interface connected to each other as long as, it will generate consumption. For example: Chinese people buy iPhone, Americans buy Wei Long, need to pay tax, the consumption tax is the same, from the DOM to JavaScript from JavaScript to DOM or have similar consumption.
So try to reduce the number of such taxes to achieve certain performance optimizations,
the worst access operation or the way to the DOM, is consumed in the cycle performance.
//bad
for(var i = 0; i < 10000; i++){
document.querySelectorAll('#aaa').innerHTML += 'a';
}
//good
var aaaHtml = '';
for(var i = 0; i < 10000; i++){
aaaHtml += 'a';
}
document.querySelectorAll('#aaa').innerHTML += aaaHtml;- About innerHTML and DOM methods (doc.createElement ()) Who faster
Without considering Web standards, almost.
In addition to the browser than the latest version of WebKit kernel, innerHTML faster, older browsers more efficient
new version of WebKit core browser DOM method is faster
clone node brings optimize the effect is not very obvious, skip
through the collection when using elements of local variables (with the operating element is a reason many times, do not go into details)
- DOM traversal
In general, querySelectorAll () Gets the element is the fastest API returns a NodeList
querySelector () returns the Element,
querySelectorAll () Another point is that you can get two types of elements simultaneously
var two = doc.querySelectorAll('div.aaa,div.bbb');- Redrawn and rearranged
Browser download all components --HTML tag page, parses generated after the JavaScript, CSS, images two internal data structures:
1.DOM tree representation of the page structure, such as morning exercises on the playground, red you stand here, you little green that station, Bob ... (get out), ha, joke, structures such as the location of the DOM tree
2. render tree
shows how the DOM node to display a green clothes such as red, green small red clothes, Xiao Ming wearing a red wool coat with long hair and green hair, and so small
Each node of the DOM tree that appears at a node corresponding to at least the presence of species rendering (no hidden element corresponding to the node, it is possible to use this, first display element hiding then processed to optimize the performance and consumption), rendering tree nodes are called 'frames' or 'box', in line with the definition of the model CSS. (Box model not fall into a box) when the DOM and rendering tree construction is complete, the browser displays the start page elements.
When will it begin to redraw and rearrange it:
When DOM changes affect the geometric attributes, the browser will render the affected part of the tree fail to re-construct the rendering tree. This process is known rearrangement; such class seats properly, Xiaoming after a certain period of time Great fat 200 pounds, had Xiaoming sitting position, now require two positions, other students need to both sides to sit or sit back, of course, Bob will not Get out good or bad will depend on the results of Xiao Ming.
After completion of the rearrangement ,, browser will redraw the affected part to the screen, this process is called redraw;
when changing non-geometric attributes of the DOM, redraw will take place, will not be rearranged;
redraw and rearrangements are costly; minimize
Rearrangement occurs when:
1. Add or remove visible DOM element
2. The position changing element
3. The element size changes (inner and outer margins, borders, wide Higher thickness)
4. content change (resulting in dimensional change when the content)
5. page rendering initialization
6. browser window size changes
- Rearrangement and reduction redraw
//三次重绘
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';
//一次重绘
el.style.cssText = 'border-left: 1px;border-right: 2px; padding: 5px';How to reduce the bulk and redraw rearrangement modifying the DOM: steps:
1. that the documents from the flow element
2. The change its multiplex
3 the element back to the document // rearrangement step 13 twice
So that the document DOM from three methods:
1. Hidden element - application modifications - display
2. document fragments, constructing a DOM outside the current subtree, then copied back document
3. copy to a node from the document, modify the copy, the copy replaces the original elements
- Let elements from animation stream
In general, the rearrangement affects only a small part of the rendering tree, but may also affect a large part or even all of them. A large-scale rearrangements may let users find pages meal meal, affecting the user experience
to avoid most of the rearrangement: elements using absolute positioning allowed to flow out of the document - Animation - Restoring
- IE sum: hover
From the start IE7, IE can be used on any element: hover The pseudo-selectors, but when you use a large number of elements will reduce the response speed is more pronounced IE8
- Event delegates: the event is captured by bubbling into the parent
Each bind an event handler is a price
event in three stages: capture - to reach the goal - bubbling
compatibility issues event delegate: access the event object to determine the event source, cancel bubbling (optional) to prevent default action (optional)
number using the event to reduce the delegate event handler
4. The flow control algorithm and
- cycle
One important part of most programming languages, the most time consuming code execution in a loop, the loop is to enhance the performance of
JavaScript four main iterative:
1.For cycle
Tips：for循环初始化会创建一个函数级变量而不是循环级，因为JavaScript只有函数级作用域（ES6存在块级作用域if(){let n = ...}let定义的n只作用于if块内部，执行完就会释放不会导致变量提升）,所以在for循环中定义一个变量和在循环体外定义一个变量时一样的
var i = 100;
for(var i = 0; i < 10; i++){
console.log(i) //0,1,2,3...9
}2.while cycle
3.do-while loop
4.for in circulation
Tips: for in the cycle can enumerate any object property name (not the value), but for in the cycle than the other three significantly slower , so unless you want to iterate over a unknown number of attributes of the object, or avoid using the for in loop, if the number of known attributes to traverse a property list, other loop in faster than for, such as:
var arr = ['name','age'],
i = 0;
while(i < arr.length){
process(object[arr[i]]);
} Type of cycle is assumed that the above four properties as to optimize the performance of the cycle can be from two aspects:
(when the loop complexity X, preferentially reduce the complexity of the optimization loop, the loop complexity is greater than X, optimization preferentially reduce the number of iterations)
1. each iteration of the transaction (to reduce the complexity of the loop)
the number of iterations 2. (number of cycles is reduced, Baidu 'Duff equipment'), so to be understood that the device is disassembled cycle Duff , such as 100 to traverse a length of the array, the loop performed 100 times under ordinary circumstances, is thought to Duff device 100 for each split cycle performed multiple times (n denotes) 100 n-I take, I take the number of execution and then execute 100 divided by n (rounded down) cycles, the loop body is executed n times the normal cyclic operation body
Duff device code :( this is what I said 8 n)
var i = items.length % 8; //先循环余数次数
while(i){
process(items[i--]);
}
i = Math.floor(items.length / 8); //再循环8的整数倍次数 循环体是普通循环的8倍 可以写成函数传参调用
while(i){
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
}Find minimize property:
for(var i = 0, len = arr.length; i < len; i++){
...
}Based on iterated function: forEach ()
All members of the forEach traverse an array, and executes a function
arr.forEach(function(value, index, array){
...
})But in all cases under. Iteration of the loop based on the iterated function than 8 times faster, stringent speed requirements, based on the priority-based iterative loop iteration function
- Conditional statements
if-else comparison switch:
use if-else condition easier to read when there is less, and when the if-else condition more performance overhead than the big switch, legibility did not switch well.
If-else optimization method is: as much as possible the conditions that can occur in the first place, such as:
var i = Math.random(1);
if(i <= 0.8){ //i小于0.8是几率最大的，如果i的值满足i <= 0.8 后面的条件就不会再判断了
...
}else if(i > 0.8 && i <= 0.9){
...
}else{
...
}Many times when :( conditions such as 10 and 10), to avoid the use of conditional statements if-else, switch the best way is to use a hash table
- Memoization
Reduce the workload is the best performance optimization techniques (you can understand, cut demand for performance optimization, this is Lu Xun said - Lu Xun: I really said these words)
Memoization avoid duplication of work, a calculated before Cache the result is used in the calculation behind
such as 4,5,6 respectively factorial
factorial 6, because I cache the results of the factorial of 5, 6 factorial is factorial then the result is multiplied by 5 of 6
<!--Memoization缓存重复运算的值-->
function memoizeA(n) {
if(!memoizeA.cache){
memoizeA.cache = {
'0': 1,
'1': 1
}
}
if(!memoizeA.cache.hasOwnProperty(n)){
memoizeA.cache[n] = n * memoizeA(n-1)
}
return memoizeA.cache[n]
}
var a1 = memoizeA(4)
console.log(a1) //24
var a2 = memoizeA(5)
console.log(a2) //120
var a3 = memoizeA(6)
console.log(a3) //720
<!--封装为方法-->
function memoize(func, cache) {
cache = cache || {};
var shell = function (arg) {
if(!cache.hasOwnProperty(arg)){
cache[arg] = func(arg);
}
return cache[arg];
}
return shell;
}
var funCcc = function ccc(n){
if(n == 0){
return 1;
}else{
return n*ccc(n-1)
}
}
var a4 = memoize(funCcc,{"0":1,"1":1});
console.log(a4(6)); //720The string and a regular expression
Description: Regular expression I will not 
- String
Performance Comparison four stitching method string:
A: str = str + 'a'+'b'
B: str += 'a' + 'b'
C: arr.join ( '')
D: str.concat ( 'B', 'C')
for the comparison between A and B: B is created in memory a temporary string, the string concatenation of 'ab' assigned temporary string, assign temporary string str; a most browsers than B, but in IE8 earlier and, B is better than a
About the first two join, concat plus splicing efficiency:
//+=
(function () {
var startTime = new Date().getTime();
var str = '';
var addStr = 'hello world~, hello xiaojiejie';
for(var i = 0; i < 100000; i++){
str += addStr;
}
var endTime = new Date().getTime();
console.log('字符串str += a:');
console.log(endTime-startTime);
})();
// +
(function () {
var startTime = new Date().getTime();
var str = '';
var addStr = 'hello world~, hello xiaojiejie';
for(var i = 0; i < 100000; i++){
str = str + addStr;
}
var endTime = new Date().getTime();
console.log('字符串str = str + a:');
console.log(endTime-startTime);
})();
//concat
(function () {
var startTime = new Date().getTime();
var str = '';
var addStr = 'hello world~, hello xiaojiejie';
for(var i = 0; i < 100000; i++){
str = str.concat(addStr);
}
var endTime = new Date().getTime();
console.log('字符串str.concat:');
console.log(endTime-startTime);
})();
//join
(function () {
var startTime = new Date().getTime();
var str = '';
var arr = [];
var addStr = 'hello world~, hello xiaojiejie';
for(var i = 0; i < 100000; i++){
arr.push(addStr);
}
str = arr.join('');
var endTime = new Date().getTime();
console.log('字符串join:');
console.log(endTime-startTime);
})();I use this code in a simple test on chrome65 lower, on average, A> B> C> D, not statistical averages, did not test other browsers
, said in IE join the old version of the book is relatively fast, but also a large number of characters the only efficient way to splice string
detail with reference to several string concatenation performance
6. Fast corresponding user interface
- Browser UI thread
Process for executing JavaScript and update the user interface is called 'browser UI thread', a work based on the UI thread queue system, when the process is idle, it will change from the queue to execute extraction task, which may be the JavaScript code UI may also be updated (redrawn, rearrangement).
UI: User Interface GUI: Graphical User Interface from this picture links running time limit browser JavaScript tasks, limit two minutes, can prevent the execution of malicious code continue to lock your browser to take total operating time of a single JavaScript should be less than equal to 100ms , which means that users of the operating respond within 100ms, otherwise it will allow users to feel a sense of slow
- Let the time the timer fragment
If the code is complex 100ms operations finish, you can use a timer to make a piece of time, so that the gain control UI update.
这个例子只是说明JavaScript单线程，定时器可以把任务放到后面执行，方便理解
console.log(111)；
setTimeout(func(){console.log(222)},0);
console.log(333);
//111 333 222JavaScript is single-threaded, so the timer can be put back into JavaScript tasks, control over the UI thread to the first
timer accuracy of a few milliseconds deviation ,, Windows system timer resolution of 25ms, it is proposed to set the minimum delay of 25ms
Put a task into a series of sub-tasks
to run a long time a function is decomposed into a short-running subroutine
Obtained by calculation using the program run time stamp to quickly find a longer running time to optimize code portions
重复的定时器会抢夺UI线程的运行时间，1秒及以上的低频定时器不会有什么影响，当使用高频100ms-200ms之前的定时器时响应会变慢，所以高频重复定时器使用要注意
- Web Workers （HTML5新特性）
在UI线程外运行，不占用UI线程的时间
来自W3C的worker demo
Web Workers不能修改DOM
运行环境组成：
一个navigator对象
一个location对象（与window.location相同 属性-只读）
一个self对象，指向worker对象
可以引入需要用到的外部文件importScripts()方法
可以使用js对象 Object、Array、Date等
XHR
定时器
close() 立刻停止Worker运行
W3C介绍Web Worker
博文：Web Worker原理和应用介绍
实际应用场景：处理纯数据或者与UI线程无关的长时间运行脚本，个人觉得大量的纯计算可以考虑使用
7. Ajax（阿炸克斯）
前面说到数据存取会影响性能，理所应当的，数据的传输同样影响性能
Ajax通过异步的方式在客户端和服务端之间传输数据。
- 数据传输
请求数据的五种方式：
A:XMLHTTPRequest(简称XHR)
最常用异步异步发送和接收数据,包括GET和POST两种方式
不能跨域
GET--参数放在url后面，请求得到的数据会被缓存，当url加参数超过2048，可以使用POST方式
POST--参数在头信息，数据不会被缓存
XHR工作原理及优缺点参考选我选我
B:动态脚本注入
其实就是创建一个script元素这个元素的src不受当前域限制，但是不能设置请求头信息，也就是只能用GET方式
C.Multipart XHR
MXHR荀彧一个HTTP请求就可以传输多个数据
通过在服务端讲资源打包成一个双方约定的字符串分割的长字符串发送到客户端，然后根据mime-typed类型和传入的其他头信息解析出资源
缺点：资源不能被缓存
D.iframe
E.comet
发送数据：XHR、Beacons、
- 数据格式
A.XML
优点：通用、格式严格、易于验证
缺点：冗长、结构复杂有效数据比例低
B.JSON
JSON.parse():JSON-->对象
JSON.stringify()：js值-->JSON字符串
文件小、下载快、解析快
C.JSON-P
在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
D.HTML
E.自定义数据格式
- Ajax性能
最快的Ajax请求就是没有请求（贫一句：最快的写程序方式就是天天跟产品拌嘴，砍需求，那啥，我先跑了，产品拿着刀追来了）
避免不必要的请求：
服务端设置HTTP头信息确保响应会被浏览器缓存
客户端讲获取的信息存到本地避免再次请求（localstorage sessionstorage cookice）
设置HTTP头信息，expiresgaosu告诉浏览器缓存多久
减少HTTP请求，合并css、js、图片资源文件等或使用MXHR
通过次要文件用Ajax获取可缩短页面加载时间
8. 编程实践
- 避免双重求值
eval()、Function慎用，定时器第一个参数建议函数而不是字符串都能避免字符串双重求值
- 使用对象或者数组直接量
直接量：
var obj = {
name:...
age:...
}非直接量：
var obj = new Object()
obj.name = ...
...运行时直接量比非直接量快
- 避免重复工作
A:延迟加载（懒加载）
进入函数-->判断条件-->重写函数
B:条件预加载
函数调用前提前进行条件检测
var addEvent = doc.addEventListener ? funcA : funcB
- 使用JavaScript速度快的部分
A.位操作
B.原生方法，首先原生方法是最快的，而且浏览器会缓存部分原生方法
C.复杂计算时多使用Math对象
D.querySelector和querySelectorAll是查询最快的
当用Document类型调用querySelector()方法时，会在文档元素范围内查找匹配的元素；而当用Element类型调用querySelector()方法时，只会在这个元素的后代元素中去查找匹配的元素。若不存在匹配的元素，则这两种类型调用该方法时，均返回null。
9. 构建并部署高性能JavaScript应用
这一章讲的都是其他章节的优化原理的实践，主要有：
1.合并多个js文件
2.预处理js文件
3.js压缩
4.js的HTTP压缩
5.缓存js文件
6.处理缓存问题
7.使用内容分发网络（CDN）这个有点效果显著的感觉，前年第一次用的时候感觉快了很多，打个比方就是：
京东网上水果蔬菜超市，假设你在上海买了一个榴莲，京东可以在上海的仓库给你发货，如果上海没有他们的仓库，就在离你最近的一个仓库发货，以保证最快速度送到你手上（吃什么不好，吃榴莲，别人会说食屎拉你）。这个仓库放的就是静态资源文件，根据请求发出的位置找到最近的CDN节点把资源返回给请求端，大概是这个意思，具体原理参考CDN原理
现在很多方式都在gulp、webpack工具里进行了，方便省事
10. 工具
- JavaScript性能分析
使用Date对象实例减去另一个实例获得任务运行时间毫秒数
- 匿名函数
测量分析匿名函数的方法就是给匿名函数加上名字
- 调试工具
Personally like chrome debugging tools
contribute a few more full tutorial
Basics
optimized articles
combat a
real 2
English Introduction Use
- Script blocking
Safari4, IE8, Firefox3.5, chrome and above allows scripts to be downloaded in parallel, but run blocking, although the file download faster, but page rendering any blocks until the script runs out
of the slow-running scripts optimization or reconstruction, unnecessary wait until the script page rendering is complete reload
- Page Speed
Display and run JavaScript parsing time consuming, it indicates that you can extend the script is loaded, and the report not being used by function
- Fiddler
Fiddler is an HTTP debugging proxy tool that can detect all the network resources to locate bottlenecks load
- YSlow
YSlow tools insight into the overall performance of the process of the initial page load and run
- WebPagetest
WebPagetest: according to the user's browser true connection speed, web speed test carried out on a global scale, and provide detailed optimization tips.
WebPagetest
- Google PageSpeed
PageSpeed based on best practices web page analysis and optimization testing.
- Pingdom Website Speed Test
Enter a URL address to the page loading speed test, analyze and identify performance bottlenecks.
Pingdom Website Speed Test
There are many similar tools: reference front-end performance optimization and testing tools summary
This document contents of the trunk from the "high-performance JavaScript" and other other blog and indicate the source, if infringement please contact the author deleted -
the follow-up program will be explained more by the effects of the burden of proof, and constantly improve this document
Note: The contents are inappropriate or wrong please correct me please indicate the source ~ ~ Thank you!