速記筆記
markdown工具: https://pandao.github.io/editor.md/
實(shí)驗(yàn)服務(wù)器:青云服務(wù)器
涉及的功能
- 資源和并與壓縮
- 圖片編解碼原理和類型選擇
- 瀏覽器渲染機(jī)制
- 懶加載和預(yù)加載
- 瀏覽器存儲(chǔ)
- 緩存機(jī)制
- PWA
- Vue-SSR
前端性能優(yōu)化原理
前端性能優(yōu)化原理
資源和并與壓縮
優(yōu)化點(diǎn):
- 減少http請(qǐng)求數(shù)量
-
減少請(qǐng)求資源大小兩個(gè)
CS架構(gòu)GUI軟件的開(kāi)發(fā)與部署過(guò)程
web前端的開(kāi)發(fā)與部署過(guò)程.jpg
case:google首頁(yè)案例學(xué)習(xí)
- html壓縮
- css壓縮
- js壓縮和混亂
- 文件合并
- 開(kāi)啟gzip壓縮
html壓縮
html壓縮就是壓縮在文本文件中有意義,但是在html中不顯示的字符,包括空格,制表格,換行符等,還有一些其他意義的字符, 比如:注釋也可以被壓縮.
如何進(jìn)行html壓縮
- 使用在線網(wǎng)站壓縮
- nodejs提供了html-minifier工具
- 后端模板引擎渲染壓縮
css壓縮
- 無(wú)效代碼壓縮
- css語(yǔ)義合并
如何進(jìn)行html壓縮
- 使用在線網(wǎng)站壓縮
- nodejs提供了html-minifier工具對(duì)html中的css進(jìn)行壓縮
- 使用clean-css對(duì)css進(jìn)行壓縮
js的壓縮與混亂
- 無(wú)效字符的刪除
- 剔除注釋
- 代碼語(yǔ)義的縮減和優(yōu)化
- 代碼保護(hù)
如何對(duì)js進(jìn)行壓縮和混亂
- 使用在線網(wǎng)站壓縮
- nodejs提供了html-minifier工具對(duì)html中的js進(jìn)行壓縮
- 使用uglifyjs2 對(duì)js進(jìn)行壓縮
文件合并存在問(wèn)題
- 首屏渲染問(wèn)題
- 緩存失效問(wèn)題[比如只修改了一部分, 整個(gè)代碼的緩存就不能使用了]
文件合并存在問(wèn)題 => 解決方法
- 公共庫(kù)合并
- 不同頁(yè)面的合并
- 見(jiàn)機(jī)行事, 隨機(jī)應(yīng)變
圖片編解碼原理和類型選擇
- jpeg圖片是有損壓縮
- png8 - 256色 + 支持透明
- png24 - 2^24色 + 不支持透明
- png32 - 2^32色 + 支持透明
不同格式圖片常用的業(yè)務(wù)場(chǎng)景1
- jpeg有損壓縮,壓縮率高, 不支持透明
- png支持透明, 瀏覽器兼容性好
- webp壓縮程度更好, 在ios webview有兼容性問(wèn)題
- svg矢量圖,代碼內(nèi)嵌, 相對(duì)較小, 圖片樣式相對(duì)簡(jiǎn)單的業(yè)務(wù)場(chǎng)景
不同格式圖片常用的業(yè)務(wù)場(chǎng)景2
- jpeg - 大部分不需要透明的業(yè)務(wù)場(chǎng)景
- png - 大部分需要透明的業(yè)務(wù)場(chǎng)景
- webp - 安卓全部
- svg - 圖片樣式相對(duì)簡(jiǎn)單的業(yè)務(wù)場(chǎng)景
css雪碧圖
優(yōu)點(diǎn): 減少網(wǎng)站的http請(qǐng)求數(shù)量
缺點(diǎn): 整張圖片比較大時(shí),加載速度比較慢
css雪碧圖 => 替代方法
- 將圖片的內(nèi)容內(nèi)嵌到html當(dāng)中image inline[base64編碼]
雪碧圖制作工具
spritecow
點(diǎn)選一部分可以選中其中的CSS進(jìn)行復(fù)制
頁(yè)面加載渲染過(guò)程
實(shí)驗(yàn)[頁(yè)面的渲染過(guò)程]
-
設(shè)置網(wǎng)絡(luò)延時(shí)加載[上行和下行帶寬 && 網(wǎng)絡(luò)延遲]
第一步
第二步 -
網(wǎng)絡(luò)加載過(guò)程
矢量圖
- 使用svg進(jìn)行矢量圖的繪制
- 使用iconfont解決icon問(wèn)題
安卓下使用webp
- 更優(yōu)的圖像數(shù)據(jù)壓縮算法
- 能帶來(lái)更小的圖片體積
- 而且擁有肉眼識(shí)別無(wú)差異的圖像質(zhì)量
- 有損和無(wú)損的壓縮模式
- alpha透明
- 動(dòng)畫的特性
- 在jpeg和png的轉(zhuǎn)化上都非常優(yōu)秀,穩(wěn)定和統(tǒng)一
case 手淘國(guó)際站
手淘國(guó)際站
實(shí)現(xiàn)了jpg和webp兩種格式的圖片兼容
webp格式圖片轉(zhuǎn)換工具
問(wèn)題引出:瀏覽器的一個(gè)請(qǐng)求從發(fā)送到返回都經(jīng)歷了什么 => 請(qǐng)求過(guò)程中一些潛在的性能優(yōu)化點(diǎn)
- dns是否可以通過(guò)緩存減少dns查詢時(shí)間?
- 網(wǎng)絡(luò)請(qǐng)求環(huán)境走最近的網(wǎng)絡(luò)環(huán)境?
- 相同的靜態(tài)資源是否可以緩存?
- 能否減少http請(qǐng)求大小?
- 較少http請(qǐng)求?
- 服務(wù)器端渲染?
注:深入理解請(qǐng)求過(guò)程是前端性能優(yōu)化的核心
html渲染過(guò)程的特點(diǎn)
- 順序執(zhí)行, 并發(fā)加載
- 是否阻塞
- 依賴關(guān)系
- 引入方式
順序執(zhí)行, 并發(fā)加載
加法分析
并發(fā)加載
并發(fā)上限
css阻塞
- css head中阻塞頁(yè)面的渲染
- css阻塞js的執(zhí)行
- css不阻塞外部js的加載
js阻塞
- 直接引入的js會(huì)阻塞頁(yè)面的渲染
- js不阻塞資源的加載
- js順序執(zhí)行,阻塞后續(xù)邏輯的執(zhí)行
依賴關(guān)系
頁(yè)面渲染依賴于css的加載
js執(zhí)行順序的依賴關(guān)系
js邏輯對(duì)于dom節(jié)點(diǎn)的依賴關(guān)系
js的引入方式
- 直接引入
- defer
- async
- 異步動(dòng)態(tài)引入
加載和執(zhí)行的一些優(yōu)化點(diǎn)
- css樣式表置頂
- 用link代替import
- js腳本置底
- 合理使用js的異步加載能力
懶加載
- 圖片進(jìn)入可視區(qū)域之后加載資源
- 對(duì)于電商圖片很多,頁(yè)面很長(zhǎng)的業(yè)務(wù)場(chǎng)景
- 減少無(wú)效資源的加載
- 并發(fā)加載的資源很多會(huì)阻塞js的加載,影響網(wǎng)站的正常使用
預(yù)加載
- 圖片等靜態(tài)資源使用之前加載
- 資源使用到時(shí)能夠從緩存中加載,提升用戶體驗(yàn)
- 頁(yè)面展示的依賴關(guān)系的維護(hù)
預(yù)加載模塊
PreloadJs模塊
要加載的資源放到一個(gè)隊(duì)列當(dāng)中, 加載完成后有一個(gè)回調(diào)函數(shù)調(diào)用預(yù)加載的資源
reflow和repaint
css性能讓javascript變慢?
頻繁觸發(fā)reflwo和repaint會(huì)導(dǎo)致UI頻繁渲染, 最終導(dǎo)致JS變慢
reflow
頁(yè)面布局和幾何屬性改變時(shí)就會(huì)觸發(fā)回流
repaint
只影響元素的外觀,風(fēng)格. 不影響布局就會(huì)只觸發(fā)repaint
注:回流必將引起重繪, 重繪不一定要引起回流
觸發(fā)頁(yè)面重布局的屬性
盒子模型相關(guān)屬性會(huì)觸發(fā)重布局
定位屬性和重布局也會(huì)觸發(fā)重布局
改變節(jié)點(diǎn)內(nèi)部文字
觸發(fā)reflow的屬性
| reflow | reflow | reflow |
|---|---|---|
| width | top | text-align |
| height | right | overflow-y |
| padding | bottom | font-weight |
| margin | left | overflow |
| display | float | font-family |
| border-width | clear | line-height |
| border | position | vertical-align |
| min-height | font-size | white-space |
觸發(fā)repaint的屬性
| repaint | repaint |
|---|---|
| border-style | background |
| border-radius | background-image |
| visibility | background-position |
| text-decoration | background-repeat |
| outline-color | background-size |
| outline | box-shadow |
| outline-style | color |
| outline-width |
新建DOM過(guò)程
- 獲取DOM后分割為多個(gè)圖層
- 對(duì)每個(gè)圖層的節(jié)點(diǎn)計(jì)算樣式結(jié)果 - recalculate style - 樣式重計(jì)算
- 為每個(gè)節(jié)點(diǎn)生成圖形和位置 - layout -- 回流和重布局
- 將每個(gè)節(jié)點(diǎn)繪制填充到圖層位置中 - paint setup和paint -- 重繪
- 圖層作為紋理上傳GPU
- 復(fù)合多個(gè)圖層到頁(yè)面生成最終圖像 - composite layers - 圖層重組
注:將 頻繁重繪回流 的DOM元素單獨(dú)作為一個(gè) 獨(dú)立圖層, 那么這個(gè) DOM 元素的重繪和回流的影響只會(huì)在這個(gè)圖層中
查看頁(yè)面的reflow和repaint
第1步:記錄一個(gè)時(shí)間片段
第2步:查看時(shí)間片段
第3步:新建dom的過(guò)程
查看頁(yè)面repaint
如何將DOM元素變成新的獨(dú)立圖層[crome瀏覽器]
- 3D或透視變換CSS屬性(perspective transform)
- 使用加速視頻解碼的<video>節(jié)點(diǎn)
- 擁有3D(WebGL)上下文或加速的2D上下文的<canvas>節(jié)點(diǎn)
- 混合插件(如Flash)
- 對(duì)自己的opacity做CSS動(dòng)畫或使用一個(gè)動(dòng)畫webkit變換的元素
- 擁有加速CSS過(guò)濾器的元素
- 元素有一個(gè)包含復(fù)合層的后代節(jié)點(diǎn)(一個(gè)元素?fù)碛幸粋€(gè)子元素, 該子元素在自己的層里)
- 元素有一個(gè)z-index較低且包含一個(gè)復(fù)合層的兄弟元素(換句話說(shuō)就是該元素在復(fù)合層上面渲染)
例如:
transform: translateZ(0);
will-change:transform;
layer不能被濫用
太多了會(huì)影響性能, 開(kāi)啟了GPU加速, 會(huì)認(rèn)為存在大量的重繪,大部分時(shí)間都花在圖層合成上
實(shí)戰(zhàn)優(yōu)化點(diǎn)
- 用translate替代top改變
- 用opacity替代visibility
- 不要一條一條地修改DOM的樣式, 預(yù)先定義好class, 然后修改DOM的className
- 把DOM離線后修改, 比如: 先把DOM給display:none(有一次reflow), 然后你修改100次, 然后再把它顯示出來(lái)
- 不要把DOM節(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里當(dāng)成循環(huán)里的變量
- 不要使用table布局, 可能很小的一個(gè)小改動(dòng)會(huì)造成珍格格table的重新布局
- 對(duì)于動(dòng)畫新建圖層
- 啟用GPU硬件加速
reflow和repaint的使用原則
- 避免使用觸發(fā)重繪, 回流的CSS屬性
- 將重繪, 回流的影響范圍限制在單獨(dú)的圖層之內(nèi)
多種瀏覽器存儲(chǔ)方式并存, 如何選擇?
cookie
注: 因?yàn)閔ttp請(qǐng)求無(wú)狀態(tài),所以需要cookie去維持客戶端狀態(tài)
cookie的生成方式:
http response header中的set-cookie
作用
- 用于瀏覽器端和服務(wù)器端的交互
- 客戶端自身數(shù)據(jù)的存儲(chǔ)
cookie存儲(chǔ)的限制
- 作為瀏覽器存儲(chǔ), 大小4KB左右
- 需要設(shè)置過(guò)期時(shí)間expire
問(wèn)題:cookie中在相關(guān)域名下面 - cdn的流量損耗
辦法: cdn的域名和主站的域名要分開(kāi)
cookie安全
httponly只能服務(wù)器設(shè)置, 前端JS不能修改
LocalStorage
- html5設(shè)計(jì)出來(lái)專門用于瀏覽器存儲(chǔ)的
- 大小為5M左右
- 僅在客戶端使用, 不和服務(wù)器端進(jìn)行通信
- 接口封裝較好
- 瀏覽器本地緩存方案
SessionStorage
- 會(huì)話級(jí)別的瀏覽器存儲(chǔ)
- 大小為5M左右
- 僅在客戶端使用, 不和服務(wù)器端進(jìn)行通信
- 接口封裝較好
- 對(duì)于表單信息的維護(hù)
- 瀏覽器的一個(gè)tab就是一個(gè)會(huì)話
- 刷新頁(yè)面還有原來(lái)的信息
- 表單在進(jìn)行多頁(yè)面切換的時(shí)候進(jìn)行傳遞也可以使用
IndexedDB
- IndexedDB是一種低級(jí)API, 用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù). 該API使用索引來(lái)實(shí)現(xiàn)對(duì)該數(shù)據(jù)的高性能搜索. 雖然Web Storage對(duì)于存儲(chǔ)較少量的數(shù)據(jù)很有用, 但對(duì)于存儲(chǔ)更大量的結(jié)構(gòu)化數(shù)據(jù)來(lái)說(shuō), 這種方法不太有用. IndexedDB提供了一個(gè)解決方案.
- 為應(yīng)用創(chuàng)建離線版本
- 現(xiàn)在使用的比較少
PWA
PWA(Progressive Web Apps)是一種Web App新模型, 并不是具體指某一種前沿的技術(shù)或者某一個(gè)單一的知識(shí)點(diǎn), 這是一個(gè)漸進(jìn)式的Web App, 是通過(guò)一系列新的Web特性, 配合優(yōu)秀的UI交互設(shè)計(jì), 逐步的增強(qiáng)Web App的用戶體驗(yàn).
特點(diǎn)
- 能夠在弱網(wǎng)環(huán)境下app加載出來(lái)
- 能夠在離線狀態(tài)下app能加載出來(lái)
- 在不同環(huán)境下都能有比較好的體驗(yàn), 并且能夠漸進(jìn)提升.
- 可靠:在沒(méi)有網(wǎng)絡(luò)的環(huán)境中也能提供基本的頁(yè)面訪問(wèn), 而不會(huì)出現(xiàn)"未連接到互聯(lián)網(wǎng)"的頁(yè)面.
- 快速:針對(duì)網(wǎng)頁(yè)渲染及網(wǎng)絡(luò)數(shù)據(jù)訪問(wèn)有較好優(yōu)化.
- 融入:應(yīng)用可以被增加到手機(jī)桌面, 并且和普通應(yīng)用一樣有全屏, 推送等特性
檢測(cè)工具[lighthouse]
chrome://extensions/
啟動(dòng)測(cè)試工具
測(cè)試結(jié)果
Service Worker
Service Worker是一個(gè)腳本, 瀏覽器獨(dú)立于當(dāng)前網(wǎng)頁(yè), 將其在后臺(tái)運(yùn)行, 為實(shí)現(xiàn)一些不依賴頁(yè)面或者用戶交互的特性打開(kāi)了一扇大門.
特性
- 推送信息
- 背景后臺(tái)同步
- geofencing(地理圍欄定位)
- 攔截和處理網(wǎng)絡(luò)請(qǐng)求的能力, 包括以編程方式來(lái)管理被緩存的響應(yīng)
用處
- 使用攔截和處理網(wǎng)絡(luò)請(qǐng)求的能力, 去實(shí)現(xiàn)一個(gè)離線應(yīng)用
- 使用Service Worker在后臺(tái)運(yùn)行同時(shí)能和頁(yè)面通信的能力, 去實(shí)現(xiàn)大規(guī)模后臺(tái)數(shù)據(jù)的處理
現(xiàn)狀
IOS對(duì)PWA支持的不太好
生命周期
Service Worker生命周期
已經(jīng)被注冊(cè)的Service Worker情況
chrome://serviceworker-internals/
被注冊(cè)的Service Worker
檢查當(dāng)前瀏覽器上正在運(yùn)行的Service Workers有哪些
chrome://inspect/#service-workers
正在運(yùn)行的Service Workers
先把之前的service worker終止一下
先把之前的service worker終止一下
service代碼查看
service worker的緩存
緩存內(nèi)容查看
網(wǎng)絡(luò)查看
網(wǎng)絡(luò)查看
demo查看
離線查看
離線查看
緩存
Cache-Control
-
max-age
max-age - s-maxage
注：s-maxage緩存優(yōu)先級(jí)大于max-age緩存溯饵，但是只對(duì)public生效侵俗。就是從我們的cdn拿緩存 - private
注：私人瀏覽器，只有訪問(wèn)這個(gè)瀏覽器的用戶才能使用緩存 - public
注：比如cdn就是public緩存丰刊，可以被很多人緩存 - no-cache
- no-store
例子：
Cache-Control:private, max-age=0, no-cache
1. 都要發(fā)送請(qǐng)求詢問(wèn)
2. 如果沒(méi)有改變返回304
3. 改變了返回200坡慌，從新拉取請(qǐng)求
General
Status Code : 304
Response Headers
last-modified ：Sun Aug 26 2018 12:14:04 GMT
Request Headers
if-modified-since :Sun Aug 26 2018 12:14:04 GMT
last-modified有什么缺點(diǎn)
- 某些服務(wù)端不能獲取精確的修改時(shí)間
- 文件修改時(shí)間改了，但文件內(nèi)容卻沒(méi)有變
General
Status Code : 304
Response Headers
ETag ："ds123456-dsx"
Request Headers
if-None-Match : "ds123456-dsx"
Etag/If-None-Match
- 文件內(nèi)容的hash值
- etag - response header
- if-none-match - request header
- 需要與cache-control共同使用
分級(jí)緩存策略
1. 200（from cache）
這一層由expires/cache-control控制藻三。
- expire (http 1.0版本有效)是絕對(duì)時(shí)間
- cache-control（http1.1版本有效）相對(duì)時(shí)間
兩者都存在時(shí)洪橘，cache-control覆蓋expires，只要沒(méi)有失效棵帽，瀏覽器值訪問(wèn)自己的緩存
2. 304狀態(tài)
這一層由last-modified/etag控制熄求。當(dāng)下一層失效時(shí)或用戶點(diǎn)擊refresh，F(xiàn)5時(shí)逗概，瀏覽器就會(huì)發(fā)送請(qǐng)求給服務(wù)器弟晚，如果服務(wù)器沒(méi)有變化，則返回304給瀏覽器
3. 200
當(dāng)瀏覽器本地沒(méi)有緩存或者下一層失效時(shí)逾苫，或者用戶點(diǎn)擊了CTL+F5時(shí)卿城，瀏覽器直接去服務(wù)器下載最新數(shù)據(jù)
分級(jí)緩存策略
緩存流程圖
緩存流程圖2
使用緩存的方式
- 通過(guò)新tab輸入地址的方式
- 通過(guò)html外聯(lián)圖片的方式
注：在原tab中刷新會(huì)默認(rèn)添加一個(gè)max-age=0的頭
其他優(yōu)化
- cdn不要使用同域名, 因?yàn)闀?huì)攜帶cookie增加無(wú)謂的帶寬消耗
- react, vue模板代碼的渲染會(huì)對(duì)性能有損耗, 業(yè)界的一般做法是做成服務(wù)器端渲染的過(guò)程
