摘要:引擎執(zhí)行完畢,控制權(quán)交還渲染引擎,恢復(fù)解析網(wǎng)頁(yè)。對(duì)于內(nèi)聯(lián)腳本無(wú)作用即沒(méi)有屬性的腳本。協(xié)商緩存步驟總結(jié)請(qǐng)求資源時(shí),把用戶本地該資源的同時(shí)帶到服務(wù)端,服務(wù)端和最新資源做對(duì)比。
資源壓縮 減少HTTP請(qǐng)求 靜態(tài)資源壓縮
html:壓縮空格、換行、注釋等字符 Webapack — html-webpack-plugin
css:無(wú)效代碼刪除,語(yǔ)義合并(相同樣式代碼) Webpack css-loader
js:無(wú)效字符刪除、剔除注釋代碼語(yǔ)義的縮減和優(yōu)化 Webpack — UglifyJSPlugin
圖片優(yōu)化方案:
雪碧圖
小文件 使用base64 webpack base64-inline-loader
圖片壓縮網(wǎng)站
svg
資源合并
弊端:
首屏渲染問(wèn)題,合并文件太大,造成慢。
緩存失效問(wèn)題 標(biāo)記 md5戳 只要有一個(gè)變動(dòng) 則失效 a,b,c三個(gè)js合并
規(guī)則:公共庫(kù)合并,不同頁(yè)面的各自合并。異步加載組件,不同頁(yè)面多帶帶打包,監(jiān)聽(tīng)路由變化,自動(dòng)下載
實(shí)現(xiàn):gulp插件梳理工作流/webpack配置loader和plugin
非核心代碼異步加載正常網(wǎng)頁(yè)的加載流程:
瀏覽器一邊下載 HTML 網(wǎng)頁(yè),一邊開(kāi)始解析。也就是說(shuō),不等到下載完,就開(kāi)始解析。
解析過(guò)程中,瀏覽器發(fā)現(xiàn)元素,就暫停解析,把網(wǎng)頁(yè)渲染的控制權(quán)轉(zhuǎn)交給 JavaScript 引擎。
如果元素引用了外部腳本,就下載該腳本再執(zhí)行,否則就直接執(zhí)行代碼。
JavaScript 引擎執(zhí)行完畢,控制權(quán)交還渲染引擎,恢復(fù)解析 HTML 網(wǎng)頁(yè)。
上述加載方式為同步加載,會(huì)阻塞瀏覽器的解析html文檔。故而我們常將script元素放置于body的底部
三種實(shí)現(xiàn)方式:動(dòng)態(tài)腳本、async、defer
動(dòng)態(tài)腳本動(dòng)態(tài)創(chuàng)建script標(biāo)簽
var scriptEle = document.createElement("script"); scriptEle.type = "text/javasctipt"; scriptEle.async = true; scriptEle.src = "http://xxxxxxx"; var x = document.getElementsByTagName("head")[0]; x.insertBefore(scriptEle, x.firstChild);async
async屬性和defer屬性類(lèi)似,也是會(huì)開(kāi)啟一個(gè)線程去下載js文件,但和defer不同的時(shí),它會(huì)在下載完成后立刻執(zhí)行,而不是會(huì)等到DOM加載完成之后再執(zhí)行,所以還是有可能會(huì)造成阻塞。
且不會(huì)按照順序執(zhí)行,哪個(gè)js文件先下載完就先執(zhí)行哪個(gè)
對(duì)于內(nèi)聯(lián)腳本無(wú)作用 (即沒(méi)有src屬性的腳本)。
defer當(dāng)瀏覽器遇到帶有defer屬性的標(biāo)簽時(shí),再開(kāi)啟一個(gè)線程去下載js文件,同時(shí)繼續(xù)解析HTML文檔,等等HTML全部解析完畢DOM加載完成之后,再按照出現(xiàn)順序依次執(zhí)行加載好的js文件。
對(duì)于內(nèi)聯(lián)腳本無(wú)作用 (即沒(méi)有src屬性的腳本)。
使用場(chǎng)景一般來(lái)說(shuō),是看腳本之間是否有依賴關(guān)系,有依賴的話應(yīng)當(dāng)要保證執(zhí)行順序,應(yīng)當(dāng)使用defer沒(méi)有依賴的話使用async,同時(shí)使用的話defer失效。要注意的是兩者都不應(yīng)該使用document.write,這個(gè)導(dǎo)致整個(gè)頁(yè)面被清除。
利用瀏覽器緩存https://juejin.im/post/5c4179...
優(yōu)點(diǎn):
減少了冗余的數(shù)據(jù)傳輸,節(jié)省網(wǎng)費(fèi)
減少服務(wù)器的負(fù)擔(dān),提升網(wǎng)站性能
加快了客戶端加載網(wǎng)頁(yè)的速度
瀏覽器緩存分為強(qiáng)緩存和協(xié)商緩存
強(qiáng)緩存如果資源沒(méi)過(guò)期,就取緩存,如果過(guò)期了,則請(qǐng)求服務(wù)器。
cache-control:max-age = xxx
聲明該資源在加載后的xxx秒內(nèi)都直接使用緩存 使用的是相對(duì)時(shí)間 即加載文件本機(jī)的時(shí)間
Cache-Control 的幾個(gè)取值含義:
private:僅瀏覽器可以緩存
public:瀏覽器和代理服務(wù)器都可以緩存
max-age=xxx:過(guò)期時(shí)間
no-cache:不進(jìn)行強(qiáng)緩存
no-store:不強(qiáng)緩存,也不協(xié)商緩存
規(guī)則可以同時(shí)多個(gè) cache-control:public,max-age=0
expires: 絕對(duì)時(shí)間,服務(wù)器基于自己的時(shí)間返回一個(gè)文件過(guò)期時(shí)間
如果在Cache-Control響應(yīng)頭設(shè)置了 "max-age" 或者 "s-max-age" 指令,那么 Expires 頭會(huì)被忽略。
強(qiáng)緩存步驟:
第一次請(qǐng)求 a.js ,緩存表中沒(méi)該信息,直接請(qǐng)求后端服務(wù)器。
后端服務(wù)器返回了 a.js ,且 http response header 中 cache-control 為 max-age=xxxx,所以是強(qiáng)緩存規(guī)則,存入緩存表中。
第二次請(qǐng)求 a.js ,緩存表中是 max-age, 那么命中強(qiáng)緩存,然后判斷是否過(guò)期,如果沒(méi)過(guò)期,直接讀緩存的a.js,如果過(guò)期了,則執(zhí)行協(xié)商緩存的步驟了。
協(xié)商緩存觸發(fā)條件:
Cache-Control 的值為 no-cache (不強(qiáng)緩存)
或者 max-age 過(guò)期了 (強(qiáng)緩存,但總有過(guò)期的時(shí)候)
也就是說(shuō),不管怎樣,都可能最后要進(jìn)行協(xié)商緩存(no-store除外)
ETag:每個(gè)文件有一個(gè),改動(dòng)文件了就變了,可以看似md5
Last-Modified:文件的修改時(shí)間
每次http返回來(lái) responseheader 中的 ETag和 Last-Modified,在下次請(qǐng)求時(shí)在 requestheader 就把這兩個(gè)帶上(但是名字變了ETag-->If-None-Match,Last-Modified-->If-Modified-Since ),服務(wù)端把你帶過(guò)來(lái)的標(biāo)識(shí),資源目前的標(biāo)識(shí),進(jìn)行對(duì)比,然后判斷資源是否更改了。
協(xié)商緩存步驟總結(jié):
請(qǐng)求資源時(shí),把用戶本地該資源的 ETag 同時(shí)帶到服務(wù)端,服務(wù)端和最新資源做對(duì)比。
如果資源沒(méi)更改,返回304,瀏覽器讀取本地緩存。
如果資源有更改,返回200,返回最新的資源。
DNS預(yù)解析預(yù)解析的實(shí)現(xiàn):
用meta信息來(lái)告知瀏覽器, 當(dāng)前頁(yè)面要做DNS預(yù)解析:
在頁(yè)面header中使用link標(biāo)簽來(lái)強(qiáng)制對(duì)DNS預(yù)解析:
注:dns-prefetch需慎用,多頁(yè)面重復(fù)DNS預(yù)解析會(huì)增加重復(fù)DNS查詢次數(shù)。
如果需要禁止隱式的 DNS Prefetch,可以使用以下的標(biāo)簽:
在瀏覽器中a標(biāo)簽?zāi)J(rèn)打開(kāi)DNS預(yù)解析,但是在HTTPS中默認(rèn)關(guān)閉
CDN 內(nèi)容分發(fā)網(wǎng)絡(luò)網(wǎng)絡(luò)請(qǐng)求的過(guò)程走最近的網(wǎng)絡(luò)環(huán)境,解決網(wǎng)絡(luò)擁堵。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/110055.html
摘要:前端是應(yīng)用服務(wù)器處理之前的部分,前端主要包括等各種資源,針對(duì)不同的資源有不同的優(yōu)化方式。常見(jiàn)方法合并多個(gè)文件和文件,利用整合圖像,使用在實(shí)際的頁(yè)面嵌入圖像數(shù)據(jù),合理設(shè)置緩存等。 web前端是應(yīng)用服務(wù)器處理之前的部分,前端主要包括:HTML,CSS,javascript,image等各種資源,針對(duì)不同的資源有不同的優(yōu)化方式。 內(nèi)容優(yōu)化 (1)減少HTTP請(qǐng)求數(shù):這條策略是最重要最有效...
摘要:代表公司去參加今年的第二屆前端開(kāi)發(fā)者年度大會(huì),散會(huì)的時(shí)候,技術(shù)老大問(wèn)我,今天感覺(jué)怎么樣,有什么收獲,當(dāng)時(shí)就零零碎碎的回答了一些,不算完美趁著還記得點(diǎn)什么,在這里做個(gè)自我回顧總結(jié),謹(jǐn)代表個(gè)人見(jiàn)解,有不當(dāng)之處,或若涉及圖片隱私或者其它問(wèn)題,煩請(qǐng) 代表公司去參加今年的 第二屆前端開(kāi)發(fā)者年度大會(huì),散會(huì)的時(shí)候,Team 技術(shù)老大問(wèn)我,今天感覺(jué)怎么樣,有什么收獲,當(dāng)時(shí)就零零碎碎的回答了一些,不算完...
摘要:后端和移動(dòng)性能優(yōu)化需要的時(shí)間較長(zhǎng),出成果較慢。大型網(wǎng)站上,一般通過(guò)什么方式監(jiān)控性能的用戶端主要是真機(jī)監(jiān)測(cè)監(jiān)測(cè),都屬于真實(shí)用戶監(jiān)測(cè)。目前主要有以下兩種類(lèi)型,,最終用戶性能監(jiān)測(cè)。,,真實(shí)用戶性能監(jiān)測(cè)。 showImg(https://segmentfault.com/img/bVAbWm);@tanwen110 (唐文),曾負(fù)責(zé)騰訊四大平臺(tái)之一網(wǎng)絡(luò)媒體平臺(tái)的整體運(yùn)維、運(yùn)營(yíng)規(guī)劃工作;曾任百度...
摘要:特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總,方便自己學(xué)習(xí)查閱參考,和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多,可以很快搞定,沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方,歡迎補(bǔ)充。有錯(cuò)誤的地方,還請(qǐng)斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應(yīng)和斧正,會(huì)及時(shí)更新,平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...
閱讀 1690·2021-10-13 09:39
閱讀 2126·2021-09-07 10:20
閱讀 2717·2019-08-30 15:56
閱讀 2978·2019-08-30 15:56
閱讀 957·2019-08-30 15:55
閱讀 678·2019-08-30 15:46
閱讀 3519·2019-08-30 15:44
閱讀 2577·2019-08-30 11:15