摘要:一般建議文件最大不超過。按需加載可以減小首屏加載文件的體積,達到提高響應速度的目的。如果你的項目不需要處理靜態資源如圖片,也不需要按需加載,并追求前端高性能的話,可以嘗試。
如何提升前端性能和響應速度
下面大多是從前端工程化的角度給出的優化建議,如果需要了解語法上的優化,可以參考:
如何提高頁面加載速度
編寫高效的JavaScript
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許可證)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/114082.html
摘要:一般建議文件最大不超過。按需加載可以減小首屏加載文件的體積,達到提高響應速度的目的。如果你的項目不需要處理靜態資源如圖片,也不需要按需加載,并追求前端高性能的話,可以嘗試。 如何提升前端性能和響應速度 下面大多是從前端工程化的角度給出的優化建議,如果需要了解語法上的優化,可以參考: 如何提高頁面加載速度 編寫高效的JavaScript Web前端性能優化進階 - 完結篇 1. 原生...
摘要:前言月份開始出沒社區,現在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了一般來說,差不多到了轉正的時候,會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區,現在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了!一般來說,差不多到了轉正的時候,會進行總結或者分享會議!那么今天我就...
閱讀 2273·2021-08-23 09:46
閱讀 922·2019-08-29 18:31
閱讀 1875·2019-08-29 17:04
閱讀 2465·2019-08-29 12:23
閱讀 1861·2019-08-26 14:05
閱讀 1086·2019-08-26 13:44
閱讀 3156·2019-08-26 12:23
閱讀 2211·2019-08-26 10:46