前端性能优化 24 条建议(2020)

前端性能优化 24 条建议(2020)

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是设置麻烦，大概要遵照的法则太多。而且某些性能优化法则并不适用一切场景，需要谨慎利用，请读者带着批评性的眼光来阅读本文。

本文相关的优化倡议的援用材料出处均会在倡议前面给出，大概放在文末（有些参考材料能够要梯子才能旁观）。

1. 削减 HTTP 请求

一个完整的 HTTP 请求需要履历 DNS 查找，TCP 握手，阅读器发出 HTTP 请求，办事器接收请求，办事器处置请求并发反响应，阅读器接收响应等进程。接下来看一个具体的例子帮助了解 HTTP ：

这是一个 HTTP 请求，请求的文件巨细为 28.4KB。

名词诠释：

Queueing: 在请求行列中的时候。Stalled: 从TCP 毗连建立完成，到真正可以传输数据之间的时候差，此时候包括代理协商时候。Proxy negotiation: 与代理办事器毗连停止协商所花费的时候。DNS Lookup: 履行DNS查找所花费的时候，页面上的每个分歧的域都需要停止DNS查找。Initial Connection / Connecting: 建立毗连所花费的时候，包括TCP握手/重试和协商SSL。SSL: 完成SSL握手所花费的时候。Request sent: 发出收集请求所花费的时候，凡是为一毫秒的时候。Waiting(TFFB): TFFB 是发出页面请求到接收到应对数据第一个字节的时候。Content Download: 接收响应数据所花费的时候。

从这个例子可以看出，真正下载数据的时候占比为 13.05 / 204.16 = 6.39%，文件越小，这个比例越小，文件越大，比例就越高。这就是为什么要倡议将多个小文件合并为一个大文件，从而削减 HTTP 请求次数的缘由。

参考材料：

understanding-resource-timing

2. 利用 HTTP2

HTTP2 相比 HTTP1.1 有以下几个优点：

剖析速度快

办事器剖析 HTTP1.1 的请求时，必须不竭地读入字节，直到碰到分隔符 CRLF 为止。而剖析 HTTP2 的请求就不用这么麻烦，由于 HTTP2 是基于帧的协议，每个帧都有暗示帧长度的字段。

多路复用

HTTP1.1 假如要同时倡议多个请求，就得建立多个 TCP 毗连，由于一个 TCP 毗连同时只能处置一个 HTTP1.1 的请求。

在 HTTP2 上，多个请求可以共用一个 TCP 毗连，这称为多路复用。同一个请求和响利用一个流来暗示，并有唯一的流 ID 来标识。 多个请求和响应在 TCP 毗连中可以乱序发送，到达目标地后再经过流 ID 重新组建。

首部紧缩

HTTP2 供给了首部紧缩功用。

例若有以下两个请求：

// 请求1

:authority: unpkg.zhimg.com

:method: GET

:path: /za-js-sdk@2.16.0/dist/zap.js

:scheme: https

accept: */*

accept-encoding: gzip, deflate, br

accept-language: zh-CN,zh;q=0.9

cache-control: no-cache

pragma: no-cache

referer: https://zhihu.com/

sec-fetch-dest: script

sec-fetch-mode: no-cors

sec-fetch-site: cross-site

user-agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36

// 请求2

:authority: zz.bdstatic.com

:method: GET

:path: /linksubmit/push.js

:scheme: https

accept: */*

accept-encoding: gzip, deflate, br

accept-language: zh-CN,zh;q=0.9

cache-control: no-cache

pragma: no-cache

referer: https://zhihu.com/

sec-fetch-dest: script

sec-fetch-mode: no-cors

sec-fetch-site: cross-site

user-agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36

从上面两个请求可以看出来，有很大都据都是反复的。假如可以把不异的首部存储起来，仅发送它们之间分歧的部分，便可以节省很多的流量，加速请求的时候。

HTTP/2 在客户端和办事器端利用“首部表”来跟踪和存储之前发送的键－值对，对于不异的数据，不再经过每次请求和响应发送。

下面再来看一个简化的例子，假定客户端按顺序发送以下请求首部：

Header1:foo

Header2:bar

Header3:bat

当客户端发送请求时，它会按照首部值建立一张表：

假如办事器收到了请求，它会还是建立一张表。 当客户端发送下一个请求的时辰，假如首部不异，它可以间接发送这样的首部块：

62 63 64

办事器会查找先前建立的表格，并把这些数字复原成索引对应的完整首部。

优先级

HTTP2 可以对照力告急的请求设备一个较高的优先级，办事器在收到这样的请求后，可以优先处置。

流量控制

由于一个 TCP 毗连流量带宽（按照客户端到办事器的收集带宽而定）是牢固的，当有多个请求并发时，一个请求占的流量多，另一个请求占的流量就会少。流量控制可以对分歧的流的流量停止切确控制。

办事器推送

HTTP2 新增的一个强大的新功用，就是办事器可以对一个客户端请求发送多个响应。换句话说，除了对最初请求的响应外，办事器还可以额外向客户端推送资本，而无需客户端明白地请求。

例如当阅读器请求一个网站时，除了返回 HTML 页面外，办事器还可以按照 HTML 页面中的资本的 URL，来提早推送资本。

现在有很多网站已经起头利用 HTTP2 了，例如知乎：

其中 h2 是指 HTTP2 协议，http/1.1 则是指 HTTP1.1 协议。

参考材料：

HTTP2 简介半小时搞懂 HTTP、HTTPS和HTTP2

3. 利用办事端衬着

客户端衬着: 获得 HTML 文件，按照需要下载 JavaScript 文件，运转文件，天生 DOM，再衬着。

办事端衬着：办事端返回 HTML 文件，客户端只需剖析 HTML。

优点：首屏衬着快，SEO 好。弱点：设置麻烦，增加了办事器的计较压力。

下面我用 Vue SSR 做示例，简单的描写一下 SSR 进程。

客户端衬着进程

拜候客户端衬着的网站。办事器返回一个包括了引入资本语句和 的 HTML 文件。客户端经过 HTTP 向办事器请求资本，当需要的资本都加载终了后，履行 new Vue() 起头实例化并衬着页面。

办事端衬着进程

拜候办事端衬着的网站。办事器会检察当前路由组件需要哪些资本文件，然后将这些文件的内容添补到 HTML 文件。倘使有 ajax 请求，就会履行它停止数据预取并添补到 HTML 文件里，最初返回这个 HTML 页面。当客户端接收到这个 HTML 页面时，可以顿时就起头衬着页面。与此同时，页面也会加载资本，当需要的资本都加载终了后，起头履行 new Vue() 起头实例化并接收页面。

从上述两个进程中可以看出，区分就在于第二步。客户端衬着的网站会间接返回 HTML 文件，而办事端衬着的网站则会衬着完页面再返回这个 HTML 文件。

这样做的益处是什么？是更快的内容到达时候 (time-to-content)。

假定你的网站需要加载完 abcd 四个文件才能衬着终了。而且每个文件巨细为 1 M。

这样一算：客户端衬着的网站需要加载 4 个文件和 HTML 文件才能完成首页衬着，总计巨细为 4M（疏忽 HTML 文件巨细）。而办事端衬着的网站只需要加载一个衬着终了的 HTML 文件就能完成首页衬着，总计巨细为已经衬着终了的 HTML 文件（这类文件不会太大，通常是几百K，我的小我博客网站（SSR）加载的 HTML 文件为 400K）。这就是办事端衬着更快的缘由。

参考材料：

vue-ssr-demoVue.js 办事器端衬着指南

4. 静态资本利用 CDN

内容分发收集（CDN）是一组散布在多个分歧地理位置的 Web 办事器。我们都晓得，当办事器离用户越远时，提早越高。CDN 就是为领会决这一题目，在多个位置摆设办事器，让用户离办事器更近，从而收缩请求时候。

CDN 道理

当用户拜候一个网站时，假如没有 CDN，进程是这样的：

阅读器要将域名剖析为 IP 地址，所以需要向当地 DNS 发出请求。当地 DNS 依次向根办事器、顶级域名办事器、权限办事器发出请求，获得网站办事器的 IP 地址。当地 DNS 将 IP 地址发回给阅读器，阅读器向网站办事器 IP 地址发出请求并获得资本。

假如用户拜候的网站摆设了 CDN，进程是这样的：

阅读器要将域名剖析为 IP 地址，所以需要向当地 DNS 发出请求。当地 DNS 依次向根办事器、顶级域名办事器、权限办事器发出请求，获得全局负载平衡系统（GSLB）的 IP 地址。当地 DNS 再向 GSLB 发出请求，GSLB 的首要功用是按照当地 DNS 的 IP 地址判定用户的位置，挑选出间隔用户较近的当地负载平衡系统（SLB），并将该 SLB 的 IP 地址作为成果返回给当地 DNS。当地 DNS 将 SLB 的 IP 地址发回给阅读器，阅读器向 SLB 发出请求。SLB 按照阅读器请求的资本和地址，选出最优的缓存办事器发回给阅读器。阅读器再按照 SLB 发回的地址重定向到缓存办事器。假如缓存办事器有阅读器需要的资本，就将资本发回给阅读器。假如没有，就向源办事器请求资本，再发给阅读器并缓存在当地。

参考材料：

CDN是什么？利用CDN有什么上风？CDN道理简析

5. 将 CSS 放在文件头部，JavaScript 文件放在底部

CSS 履行会阻塞衬着，阻止 JS 履行JS 加载和履行会阻塞 HTML 剖析，阻止 CSSOM 构建

假如这些 CSS、JS 标签放在 HEAD 标签里，而且需要加载息争析很久的话，那末页面就空缺了。所以 JS 文件要放在底部（不阻止 DOM 剖析，但会阻塞衬着），等 HTML 剖析完了再加载 JS 文件，尽早向用户显现页面的内容。

那为什么 CSS 文件还要放在头部呢？

由于先加载 HTML 再加载 CSS，会让用户第一时候看到的页面是没有款式的、“丑陋”的，为了避免这类情况发生，就要将 CSS 文件放在头部了。

别的，JS 文件也不是不成以放在头部，只要给 script 标签加上 defer 属性便可以了，异步下载，提早履行。

参考材料：

利用 JavaScript 增加交互

6. 利用字体图标 iconfont 取代图片图标

字体图标就是将图标建形成一个字体，利用时就跟字体一样，可以设备属性，例如 font-size、color 等等，很是方便。而且字体图标是矢量图，不会失真。还有一个优点是天生的文件出格小。

紧缩字体文件

利用 fontmin-webpack 插件对字体文件停止紧缩（感激前端小伟供给）。

参考材料：

fontmin-webpackIconfont-阿里巴巴矢量图标库

7. 善用缓存，不反复加载不异的资本

为了避免用户每次拜候网站都得请求文件，我们可以经过增加 Expires 或 max-age 来控制这一行为。Expires 设备了一个时候，只要在这个时候之前，阅读器都不会请求文件，而是间接利用缓存。而 max-age 是一个相对时候，倡议利用 max-age 取代 Expires 。

不外这样会发生一个题目，当文件更新了怎样办？怎样告诉阅读重视新请求文件？

可以经过更新页面中援用的资本链接地址，让阅读器自动放弃缓存，加载新资本。

具体做法是把资本地址 URL 的点窜与文件内容关联起来，也就是说，只要文件内容变化，才会致使响应 URL 的变更，从而实现文件级此外切确缓存控制。什么工具与文件内容相关呢？我们会很自然的联想到操纵数据摘要要算法对文件求摘要信息，摘要信息与文件内容逐一对应，就有了一种可以切确到单个文件粒度的缓存控制根据了。

参考材料：

webpack + express 实现文件切确缓存webpack-缓存张云龙--至公司里怎样开辟和摆设前端代码？

8. 紧缩文件

紧缩文件可以削减文件下载时候，让用户体验性更好。

得益于 webpack 和 node 的成长，现在紧缩文件已经很是方便了。

在 webpack 可以利用以下插件停止紧缩：

JavaScript：UglifyPluginCSS ：MiniCssExtractPluginHTML：HtmlWebpackPlugin

实在，我们还可以做得更好。那就是利用 gzip 紧缩。可以经过向 HTTP 请求头中的 Accept-Encoding 头增加 gzip 标识来开启这一功用。固然，办事器也得支持这一功用。

gzip 是今朝最风行和最有用的紧缩方式。举个例子，我用 Vue 开辟的项目构建后天生的 app.js 文件巨细为 1.4MB，利用 gzip 紧缩后只要 573KB，体积削减了快要 60%。

附上 webpack 和 node 设置 gzip 的利用方式。

下载插件

npm install compression-webpack-plugin --save-dev

npm install compression

webpack 设置

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {

plugins: [new CompressionPlugin()],

}

node 设置

const compression = require('compression')

// 在其他中心件前利用

app.use(compression())

9. 图片优化

(1). 图片提早加载

在页面中，先不给图片设备途径，只要当图片出现在阅读器的可视地区时，才去加载实在的图片，这就是提早加载。对于图片很多的网站来说，一次性加载全数图片，会对用户体验形成很大的影响，所以需要利用图片提早加载。

首先可以将图片这样设备，在页面不偏见时图片不会加载：

等页面可见时，利用 JS 加载图片：

const img = document.querySelector('img')

img.src = img.dataset.src

这样图片就加载出来了，完整的代码可以看一下参考材料。

参考材料：

web 前端图片懒加载实现道理

(2). 响应式图片

响应式图片的优点是阅读器可以按照屏幕巨细自动加载合适的图片。

经过 picture 实现

经过 @media 实现

@media (min-width: 769px) {

.bg {

background-image: url(bg1080.jpg);

}

}

@media (max-width: 768px) {

.bg {

background-image: url(bg768.jpg);

}

}

(3). 调剂图片巨细

例如，你有一个 1920 * 1080 巨细的图片，用缩略图的方式展现给用户，而且当用户鼠标悬停在上面时才展现全图。假如用户从未真正将鼠标悬停在缩略图上，则浪费了下载图片的时候。

所以，我们可以用两张图片来实行优化。一路头，只加载缩略图，当用户悬停在图片上时，才加载大图。还有一种法子，即对大图停止提早加载，在一切元素都加载完成后手动变动大图的 src 停止下载。

(4). 下降图片质量

例如 JPG 格式的图片，100% 的质量和 90% 质量的凡是看不出来区分，特别是用来当布景图的时辰。我经常用 PS 切布景图时， 将图片切成 JPG 格式，而且将它紧缩到 60% 的质量，根基上看不出来区分。

紧缩方式有两种，一是经过 webpack 插件 image-webpack-loader，二是经过在线网站停止紧缩。

以下附上 webpack 插件 image-webpack-loader 的用法。

npm i -D image-webpack-loader

webpack 设置

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

use:[

{

loader: 'url-loader',

options: {

limit: 10000, /* 图片巨细小于1000字节限制时会自动转成 base64 码援用*/

name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

},

/*对图片停止紧缩*/

{

loader: 'image-webpack-loader',

options: {

bypassOnDebug: true,

}

}

]

}

(5). 尽能够操纵 CSS3 结果取代图片

有很多图片利用 CSS 结果（突变、阴影等）就能画出来，这类情况挑选 CSS3 结果更好。由于代码巨细凡是是图片巨细的几分之一甚至几非常之一。

参考材料：

img图片在webpack中利用

(6). 利用 webp 格式的图片

WebP 的上风表现在它具有更优的图像数据紧缩算法，能带来更小的图片体积，而且具有肉眼识别无差别的图像质量；同时具有了无损和有损的紧缩形式、Alpha 通明以及动画的特征，在 JPEG 和 PNG 上的转化结果都相当优异、稳定和同一。

参考材料：

WebP 相对于 PNG、JPG 有什么上风？

10. 经过 webpack 按需加载代码，提取第三库代码，削减 ES6 转为 ES5 的冗余代码

懒加载大概按需加载，是一种很好的优化网页或利用的方式。这类方式现实上是先把你的代码在一些逻辑断点处罚分开，然后在一些代码块中完成某些操纵后，立即援用或行将援用别的一些新的代码块。这样加速了利用的初始加载速度，减轻了它的整体体积，由于某些代码块能够永久不会被加载。

按照文件内容天生文件名，连系 import 静态引入组件实现按需加载

经过设置 output 的 filename 属性可以实现这个需求。filename 属性的值选项中有一个 [contenthash]，它将按照文件内容建立出唯一 hash。当文件内容发生变化时，[contenthash] 也会发生变化。

output: {

filename: '[name].[contenthash].js',

chunkFilename: '[name].[contenthash].js',

path: path.resolve(__dirname, '../dist'),

},

提取第三方库

由于引入的第三方库一般都比力稳定，不会经常改变。所以将它们零丁提取出来，作为持久缓存是一个更好的挑选。 这里需要利用 webpack4 的 splitChunk 插件 cacheGroups 选项。

optimization: {

runtimeChunk: {

name: 'manifest' // 将 webpack 的 runtime 代码拆分为一个零丁的 chunk。

},

splitChunks: {

cacheGroups: {

vendor: {

name: 'chunk-vendors',

test: /[\\/]node_modules[\\/]/,

priority: -10,

chunks: 'initial'

},

common: {

name: 'chunk-common',

minChunks: 2,

priority: -20,

chunks: 'initial',

reuseExistingChunk: true

}

},

}

},

test: 用于控制哪些模块被这个缓存组婚配到。原封不动传递进来的话，它默许会挑选一切的模块。可以传递的值范例：RegExp、String和Function;priority：暗示抽取权重，数字越大暗示优先级越高。由于一个 module 能够会满足多个 cacheGroups 的条件，那末抽取到哪个就由权重最高的说了算；reuseExistingChunk：暗示能否利用已有的 chunk，假如为 true 则暗示假如当前的 chunk 包括的模块已经被抽取进来了，那末将不会重新天生新的。minChunks（默许是1）：在朋分之前，这个代码块最小应当被援用的次数（译注：保证代码块复用性，默许设置的战略是不需要屡次援用也可以被朋分）chunks (默许是async) ：initial、async和allname(打包的chunks的名字)：字符串大概函数(函数可以按照条件自界说名字)

削减 ES6 转为 ES5 的冗余代码

Babel 转化后的代码想要实现和本来代码一样的功用需要借助一些帮助函数，比如：

class Person {}

会被转换为：

"use strict";

function _classCallCheck(instance, Constructor) {

if (!(instance instanceof Constructor)) {

throw new TypeError("Cannot call a class as a function");

}

}

var Person = function Person() {

_classCallCheck(this, Person);

};

这里 _classCallCheck 就是一个 helper 函数，假如在很多文件里都声了然类，那末就会发生很多个这样的 helper 函数。

这里的 @babel/runtime 包就声了然一切需要用到的帮助函数，而 @babel/plugin-transform-runtime 的感化就是将一切需要 helper 函数的文件，从 @babel/runtime包 引进来：

"use strict";

var _classCallCheck2 = require("@babel/runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

function _interopRequireDefault(obj) {

return obj && obj.__esModule ? obj : { default: obj };

}

var Person = function Person() {

(0, _classCallCheck3.default)(this, Person);

};

这里就没有再编译出 helper 函数 classCallCheck 了，而是间接援用了 @babel/runtime 中的 helpers/classCallCheck。

安装

npm i -D @babel/plugin-transform-runtime @babel/runtime

利用 在 .babelrc 文件中

"plugins": [

"@babel/plugin-transform-runtime"

]

参考材料：

Babel 7.1先容 transform-runtime polyfill env懒加载Vue 路由懒加载webpack 缓存一步一步的领会webpack4的splitChunk插件

11. 削减重绘重排

阅读器衬着进程

剖析HTML天生DOM树。剖析CSS天生CSSOM法则树。将DOM树与CSSOM法则树合并在一路天生衬着树。遍历衬着树起头结构，计较每个节点的位置巨细信息。将衬着树每个节点绘制到屏幕。

重排

当改变 DOM 元素位置或巨细时，会致使阅读重视新天生衬着树，这个进程叫重排。

重绘

当重新天生衬着树后，就要将衬着树每个节点绘制到屏幕，这个进程叫重绘。不是一切的行动城市致使重排，例如改变字体色彩，只会致使重绘。记着，重排会致使重绘，重绘不会致使重排 。

重排和重绘这两个操纵都是很是高贵的，由于 JavaScript 引擎线程与 GUI 衬着线程是互斥，它们同时只能一个在工作。

什么操纵会致使重排？

增加或删除可见的 DOM 元素元素位置改变元素尺寸改变内容改变阅读器窗口尺寸改变

若何削减重排重绘？

用 JavaScript 点窜款式时，最好不要间接写款式，而是替换 class 来改变款式。假如要对 DOM 元素履行一系列操纵，可以将 DOM 元素离开文档流，点窜完成后，再将它带回文档。保举利用隐藏元素（display:none）或文档碎片（DocumentFragement），都能很好的实现这个计划。

12. 利用事务拜托

事务拜托操纵了事务冒泡，只指定一个事务处置法式，便可以治理某一范例的一切事务。一切用到按钮的事务（大都鼠标事务和键盘事务）都合适采用事务拜托技术， 利用事务拜托可以节省内存。

• 苹果
• 香蕉
• 凤梨

// good

document.querySelector('ul').onclick = (event) => {

const target = event.target

if (target.nodeName === 'LI') {

console.log(target.innerHTML)

}

}

// bad

document.querySelectorAll('li').forEach((e) => {

e.onclick = function() {

console.log(this.innerHTML)

}

})

13. 留意法式的部分性

一个编写杰出的计较机法式经常具有杰出的部分性，它们偏向于援用比来援用过的数据项四周的数据项，大概比来援用过的数据项自己，这类偏向性，被称为部分性道理。有杰出部分性的法式比部分性差的法式运转得更快。

部分性凡是有两种分歧的形式：

时候部分性：在一个具有杰出时候部分性的法式中，被援用过一次的内存位置极能够在不远的未来被屡次援用。空间部分性 ：在一个具有杰出空间部分性的法式中，假如一个内存位置被援用了一次，那末法式极能够在不远的未来援用四周的一个内存位置。

时候部分性示例

function sum(arry) {

let i, sum = 0

let len = arry.length

for (i = 0; i < len; i++) {

sum += arry[i]

}

return sum

}

在这个例子中，变量sum在每次循环迭代中被援用一次，是以，对于sum来说，具有杰出的时候部分性

空间部分性示例

具有杰出空间部分性的法式

// 二维数组

function sum1(arry, rows, cols) {

let i, j, sum = 0

for (i = 0; i < rows; i++) {

for (j = 0; j < cols; j++) {

sum += arry[i][j]

}

}

return sum

}

空间部分性差的法式

// 二维数组

function sum2(arry, rows, cols) {

let i, j, sum = 0

for (j = 0; j < cols; j++) {

for (i = 0; i < rows; i++) {

sum += arry[i][j]

}

}

return sum

}

看一下上面的两个空间部分性示例，像示例中从每行起头按顺序拜候数组每个元素的方式，称为具有步长为1的援用形式。 假如在数组中，每隔k个元素停止拜候，就称为步长为k的援用形式。 一般而言，随着步长的增加，空间部分性下降。

这两个例子有什么区分？区分在于第一个示例是按行扫描数组，每扫描完一行再去扫下一行；第二个示例是按列来扫描数组，扫完一行中的一个元素，顿时就去扫下一行中的同一列元素。

数组在内存中是依照行顺序来寄存的，成果就是逐行扫描数组的示例获得了步长为 1 援用形式，具有杰出的空间部分性；而另一个示例步长为 rows，空间部分性极差。

性能测试

运转情况：

cpu: i5-7400阅读器: chrome 70.0.3538.110

对一个长度为9000的二维数组（子数组长度也为9000）停止10次空间部分性测试，时候（毫秒）取均匀值，成果以下：

所用示例为上述两个空间部分性示例

从以上测试成果来看，步长为 1 的数组履行时候比步长为 9000 的数组快了一个数目级。

总结：

反复援用不异变量的法式具有杰出的时候部分性对于具有步长为 k 的援用形式的法式，步长越小，空间部分性越好；而在内存中以大步长跳来跳去的法式空间部分性会很差

参考材料：

深入了解计较机系统

14. if-else 对照 switch

当判定条件数目越来越多时，越偏向于利用 switch 而不是 if-else。

if (color == 'blue') {

} else if (color == 'yellow') {

} else if (color == 'white') {

} else if (color == 'black') {

} else if (color == 'green') {

} else if (color == 'orange') {

} else if (color == 'pink') {

}

switch (color) {

case 'blue':

break

case 'yellow':

break

case 'white':

break

case 'black':

break

case 'green':

break

case 'orange':

break

case 'pink':

break

}

像上面的这类情况，从可读性来说，利用 switch 是比力好的（js 的 switch 语句不是基于哈希实现，而是循环判定，所以说 if-else、switch 从性能上来说是一样的）。

15. 查找表

当条件语句出格多时，利用 switch 和 if-else 不是最好的挑选，这时无妨试一下查找表。查找表可以利用数组和工具来构建。

switch (index) {

case '0':

return result0

case '1':

return result1

case '2':

return result2

case '3':

return result3

case '4':

return result4

case '5':

return result5

case '6':

return result6

case '7':

return result7

case '8':

return result8

case '9':

return result9

case '10':

return result10

case '11':

return result11

}

可以将这个 switch 语句转换为查找表

const results = [result0,result1,result2,result3,result4,result5,result6,result7,result8,result9,result10,result11]

return results[index]

假如条件语句不是数值而是字符串，可以用工具来建立查找表

const map = {

red: result0,

green: result1,

}

return map[color]

16. 避免页面卡顿

60fps 与装备革新率

今朝大大都装备的屏幕革新率为 60 次/秒。是以，假如在页面中有一个动画或突变结果，大概用户正在转动页面，那末阅读器衬着动画或页面的每一帧的速度也需要跟装备屏幕的革新率连结分歧。 其中每个帧的预算时候仅比 16 毫秒多一点 (1 秒/ 60 = 16.66 毫秒)。但现实上，阅读器有整理工作要做，是以您的一切工作需要在 10 毫秒内完成。假如没法合适此预算，帧率将下降，而且内容会在屏幕上发抖。 此现象凡是称为卡顿，会对用户体验发生负面影响。

假如你用 JavaScript 点窜了 DOM，并触发款式点窜，履历重排重绘最初画到屏幕上。假如这其中肆意一项的履行时候太长，城市致使衬着这一帧的时候太长，均匀帧率就会下降。假定这一帧花了 50 ms，那末此时的帧率为 1s / 50ms = 20fps，页面看起来就像卡顿了一样。

对于一些长时候运转的 JavaScript，我们可以利用按时器停止切分，提早履行。

for (let i = 0, len = arry.length; i < len; i++) {

process(arry[i])

}

假定上面的循环结构由于 process() 复杂度太高或数组元素太多，甚至两者都有，可以尝试一下切分。

const todo = arry.concat()

setTimeout(function(){

process(todo.shift())

if (todo.length) {

setTimeout(arguments.callee, 25)

} else {

callback(arry)

}

}, 25)

倘使有爱好领会更多，可以检察一下高性能JavaScript第 6 章和高效前端：Web高效编程与优化理论第 3 章。

参考材料：

衬着性能

17. 利用 requestAnimationFrame 来实现视觉变化

从第 16 点我们可以晓得，大大都装备屏幕革新率为 60 次/秒，也就是说每一帧的均匀时候为 16.66 毫秒。在利用 JavaScript 实现动画结果的时辰，最好的情况就是每次代码都是在帧的开首起头履行。而保证 JavaScript 在帧起头时运转的唯一方式是利用 requestAnimationFrame。

/**

* If run as a requestAnimationFrame callback, this

* will be run at the start of the frame.

*/

function updateScreen(time) {

// Make visual updates here.

}

requestAnimationFrame(updateScreen);

假如采纳 setTimeout 或 setInterval 来实现动画的话，回调函数将在帧中的某个时点运转，能够恰幸亏末端，而这能够经常会使我们丧失帧，致使卡顿。

参考材料：

优化 JavaScript 履行

18. 利用 Web Workers

Web Worker 利用其他工作线程从而自力于主线程之外，它可以履利用命而不干扰用户界面。一个 worker 可以将消息发送到建立它的 JavaScript 代码, 经过将消息发送到该代码指定的事务处置法式（反之亦然）。

Web Worker 适用于那些处置纯数据，大概与阅读器 UI 无关的长时候运转剧本。

建立一个新的 worker 很简单，指定一个剧本的 URI 来履行 worker 线程（main.js）：

var myWorker = new Worker('worker.js');

// 你可以经过postMessage() 方式和onmessage事务向worker发送消息。

first.onchange = function() {

myWorker.postMessage([first.value,second.value]);

console.log('Message posted to worker');

}

second.onchange = function() {

myWorker.postMessage([first.value,second.value]);

console.log('Message posted to worker');

}

在 worker 中接收到消息后，我们可以写一个事务处置函数代码作为响应（worker.js）：

onmessage = function(e) {

console.log('Message received from main script');

var workerResult = 'Result: ' + (e.data[0] * e.data[1]);

console.log('Posting message back to main script');

postMessage(workerResult);

}

onmessage处置函数在接收到消息后顿时履行，代码中消息自己作为事务的data属性停止利用。这里我们简单的对这2个数字作乘法处置并再次利用postMessage()方式，将成果回传给主线程。

回到主线程，我们再次利用onmessage以响应worker回传的消息：

myWorker.onmessage = function(e) {

result.textContent = e.data;

console.log('Message received from worker');

}

在这里我们获得消息事务的data，而且将它设备为result的textContent，所以用户可以间接看到运算的成果。

不外在worker内，不能间接操纵DOM节点，也不能利用window工具的默许方式和属性。但是你可以利用大量window工具之下的工具，包括WebSockets，IndexedDB以及FireFox OS公用的Data Store API等数据存储机制。

参考材料：

Web Workers

19. 利用位操纵

JavaScript 中的数字都利用 IEEE-754 标准以 64 位格式存储。可是在位操纵中，数字被转换为有标记的 32 位格式。即使需要转换，位操纵也比其他数学运算和布尔操纵快很多。

取模

由于偶数的最低位为 0，奇数为 1，所以取模运算可以用位操纵来取代。

if (value % 2) {

// 奇数

} else {

// 偶数

}

// 位操纵

if (value & 1) {

// 奇数

} else {

// 偶数

}

取整

~~10.12 // 10

~~10 // 10

~~'1.5' // 1

~~undefined // 0

~~null // 0

位掩码

const a = 1

const b = 2

const c = 4

const options = a | b | c

经过界说这些选项，可以用按位与操纵来判定 a/b/c 能否在 options 中。

// 选项 b 能否在选项中

if (b & options) {

...

}

20. 不要覆盖原生方式

不管你的 JavaScript 代码若何优化，都比不上原生方式。由于原生方式是用低级说话写的（C/C++），而且被编译成机械码，成为阅读器的一部分。当原生方式可用时，只管利用它们，出格是数学运算和 DOM 操纵。

21. 下降 CSS 挑选器的复杂性

(1). 阅读器读取挑选器，遵守的原则是从挑选器的右侧到左侧读取。

看个示例

#block .text p {

color: red;

}

查找一切 P 元素。查找成果 1 中的元素能否有类名为 text 的父元素查找成果 2 中的元素能否有 id 为 block 的父元素

(2). CSS 挑选器优先级

内联 > ID挑选器 > 类挑选器 > 标签挑选器

按照以上两个信息可以得出结论。

挑选器越短越好。只管利用高优先级的挑选器，例如 ID 和类挑选器。避免利用通配符 *。

最初要说一句，据我查找的材料所得，CSS 挑选器没有优化的需要，由于最慢和慢快的挑选器性能不同很是小。

参考材料：

CSS selector performanceOptimizing CSS: ID Selectors and Other Myths

22. 利用 flexbox 而不是较早的结构模子

在早期的 CSS 结构方式中我们能对元素实行绝对定位、相对定位或浮动定位。而现在，我们有了新的结构方式 flexbox，它比起早期的结构方式来说有个上风，那就是性能比力好。

下面的截图显现了在 1300 个框上利用浮动的结构开销：

然后我们用 flexbox 来重现这个例子：

现在，对于不异数目的元素和不异的视觉表面，结构的时候要少很多（本例中为别离 3.5 毫秒和 14 毫秒）。

不外 flexbox 兼容性还是有点题目，不是一切阅读器都支持它，所以要谨慎利用。

各阅读器兼容性：

Chrome 29+Firefox 28+Internet Explorer 11Opera 17+Safari 6.1+ (prefixed with -webkit-)Android 4.4+iOS 7.1+ (prefixed with -webkit-)

参考材料：

利用 flexbox 而不是较早的结构模子

23. 利用 transform 和 opacity 属性变动来实现动画

在 CSS 中，transforms 和 opacity 这两个属性变动不会触发重排与重绘，它们是可以由分解器（composite）零丁处置的属性。

参考材料：

利用 transform 和 opacity 属性变动来实现动画

24. 公道利用法则，避免过度优化

性能优化首要分为两类：

加载时优化运转时优化

上述 23 条倡议中，属于加载时优化的是前面 10 条倡议，属于运转时优化的是前面 13 条倡议。凡是来说，没有需要 23 条性能优化法则都用上，按照网站用户群体来做针对性的调剂是最好的，节省精神，节省时候。

在处理题目之前，得先找出题目，否则无从动手。所以在做性能优化之前，最好先观察一下网站的加载性能和运转性能。

检查加载性能

一个网站加载性能若何首要看白屏时候和首屏时候。

白屏时候：指从输入网址，到页面起头显现内容的时候。首屏时候：指从输入网址，到页面完全衬着的时候。

将以下剧本放在 前面就能获得白屏时候。

在 window.onload 事务里履行 new Date() - performance.timing.navigationStart 即可获得首屏时候。

检查运转性能

配合 chrome 的开辟者工具，我们可以检察网站在运转时的性能。

经过检查加载和运转性能，相信你对网站性能已经有了大方法会。所以这时辰要做的工作，就是利用上述 23 条倡议纵情地去优化你的网站，加油！

参考材料：

performance.timing.navigationStart

其他参考材料

性能为何相当重要高性能网站扶植指南Web性能威望指南高性能JavaScript高效前端：Web高效编程与优化理论