前端常用的性能實(shí)用優(yōu)化方法有哪些?
前端項(xiàng)目的性能優(yōu)化是一個(gè)綜合性的問(wèn)題,需要從多個(gè)方面入手,以下是幾大類的優(yōu)化方案:移動(dòng)端、圖片、JavaScript、css、html、頁(yè)面內(nèi)容、服務(wù)器、cookie。
移動(dòng)端性能優(yōu)化:
1、保持單個(gè)文件小于25KB
移動(dòng)網(wǎng)站頁(yè)面要求下載資源,如果文件過(guò)大,會(huì)大大減慢頁(yè)面加載速度。2、打包內(nèi)容為分段multipart文檔
由于HTTP請(qǐng)求每一次都會(huì)執(zhí)行三次握手,每次握手都會(huì)消耗較多的時(shí)間。使用multipart,實(shí)現(xiàn)了多文件同時(shí)上傳,可用一個(gè)HTTP請(qǐng)求獲取多個(gè)組件。
圖片優(yōu)化:
1、CSS sprites
俗稱 CSS 精靈、雪碧圖,雪花圖等。即將多張小圖片合并成一張圖片,達(dá)到減少 HTTP 請(qǐng)求的一種解決方案??赏ㄟ^(guò) CSS中的background 屬性訪問(wèn)圖片內(nèi)容。這種方案同時(shí)還可以減少圖片總字節(jié)數(shù),節(jié)省命名詞匯量。
2、壓縮圖片
圖片占據(jù)資源極大,因此盡量避免使用多余的圖片,使用時(shí)選擇最合適的格式大小,然后使用智圖壓縮,同時(shí)在代碼中用Srcset來(lái)按需顯示。(切記不要過(guò)分壓縮 可能會(huì)導(dǎo)致圖片迷糊)
3、盡量避免重設(shè)圖片大小
重設(shè)圖片大小是指在頁(yè)面、CSS、JavaScript等中多次重置圖片大小,多次重設(shè)圖片大小會(huì)引發(fā)圖片的多次重繪,影響性能。
4、圖片盡量避免使用DataURL
DataURL圖片沒(méi)有使用圖片的壓縮算法文件會(huì)變大,并且要解碼后再渲染,加載慢耗時(shí)長(zhǎng)。
5、圖片懶加載
圖片對(duì)頁(yè)面加載速度影響非常大。比如,當(dāng)一個(gè)頁(yè)面內(nèi)容比較多的時(shí)候,加載速度就會(huì)大大的降低,極大的影響到用戶體驗(yàn) 。更有甚者,一個(gè)頁(yè)面可能會(huì)有幾百個(gè)圖片,但是頁(yè)面上僅僅只顯示前幾張圖片,那其他的圖片是否可以晚點(diǎn)加載用于提高性能。具體可見(jiàn) >>
JavaScript相關(guān)優(yōu)化
1、把腳本放在頁(yè)面底部
放在前面js加載會(huì)造成阻塞,影響后面dom的加載
2、使用外部JavaScript和CSS
在現(xiàn)實(shí)環(huán)境中使用外部文件通常會(huì)產(chǎn)生較快的頁(yè)面,因?yàn)?JavaScript 和 CSS 有機(jī)會(huì)被瀏覽器緩存起來(lái)。對(duì)于內(nèi)聯(lián)的情況,由于 HTML 文檔通常不會(huì)被配置為可以進(jìn)行緩存的,所以每次請(qǐng)求 HTML 文檔都要下載 JavaScript 和 CSS。所以,如果 JavaScript 和 CSS 在外部文件中,瀏覽器可以緩存它們,HTML 文檔的大小會(huì)被減少而不必增加 HTTP 請(qǐng)求數(shù)量。
3、壓縮JavaScript和CSS
壓縮文件是為了降低網(wǎng)絡(luò)傳輸量,減少頁(yè)面請(qǐng)求的響應(yīng)時(shí)間。
4、減少DOM操作
操作dom會(huì)產(chǎn)生幾種動(dòng)作,極大的影響渲染的效率。其中l(wèi)ayout(布局)和paint(繪制)是最大的。
5、js開(kāi)銷縮短解析時(shí)間
開(kāi)銷:加載-》解析和編譯-》執(zhí)行
js的解析和編譯,執(zhí)行要花很長(zhǎng)時(shí)間(谷歌開(kāi)發(fā)工具中的performance中可以查看。選中main主線程中的某一段。)
解決方案:
代碼拆分按需加載
tree shaking代碼減重
避免長(zhǎng)任務(wù)
requestAnimationFrame和repuestIdleCallback進(jìn)行時(shí)間調(diào)度
6、v8編譯原理(代碼優(yōu)化)
解析js代碼成抽象語(yǔ)法樹-》字節(jié)碼-》機(jī)器碼
編譯過(guò)程會(huì)進(jìn)行優(yōu)化
運(yùn)行時(shí)可能會(huì)發(fā)生反優(yōu)化
7、v8內(nèi)部?jī)?yōu)化
腳本流:邊下載邊解析
字節(jié)碼緩存:常用的字節(jié)碼會(huì)存起來(lái)(這個(gè)文件用到其他的文件也用到的參數(shù))
函數(shù)懶解析:先解析用到的
8、對(duì)象優(yōu)化(迎合v8進(jìn)行優(yōu)化)
保證對(duì)象初始化順序一致(對(duì)象初始化時(shí)v8會(huì)生成隱藏屬性以便后續(xù)復(fù)用并且是按照順序排序的)
不要直接賦值對(duì)象新屬性(追加的屬性需要通過(guò)描述數(shù)組間接查找)
使用數(shù)組代替類數(shù)組(v8會(huì)對(duì)數(shù)組進(jìn)行優(yōu)化)比如先將類數(shù)組轉(zhuǎn)化成數(shù)組
避免讀取數(shù)組越界(比如for循環(huán)多查找1個(gè)下標(biāo)會(huì)照成性能相差6倍)
9、造成undefined和數(shù)字比較
數(shù)組也是對(duì)象,當(dāng)找不到對(duì)應(yīng)下標(biāo)的時(shí)候回沿著原型鏈向上找造成額外開(kāi)銷
業(yè)務(wù)上無(wú)效
10、js內(nèi)存,避免造成內(nèi)存泄漏
通過(guò)變量是否能被訪問(wèn)到來(lái)判斷內(nèi)存是否釋放。
局部變量: 函數(shù)執(zhí)行完沒(méi)有閉包引用會(huì)被標(biāo)記回收
全局變量: 直到瀏覽器被卸載頁(yè)面釋放
回收機(jī)制:
引用計(jì)數(shù):每調(diào)用一次加一,當(dāng)計(jì)數(shù)為0的時(shí)候進(jìn)行回收。缺點(diǎn)是不能解決循環(huán)引用(例如a對(duì)象依賴于b對(duì)象,標(biāo)記清除(垃圾回收): 從根節(jié)點(diǎn)去訪問(wèn),當(dāng)訪問(wèn)到不能被訪問(wèn)的對(duì)象就進(jìn)行標(biāo)記然后進(jìn)行垃圾回收。(當(dāng)a對(duì)象
解決:避免意外的全局變量;避免反復(fù)運(yùn)行引發(fā)的閉包;避免脫離的dom元素沒(méi)有被回收(所以react有ref這個(gè)api)。
CSS 相關(guān)優(yōu)化
- 1、把樣式表放在標(biāo)簽中
css放在head標(biāo)簽中比css放在body標(biāo)簽尾部少了一次構(gòu)建RenderTree, 一次計(jì)算布局和一次渲染網(wǎng)頁(yè), 因此性能會(huì)更好。 - 2、使用替代@import
- 3、不要使用filter
- 4、避免元素類型轉(zhuǎn)化(數(shù)組中放多種類型不利于v8引擎優(yōu)化代碼)
- 降低css對(duì)渲染的阻塞(按需加載,放在dom前面加載)
- 利用pu完成動(dòng)畫(前面講到的復(fù)合)
- 使用contain進(jìn)行優(yōu)化(優(yōu)化強(qiáng)度大。例如: contan:layout告訴瀏覽器這個(gè)節(jié)點(diǎn)內(nèi)部的子元素和外面的使用font-display進(jìn)行優(yōu)化:讓文字更早的顯示在頁(yè)面上,減輕文字閃動(dòng)的問(wèn)題
html 相關(guān)優(yōu)化
- 減少iframes使用
- 壓縮空白符
- 避免嵌套層次太深
- 避免使用table布局
- 減少?zèng)]必要的注釋
- 刪除元素默認(rèn)屬性(比如默認(rèn)checkbox等)
開(kāi)發(fā)內(nèi)容相關(guān)優(yōu)化
- 減少HTTP請(qǐng)求數(shù)
- 減少DNS重定向
- 緩存AJax請(qǐng)求
- 延遲加載
- 預(yù)加載
- 減少DOM元素的數(shù)量
- 劃分內(nèi)容到不同域名
- 盡量減少使用iframe
- 避免404錯(cuò)誤
服務(wù)器相關(guān)優(yōu)化
- 使用CDN
- 添加Expires或Cache-Control響應(yīng)頭
- 啟用Gzip
- 配置Etag
- 盡早輸出緩沖
- Ajax請(qǐng)求使用GET方法
- 避免圖片src為空
- 傳輸加載優(yōu)化
服務(wù)器啟用gzip - keep Alive(持久TCP連接)
keepalive_requests 100;請(qǐng)求100次后開(kāi)啟http的keepAlive有keepalive_timeout 65;65秒后關(guān)閉。 - http緩存
最好是用no-cache(要用的時(shí)候需要在服務(wù)器那邊Etag驗(yàn)證下) - service workers
- 加速重復(fù)訪問(wèn)
- 離線支持
Cookie相關(guān)優(yōu)化
- 減少cookie大小
- 靜態(tài)資源使用無(wú)cookie域名
首屏加載優(yōu)化
- 資源壓縮、傳輸壓縮、代碼拆分、tree shaking、http緩存
- 路由懶加載、預(yù)渲染、inlineCss、虛擬列表
- prefetch和preload調(diào)整加載順序js內(nèi)存管理
到此這篇關(guān)于前端常用的性能實(shí)用優(yōu)化方法有哪些?的文章就介紹到這了,更多相關(guān)前端性能優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
在IE下拖動(dòng)滾動(dòng)條時(shí)border消失的解決方法
在IE下拖動(dòng)滾動(dòng)條時(shí)border消失的解決方法...2007-01-01padding、border會(huì)把div撐大的解決方法
所有HTML元素都可以看作盒子,CSS盒模型本質(zhì)上是一個(gè)盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實(shí)際內(nèi)容,盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素,因?yàn)镈iv添加了padding、border,Div的實(shí)際寬度=Div的初始固定值+邊距值+邊框值2023-09-09firefox css自動(dòng)換行的實(shí)現(xiàn)方法
越發(fā)感覺(jué)網(wǎng)頁(yè)設(shè)計(jì)人員的辛苦,就一個(gè)自動(dòng)換行,2008-08-08- 有時(shí)候圖片太大,會(huì)破環(huán)網(wǎng)頁(yè)整齊的布局。這時(shí)可以用css來(lái)強(qiáng)制按比例壓縮圖片的高度或?qū)挾取?/div> 2008-06-06
htm頁(yè)面中<a name>加name和id的沖突附解決方法
原來(lái)在<a name="jb51"> 和<span id="jb51">是沖突的,唉弄了好一會(huì),郁悶 臨時(shí)解決方法就是在后面的id中加了一個(gè)2,就是<span id="jb512">2008-07-07最新評(píng)論