摘要：一般建議文件最大不超過。按需加載可以減小首屏加載文件的體積，達(dá)到提高響應(yīng)速度的目的。如果你的項(xiàng)目不需要處理靜態(tài)資源如圖片，也不需要按需加載，并追求前端高性能的話，可以嘗試。

下面大多是從前端工程化的角度給出的優(yōu)化建議，如果需要了解語法上的優(yōu)化，可以參考：

如何提高頁面加載速度

編寫高效的JavaScript

Web前端性能優(yōu)化進(jìn)階 - 完結(jié)篇

原生 css 動(dòng)畫要比 js 實(shí)現(xiàn)的動(dòng)畫要高效很多，所以在可能的情況下盡量用原生 css 動(dòng)畫。

可以參考：

You-Dont-Need-JavaScript

css animation

css @keyframes

css transform

css transition

因?yàn)榈谌綆觳豢杀苊獾臅?huì)增大打包文件的體積，并且有很多我們用不著的代碼和性能的損失，所以在可能的情況下盡量用原生 js 的 api，代替第三方庫的 api，比如 jquery、lodash、underscore、moment 等。

可以參考：

You-Dont-Need-jQuery

You-Dont-Need-Lodash-Underscore

You-Dont-Need-Momentjs

有些第三方庫會(huì)比較大，如果提供單個(gè)模塊的使用方式，就盡量使用子模塊代替使用整個(gè)包，比如 lodash、jquery-ui 等。

以 lodash 為例：

// 不推薦
import _ from "lodash";
_.forEach();
_.defaults();

// 推薦
import forEach from "lodash/forEach";
import defaults from "lodash/defaults";
forEach();
defaults();

如果相同的功能可以有多種選擇，應(yīng)當(dāng)盡量使用高效的一種方案。

比如：

用 document.getElementById, document.getElementsByClassName, document.getElementsByTagName 代替 document.querySelector, document.querySelectorAll

用 el.innerHTML 代替 document.createElement, el.appendChild

避免無用的閉包、無用的塊作用域，盡量是代碼結(jié)構(gòu)扁平化。

比如：

// 低效的實(shí)現(xiàn)
const urlParams = (() => {
  const params = {};
  if (location.search) {
    location.search.slice(1).split("&").forEach(item => {
      const [key, value = ""] = item.split("=");
      urlParams[key] = value;
    });
  }
  
 return params;
})();


// 更高效的實(shí)現(xiàn)
const urlParams = {};
if (location.search) {
  location.search.slice(1).split("&").forEach(item => {
    const [key, value = ""] = item.split("=");
    urlParams[key] = value;
  });
}

現(xiàn)在 js 的模塊化主要是 commonjs 與 es6 模塊化規(guī)范，但是在開發(fā)的時(shí)候，建議是用 es6 的模塊化規(guī)范，因?yàn)?es6 的模塊化可以使用 Tree Shaking 的功能。

這個(gè)功能能夠在構(gòu)建工具打包代碼時(shí)，對代碼進(jìn)行分析，只有真正用到的代碼會(huì)被打包，沒有用到的則不會(huì)。

// one.js
export const smile = {};
export const cry = [];

// two.js
import { smile } from "./one";
export default smile;

上面的代碼以 two.js 為入口進(jìn)行打包，則 one.js 中只有 export const smile = {} 會(huì)被打包，而 export const cry = [] 不會(huì)。

關(guān)于 Tree Shaking，可以參考：

tree-shaking

webpack 如何優(yōu)雅的使用tree-shaking（搖樹優(yōu)化）

代碼的合并與壓縮是前端的必修課，如果使用 webpack 來打包，webpack 會(huì)自動(dòng)幫我們完成，一般無需關(guān)心。

另外，在有些時(shí)候，代碼是需要做分割的，因?yàn)?webpack 會(huì)把代碼都打包到一個(gè)文件中，當(dāng)這個(gè)文件很大的時(shí)候，就需要分割成多個(gè)小文件。一般建議 bundle 文件最大不超過 350k。

對于 webpack，可以用 DllPlugin 或 SplitChunksPlugin 做文件分割。

對于很多應(yīng)用來說，特別是 SPA 應(yīng)用，有些資源是沒必要在首屏就加載出來的，而是等到要用的時(shí)候才加載，這就是按需加載。按需加載可以減小首屏加載文件的體積，達(dá)到提高響應(yīng)速度的目的。

// about.js
export default render;

// main.js
document.getElementById("about").addEventListener("click", e => {
  import("./about").then(({default: render}) => {
    // 渲染頁面
    render();
  });
}, !1);

上面的代碼中只有當(dāng)點(diǎn)擊了 #about 元素后，才會(huì)加載 about.js 文件。

可以參考：

proposal-dynamic-import

webpack dynamic-imports

前端性能的優(yōu)化除了從語法、http 協(xié)議、工程結(jié)構(gòu)方向之外，構(gòu)建工具也是一個(gè)可以優(yōu)化的方向。

對于前端開發(fā)者來說，基本上都用 webpack 來打包項(xiàng)目，但 webpack 帶給我們強(qiáng)大功能的同時(shí)，也會(huì)有一些副作用產(chǎn)生，就是會(huì)產(chǎn)生很多冗余的代碼（如果你有查看過 webpack 的 bundle 文件，便會(huì)發(fā)現(xiàn)）。

如果你的項(xiàng)目不需要處理靜態(tài)資源（如圖片），也不需要按需加載，并追求前端高性能的話，可以嘗試 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

前端性能的優(yōu)化還有一個(gè)方向，就是預(yù)編譯腳本，即把原本在運(yùn)行階段才解析的代碼通過工具預(yù)執(zhí)行，然后只留下結(jié)果。

prepack 便是這樣的一個(gè)工具，它的思路大致是這樣：

把不依賴外部環(huán)境的邏輯提前進(jìn)行運(yùn)算，并把運(yùn)算結(jié)果替換到相應(yīng)的源碼處，然后從源碼中移除這段邏輯。

源代碼

(() => {
  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 性能優(yōu)化利器：prepack

對于前端來說，css 對性能影響比較小，所以，這里只提一點(diǎn)最常見、也是最有效果的建議：選擇器不要嵌套太深。

一般建議選擇器層級(jí)在 2 級(jí)以內(nèi)，最多不超過 3 級(jí)。

// 下面是 less, scss, css 語法

// 不好
.one {
  .two {
    .three {
      .four {}
    }
  }
}

// 不推薦
.one {
  .two {
    .three {}
  }
}

// 好
.one .two {} 
.one {} 

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）