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