前端进阶（14） - 如何提高前端性能和响应速度

如何提高前端性能和响应速度

下面大可能是从前端工程化的角度给出的优化建议，若是须要了解语法上的优化，能够参考：

1. 如何提升页面加载速度
2. 编写高效的JavaScript
3. Web前端性能优化进阶 - 完结篇

1. 原生 css 动画代替 js 动画

原生 css 动画要比 js 实现的动画要高效不少，因此在可能的状况下尽可能用原生 css 动画。

能够参考：

• You-Dont-Need-JavaScript
• css animation
• css @keyframes
• css transform
• css transition

2. 原生 js 代替第三方库

由于第三方库不可避免的会增大打包文件的体积，而且有不少咱们用不着的代码和性能的损失，因此在可能的状况下尽可能用原生 js 的 api，代替第三方库的 api，好比 jquery、lodash、underscore、moment 等。

能够参考：

• You-Dont-Need-jQuery
• You-Dont-Need-Lodash-Underscore
• You-Dont-Need-Momentjs

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，能够参考：

• tree-shaking
• webpack 如何优雅的使用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 文件。

能够参考：

• proposal-dynamic-import
• webpack dynamic-imports

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

做者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）