前端性能優(yōu)化知識點(diǎn)匯總

ChanceWong 發(fā)布于2019-08-26 11:48 / 618人閱讀

摘要：面試必談的前端性能優(yōu)化為什么做優(yōu)化提供給用戶最佳體驗(yàn)有哪些差的體驗(yàn)白屏好久才顯示內(nèi)容浪費(fèi)用戶流量優(yōu)化方案大概分為以下幾種降低請求數(shù)量減少獲取數(shù)據(jù)的接口數(shù)初始數(shù)據(jù)盡量通過一個(gè)接口返回減少的數(shù)量提取公共利用緩存減少后續(xù)加載訪問。

面試必談的--前端性能優(yōu)化 為什么做優(yōu)化

提供給用戶最佳體驗(yàn)

#有哪些差的體驗(yàn)
- 白屏好久才顯示內(nèi)容
- h5浪費(fèi)用戶流量

優(yōu)化方案大概分為以下幾種：

1、降低請求數(shù)量
    a、減少獲取數(shù)據(jù)的接口數(shù)（初始數(shù)據(jù)盡量通過一個(gè)接口返回）
    b、減少js、css的數(shù)量（提取公共js、css利用緩存、減少后續(xù)加載訪問。有些代碼直接注入頁面無需外鏈形式訪問加載。）
    c、圖片懶加載
2、降低文件大小
    a、圖片壓縮以及使用webp
    b、壓縮js、css
    c、gzip（設(shè)置content-encoding:gzip）
    d、icon或者svg繪制圖標(biāo)
3、加快請求速度
    a、[DNS預(yù)解析][1] 
    b、減少域名數(shù)量(頁面、js、css、image、接口域名、同種類型文本請求盡量同域名。)
    c、靜態(tài)資源cdn分發(fā)
    d、提前加載（提前加載一部分可能被用戶訪問的圖片或者數(shù)據(jù)信息）
4、緩存
    a、http協(xié)議緩存
    b、離線數(shù)據(jù)緩存localStorage
5、渲染
    a、js、css優(yōu)化(按照規(guī)范來寫--google規(guī)范)
    b、服務(wù)器渲染

DNS預(yù)解析
google規(guī)范

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

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

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

相關(guān)文章

前端性能優(yōu)化知識點(diǎn)匯總

摘要：面試必談的前端性能優(yōu)化為什么做優(yōu)化提供給用戶最佳體驗(yàn)有哪些差的體驗(yàn)白屏好久才顯示內(nèi)容浪費(fèi)用戶流量優(yōu)化方案大概分為以下幾種降低請求數(shù)量減少獲取數(shù)據(jù)的接口數(shù)初始數(shù)據(jù)盡量通過一個(gè)接口返回減少的數(shù)量提取公共利用緩存減少后續(xù)加載訪問。面試必談的--前端性能優(yōu)化為什么做優(yōu)化提供給用戶最佳體驗(yàn) #有哪些差的體驗(yàn) - 白屏好久才顯示內(nèi)容 - h5浪費(fèi)用戶流量優(yōu)化方案大概分為以下幾種： 1、降低...

quietin 2019-08-30 13:59 評論0 收藏0
前端性能優(yōu)化知識點(diǎn)匯總

摘要：面試必談的前端性能優(yōu)化為什么做優(yōu)化提供給用戶最佳體驗(yàn)有哪些差的體驗(yàn)白屏好久才顯示內(nèi)容浪費(fèi)用戶流量優(yōu)化方案大概分為以下幾種降低請求數(shù)量減少獲取數(shù)據(jù)的接口數(shù)初始數(shù)據(jù)盡量通過一個(gè)接口返回減少的數(shù)量提取公共利用緩存減少后續(xù)加載訪問。面試必談的--前端性能優(yōu)化為什么做優(yōu)化提供給用戶最佳體驗(yàn) #有哪些差的體驗(yàn) - 白屏好久才顯示內(nèi)容 - h5浪費(fèi)用戶流量優(yōu)化方案大概分為以下幾種： 1、降低...

CarterLi 2019-08-01 18:38 評論0 收藏0
前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

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

princekin 2019-08-20 11:28 評論0 收藏0
2018大廠高級前端面試題匯總

摘要：面試的公司分別是阿里網(wǎng)易滴滴今日頭條有贊挖財(cái)滬江餓了么攜程喜馬拉雅兌吧微醫(yī)寺庫寶寶樹?？低暷⒐浇挚峒覙钒俜贮c(diǎn)和海風(fēng)教育。（關(guān)注福利，關(guān)注本公眾號回復(fù)[資料]領(lǐng)取優(yōu)質(zhì)前端視頻，包括Vue、React、Node源碼和實(shí)戰(zhàn)、面試指導(dǎo)）本人于7-8月開始準(zhǔn)備面試，過五關(guān)斬六將，最終抱得網(wǎng)易歸，深深感受到高級前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統(tǒng)統(tǒng)貢獻(xiàn)出來。面試的公司分...

zzir 2019-08-23 12:38 評論0 收藏0