前端性能优化之 JavaScript

2019-06-17  本文已影响0人  蟹丸

前言

本文为 《高性能 JavaScript》 读书笔记，是利用中午休息时间、下班时间以及周末整理出来的，此书虽有点老旧，但谈论的性能优化话题是每位同学必须理解和掌握的，业务响应速度直接影响用户体验。

一、加载和运行

大多数浏览器使用单进程处理 UI 更新和 JavaScript 运行等多个任务，而同一时间只能有一个任务被执行

脚本位置

将所有script标签放在页面底部，紧靠</body>上方，以保证页面脚本运行之前完成解析

<html>
  <head> </head>
  <body>
    <p>Hello World</p>
    <!--  -->
    <script type="text/javascript" src="file.js"></script>
  </body>
</html>

defer & async

常规script脚本浏览器会立即加载并执行，异步加载使用async与defer
二者区别在于aysnc为无序，defer会异步根据脚本位置先后依次加载执行

<!-- file1、file2依次加载 -->
<script type="text/javascript" src="file1.js" defer></script>
<script type="text/javascript" src="file2.js" defer></script>

<!-- file1、file2无序加载 -->
<script type="text/javascript" src="file1.js" async></script>
<script type="text/javascript" src="file2.js" async></script>

动态脚本

无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。你甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName("head")[0].appendChild(script);

监听加载函数

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);
}

XHR 注入

前提条件为同域，此处与异步加载一样，只不过使用的是 XMLHttpRequest

总结

二、数据访问

数据存储在哪里，关系到代码运行期间数据被检索到的速度.每一种数据存储位置都具有特定的读写操作负担。大多数情况下，对一个直接量和一个局部变量数据访问的性能差异是微不足道的。

在 JavaScript 中有四种基本的数据访问位置：

总结

三、dom 编程

对 DOM 操作代价昂贵，在富网页应用中通常是一个性能瓶颈。通常处理以下三点

DOM 访问和修改

访问或修改元素最坏的情况是使用循环执行此操作，特别是在 HTML 集合中使用循环

function innerHTMLLoop() {
  for (var count = 0; count < 15000; count++) {
    document.getElementById("here").innerHTML += "a";
  }
}

此函数在循环中更新页面内容。这段代码的问题是，在每次循环单元中都对 DOM 元素访问两次：一次
读取 innerHTML 属性能容，另一次写入它

优化如下

function innerHTMLLoop2() {
  var content = "";
  for (var count = 0; count < 15000; count++) {
    content += "a";
  }
  document.getElementById("here").innerHTML += content;
}

你访问 DOM 越多，代码的执行速度就越慢。因此，一般经验法则是：轻轻地触摸 DOM，并尽量保持在 ECMAScript 范围内

节点克隆

使用 DOM 方法更新页面内容的另一个途径是克隆已有 DOM 元素，而不是创建新的——即使用 element.cloneNode()（element 是一个已存在的节点）代替 document.createElement();

当布局和几何改变时发生重排版，下述情况会发生：

减少重排次数

总结

四、算法与流程控制

代码整体结构是执行速度的决定因素之一。代码量少不一定执行快，代码量多，也不一定执行慢，性能损失与代码组织方式和具体问题解决办法直接相关。

Loops

在大多数编程语言中，代码执行时间多数在循环中度过。在一系列编程模式中，循环是最常见的模式之一，提高性能必须控制好循环，死循环和长时间循环会严重影响用户体验。

Types of Loops

前三种循环几乎所有编程语言都能通用，for in 循环遍历对象命名属性（包括自有属性和原型属性）

Loop Performance

循环性能争论的源头是应当选用哪种循环，在 JS 中 for-in 比其他循环明显要慢（每次迭代都要搜索实例或原型属性），除非对数目不详的对象属性进行操作，否则避免使用 for-in。除开 for-in，选择循环应当基于需求而不是性能

减少每次迭代的操作总数可以大幅提高循环的整体性能

优化循环：

编程中经常会听到此说法，现在来验证一下，测试样例

var arr = [];
for (var i = 0; i < 100000000; i++) {
  arr[i] = i;
}
var start = +new Date();
for (var j = arr.length; j > -1; j--) {
  arr[j] = j;
}
console.log("倒序循环耗时：%s ms", Date.now() - start); //约180 ms
var start = +new Date();
for (var j = 0; j < arr.length; j++) {
  arr[j] = j;
}
console.log("正序序循环耗时：%s ms", Date.now() - start); //约788 ms
循环正反序测试

基于函数的迭代

尽管基于函数的迭代显得更加便利，它还是比基于循环的迭代要慢一些。每个数组项要关联额外的函数调用是造成速度慢的原因。在所有情况下，基于函数的迭代占用时间是基于循环的迭代的八倍，因此在关注执行时间的情况下它并不是一个合适的办法。

条件表达式

if-else VS switch

使用 if-else 或者 switch 的流行理论是基于测试条件的数量：条件数量较大，倾向使用 switch，更易于阅读
当条件体增加时，if-else 性能负担增加的程度比 switch 更多。
一般来说，if-else 适用于判断两个离散的值或者几个不同的值域，如果判断条件较多 switch 表达式将是更理想的选择

优化 if-else

递归

会受浏览器调用栈大小的限制

迭代

任何可以用递归实现的算法可以用迭代实现。使用优化的循环替代长时间运行的递归函数可以提高性能，因为运行一个循环比反复调用一个函数的开销要低

斐波那契

function fibonacci(n) {
  if (n === 1) return 1;
  if (n === 2) return 2;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

制表

//制表
function memorize(fundamental, cache) {
  cache = cache || {};
  var shell = function(args) {
    if (!cache.hasOwnProperty(args)) {
      cache[args] = fundamental(args);
    }
    return cache[args];
  };
  return shell;
}
//动态规划
function fibonacciOptimize(n) {
  if (n === 1) return 1;
  if (n === 2) return 2;
  var current = 2;
  var previous = 1;
  for (var i = 3; i <= n; i++) {
    var temp = current;
    current = previous + current;
    previous = temp;
  }
  return current;
}
//计算阶乘
var res1 = fibonacci(40);
var res2 = memorize(fibonacci)(40);
var res3 = fibonacciOptimize(40);
//计算出来的res3优于res2，res2优于res1

总结

运行代码的总量越大，优化带来的性能提升越明显
正如其他编程语言，代码的写法与算法选用影响 JS 的运行时间，与其他编程语言不同，JS 可用资源有限，所以优化固然重要

五、字符串和正则表达式 String And Regular Expression

在 JS 中，正则是必不可少的东西，它的重要性远远超过烦琐的字符串处理

字符串链接 Stirng Concatenation

字符串连接表现出惊人的性能紧张。通常一个任务通过一个循环，向字符串末尾不断地添加内容，来创建一个字符串（例如，创建一个 HTML 表或者一个 XML 文档），但此类处理在一些浏览器上表现糟糕而遭人痛恨

Method Example
+ str = 'a' + 'b' + 'c';
+= str = 'a';
str += 'b';
str += 'c';
array.join() str = ['a','b','c'].join('');
string.concat() str = 'a';
str = str.concat('b', 'c');

当连接少量的字符串，上述的方式都很快，可根据自己的习惯使用；
当合并字符串的长度和数量增加之后，有些函数就开始发挥其作用了

+ & +=

str += "a" + "b";

此代码执行时，发生四个步骤

  1. 内存中创建了一个临时字符串
  2. 临时字符串的值被赋予'ab'
  3. 临时串与 str 进行连接
  4. 将结果赋予 str

下面的代码通过两个离散的表达式直接将内容附加在 str 上避免了临时字符串

str += "a";
str += "b";

事实上用一行代码就可以解决

str = str + "a" + "b";

赋值表达式以 str 开头，一次追加一个字符串，从左至右依次连接。如果改变了连接顺序（例如：str = 'a' + str + 'b'）,你会失去这种优化，这与浏览器合并字符串时分配内存的方法有关。除 IE 外，浏览器尝试扩展表达式左端字符串的内存，然后简单地将第二个字符串拷贝到它的尾部。如果在一个循环中，基本字符串在左端，可以避免多次复制一个越来越大的基本字符串。

Array.prototype.join

Array.prototype.join 将数组的所有元素合并成一个字符串，并在每个元素之间插入一个分隔符字符串。若传递一个空字符串，可将数组的所有元素简单的拼接起来

var start = Date.now();
var str = "I'm a thirty-five character string.",
  newStr = "",
  appends = 5000000;
while (appends--) {
  newStr += str;
}
var time = Date.now() - start;
console.log("耗时：" + time + "ms"); //耗时：1360ms

var start = Date.now();
var str = "I'm a thirty-five character string.",
  strs = [],
  newStr = "",
  appends = 5000000;
while (appends--) {
  strs[strs.length] = str;
}
newStr = strs.join("");
var time = Date.now() - start;
console.log("耗时：" + time + "ms"); //耗时：414ms

这一难以置信的改进结果是因为避免了重复的内存分配和拷贝越来越大的字符串。

String.prototype.concat

原生字符串连接函数接受任意数目的参数，并将每一个参数都追加在调用函数的字符串上

var str = str.concat(s1);
var str = str.concat(s1, s2, s3);
var str = String.prototype.concat.apply(str, array);

大多数情况下 concat 比简单的+或+=慢一些

Regular Expression Optimization 正则表达式优化

许多因素影响正则表达式的效率，首先，正则适配的文本千差万别，部分匹配时比完全不匹配所用的时间要长，每种浏览器的正则引擎也有不同的内部优化

正则表达式工作原理

  1. 编译
    当你创建了一个正则表达式对象之后（使用一个正则表达式直接量或者 RegExp 构造器），浏览器检查你的模板有没有错误，然后将它转换成一个本机代码例程，用执行匹配工作。如果你将正则表达式赋给一个变量，你可以避免重复执行此步骤。

  2. 设置起始位置
    当一个正则表达式投入使用时，首先要确定目标字符串中开始搜索的位置。它是字符串的起始位置，或者由正则表达式的 lastIndex 属性指定，但是当它从第四步返回到这里的时候（因为尝试匹配失败），此位置将位于最后一次尝试起始位置推后一个字符的位置上

  3. 匹配每个正则表达式的字元
    正则表达式一旦找好起始位置，它将一个一个地扫描目标文本和正则表达式模板。当一个特定字元匹配失败时，正则表达式将试图回溯到扫描之前的位置上，然后进入正则表达式其他可能的路径上

  4. 匹配成功或失败
    如果在字符串的当前位置上发现一个完全匹配，那么正则表达式宣布成功。如果正则表达式的所有可能路径都尝试过了，但是没有成功地匹配，那么正则表达式引擎回到第二步，从字符串的下一个字符重新尝试。只有字符串中的每个字符（以及最后一个字符后面的位置）都经历了这样的过程之后，还没有成功匹配，那么正则表达式就宣布彻底失败。

理解回溯

在大多数现代正则表达式实现中（包括 JavaScript 所需的），回溯是匹配过程的基本组成部分。它很大程度上也是正则表达式如此美好和强大的根源。然而，回溯计算代价昂贵，如果你不够小心的话容易失控。虽然回溯是整体性能的唯一因素，理解它的工作原理，以及如何减少使用频率，可能是编写高效正则表达式最重要的关键点。

正则表达式匹配过程

  • 当一个正则表达式扫描目标字符串时，它从左到右逐个扫描正则表达式的组成部分，在每个位置上测试能不能找到一个匹配。对于每一个量词和分支，都必须决定如何继续进行。如果是一个量词（诸如*，+?，或者{2,}），正则表达式必须决定何时尝试匹配更多的字符；如果遇到分支（通过|操作符），它必须从这些选项中选择一个进行尝试。
  • 每当正则表达式做出这样的决定，如果有必要的话，它会记住另一个选项，以备将来返回后使用。如果所选方案匹配成功，正则表达式将继续扫描正则表达式模板，如果其余部分匹配也成功了，那么匹配就结束了。但是如果所选择的方案未能发现相应匹配，或者后来的匹配也失败了，正则表达式将回溯到最后一个决策点，然后在剩余的选项中选择一个。它继续这样下去，直到找到一个匹配，或者量词和分支选项的所有可能的排列组合都尝试失败了，那么它将放弃这一过程，然后移动到此过程开始位置的下一个字符上，重复此过程。

示例分析

/h(ello|appy) hippo/.test("hello there, happy hippo");

此正则表达式匹配“hello hippo”或“happy hippo”。测试一开始，它要查找一个 h，目标字符串的第一个字母恰好就是 h，它立刻就被找到了。接下来，子表达式（ello|appy）提供了两个处理选项。正则表达式选择最左边的选项（分支选择总是从左到右进行），检查 ello 是否匹配字符串的下一个字符。确实匹配，然后正则表达式又匹配了后面的空格。然而在这一点上它走进了死胡同，因为 hippo 中的 h 不能匹配字符串中的下一个字母 t。此时正则表达式还不能放弃，因为它还没有尝试过所有的选择，随后它回溯到最后一个检查点（在它匹配了首字母 h 之后的那个位置上）并尝试匹配第二个分支选项。但是没有成功，而且也没有更多的选项了，所以正则表达式认为从字符串的第一个字符开始匹配是不能成功的，因此它从第二个字符开始，重新进行查找。它没有找到 h，所以就继续向后找，直到第 14 个字母才找到，它匹配 happy 的那个 h。然后它再次进入分支过程。这次 ello 未能匹配，但是回溯之后第二次分支过程中，它匹配了整个字符串“happy hippo”（如图 5-4）。匹配成功了。

回溯失控

当一个正则表达式占用浏览器上秒，上分钟或者更长时间时，问题原因很可能是回溯失控。正则表达式处理慢往往是因为匹配失败过程慢，而不是匹配成功过程慢。

var reg = /<html>[\s\S]*?<head>[\s\S]*?<title>[\s\S]*?<\/title>[\s\S]*?<\/head>[\s\S]*?<body>[\s\S]*?<\/body>[\s\S]*?<\/html>/;
//优化如下
var regOptimize = /<html>(?=([\s\S]*?<head>))\1(?=([\s\S]*?<title>))\2(?=([\s\S]*?<\/title>))\3(?=([\s\S]*?<\/head>))\4(?=([\s\S]*?<body>))\5(?=([\s\S]*?<\/body>))\6[\s\S]*?<\/html>/;

现在如果没有尾随的</html>那么最后一个[\s\S]*?将扩展至字符串结束，正则表达式将立刻失败因为没有回溯点可以返回

提高正则表达式效率的更多方法

什么时候不应该使用正则表达式

var endsWithSemicolon = /;$/.test(str);

你可能觉得很奇怪，虽说当前没有哪个浏览器聪明到这个程度，能够意识到这个正则表达式只能匹配字符串的末尾。最终它们所做的将是一个一个地测试了整个字符串。字符串的长度越长（包含的分号越多），它占用的时间也越长

var endsWithSemicolon = str.charAt(str.length - 1) == ";";

这种情况下，更好的办法是跳过正则表达式所需的所有中间步骤，简单地检查最后一个字符是不是分号：

这个例子使用 charAt 函数在特定位置上读取字符。字符串函数 slice，substr，和 substring 可用于在特定位置上提取并检查字符串的值

所有这些字符串操作函数速度都很快，当您搜索那些不依赖正则表达式复杂特性的文本字符串时，它们有助于您避免正则表达式带来的性能开销

字符串修剪

正则表达式允许你用很少的代码实现一个修剪函数，这对 JavaScript 关心文件大小的库来说十分重要。可能最好的全面解决方案是使用两个子表达式：一个用于去除头部空格，另一个用于去除尾部空格。这样处理简单而迅速，特别是处理长字符串时。

//方法 用正则表达式修剪
// trim1
String.prototype.trim = function() {
  return this.replace(/^\s+/, "").replace(/\s+$/, "");
};
//trim2
String.prototype.trim = function() {
  return this.replace(/^\s+|\s+$/g, "");
};
// trim 3
String.prototype.trim = function() {
  return this.replace(/^\s*([\s\S]*?)\s*$/, "$1");
};
// trim 4
String.prototype.trim = function() {
  return this.replace(/^\s*([\s\S]*\S)?\s*$/, "$1");
};
// trim 5
String.prototype.trim = function() {
  return this.replace(/^\s*(\S*(\s+\S+)*)\s*$/, "$1");
};
//方法二 不使用正则表达式修剪
String.prototype.trim = function() {
  var start = 0;
  var end = this.length - 1;
  //ws 变量包括 ECMAScript 5 中定义的所有空白字符
  var ws =
    "\n\r\t\f\x0b\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u202f\u205f\u3000\ufeff";
  while (ws.indexOf(this.charAt(start)) > -1) {
    start++;
  }
  while (end > start && ws.indexOf(this.charAt(end)) > -1) {
    end--;
  }
  return this.slice(start, end + 1);
};
//方法三 混合解决方案
String.prototype.trim = function() {
  var str = this.replace(/^\s+/, ""),
    end = str.length - 1,
    ws = /\s/;
  while (ws.test(str.charAt(end))) {
    end--;
  }
  return str.slice(0, end + 1);
};

简单地使用两个子正则表达式在所有浏览器上处理不同内容和长度的字符串时，均表现出稳定的性能。因此它可以说是最全面的解决方案。混合解决方案在处理长字符串时特别快，其代价是代码稍长，在某些浏览器上处理尾部长空格时存在弱点

总结

六、响应接口

用户倾向于重复尝试这些不发生明显变化的动作，所以确保网页应用程序的响应速度也是一个重要的性能关注点

浏览器 UI 线程

JavaScript 和 UI 更新共享的进程通常被称作浏览器 UI 线程, UI 线程围绕着一个简单的队列系统工作，任务被保存到队列中直至进程空闲。一旦空闲，队列中的下一个任务将被检索和运行。这些任务不是运行 JavaScript 代码，就是执行 UI 更新，包括重绘和重排版.
大多数浏览器在 JavaScript 运行时停止 UI 线程队列中的任务，也就是说 JavaScript 任务必须尽快结束，以免对用户体验造成不良影响

Brendan Eich，JavaScript 的创造者，引用他的话说，“[JavaScript]运行了整整几秒钟很可能是做错了什么……”

定时器基础

定时器与 UI 线程交互的方式有助于分解长运行脚本成为较短的片断

定时器精度

所有浏览器试图尽可能准确，但通常会发生几毫秒滑移，或快或慢。正因为这个原因，定时器不可用于测量实际时间

总结

七、Ajax

目前最常用的方法中，XMLHttpRequest（XHR）用来异步收发数据。所有现代浏览器都能够很好地支持它，而且能够精细地控制发送请求和数据接收。你可以向请求报文中添加任意的头信息和参数（包括 GET 和 POST），并读取从服务器返回的头信息，以及响应文本自身

请求数据

五种常用技术用于向服务器请求数据

XMLHttpRequest

//封装ajax
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status >= 200) {
    //
  }
};
xhr.open(type, url, true);
xhr.setRequestHeader("Content-Type", contentType);
xhr.send(null);

动态脚本标签插入

发送数据

数据格式

通过 Douglas Crockford 的发明与推广，JSON 是一个轻量级并易于解析的数据格式，它按照 JavaScript 对象和数组字面语法所编写

Ajax 性能向导

数据传输技术和数据格式

总结

高性能 Ajax 包括：知道你项目的具体需求，选择正确的数据格式和与之相配的传输技术

封装自己的 ajax 库

(function(root) {
  root.MyAjax = (config = {}) => {
    let url = config.url;
    let type = config.type || "GET";
    let async = config.async || true;
    let headers = config.headers || [];
    let contentType = config.contentType || "application/json;charset=utf-8";
    let data = config.data;
    let dataType = config.dataType || "json";
    let successFn = config.success;
    let errorFn = config.error;
    let completeFn = config.complete;
    let xhr;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          let rsp = xhr.responseText || xhr.responseXML;
          if (dataType === "json") {
            rsp = eval("(" + rsp + ")");
          }
          successFn(rsp, xhr.statusText, xhr);
        } else {
          errorFn(xhr.statusText, xhr);
        }
        if (completeFn) {
          completeFn(xhr.statusText, xhr);
        }
      }
    };
    xhr.open(type, url, async);
    //设置超时
    if (async) {
      xhr.timeout = config.timeout || 0;
    }
    //设置请求头
    for (let i = 0; i < headers.length; ++i) {
      xhr.setRequestHeader(headers[i].name, headers[i].value);
    }
    xhr.setRequestHeader("Content-Type", contentType);
    //send
    if (
      typeof data == "object" &&
      contentType === "application/x-www-form-urlencoded"
    ) {
      let s = "";
      for (attr in data) {
        s += attr + "=" + data[attr] + "&";
      }
      if (s) {
        s = s.slice(0, s.length - 1);
      }
      xhr.send(s);
    } else {
      xhr.send(data);
    }
  };
})(window);

八、编程实践

var OPTION_A = 1;
var OPTION_B = 2;
var OPTION_C = 4;
var OPTION_D = 8;
var OPTION_E = 16;

通过定义这些选项，你可以用位或操作创建一个数字来包含多个选项：

var options = OPTION_A | OPTION_C | OPTION_D;

可以使用位与操作检查一个给定的选项是否可用

//is option A in the list?
if (options & OPTION_A) {
  //do something
}
//is option B in the list?
if (options & OPTION_B) {
  //do something
}

像这样的位掩码操作非常快，正因为前面提到的原因，操作发生在系统底层。如果许多选项保存在一起并经常检查，位掩码有助于加快整体性能

原生方法

无论你怎样优化 JavaScript 代码，它永远不会比 JavaScript 引擎提供的原生方法更快。经验不足的 JavaScript 开发者经常犯的一个错误是在代码中进行复杂的数学运算，而没有使用内置 Math 对象中那些性能更好的版本。Math 对象包含专门设计的属性和方法，使数学运算更容易。

//查看Math对象所有方法
Object.getOwnPropertyNames(Math);

总结

九、创建并部署高性能 JavaScript 应用程序

十、工具

当网页或应用程序变慢时，分析网上传来的资源，分析脚本的运行性能，使你能够集中精力在那些需要努力优化的地方。

后记

能读到最后的同学也不容易，毕竟篇幅稍长。本书大概花了三周的零碎时间读完，建议大家读一读。如果大家在看书过程中存在疑问，不妨打开电脑验证书中作者的言论，或许会更加深刻。

若文中有错误欢迎大家评论指出，或者加我微信好友一起交流gm4118679254

上一篇 下一篇

猜你喜欢

热点阅读