高性能JavaScript（1）

-------------------------------------------------------------------------------------------------------

　　又有好长时间没有写博客了，今天想起来之前的那篇博客还没有写完，然后就开始接着写，本来想把《高性能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);

注意：该方法不能够进行跨域操作

数据存取

明确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()语句执行结束时，document对象将会从作用域链顶部移除

 }

 // 看似访问效率提高了，可是在[[with()函数作用域^①]]中，对于局部变量的访问效率将会降低

 // 此处个人的理解可能存在偏差，特此更新，为记录自己的错误理解,因此采用更新的方式纠正

 // 在with语句中访问a，b，c时，若没有with语句，就是访问局部变量；可是有了with语句，由于当前的作用域被document代替，因此，需要向上层作用域进行搜索，此时是的对于局部变量的访问成本增加。

 // 当然，在上面这个案例中，完全可以避开这种缺陷，即将console.log语句移动到with之外，就可以避免局部变量的访问，但有些时候是无法将其分离的，比如说在getelementById()函数中使用局部变量，此时就无法分离开来。

with()语句可能会增加对局部变量的访问成本，因此需要谨慎使用，而且在ES5严格模式中已不推荐使用with()语句改变作用域链了。

****************************************************************************************

①今天看了《JavaScript高级程序设计》，里面有一节延长作用域链，看了里面的代码，运行了一下，结果是能跑通的，于是乎，就感觉自己之前的理解有误

with()语句看起来像一个函数，但其本质上与函数作用域是存在区别的，其本质上是一条语句
```
function buildUrl () {

    var qs = '?name=zhang';

    with (location) {

        var url = href + qs;

    }

    return url; // 如果with()是一个函数作用域的话，此处访问url将会报错，但实际上并不会,因此，with()语句是不会识别为作用域的

}

document.write(buildUrl());
```

　　　　　　更新时间：2019-04-15 10:52:52

　　****************************************************************************************

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》作者：[美]Nicholas 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