-------------------------------------------------------------------------------------------------------
又有好长时间没有写博客了，今天想起来之前的那篇博客还没有写完，然后就开始接着写，本来想把《高性能JavaScript》这本书的知识都罗列进来的，但是......太多了,哎，还是慢慢来，于是就打算分开来写。
本人JavaScript水平并不是特别高，也只是把自己阅读《高性能JavaScript》的部分想法记录一下，难免会有错误哈。如果对JavaScript的性能优化有兴趣的话，不妨亲自读一读。这本书虽然已经出版很多年了，不过里面的部分思想能够有助于我们理解JavaScript的运行机制以及瓶颈所在。
-------------------------------------------------------------------------------------------------------
加载和执行
- 脚本阻塞
由于javascript语言是单线程的，决定了javascript语言是单线程的，因此在浏览器上UI的刷新与javascript代码的逻辑执行就无法同步执行。
浏览器中遇到界面上的<script> 标签，浏览器无法判断script标签中的代码是否会更行dom节点（若需要更新dom则会引起界面的二次重绘）。因此在浏览器中，遇script标签的时候，将会暂停dom的绘制和渲染以及界面的交互响应，直到javascript被加载（包括外链下载的过程），执行。
脚本的合并能够减少系统发送http请求的次数，能够减少建立http连接的次数，从而减少阻塞的时间。
- 实现无阻塞加载的方法（nonblocking script）
- 使用script标签的defer和async属性，显式通知浏览器引入的script标签不会改变dom结构，浏览器在加载的时候将会异步加载
- defer与async加载的比较：两者都能够实现脚本的异步加载，即下载的过程中不会阻塞页面的渲染。区别在于执行的时机，带有async属性的script标签在下载完成后将会自动执行，而然带有defer属性的script标签则要等到页面加载完成后才执行。
- defer属性只有在script标签存在src属性时才会生效，即仅对外联脚本有效
- 动态脚本加载，通过JavaScript代码生成一个页面script标签，并为其指定src,文件的下载将不会阻塞页面
let script = document.createElement(‘script‘); script.type = ‘text/javascript‘; script.src = `${src}`; document.getElementsByTagName(‘head‘)[0].appendChild(script);- 使用动态方式加载脚本时，当js文件下载完成后将会自动执行，但如果有多个脚本文件注入时，由于js文件的下载速度不同，可能导致文件执行的顺序错乱，尤其当后一个脚本文件依赖于上一个脚本文件的执行时将会出错。
// 解决方法：通过监听script标签的加载状态并触发回调，在回调函数中加载依赖的javascript文件 ? // 加载脚本的方法 var loadScript(url, callback) { var script = document.createElement(‘script‘); script.src = url; // 在非IE浏览器中(主流浏览器)，script标签加载完成时会触发onload事件，而IE浏览器中script的加载状态通过readyState实现，readyState有以下 值：‘uninitialized‘（初始状态）,‘loading‘（下载中）,‘loaded‘（下载完成）,‘interactive‘（数据下载完成但尚不可用）,‘complete‘（所有数据准备就绪）,在IE中需要监听readyState的状态改变，以便在合适的时机触发回调 if(script.readyState) { // IE旧版本兼容 script.onreadyStatechange = function(){ if(script.readyState === ‘loaded‘ || readyState === ‘complete‘) { script.onreadyState = null; callback(); } } } else { script.onload = function () { callback() } } } // callback中可以加载下一个顺序执行的javascript文件注意：当有多个文件需要顺序执行时，将会有多层回调函数的嵌套，容易形成回调地狱
loadScript(‘file1.js‘, function(){ loadScript(‘file2.js‘, function(){ loadScript(‘file3.js‘, function () { loadScript(‘files.js‘); }) }) }) // 加载顺序： file1.js --> file2/js --> file3.js --> file4.js // 当多文件嵌套时，尽可能将多个文件按照加载顺序合并成一个文件 - XMLHttpRequest脚本注入
- 通过XHR对象异步下载javascript文件
var xhr = new XMLHttpRequest(); xhr.open(‘get‘, `${url}`); shr.onreadystatechange = function () { if(xhr.readyState===4) { if(xhr.state>=200 && xhr.state < 300 || xhr.state == 304) { var script = document.createElement(‘script‘); script.type = ‘text/javascript‘; script.text = xhr.responseText; document.getElementsByTagName(‘head‘)[0].appendChild(script); } } } xhr.send(null);注意：该方法不能够进行跨域操作
- 通过XHR对象异步下载javascript文件
- 使用script标签的defer和async属性，显式通知浏览器引入的script标签不会改变dom结构，浏览器在加载的时候将会异步加载
数据存取
- 明确javascript中有四种数据存取位置
- 字面量 --> 相当于常量吧，例如 var a = 100,其中100就是字面量，javascript中的字面量包括：字符串，数字，布尔值，对象字面量，数组字面量，函数，正则字面量以及null，undefined，他们只代表字面量本身的值而不具备特定的存储位置
- 本地变量，使用var，let等关键字声明的变量，将字面量存储在特定的变量上，如var a = 100，其中a就是本地变量
- 数组元素，存储在javascript数组中的成员，通过下标获取。注意：此处的数组元素与数组字面量是不同的概念，如[1, 2, 3, 4]，整体表示的是是数组字面量，而不涉及到数组内部元素的存取；[1,2,3,4] [0]则涉及到数组内部元素的访问
- 对象成员，对象与对象字面量的区别与数组类似
通常情况下，访问字面量或者局部变量的性能消耗相对较小，而对于数组元素和对象成员的访问代价相对较大，如果对于运行速度有较高的要求，那就尽可能使用字面量和局部变量，减少使用数组和对象，当然当下主流浏览器对于变量的访问进行了优化，对数组和对象的访问速度的差异已经没有那么明显了。
- 函数作用域链对变量访问的影响
- javascript中是通过链的方式来保存作用域的，当一个函数被创建时，该函数的执行期上下文将会被添加到作用域链的顶端。
const name = ‘zhang‘; let test = function () { let a = 100; console.log(name); } test (); // test执行时需要访问变量name，而在自身的函数作用域中不存在变量name，因此会向上层作用域进行回溯。当然作用域链的层数不一定只有两层，当多层作用域连接时，访问变量会一次沿着作用域链向上搜索。 // 当然也有可能访问完所有的作用域，依然找不到变量，此时就会抛出一个ReferenceError，也就是说，当你在函数中访问一个不存在的变量时，此时将会沿着作用域链向上搜索，直至顶层作用域，效率很低。- 由于全局变量时存放在全局作用域中的，位于作用域链的最底部，因此对于全局变量的访问将会很大程度上影响性能 ，在javascript中考虑性能优化时需要尽量避免访问全局变量，当需要多次访问全局变量时，可以将其保存到局部变量之中，以加快访问的速度
let visitDom () { const dom1 = document.getElementById(‘test1‘); const dom2 = document.getElementById(‘test2‘); const dom3 = document.getElementById(‘test3‘); const dom4 = document.getElementById(‘test4‘); ....... } // 其中，document就是一个全局变量，当访问document时，函数将需要沿着作用域链层层回溯，如果函数所在的层次更深一些，那么访问的效率就更低 let visitDom2 () { const doc = docuemnt; const dom1 = doc.getElementById(‘test1‘); const dom2 = doc.getElementById(‘test2‘); const dom3 = doc.getElementById(‘test3‘); const dom4 = doc.getElementById(‘test4‘); } // 在上述方法中，使用一个局部变量将需要频繁访问的变量document保存起来，此时只需要沿着作用域链搜索一次，其余的操作只要访问当前作用域即可得到 // 通过以局部变量保存全局变量的方式，减小搜索的深度。 - 改变作用域链
- with()语句
const visitDom () { const a = 100, b = 200, c = 300; with (document) { // with语句强制性将document对象添加到函数的作用域链的顶部，即在当前with函数域中document是顶级作用域 const dom1 = getElementById(‘test1‘); const dom2 = getElementById(‘test2‘); const dom3 = getElementById(‘test3‘); const dom4 = getElementById(‘test4‘); console.log(a); console.log(b); console.log(c); } } // 看似访问效率提高了，可是在with函数作用域中，对于局部变量的访问效率将会降低 // 在with语句中访问a，b，c时，若没有with语句，就是访问局部变量；可是有了with语句，由于当前的作用域被document代替，因此，需要向上层作用域进行搜索，此时是的对于局部变量的访问成本增加。 // 当然，在上面这个案例中，完全可以避开这种缺陷，即将console.log语句移动到with之外，就可以避免局部变量的访问，但有些时候是无法将其分离的，比如说在getelementById()函数中使用局部变量，此时就无法分离开来。with()语句可能会增加对局部变量的访问成本，因此需要谨慎使用，而且在ES5严格模式中已不推荐使用with()语句改变作用域链了。
- catch()语句
catch语句中需要接受一个异常参数，并对异常进行处理，但cath语句会将异常对象推入到作用域链顶端，就如同with一样，会在成局部变量访问的性能开销
try { do something ... } catch (ex) { // 此时ex对象作为catch函数作用域链中的顶层作用域 handle exception ... } // 不同于with()语句，有些时候catch语句的作用是无法被替代的，因而很难避免使用catch语句，我们需要获取ex异常对象，进行一些异常处理，那么方法来了，可以声明一个专门的异常处理函数，将ex对象作为参数传入 try { do something ... } catch (ex) { handerExp(ex); } const handlerExp = function (ex) { const a = 100, b = 200, c = 300; handle exception ... } // 此时访问局部变量就不会存在回溯作用域链的情况了- 动态作用域
with(),catch()以及eval()语句都属于动态作用域，动态作用域只存在于代码执行的过程中，因此无法通过静态分析检测
function excute (code) { eval (code); function subroutine () { return window; } var w = subroutine; console.log(w); } // 此时w的值其实是无法静态分析的，只有在code值确定时方能确定 excute(‘var window = 100‘); // w --> 100 excute(‘var a = 100‘); // w --> window(全局对象)案例引自《高性能JavaScript》 作者：[美]Nicbolas C.Zakas; 丁琛译
使用eval()会使得浏览器自身的静态分析优化失效
(部分浏览器自身实现了通过代码分析确定哪些变量会被访问，从而避开搜索作用域链，进而达到优化变量搜索的功能)
因而，一般尽量避免使用动态作用域
- 对象成员的访问
- 对象原型
javascript是通过原型的方式实现继承
hasOwnProperty()与in操作符的比较：
两者都是用来判断某一个key是否存在于对象内部
不同点在于：hasOwnProperty()方法只会遍历对象本身的属性，而in操作符会遍历对象原型上的属性
因此，频繁的使用in操作符会降低搜索的效率
- 原型链
function Book (title, publisher) { this.title = title; this.publisher = publisher; } ? Book.prototype.sayTitle () { alert(this.title); } ? const book1 = new Book(‘High Performance JavaScript‘, ‘Yahoo！ Press‘); const book2 = new Book(‘JavaScript:The Good Parts‘, ‘Yahoo! Press‘); alert(book1 instanceof Book); // true alert(book2 instanceof Object); // true ? book1.sayTitle(); // High Performance JavaScript alert(book1.toString()); // [object Object]当需要访问原型链上某个对象上的变量时，同样需要类似于作用域链那样一层层向上搜索。对于原型链的搜索会带来类似于函数作用域链那样的开销。
- 对象的嵌套访问
a.b.c.d --> 对象成员嵌套的层数越多，访问的开销越大
- 对于一个多次访问但是不发生修改更新操作的对象，可以将其缓存为局部变量，以减小性能的开销
const a = { b: { c: { d: { method () { do something ... } } } } } // 当我们需要频繁使用method方法时，就需要重复沿着嵌套对象一层一层往下找 适 const d = a.b.c.d d.method(); d.method(); // 这是一种折中的方案，此时method方法中的this指向d，同时也避免了不必要的嵌套搜索
- 对象原型
----------------------------------------------------------------------------
好了，今天《JS高程》又到了，感觉自己水平还是不太够，有些基础还有待加强哈！！
自勉
-----------------------------------------------------------------------------
2019-04-11 15:34:23
原文地址：https://www.cnblogs.com/zhangzhengsmiling/p/high_performanceJS.html