JavaScript前端性能優(yōu)化

lewif 發(fā)布于2019-08-22 18:43 / 2214人閱讀

摘要：性能優(yōu)化的知識非常龐雜，這里我們來介紹幾種常用的性能優(yōu)化方式。一中的前端性能優(yōu)化原則多使用內(nèi)存緩存等方法減少計算減少網(wǎng)絡請求二針對上述兩項原則，我們可以從兩個方向入手來進行前端的性能優(yōu)化。只許一次操作，大大提高性能。

JS性能優(yōu)化的知識非常龐雜，這里我們來介紹幾種常用的性能優(yōu)化方式。 一、JS中的前端性能優(yōu)化原則：

多使用內(nèi)存、緩存等方法

減少CPU計算、減少網(wǎng)絡請求

二、針對上述兩項原則，我們可以從兩個方向入手來進行前端的性能優(yōu)化。 1、加載資源優(yōu)化

靜態(tài)資源的壓縮合并

我們可以利用webpack等打包工具進行資源的合并與壓縮操作，可以大大減小資源的大小，實現(xiàn)頁面更快的加載。

靜態(tài)資源緩存
當瀏覽器發(fā)送請求時，可以檢測該資源的最新版本是否存在于本地，若存在，則不進行重新加載?？梢酝ㄟ^鏈接名稱控制緩存，當緩存改變的時候，鏈接名稱才會改變。

使用CDN讓資源加載更快
CDN可以對不同區(qū)域的網(wǎng)絡進行優(yōu)化。例如用BootCDN進行優(yōu)化的事例：

SSR后端渲染
使用SSR進行后端渲染，將數(shù)據(jù)直接輸入到HTML中，而不需要先下載HTML頁面，再執(zhí)行AJAX獲取服務器端的數(shù)據(jù)。很早以前的jsp、php、asp都屬于后端渲染，現(xiàn)在Vue、React也提出了這樣的概念，經(jīng)測試表明，頁面的加載時間可以大大縮短。

2、渲染優(yōu)化

CSS放到header中，JS放到body最下面
（1）將CSS放在

部分：在渲染body部分時，可以渲染已經(jīng)規(guī)定好樣式。若將CSS樣式放到要渲染的DOM節(jié)點之后，就會出現(xiàn)最開始按照默認形式渲染，執(zhí)行到css樣式又重新渲染。造成樣式跳轉(zhuǎn)：用戶體驗差；性能差：需渲染兩次。
正確使用方式如下：

若將6行放到9后面，就會出現(xiàn)重復加載現(xiàn)象。

（2）JS會阻塞頁面DOM的加載，若將JS放到body最下面，首先不會阻塞頁面渲染，可以將頁面全部渲染后再執(zhí)行js。其次可以拿到所有的標簽，如果放在html上面可能拿不到標簽，因為還沒有被渲染到。
錯誤事例：加載執(zhí)行9行，阻塞第10行的執(zhí)行。

注意以該方式進行異步加載時不會阻塞頁面的渲染，因為img標簽已經(jīng)渲染出來，只是請求的異步加載內(nèi)容在加載。

圖片的懶加載
所謂懶加載，就是當用戶下拉到該頁面時再加載圖片，而不是當用戶打開頁面就將所有圖片全部加載完畢。

在頁面渲染時，將src傳入一個很小的圖片，真正的圖片地址放在自定義屬性data-lealsrc中，當真正執(zhí)行時，再將所需圖片加載進來。

減少DOM查詢，對DOM查詢做緩存
DOM操作是一種非常耗費性能的操作，在寫程序時要盡量減少DOM操作。

通過上面的兩種實現(xiàn)方式對比可以看出：未緩存DOM查詢時，每次循環(huán)都要進行DOM查詢；緩存了DOM查詢時，只需進行一次DOM查詢操作，將數(shù)值保存在變量中使用即可。

合并DOM操作

向文檔中插入10個li標簽，原始操作是有十次DOM插入操作，但是我們利用定義一個片段（frag），向片段中插入li，不會觸發(fā)DOM操作，最后將該片段插入到DOM中。只許一次DOM操作，大大提高性能。

時間節(jié)流

這個代碼實現(xiàn)的功能是：當連續(xù)很快輸入時，不需要每次抬起按鍵都執(zhí)行函數(shù)，只有當按鍵抬起超過100ms才執(zhí)行操作，可以減少事件操作，因為在連續(xù)操作時會執(zhí)行很多計算，嚴重影響性能。

用DOMContentLoaded替代window.onload
window.onload:在頁面加載完畢才會執(zhí)行操作。
DOMContentLoaded：在頁面渲染完執(zhí)行操作，此時圖片、視頻等可能還未被加載完。

圖片、視頻等靜態(tài)資源大小參差不齊，加載完成時間又會有很大的差別，但html一般很小，加載時間很短，所以利用DOMContentLoaded可以顯著提高性能和用戶體驗。

云服務器 GPU云服務器前端性能優(yōu)化前端開發(fā)性能優(yōu)化性能優(yōu)化前端優(yōu)化

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/96137.html

前端性能優(yōu)化（三）——傳統(tǒng) JavaScript 優(yōu)化的誤區(qū)

摘要：二模塊化誤區(qū)加快加載和執(zhí)行的速度，一直是前端優(yōu)化的一個熱點。結(jié)果文件減少，也達到了預期的效果。避免不必要的延遲。最后再根據(jù)文件的功能類型，來決定是放在頁面的頭部還是尾部。注：本文是純技術探討文，無圖無笑點，希望您喜歡一.前言軟件行業(yè)極其缺乏前端人才這是圈內(nèi)的共識了，某種程度上講，同等水平前端的工資都要比后端高上不少，而圈內(nèi)的另一項共識則是——網(wǎng)頁是公司的臉面！幾年前，谷歌的一項...

UsherChen 2019-08-14 15:08 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
前端優(yōu)化 - 收藏集 - 掘金

摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

VincentFF 2019-08-20 17:15 評論0 收藏0
前端性能優(yōu)化之--頁面渲染優(yōu)化全面解析

摘要：下面我們撇開網(wǎng)絡方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。不過，也會阻止的構(gòu)建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的，選擇異步加載是最優(yōu)選擇。為什么做優(yōu)化經(jīng)典問題：白屏時間過長，用戶體驗差產(chǎn)生的原因：網(wǎng)絡問題、關鍵渲染路徑（CRP）問題怎么做優(yōu)化如何做好優(yōu)化呢，網(wǎng)上隨便一搜，就有很多優(yōu)化總結(jié)，無非就是網(wǎng)絡優(yōu)化、靜態(tài)資源（h...

MadPecker 2019-08-29 15:29 評論0 收藏0
前端性能優(yōu)化之--頁面渲染優(yōu)化全面解析

摘要：下面我們撇開網(wǎng)絡方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。不過，也會阻止的構(gòu)建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的，選擇異步加載是最優(yōu)選擇。為什么做優(yōu)化經(jīng)典問題：白屏時間過長，用戶體驗差產(chǎn)生的原因：網(wǎng)絡問題、關鍵渲染路徑（CRP）問題怎么做優(yōu)化如何做好優(yōu)化呢，網(wǎng)上隨便一搜，就有很多優(yōu)化總結(jié)，無非就是網(wǎng)絡優(yōu)化、靜態(tài)資源（h...

gghyoo 2019-08-22 17:30 評論0 收藏0