正文

前端提高頁面性能優(yōu)化（前端提高頁面性能優(yōu)化方案）

發(fā)布時間：2023-04-07 19:18:04 稿源：創(chuàng)意嶺閱讀： 91

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于前端提高頁面性能優(yōu)化的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、前端性能優(yōu)化總結(jié)
2、你有用過哪些前端性能優(yōu)化的方法,有好的推薦嗎？
3、如何提高網(wǎng)站頁面速度？
4、前端性能優(yōu)化之Gzip

前端提高頁面性能優(yōu)化（前端提高頁面性能優(yōu)化方案）

一、前端性能優(yōu)化總結(jié)

gzip壓縮

gzip壓縮效率很高，可以達(dá)到70%的壓縮率

//npm i -D compression-webpack-plugin 安裝插件依賴

configureWebpack: config => {

const CompressionPlugin = require('compression-webpack-plugin')

config.plugins.push(new CompressionPlugin())

}

去掉console.log

生產(chǎn)環(huán)境中，不需要打印日志。通過對webpack進(jìn)行配置，打包時自動去掉console.log

//npm i -D terser-webpack-plugin

configureWebpack:config =>{

const TerserPlugin = require('terser-webpack-pulugin')

config.optimzation.minimizer.push(

new TerserPlugin({

extractComments:false,

terserOptions:{compress:{drop_console:true}} //插件配置項(xiàng) 移除console

})

)

}

去除SourceMap

代碼壓縮后進(jìn)行調(diào)bug定位將非常困難，于是引入sourcemap記錄壓縮前后的位置信息記錄，當(dāng)產(chǎn)生錯誤時直接定位到未壓縮前的位置，將大大的方便我們調(diào)試。

sourcemap附帶了很多信息，如果build需要生成sourcemap，將會大大降低build的速度，還會增加包的體積。

//vue 中

module.exports = {

productionSourceMap: false,

}

//react中

//打開webpack.config.prod.js

const shouldUseSourceMap = false

CDN

內(nèi)容分發(fā)網(wǎng)絡(luò)，它能夠?qū)崟r地根據(jù)網(wǎng)絡(luò)流量和各節(jié)點(diǎn)的連接、負(fù)載狀況以及到用戶的距離和響應(yīng)時間等綜合信息將用戶的請求重新導(dǎo)向離用戶最近的服務(wù)節(jié)點(diǎn)上。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問網(wǎng)站的響應(yīng)速度。所以可以通過將資源部署在CDN上來提高響應(yīng)速度，提高用戶體驗(yàn)

預(yù)渲染

簡單來說，就是將瀏覽器解析JavaScript動態(tài)渲染的工作，在打包階段完成了（只構(gòu)建了靜態(tài)數(shù)據(jù)）。換個說法，在構(gòu)建過程中，webpack通過使用prerender-spa-plugin插件生成靜態(tài)結(jié)構(gòu)的html

// 1、安裝prerender-spa-plugin

npm install prerender-spa-plugin --save-dev

// 2、安裝vue-meta-info

npm install vue-meta-info --save-dev

// 3、相關(guān)配置

// 預(yù)渲染配置：在webpack.prod.conf文件中加入

const PrerenderSPAPlugin = require('prerender-spa-plugin')

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

// 在 plugins 中加入

new PrerenderSPAPlugin({

// 生成文件的路徑，也可以與webpakc打包的一致。

// 下面這句話非常重要！??！

// 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預(yù)渲染的時候只會卡著不動。

staticDir: path.join(__dirname, '../dist'),

// 對應(yīng)自己的路由文件，比如a有參數(shù)，就需要寫成 /a/param1。

routes: ['/', '/first', '/second', '/third', '/fourth', '/userCenter/userFirst','/userCenter/userSecond','/userCenter/userThird'],

// 這個很重要，如果沒有配置這段，也不會進(jìn)行預(yù)編譯

renderer: new Renderer({

inject: {

foo: 'bar'

// headless: false,

renderAfterDocumentEvent: 'render-event', // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應(yīng)上。

args: ['--no-sandbox', '--disable-setuid-sandbox']

})

// 4、在main.js中

import MetaInfo from 'vue-meta-info'

new Vue({

el: '#app',

router,

components: { App },

template: '',

// 添加mounted，不然不會執(zhí)行預(yù)編譯

mounted () {

document.dispatchEvent(new Event('render-event'))

}

})

注意：路由模式必須為 history ，如果不設(shè)置 history 模式，也能運(yùn)行和生成文件，每個 index.html 文件的內(nèi)容都會是一樣的

Service Worker

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

ServiceWorker 擁有對緩存流程豐富靈活的控制能力，當(dāng)頁面請求到 ServiceWorker 時，ServiceWorker 同時請求緩存和網(wǎng)絡(luò)，把緩存的內(nèi)容直接給用戶，而后覆蓋緩存

注意：需要HTTPS才能使用ServiceWorker

HTTP緩存

HTTP緩存一般分為兩類：強(qiáng)緩存(本地緩存)、協(xié)商緩存(304緩存)

普通刷新會啟用協(xié)商緩存

在地址欄輸入網(wǎng)址、通過鏈接引入資源等情況下，瀏覽器才啟用強(qiáng)緩存

強(qiáng)緩存(200)。本地緩存是最快速的一種緩存方式，只要資源還在緩存有效期內(nèi)，瀏覽器就會直接在本地讀取，不會請求服務(wù)端。在chrome控制臺的Network選項(xiàng)中可以看到該請求返回200的狀態(tài)碼，并且Size顯示from disk cache或from memory cache。強(qiáng)緩存可以通過設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Expires 和 Cache-Control。

協(xié)商緩存(304)。協(xié)商緩存，顧名思義是經(jīng)過瀏覽器與服務(wù)器之間協(xié)商過之后，在決定是否讀取本地緩存，如果服務(wù)器通知瀏覽器可以讀取本地緩存，會返回304狀態(tài)碼，并且協(xié)商過程很簡單，只會發(fā)送頭信息，不會發(fā)送響應(yīng)體。

協(xié)商緩存可以通過設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Last-Modified 和 ETag

首先在精確度上，Etag要優(yōu)于Last-Modified

第二在性能上，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要服務(wù)器通過算法來計算出一個hash值

第三在優(yōu)先級上，服務(wù)器校驗(yàn)優(yōu)先考慮Etag

緩存優(yōu)先級：Service Worker -> Memory Cache(內(nèi)存緩存) -> Disk Cache(硬盤緩存) -> Push Cache(推送緩存)

Push Cache 只在會話（session）中存在，會話結(jié)束就被釋放，而且緩存時間很短

HTTP2

HTTP2 四個新特性：

多路復(fù)用，無需多個TCP連接，因?yàn)槠湓试S在單一的HTTP2連接上發(fā)起多重請求，因此可以不用依賴建立多個TCP連接。

二進(jìn)制分幀，將所有要傳輸?shù)南⒉捎枚M(jìn)制編碼，并且會將信息分割為更小的消息塊。

頭部壓縮，用HPACK技術(shù)壓縮頭部，減小報文大小

服務(wù)端推送，服務(wù)端可以在客戶端發(fā)起請求前發(fā)送數(shù)據(jù)，換句話說，服務(wù)端可以對客戶端的一個請求發(fā)送多個相應(yīng)，并且資源可以正常緩存。

。。。。。。。。。。。。。

作者：MonkeySoft

篇幅有限更多請見擴(kuò)展鏈接：http://www.mark-to-win.com/tutorial/50671.html

二、你有用過哪些前端性能優(yōu)化的方法,有好的推薦嗎？

前端性能優(yōu)化的方法，精簡版：

1、 JavaScript 壓縮

2、加載資源（何時、什么順序、要不要現(xiàn)在加載）

3、緩存

4、應(yīng)用性能分析

5、使用負(fù)載均衡方案

6、為了更快的啟動時間考慮一下同構(gòu)

7、使用索引加速數(shù)據(jù)庫查詢

8、使用更快的轉(zhuǎn)譯方案

9、避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染

10、圖片編碼

希望以上的回答能夠?yàn)槟闾峁椭?

三、如何提高網(wǎng)站頁面速度？

網(wǎng)頁的加在一半就是代碼的加載，各種文件，以及一些因素，那么就從這些因素去考慮就可以：

1、合并Js文件和CSS

將JS代碼和CSS樣式分別合并到一個共享的文件，這樣不僅能簡化代碼，而且在執(zhí)行JS文件的時候，如果JS文件比較多，就需要進(jìn)行多次“Get”請求，延長加載速度，將JS文件合并在一起后，自然就減少了Get請求次數(shù)，提高了加載速度。

2、Sprites圖片技術(shù)

Spriting是一種網(wǎng)頁圖片應(yīng)用處理方式，它是將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，然后利用CSS技術(shù)展現(xiàn)出來。這樣一來，當(dāng)訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了，可以減少了整個網(wǎng)頁的圖片大小，并且利用CSSSprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能。CSSSprites在國內(nèi)很多人叫css精靈，很早就有了，在很多大型網(wǎng)站都有用到，特別是一些所有頁面都存在的圖標(biāo)用得比較多，很好的提升加載速度。

3、壓縮文本和圖片

壓縮技術(shù)如gzip可以有效減少頁面加載的時間。包括HTML，XML，JSON(JavaScript對象符號)，JavaScript和CSS等，壓縮率都可以在大小70%左右。文本壓縮用得比較多，一般直接在空間開啟就行，而圖片的壓縮就比較隨意，很多都是直接上傳，其實(shí)還有很大的壓縮空間。

4、延遲顯示可見區(qū)域外的內(nèi)容

為了確保用戶可以更快地看見可見區(qū)域的網(wǎng)頁可以延遲加載或展現(xiàn)可見區(qū)域外的內(nèi)容，為了避免頁面變形，可以使用占位符標(biāo)簽制定正確的高度和寬度。比如WP的jQueryImage LazyLoad插件就可以在用戶停留在第一屏的時候，不加載任何第一屏以下的圖片信息，只有當(dāng)用戶把鼠標(biāo)往下滾動的時候，這些圖片才開始加載。這樣很明顯提升可見區(qū)域的加載速度，提高用戶體驗(yàn)。

5、確保功能圖片優(yōu)先加載

網(wǎng)站主要考慮可用性的重要性，一個功能按鈕要提前加載出來，用戶進(jìn)入下載頁，一個只需要8s時間的下載花了5s在等待、尋找下載按鈕圖片，誰能忍受?

6、重新布置Call-to-Action按鈕

其實(shí)這個和上面一條是差不多的，都是從用戶體驗(yàn)速度著手，跳過了網(wǎng)頁的整體加載速度。速度沒變，只是讓一些行為按鈕提前，Call-to-Action按鈕一般習(xí)慣設(shè)計在頁面底部，這樣的習(xí)慣對于用戶來說并不總是好的，購買用戶需要等到最下面加載出來才能點(diǎn)擊下一步操作?？梢哉{(diào)整CTA按鈕的位置或使用滑動的圖片按鈕。很多大型購物網(wǎng)站的加入購物車就是這種類型。

7、圖片格式優(yōu)化

不恰當(dāng)?shù)膱D像格式是一種極為常見的減慢加載速度的罪魁禍?zhǔn)住Ｕ_的圖片格式可以讓圖片縮小數(shù)倍，如果保存為最佳格式?？梢怨?jié)省大量帶寬，減少處理時間時間，大大加快頁面加載速度，這是一種很常見的做法。

8、使用 Progressive JPEGs

ProgressiveJPEGs圖片是JPEG格式的一個特殊變種，名為“高級JPEG”。在創(chuàng)建高級JPEG文件時，數(shù)據(jù)是這樣安排的：在裝入圖像時，開始只顯示一個模糊的圖像，隨著數(shù)據(jù)的裝入，圖像逐步變得清晰。它相當(dāng)于交織的GIF格式的圖片。高級JPEG主要是考慮到使用調(diào)制解調(diào)器的慢速網(wǎng)絡(luò)而設(shè)計的，快速網(wǎng)絡(luò)的使用者通常不會體會到它和正常JPEG格式圖片的區(qū)別。對于網(wǎng)速比較慢的用戶，這無疑有很好的體驗(yàn)。

9、精簡代碼

這個可以說是最直接的一個方法，也是用得比較多的，對網(wǎng)頁代碼進(jìn)行瘦身，刪除不必要的沉冗代碼，比如不必要的空格、換行符、注釋等，包括JS代碼中的無用代碼也需要清除。其中對于注釋代碼的清除可能有些人存在誤區(qū)，甚至有的在里面堆砌關(guān)鍵詞。

10、延遲加載和執(zhí)行非必要腳本

網(wǎng)頁中有很多腳本是在頁面完全加載完前都不需要執(zhí)行的，可以延遲加載和執(zhí)行非必要腳本。這些腳本可以在onload事件之后執(zhí)行，避免對網(wǎng)頁上重要內(nèi)容的呈現(xiàn)造成影響。這些腳本可能是自己網(wǎng)頁的甲苯，往往更多的是一些第三方腳本，這樣的有很多，比如評論、廣告、智能推薦、百度云圖、分享等等，這些完全可以等主體內(nèi)容加載完后再執(zhí)行。

11、使用AJAX

AJAX即“Asynchronous Javascript +XML“，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁(不使用AJAX)如果需要更新內(nèi)容，必須重載整個網(wǎng)頁面。

12、自動化的頁面性能優(yōu)化

自動化的頁面性能優(yōu)化也就是借助工具了，網(wǎng)站提速工具有很多，這里Radware推薦了自家的RadwareFastView，也算Radware給自家做了一個廣告，這里不多說了。

四、前端性能優(yōu)化之Gzip

由于我們團(tuán)隊(duì)的前端項(xiàng)目越來越龐大，加之Vue的SPA首屏加載特性，導(dǎo)致系統(tǒng)第一次加載速度越來越緩慢，可能達(dá)到幾十秒的程度，所以為了優(yōu)化用戶性能體驗(yàn)，我們選擇了開啟Gzip進(jìn)行文件壓縮，確實(shí)達(dá)到了顯著的效果。

Gzip原本用戶UNIX系統(tǒng)的文件壓縮，后來逐漸成為Internet最主流的數(shù)據(jù)壓縮格式。

當(dāng)用戶訪問我們的web站點(diǎn)時，服務(wù)器就將我們的網(wǎng)頁文件進(jìn)行壓縮，將壓縮后的文件傳輸?shù)娇蛻舳?，對于純文本文件我們可以至少壓縮到原大小的40%，這樣大大提高了傳輸效率，頁面便可更快的加載出來。

由于目前我們項(xiàng)目是使用ngxin來部署前端的，nginx自帶 HttpGzip模塊，所以我們直接對 nginx.conf 文件的http配置項(xiàng)進(jìn)行配置即可。但相對的由于nginx自身處理請求然后壓縮返回，會消耗對應(yīng)的服務(wù)器內(nèi)存。

測試效果

我們應(yīng)盡可能減少對服務(wù)端內(nèi)存的使用，畢竟服務(wù)端的資源是十分寶貴的，這里我們?nèi)匀皇褂胣ginx進(jìn)行前端部署，我們在客戶端替nginx處理壓縮文件這一步操作，nginx便可直接使用我們壓縮好的文件，下面是一個基于vue-cli配置的前端項(xiàng)目。

這里最好安裝低版本，防止報錯。

這里可以根據(jù)大家不同的配置，總之就是將webpack插件進(jìn)行注冊。

成功運(yùn)行后，便可以在打包文件中看到.gz結(jié)尾的文件了，將打包后的文件上傳到指定的nginx文件夾下。

這里需要nginx對應(yīng)的插件 http_gzip_static_module ，之前我是通過yum安裝的nginx，這里似乎不可以，需要手動安裝。這里目錄可以根據(jù)大家個人情況而定。

安裝nginx

修改nginx.conf

啟動nginx服務(wù)

這里我們雖然服務(wù)端js文件夾里只有.gz格式的文件（其他的文件已刪除），但客戶端卻成功讀取了。

無論是服務(wù)端與客戶端進(jìn)行g(shù)zip的壓縮，我們都大大縮小了文件體積，給用戶帶來了更好的體驗(yàn)。

服務(wù)端處理gzip優(yōu)點(diǎn)是只需配置一下即可，無需復(fù)雜操作，但缺點(diǎn)是會消耗服務(wù)器內(nèi)存。

客戶端處理gzip優(yōu)點(diǎn)是無需服務(wù)器進(jìn)行文件壓縮，減少服務(wù)器內(nèi)存消耗，但配置起來相比服務(wù)端gzip會稍加繁瑣。

Nginx中文文檔