前端項目的性能優(yōu)化是一個綜合性的問題,需要從多個方面入手,以下是幾大類的優(yōu)化方案：移動端、圖片、JavaScript、css、html、頁面內(nèi)容、服務器、cookie。

移動端性能優(yōu)化：

• 1、保持單個文件小于25KB
  移動網(wǎng)站頁面要求下載資源，如果文件過大，會大大減慢頁面加載速度。

• 2、打包內(nèi)容為分段multipart文檔
  由于HTTP請求每一次都會執(zhí)行三次握手，每次握手都會消耗較多的時間。使用multipart，實現(xiàn)了多文件同時上傳，可用一個HTTP請求獲取多個組件。

圖片優(yōu)化：

1、CSS sprites

俗稱 CSS 精靈、雪碧圖，雪花圖等。即將多張小圖片合并成一張圖片，達到減少 HTTP 請求的一種解決方案?？赏ㄟ^ CSS中的background 屬性訪問圖片內(nèi)容。這種方案同時還可以減少圖片總字節(jié)數(shù)，節(jié)省命名詞匯量。

2、壓縮圖片

圖片占據(jù)資源極大，因此盡量避免使用多余的圖片，使用時選擇最合適的格式大小，然后使用智圖壓縮，同時在代碼中用Srcset來按需顯示。（切記不要過分壓縮 可能會導致圖片迷糊）

3、盡量避免重設(shè)圖片大小

重設(shè)圖片大小是指在頁面、CSS、JavaScript等中多次重置圖片大小，多次重設(shè)圖片大小會引發(fā)圖片的多次重繪，影響性能。

4、圖片盡量避免使用DataURL

DataURL圖片沒有使用圖片的壓縮算法文件會變大，并且要解碼后再渲染，加載慢耗時長。

5、圖片懶加載

圖片對頁面加載速度影響非常大。比如，當一個頁面內(nèi)容比較多的時候，加載速度就會大大的降低，極大的影響到用戶體驗 。更有甚者，一個頁面可能會有幾百個圖片，但是頁面上僅僅只顯示前幾張圖片，那其他的圖片是否可以晚點加載用于提高性能。具體可見 >>

JavaScript相關(guān)優(yōu)化

1、把腳本放在頁面底部

放在前面js加載會造成阻塞，影響后面dom的加載

2、使用外部JavaScript和CSS

在現(xiàn)實環(huán)境中使用外部文件通常會產(chǎn)生較快的頁面，因為 JavaScript 和 CSS 有機會被瀏覽器緩存起來。對于內(nèi)聯(lián)的情況，由于 HTML 文檔通常不會被配置為可以進行緩存的，所以每次請求 HTML 文檔都要下載 JavaScript 和 CSS。所以，如果 JavaScript 和 CSS 在外部文件中，瀏覽器可以緩存它們，HTML 文檔的大小會被減少而不必增加 HTTP 請求數(shù)量。

3、壓縮JavaScript和CSS

壓縮文件是為了降低網(wǎng)絡(luò)傳輸量，減少頁面請求的響應時間。

4、減少DOM操作

操作dom會產(chǎn)生幾種動作，極大的影響渲染的效率。其中l(wèi)ayout（布局）和paint（繪制）是最大的。

5、js開銷縮短解析時間

開銷：加載-》解析和編譯-》執(zhí)行
js的解析和編譯，執(zhí)行要花很長時間（谷歌開發(fā)工具中的performance中可以查看。選中main主線程中的某一段。）

解決方案：

代碼拆分按需加載
tree shaking代碼減重
避免長任務
requestAnimationFrame和repuestIdleCallback進行時間調(diào)度

6、v8編譯原理（代碼優(yōu)化）

解析js代碼成抽象語法樹-》字節(jié)碼-》機器碼
編譯過程會進行優(yōu)化
運行時可能會發(fā)生反優(yōu)化

7、v8內(nèi)部優(yōu)化

腳本流:邊下載邊解析
字節(jié)碼緩存:常用的字節(jié)碼會存起來(這個文件用到其他的文件也用到的參數(shù))
函數(shù)懶解析:先解析用到的

8、對象優(yōu)化(迎合v8進行優(yōu)化)

保證對象初始化順序一致(對象初始化時v8會生成隱藏屬性以便后續(xù)復用并且是按照順序排序的)
不要直接賦值對象新屬性(追加的屬性需要通過描述數(shù)組間接查找)
使用數(shù)組代替類數(shù)組(v8會對數(shù)組進行優(yōu)化)比如先將類數(shù)組轉(zhuǎn)化成數(shù)組
避免讀取數(shù)組越界(比如for循環(huán)多查找1個下標會照成性能相差6倍)

9、造成undefined和數(shù)字比較

數(shù)組也是對象，當找不到對應下標的時候回沿著原型鏈向上找造成額外開銷
業(yè)務上無效

10、js內(nèi)存，避免造成內(nèi)存泄漏

通過變量是否能被訪問到來判斷內(nèi)存是否釋放。

局部變量: 函數(shù)執(zhí)行完沒有閉包引用會被標記回收

全局變量: 直到瀏覽器被卸載頁面釋放

回收機制:
引用計數(shù):每調(diào)用一次加一,當計數(shù)為0的時候進行回收。缺點是不能解決循環(huán)引用(例如a對象依賴于b對象，標記清除(垃圾回收): 從根節(jié)點去訪問，當訪問到不能被訪問的對象就進行標記然后進行垃圾回收。(當a對象
解決：避免意外的全局變量；避免反復運行引發(fā)的閉包；避免脫離的dom元素沒有被回收(所以react有ref這個api)。

CSS 相關(guān)優(yōu)化

• 1、把樣式表放在標簽中
  css放在head標簽中比css放在body標簽尾部少了一次構(gòu)建RenderTree, 一次計算布局和一次渲染網(wǎng)頁, 因此性能會更好。
• 2、使用替代@import
• 3、不要使用filter
• 4、避免元素類型轉(zhuǎn)化(數(shù)組中放多種類型不利于v8引擎優(yōu)化代碼)

  • 降低css對渲染的阻塞(按需加載，放在dom前面加載)
  • 利用pu完成動畫(前面講到的復合)
  • 使用contain進行優(yōu)化(優(yōu)化強度大。例如: contan:layout告訴瀏覽器這個節(jié)點內(nèi)部的子元素和外面的使用font-display進行優(yōu)化:讓文字更早的顯示在頁面上，減輕文字閃動的問題

html 相關(guān)優(yōu)化

• 減少iframes使用
• 壓縮空白符
• 避免嵌套層次太深
• 避免使用table布局
• 減少沒必要的注釋
• 刪除元素默認屬性(比如默認checkbox等)

開發(fā)內(nèi)容相關(guān)優(yōu)化

• 減少HTTP請求數(shù)
• 減少DNS重定向
• 緩存AJax請求
• 延遲加載
• 預加載
• 減少DOM元素的數(shù)量
• 劃分內(nèi)容到不同域名
• 盡量減少使用iframe
• 避免404錯誤

服務器相關(guān)優(yōu)化

• 使用CDN
• 添加Expires或Cache-Control響應頭
• 啟用Gzip
• 配置Etag
• 盡早輸出緩沖
• Ajax請求使用GET方法
• 避免圖片src為空
• 傳輸加載優(yōu)化
  服務器啟用gzip
• keep Alive(持久TCP連接)
  keepalive_requests 100;請求100次后開啟http的keepAlive有keepalive_timeout 65;65秒后關(guān)閉。
• http緩存
  最好是用no-cache(要用的時候需要在服務器那邊Etag驗證下)
• service workers
  • 加速重復訪問
  • 離線支持

Cookie相關(guān)優(yōu)化

• 減少cookie大小
• 靜態(tài)資源使用無cookie域名

首屏加載優(yōu)化

• 資源壓縮、傳輸壓縮、代碼拆分、tree shaking、http緩存
• 路由懶加載、預渲染、inlineCss、虛擬列表
• prefetch和preload調(diào)整加載順序js內(nèi)存管理

到此這篇關(guān)于前端常用的性能實用優(yōu)化方法有哪些?的文章就介紹到這了,更多相關(guān)前端性能優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論