前端进阶（14） - 如何提升前端性能和响应速度
xxuncle 2019-06-28
如何提升前端性能和响应速度
下面大多是从前端工程化的角度给出的优化建议，如果需要了解语法上的优化，可以参考：
1. 原生 css 动画代替 js 动画
原生 css 动画要比 js 实现的动画要高效很多，所以在可能的情况下尽量用原生 css 动画。
可以参考：
2. 原生 js 代替第三方库
因为第三方库不可避免的会增大打包文件的体积，并且有很多我们用不着的代码和性能的损失，所以在可能的情况下尽量用原生 js 的 api，代替第三方库的 api，比如 jquery、lodash、underscore、moment 等。
可以参考：
3. 使用第三方库时，用子模块代替整个包
有些第三方库会比较大，如果提供单个模块的使用方式，就尽量使用子模块代替使用整个包，比如 lodash、jquery-ui 等。
以 lodash 为例：
// 不推荐 import _ from 'lodash'; _.forEach(); _.defaults(); // 推荐 import forEach from 'lodash/forEach'; import defaults from 'lodash/defaults'; forEach(); defaults();
4. 用高效的 api 代替低效的 api
如果相同的功能可以有多种选择，应当尽量使用高效的一种方案。
比如：
- 用
document.getElementById, document.getElementsByClassName, document.getElementsByTagName代替document.querySelector, document.querySelectorAll - 用
el.innerHTML代替document.createElement, el.appendChild
5. 扁平结构、避免无用嵌套
避免无用的闭包、无用的块作用域，尽量是代码结构扁平化。
比如：
// 低效的实现
const urlParams = (() => {
const params = {};
if (location.search) {
location.search.slice(1).split('&').forEach(item => {
const [key, value = ''] = item.split('=');
urlParams[key] = value;
});
}
return params;
})();
// 更高效的实现
const urlParams = {};
if (location.search) {
location.search.slice(1).split('&').forEach(item => {
const [key, value = ''] = item.split('=');
urlParams[key] = value;
});
}6. 用 es6 的模块化
现在 js 的模块化主要是 commonjs 与 es6 模块化规范，但是在开发的时候，建议是用 es6 的模块化规范，因为 es6 的模块化可以使用 Tree Shaking 的功能。
这个功能能够在构建工具打包代码时，对代码进行分析，只有真正用到的代码会被打包，没有用到的则不会。
// one.js
export const smile = {};
export const cry = [];
// two.js
import { smile } from './one';
export default smile;上面的代码以 two.js 为入口进行打包，则 one.js 中只有 export const smile = {} 会被打包，而 export const cry = [] 不会。
关于 Tree Shaking，可以参考：
7. 合并、压缩、分割
代码的合并与压缩是前端的必修课，如果使用 webpack 来打包，webpack 会自动帮我们完成，一般无需关心。
另外，在有些时候，代码是需要做分割的，因为 webpack 会把代码都打包到一个文件中，当这个文件很大的时候，就需要分割成多个小文件。一般建议 bundle 文件最大不超过 350k。
对于 webpack，可以用 DllPlugin 或 SplitChunksPlugin 做文件分割。
8. 按需加载
对于很多应用来说，特别是 SPA 应用，有些资源是没必要在首屏就加载出来的，而是等到要用的时候才加载，这就是按需加载。按需加载可以减小首屏加载文件的体积，达到提高响应速度的目的。
// about.js
export default render;
// main.js
document.getElementById('about').addEventListener('click', e => {
import('./about').then(({default: render}) => {
// 渲染页面
render();
});
}, !1);上面的代码中只有当点击了 #about 元素后，才会加载 about.js 文件。
可以参考：
9. rollup
前端性能的优化除了从语法、http 协议、工程结构方向之外，构建工具也是一个可以优化的方向。
对于前端开发者来说，基本上都用 webpack 来打包项目，但 webpack 带给我们强大功能的同时，也会有一些副作用产生，就是会产生很多冗余的代码（如果你有查看过 webpack 的 bundle 文件，便会发现）。
如果你的项目不需要处理静态资源（如图片），也不需要按需加载，并追求前端高性能的话，可以尝试 rollup。
比如：
源代码
# 目录
|-- src/
|-- index.js
|-- prefix.js
|-- suffix.js
# prefix.js
const prefix = 'prefix';
export default str => `${prefix} | ${str}`;
# suffix.js
const suffix = 'suffix';
export default str => `${str} | ${suffix}`;
# index.js
import prefix from './prefix';
import suffix from './suffix';
export default str => suffix(prefix(str));rollup 打包后的代码：
'use strict';
const prefix = 'prefix';
var prefix$1 = str => `${prefix} | ${str}`;
const suffix = 'suffix';
var suffix$1 = str => `${str} | ${suffix}`;
var index = str => suffix$1(prefix$1(str));
module.exports = index;webpack 打包后的代码：
module.exports =
/******/ (function(modules) { // webpackBootstrap
/******/
/******/ 中间有 100 行代码被省略
/******/
/******/ ]);可以参考：
- rollup
- webpack 之外的另一种选择：rollup
10. prepack
前端性能的优化还有一个方向，就是预编译脚本，即把原本在运行阶段才解析的代码通过工具预执行，然后只留下结果。
prepack 便是这样的一个工具，它的思路大致是这样：
把不依赖外部环境的逻辑提前进行运算，并把运算结果替换到相应的源码处，然后从源码中移除这段逻辑。
源代码
(() => {
const secondsOfOneDay = 24 * 60 * 60;
window.getSecondsOfDays = days => days * secondsOfOneDay;
})();编译后的代码
(function () {
var _$0 = this;
var _1 = days => {
return days * 86400;
};
_$0.getSecondsOfDays = _1;
}).call(this);可以参考：
- prepack
- js 性能优化利器：prepack
11. css 选择器不要嵌套太深
对于前端来说，css 对性能影响比较小，所以，这里只提一点最常见、也是最有效果的建议：选择器不要嵌套太深。
一般建议选择器层级在 2 级以内，最多不超过 3 级。
// 下面是 less, scss, css 语法
// 不好
.one {
.two {
.three {
.four {}
}
}
}
// 不推荐
.one {
.two {
.three {}
}
}
// 好
.one .two {}
.one {}后续
更多博客，查看 https://github.com/senntyou/blogs
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
