第12期課件50性能優(yōu)化01瑞客_第1頁(yè)
第12期課件50性能優(yōu)化01瑞客_第2頁(yè)
第12期課件50性能優(yōu)化01瑞客_第3頁(yè)
第12期課件50性能優(yōu)化01瑞客_第4頁(yè)
第12期課件50性能優(yōu)化01瑞客_第5頁(yè)
已閱讀5頁(yè)，還剩8頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

前端性能優(yōu)課前準(zhǔn)課堂課堂目知識(shí)從輸入U(xiǎn)RL到頁(yè)面加載完成，發(fā)生了什三次握httpCachememoryCacheServiceWorkerCachepushcache文件打優(yōu)化本地服務(wù)端渲vue服務(wù)端nuxt.js服務(wù)端渲染框架體react服務(wù)端課堂代碼少執(zhí)緩之前給大家介紹過(guò)這個(gè)萬(wàn)能面試題，其實(shí)這個(gè)題的答案，包含著整個(gè)互聯(lián)網(wǎng)運(yùn)行的過(guò)程，我們站端的角度，來(lái)嘗試回答一下這個(gè)問(wèn)題，用戶輸瀏覽?通過(guò)DNS，把url解析為和IP地址建立TCP發(fā)送HTTP請(qǐng)服務(wù)?接收請(qǐng)求，查庫(kù)，讀文件等，拼接好返回的HTTP解析css為css-dom+css生成render-tree執(zhí)行所謂性能優(yōu)化，就是上面的步驟加一起，時(shí)間盡可能的短，所以基本也有兩大少加載文少執(zhí)行代本地沒緩存，發(fā)起dns請(qǐng)求，向本地配置的DNS服務(wù)?發(fā)請(qǐng)求(遞歸優(yōu)化：prefetch預(yù)獲取，比如使用了cdnIPTCPHTTP的關(guān)IP負(fù)責(zé)找TCP負(fù)責(zé)數(shù)據(jù)完整性和有序型，三次握手，粘包Vs長(zhǎng)連減少文件體js打包壓壓縮雪碧js，css緩存控懶加減少用戶和服務(wù)?的距本你在我在攜帶無(wú)用的數(shù)據(jù)，比如 合理利用緩瀏覽?緩存通過(guò)網(wǎng)絡(luò)獲取內(nèi)容既速度緩慢又開銷巨大。較大的響應(yīng)需要在客戶端與服務(wù)?這會(huì)延遲瀏覽?獲得和處理內(nèi)容的時(shí)間，還會(huì)增加者的流量費(fèi)用。因此，緩存并重復(fù)利用之前獲取HttpServiceWorkerMemoryPushhttpExpiresCache-Control兩個(gè)headerexpiresexpires:Wed,11Mar201916:12:18cache-controlmax- 1.1精準(zhǔn)優(yōu)先級(jí) 如果命中搶緩存，就不會(huì)和服務(wù)?如果強(qiáng)緩存失效了，需要執(zhí)行協(xié)商IfIf-Modified-Since:Fri,27Oct201706:35:57服務(wù)?304not如果有etag類似文件的，這個(gè)優(yōu)先級(jí)更高因?yàn)楦鼫?zhǔn)ETagETag:W/"2aaa-If-None-Match:W/"2aaa-memory內(nèi)存緩存，短 比如常用數(shù)據(jù)存js里，瀏覽?也有自己的策略 base64，體積小的靜態(tài)資ServiceWorkeron(){ 成功}).catch(err 失敗pushhttp2的緩分析文件大npminstallnpminstalllodashechartsmoment-constconstyzerPlugin=ck- module.exports={ {plugins:new ]}}importmomentimportmomentfrom'moment'import_from'lodash'VductionTip=false或者執(zhí)行vue打包后的大小從464kb(gzip之后143kb)下降刪除冗余代碼的tree-shaking，和去除無(wú)效代碼，我們webapck通常是最占用流量的，PC端加載的平均大小時(shí)600K，簡(jiǎn)直比js打包后的文件還大了，所以針對(duì)的優(yōu)化，也是收益不錯(cuò)的不同的場(chǎng)景，使用不同的文件里有損壓體積小不支持透色彩線條更豐富，小圖，比如logo，商品文本，體積小打包雪碧圖減少http請(qǐng)求次數(shù)wck-spritesmithaccept-encoding:gzip開啟HTTP壓縮就是以縮小體積為目的，對(duì)HTTP內(nèi)容進(jìn)行重新編zpzp基本上來(lái)說(shuō)，Gzip都是服務(wù)?干的活，比如localstroage，sessionStroage，indexDB最早，體積先定，性能浪 ，所有請(qǐng)求都帶上所有當(dāng)前的WebLocalStorageSession量大，不自動(dòng)發(fā)給服務(wù)端，js運(yùn)行在瀏覽??南的哥們，開課吧，光電線就要那么遠(yuǎn)，肯定慢，所以我們可以吧靜態(tài)資源，部署在分布式cdn上，?南的哥們，就近獲取資源，比如廣州機(jī)cdn單獨(dú)的，瀏覽?并發(fā)獲如果是SPA首屏SSR就是性能優(yōu)化的重要一nuxtconstconstVue=創(chuàng)建一個(gè)express應(yīng)constserver=提取出renderer實(shí)constrenderer=require('vue-server-server.get('*',(req,res)=>編寫Vue實(shí)例（虛擬DOM節(jié)點(diǎn)constapp=newVue({data:url://編寫模板HTML的內(nèi) te: 的URL是：urlrenderToString是把Vue實(shí)例轉(zhuǎn)化為真實(shí)DOM的關(guān)鍵方renderer.renderToString(app,(err,html){if(err)res.status(500).end('InternalServerError')}把渲染出來(lái)的真實(shí)DOM字符串插入HTML模板<!DOCTYPE<html nuxt.js基于服務(wù)端寧渲路熱加支持importimportexpressfrom'express'importReactfrom'react'import{renderToString}from'react-importAppfromconstapp=renderToString是把虛擬DOM轉(zhuǎn)化為真實(shí)DOM的關(guān)鍵方constRDom=ren

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論