資源的合并與壓縮
- 減少 http 請求數(shù)量
- 減少請求資源的大小
html 壓縮
- 壓縮在文本文件中有意義但是在HTML中不顯示的字符鹃彻，包括空格、制表符、換行符、注釋等
- 使用在線網(wǎng)站壓縮舵鳞、nodejs提供了html-minifier 工具、后端模板引擎渲染壓縮
css 壓縮
- 無效代碼刪除击儡、css語義合并
- 使用在線網(wǎng)站壓縮术奖、使用 html-minifier 對html 中的 css 進(jìn)行壓縮、使用clean-css 對 css 進(jìn)行壓縮
js 壓縮與混亂
- 無效字符的刪除脱惰、剔除注釋搏嗡、代碼語義的縮減與優(yōu)化、代碼保護(hù)
- 使用在線網(wǎng)站壓縮拉一、使用 html-minifier 對html 中的 js 進(jìn)行壓縮采盒、使用uglifyjs2 對 js 進(jìn)行壓縮
文件合并
- 如果不合并 === > 文件與文件之間有插入的上行請求，增加了N - 1 個網(wǎng)絡(luò)延遲舅踪；受丟包問題影響更嚴(yán)重纽甘；經(jīng)過代理服務(wù)器時可能會被斷開
- 如果合并 === > 首屏渲染時間變長； 文件緩存大面積失效
- 公共庫合并抽碌、不同頁面的合并
- 使用在線網(wǎng)站進(jìn)行文件合并悍赢、使用 nodejs 實現(xiàn)文件合并
開啟 gzip
圖片優(yōu)化
png
- png8 ---- 256 色 支持透明
- png24 ---- 2^24 色 不支持透明
- png32 ---- 2^24 色 支持透明
圖片格式
- jpg 有損壓縮决瞳，壓縮率高，不支持透明
- png 支持透明左权，瀏覽器兼容好
- webp壓縮程度最好皮胡，在 iOS webview 有兼容性問題
- svg 矢量圖， 代碼內(nèi)嵌赏迟，相對較小屡贺，圖片樣式相對簡單的場景
- 格式轉(zhuǎn)換與圖片壓縮 https://zhitu.isux.us/
圖片壓縮
- 針對真實圖片情況，舍棄一些相對無關(guān)緊要的色彩信息
- 圖片壓縮 https://tinypng.com/
css 雪碧圖
- 把網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中
- 減少網(wǎng)站的 http 請求數(shù)量
- 缺點是當(dāng)圖片比較大時锌杀，一次家在比較慢
使用矢量圖
- 使用 svg 進(jìn)行矢量圖的繪制
- 使用 iconfont 解決 icon 問題
image inline
- 內(nèi)嵌圖片 base64
- 減少網(wǎng)站的 http 請求數(shù)量
HTML 渲染
順序執(zhí)行甩栈、并發(fā)加載
- 詞法分析
- 并發(fā)加載
- 并發(fā)上限
是否阻塞
- css head 中阻塞頁面的渲染
- css 阻塞 js 的執(zhí)行
- css 不阻塞外部腳本的加載
- 直接引入的 js 阻塞頁面的渲染
- js 不阻塞資源的加載
- js 順序執(zhí)行，阻塞后續(xù) js 邏輯的執(zhí)行
懶加載 / 預(yù)加載
懶加載
- 圖片進(jìn)入可視區(qū)域之后請求圖片資源
- 對于電商等圖片很多糕再，頁面很長的業(yè)務(wù)場景適用
- 減少無效資源的加載
- 并發(fā)加載的資源過多會阻塞 js 的加載量没，影響網(wǎng)站的正常使用
預(yù)加載
- 圖片等靜態(tài)資源在使用之前的提前請求
- 資源使用到時能從緩存中加載，提升用戶體驗
- 頁面展示的依賴關(guān)系維護(hù)
重繪 / 回流
避免使用觸發(fā)重繪突想、回流的 CSS 屬性
將重繪殴蹄、回流的影響范圍限制在單獨的圖層之內(nèi)
回流（或者叫做重排）
- 當(dāng) RenderTree 中的一部分（或者全部）因為元素的規(guī)模尺寸、布局猾担、隱藏等改變而需要重新構(gòu)建袭灯，這就稱為回流（reflow）
- 當(dāng)頁面布局和幾何屬性改變時就需要回流
重繪
- 當(dāng) RenderTree 中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀绑嘹、風(fēng)格稽荧，而不會影響布局，比如background-color工腋，這就叫做重繪（repaint）
關(guān)系
- 影響了布局-》回流（重排）
- 沒有影響布局-》重繪
- 重排必將引起重繪蛤克，而重繪不一定會引起重排
觸發(fā)頁面重布局的屬性
- 盒子模型相關(guān)屬性
width
height
padding
margin
display
border-width
border
min-height - 定位屬性以及浮動
top
bottom
left
right
position
float
clear - 改變節(jié)點內(nèi)部文字結(jié)構(gòu)
text-align
overflow-y
overflow
font-weight
font-family
font-size
line-height
vertical-align
white-space
只觸發(fā)重繪的屬性
- color
- border-style
- border-radius
- visibility
- text-decoration
- background
- background-image
- background-position
- background-repeat
- background-size
- outline
- outline-color
- outline-style
- outline-width
- box-shadow
新建DOM的過程
- 獲取DOM后分割為多個圖層
- 對每個圖層的節(jié)點計算樣式結(jié)果（recalculate style -- 樣式重計算）
- 為每個節(jié)點生成圖形和位置（layout -- 回流和重布局）
- 將每個節(jié)點繪制填充到圖層位圖中（paint setup 和 paint -- 重繪）
- 圖層作為紋理上傳至GPU
- 復(fù)合多個圖層到頁面上生成最終屏幕圖像（composite layers -- 圖層重組）
將頻繁重繪回流的DOM元素單獨作為一個獨立圖層，那么這個DOM元素的重繪和回流的影響只會在這個圖層中夷蚊。
新建獨立圖層會減少重回回流帶來的影響构挤，但是在圖層重組的時候會消耗大量的性能，所以要權(quán)衡利弊惕鼓，有所選擇筋现。
Chrome創(chuàng)建圖層的條件
- 3D 或透視變換 CSS 屬性（perspective transform）
- 使用加速視頻解碼的 <video> 節(jié)點
- 擁有 3D（WebGL）上下文或加速的 2D 上下文的 <canvas> 節(jié)點
- 混合插件（如flash）
- 對自己的 opacity 做 CSS 動畫或使用一個動畫webkit變換的元素
- 擁有加速 CSS 過濾器的元素
- 元素有一個包含復(fù)合層的后代節(jié)點（一個元素?fù)碛幸粋€子元素，該子元素在自己的層里）
- 元素有一個 z-index 較低且包含一個復(fù)合層的兄弟元素（也就是該元素在復(fù)合層上面渲染）
重繪回流問題 優(yōu)化方案
- 用 translate 替代 top
- 用 opacity 替代 visibility
- 不要一條一條的修改 DOM 的樣式箱歧，預(yù)先定義好 class矾飞，然后修改 DOM 的 className
- 把 DOM 離線后修改，比如：先把 DOM 給 display: none（有一次 reflow）呀邢，然后修改100次洒沦，然后再顯示出來
- 不要把 DOM 節(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量
- 不要使用 table 布局，可能很小的一個改動就會造成整個 table 的重新布局
- 動畫實現(xiàn)的速度的選擇
- 對于動畫新建圖層
- 啟用 GPU 硬件加速
瀏覽器存儲
cookie
- 因為 http 請求無狀態(tài)价淌，所以需要 cookie 去維持客戶端狀態(tài)
- cookie 生成方式：http response header 中的 set-cookie申眼； js 中可以通過document.cookie讀寫cookie
- 使用：用于瀏覽器端和服務(wù)器端的交互瞒津；客戶端自身數(shù)據(jù)的存儲
- 過期時間：expire
- 存儲限制：作為瀏覽器存儲，大小4kb左右括尸；需要設(shè)置過期時間 expire
- cookie 存儲能力被 localstorage 代替
- httponly 不允許 js 讀寫
- cookie 中在相關(guān)域名下面 --- cdn的流量損耗 巷蚪。 解決：cdn 的域名和主站的域名要分開
localStorage
- HTML5 設(shè)計出來專門用于瀏覽器存儲的
- 大小為 5M 左右
- 僅在客戶端使用，不和服務(wù)端進(jìn)行通信
- 接口封裝較好
- 瀏覽器本地緩存方案
sessionStorage
- 會話級別的瀏覽器存儲
- 大小為 5M 左右
- 僅在客戶端使用濒翻，不和服務(wù)端進(jìn)行通信
- 接口封裝較好
- 對于標(biāo)表單信息的維護(hù)
indexedDB
- 用于客戶端存儲大量結(jié)構(gòu)化數(shù)據(jù)
- 為應(yīng)用創(chuàng)建離線版本
PWA
- 可靠：在沒有網(wǎng)絡(luò)的環(huán)境中也能提供基本的頁面訪問
- 快速：針對網(wǎng)頁渲染及網(wǎng)絡(luò)數(shù)據(jù)訪問有較好的優(yōu)化
- 融入：應(yīng)用可以被增加到手機桌面屁柏，并且和普通應(yīng)用一樣有全屏、推送等特性
緩存
Cache-Control
- max-age
- s-maxage
- private
- public
- no-cache
- no-store
Expires
- 緩存過期時間有送，用來指定資源到期的時間淌喻，是服務(wù)器端的具體時間點
- 告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無需再次請求
Last-Modified / If-Modified-Since
- 基于客戶端和服務(wù)端協(xié)商的緩存機制
- Last-Modified ------- response header
- If-Modified-Since ------- request header
- 需要與 cache-control 共同使用
- 缺點：某些服務(wù)端不能獲取精確的修改時間雀摘；文件修改時間改了似嗤，但文件內(nèi)容卻沒有變
Etag / If-None-Match
- 文件內(nèi)容的 hash 值
- etag ------- response header
- if-none-match ------- request header
- 需要與 cache-control 共同使用
分級緩存策略
- 200（from cache）: 由expires / cache-control 控制。expires（http1.0有效）是絕對時間届宠；cache-control（http1.1有效）是相對時間。兩者都存在時乘粒，cache-control 覆蓋 expires豌注，只要沒有失效，瀏覽器只訪問自己的緩存灯萍。
- 304 : 由 last-modified / etag 控制轧铁。當(dāng)上一層失效時或用戶點擊refresh，F(xiàn)5時旦棉，瀏覽器就會發(fā)送請求給服務(wù)器齿风，如果服務(wù)器端沒有變化，則返回304給瀏覽器绑洛。
- 200 ：當(dāng)瀏覽器本身沒有緩存或者上一層失效時救斑，或者用戶點擊了CTL + F5 時，瀏覽器直接去服務(wù)器下載最新數(shù)據(jù)真屯。
