來源: 海洋里的魔鬼魚

前言

最近花了一些時間在項目的性能優化上，背后做了很多工作，但是最后依然沒有達到自己想要的結果，有些失望，但是還是記錄下自己的執著。

性能優化總結：減少請求次數、減小資源大小、提高響應和加載速度、優化資源加載時機、優化加載方式。

性能分類

對前端工程性能的優化，我覺得可以分為兩類：

• 站在用戶視角的主觀的可感知的性能。
• 站在開發者視角的可客觀度量的性能。

感知性能

對于用戶來說，用戶的感知性能才是最重要的，簡單講，就是讓用戶感覺你的網站訪問很快，并且感知性能沒有衡量標準。

不過，凡事總有例外，如果一個頁面的加載時間就會很長，我們也可以通過一些方式讓用戶覺得沒有那么慢。

總之一句話，你的頁面可以做的不快，但是你可以讓你的用戶覺得你很快。

客觀性能

對于開發者來說，性能指標是可以客觀度量的，我們可以通過一些手段來優化 Web 性能，使這些度量指標達到開發者設定的標準。

客觀性能是指，從用戶輸入url開始，到下載、解析和執行所有資源以及最終繪制的整個過程的時間度量。

性能指標是個很復雜的標準，后續我會單獨整理出一篇文章介紹性能指標。

構建優化

由于我司使用的是 ?@vue/cli，所以許多webpack配置腳手架已經幫你完成了，我就不敘述了，這里只講基于?@vue/cli?做的一些優化配置

gzip 壓縮

gzip?壓縮效率非常高，通常可以達到 70% 的壓縮率，也就是說，如果你的網頁有 30K，壓縮之后就變成了 9K 左右。

//npm?i?-D?compression-webpack-plugin
configureWebpack:?config?=>?{
??const?CompressionPlugin?=?require('compression-webpack-plugin')
??config.plugins.push(new?CompressionPlugin())
}

去除 console.log

線上項目自然不應該被看到控制臺的打印日志,所以我們需要將?console.log?都去除掉。

//npm?i?-D?terser-webpack-plugin?
?configureWebpack:?config?=>?{
???const?TerserPlugin?=?require('terser-webpack-plugin')
???config.optimization.minimizer.push(
?????new?TerserPlugin({
???????extractComments:?false,
???????terserOptions:?{?compress:?{?drop_console:?true?}?},
?????})
???)
?}

去除 SourceMap

由于打包后的文件經過了壓縮、合并、混淆、babel編譯后的代碼不利于定位分析bug。

module.exports?=?{
??productionSourceMap:?false,
}

CDN減少打包體積

使用?cdn?文件來減少工程到打包體積，也可以按需加載。

在 /public/index.html 中引入需要的js和css文件

去掉 package.json 中對于 vue、element-ui 等相關資源的依賴

src/main.js ，去掉 vue、element-ui 等相關資源的 import 和 vue.use 這些語句

配置externals。由于使用 Vue Cli 3 默認配置，新建出來的項目沒有了 build 目錄，首先得在項目根目錄下，新建 vue.config.js 文件，里面添加以下代碼：

module.exports?=?{
????configureWebpack:{
????????externals:{
????????????'Vue':?'Vue',
????????????'element-ui':?'element-ui',
????????????'clipboard':'VueClipboard'
????????}
????}
}

預渲染

渲染方式分為三種，客戶端渲染，服務端渲染，預渲染。

我們默認的開發方式是通過客戶端渲染，但是客戶端渲染頁面內容，關鍵鏈路較長，首屏渲染會有一定延遲，并且對?SEO?非常不友好，對于C端的產品來說，是不可行的。

所以很多公司都會通過服務端渲染(SSR)或是 預渲染的方式來解決這兩點問題，由于公司技術棧原因，我們采用預渲染的方式來做優化。

什么是預渲染？

簡單說，就是將瀏覽器解析?javascript??動態渲染頁面的這部分工作，在打包階段就完成了，(只構建了靜態數據)換個說法在構建過程中，webpack?通過使用?prerender-spa-plugin?插件生成靜態結構的?html。

//?npm?i?-D?prerender-spa-plugin
?configureWebpack:?config?=>?{
???const?path?=?require('path')
???const?PrerenderSPAPlugin?=?require('prerender-spa-plugin')
???config.plugins.push(
?????new?PrerenderSPAPlugin({
???????staticDir:?path.join(__dirname,?'dist'),
???????routes:?['/'],
???????minify:?{
?????????collapseBooleanAttributes:?true,
?????????collapseWhitespace:?true,
?????????keepClosingSlash:?true,
?????????decodeEntities:?true,
?????????sortAttributes:?true,
???????},
???????renderer:?new?PrerenderSPAPlugin.PuppeteerRenderer({
?????????renderAfterDocumentEvent:?'render-event',
?????????renderAfterTime:?5000,
?????????//?headless:?false,
???????}),
?????})
???)
?}

注意：路由模式必須為?history?，如果不設置?history?模式，也能運行和生成文件，每個?index.html?文件的內容都會是一樣的。

網絡資源優化

Service Worker

ServiceWorker?是運行在瀏覽器后臺進程里的一段 JS，它可以做許多事情，比如攔截客戶端的請求、向客戶端發送消息、向服務器發起請求等等，其中最重要的作用之一就是離線資源緩存。

ServiceWorker??擁有對緩存流程豐富靈活的控制能力，當頁面請求到?ServiceWorker?時，ServiceWorker?同時請求緩存和網絡，把緩存的內容直接給用戶，而后覆蓋緩存，我司已經使用了?ServiceWorker?替換?HTTP緩存策略。

注意：需要HTTPS才可以使用 ServiceWorker

http緩存

HTTP 緩存一般分為兩類：強緩存(也稱本地緩存)?和?協商緩存(也稱304緩存)。

普通刷新會啟用?協商緩存，忽略?強緩存。只有在地址欄或收藏夾輸入網址、通過鏈接引用資源等情況下，瀏覽器才會啟用?強緩存。

強緩存(200)

本地緩存是最快速的一種緩存方式，只要資源還在緩存有效期內，瀏覽器就會直接在本地讀取，不會請求服務端。

協商緩存(304)

協商緩存，顧名思義是經過瀏覽器與服務器之間協商過之后，在決定是否讀取本地緩存，如果服務器通知瀏覽器可以讀取本地緩存，會返回304狀態碼，并且協商過程很簡單，只會發送頭信息，不會發送響應體。

緩存位置

緩存位置一般分為：Memory Cache(內存緩存)和 Disk Cache(硬盤緩存)

內存緩存：讀取快、持續時間短、容量小

硬盤緩存：讀取慢、持續時間長、容量大

緩存優先級

Service Worker -> Memory Cache -> Disk Cache -> Push Cache

HTTP2

HTTP2 四個新特性：

• 多路復用，無需多個TCP連接，因為其允許在單一的HTTP2連接上發起多重請求，因此可以不用依賴建立多個TCP連接。
• 二進制分幀，將所有要傳輸的消息采用二進制編碼，并且會將信息分割為更小的消息塊。
• 頭部壓縮，用HPACK技術壓縮頭部，減小報文大小
• 服務端推送，服務端可以在客戶端發起請求前發送數據，換句話說，服務端可以對客戶端的一個請求發送多個相應，并且資源可以正常緩存。

server?{
????listen?443?ssl?http2;
}

注意：使用 http2 的前提是必須是 https。

資源預加載

簡單說，提前加載資源，當用戶需要查看時可直接從本地緩存中渲染。

總結：對當前頁面需要的資源，使用 preload 進行預加載，對其它頁面需要的資源進行 prefetch 預加載。

preload

preload?頁面加載的過程中，在瀏覽器開始主體渲染之前加載。

prefetch

prefetch?頁面加載完成后，利用空閑時間提前加載。

注意：vue-cli?默認開啟?prefetch?，可在?vue.config.js?中全局禁用?prefetch?，再針對指定模塊開啟。

chainWebpack:?config?=>?{
??config.plugins.delete('prefetch')
}

dns-prefetch

頁面加載完成后，利用空閑時間提前加載。

"dns-prefetch"?href="//example.com">

異步無阻塞加載JS

異步加載 js 文件，并且不會阻塞頁面的渲染。

先來看一個普通的 script 標簽解析過程。

總結

以上是生活随笔為你收集整理的vue 一个页面有点请求需要同时发送_前端性能优化，这些你都需要知道的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。