輸入 url: 瀏覽器先檢查緩存，然后解析本地-路由器-全網(wǎng) dns，指向服務(wù)器 ip
- 強(qiáng)緩存 request Cache-Control
1.max-age=0，只 if-none-match 協(xié)商 etag 的 hash
2.no-cache, 都不緩存 - 強(qiáng)緩存 response Cache-Control
1.max-age=0, no-cache, 只 etag 對 if-none-match 協(xié)商 hash
2.no-store 都不緩存 隱私 - DNS 緩存
1.瀏覽器緩存的 dns
2.本機(jī) host 文件的映射
3.路由器的映射
4.網(wǎng)絡(luò)服務(wù)商的映射 (本地DNS服務(wù)器為止)
5.root 域名服務(wù)器
6.頂級域名-主域名服務(wù)器-結(jié)果緩存在本地DNS服務(wù)器 - 默認(rèn)訪問 http 重定向到 https
HSTS 策略: response headers: Strict-Transport-Security: max-age=31536000 把所有請求都訪問為 https，首次訪問不知道配置可以注冊在公網(wǎng)上。
請求遠(yuǎn)程服務(wù)器: 建立 TLS 連接2次RTT， TCP 三次握手RTT，nginx 轉(zhuǎn)發(fā)到對應(yīng)的資源上，服務(wù)器檢查緩存
- 優(yōu)化 TLS 2次 RTT, 瀏覽器緩存對稱密鑰
1.client 發(fā)送 k1 和加密方案列表
2.server 發(fā)送 k2、證書、公鑰、確定的加密方案
3.client 驗(yàn)證證書、公鑰加密 k3 發(fā)送
4.server 密鑰解 k3
5.client server 使用 k1 k2 k3 對稱加密通信
ssl_session_tickets on;
ssl_session_ticket_key current.key;
ssl_session_ticket_key previous.key;
- 優(yōu)化 TCP 三次握手 RTT
- request header：connection: keep-alive
- 重用 TCP 連接
- 管線化 http 1.1
- keep-alive 基礎(chǔ)上
- 請求一次發(fā)出
- 響應(yīng)按順序 還是有阻塞可能
- 管線化和多路復(fù)用區(qū)別
- 管線化在 keep-alive 基礎(chǔ)上復(fù)用 TCP 3次握手
- 管線化一次發(fā)送多個(gè)請求返回仍是一個(gè)個(gè)的順序不變
- 多路復(fù)用是 http2 多個(gè)請求響應(yīng)都是并行
服務(wù)器斷開連接的四次揮手
- 客戶端請求斷開連接
- 服務(wù)端確認(rèn)斷開請求
- 服務(wù)端發(fā)送完畢剩下的數(shù)據(jù) close
- 客戶端close 回復(fù)
瀏覽器檢查狀態(tài)碼，304 協(xié)商緩存，301，302 重定向
- 304 req:if-none-match, res:etag 協(xié)商 hash
- 301 永久重定向會瀏覽器緩存
- 302 臨時(shí)重定向?yàn)g覽器不緩存
解析返回內(nèi)容，重排重繪
- 頁面生成過程
- html 解析成 dom 樹
- css 解析成 cssom
- 結(jié)合 dom 樹和 cssom 生成 render tree
- 進(jìn)行布局 flow 將 渲染樹的 節(jié)點(diǎn)進(jìn)行合成
- 進(jìn)行繪制 paint 至屏幕上
- 文檔解析過程的事件觸發(fā)
1 開始解析 html 文檔
觸發(fā) readystatechange: load
2 DOMContentLoaded 事件，原始 html 解析
不包含樣式資源加載, 同時(shí)觸發(fā) readystatechange: interactive
3 load 事件，資源加載完畢
樣式資源加載完畢后才觸發(fā), 同時(shí)觸發(fā) readystatechange: complete
- defer async 資源的script 都不阻塞，
普通 script 下載阻塞再執(zhí)行阻塞
defer 先下載 html 解析完后執(zhí)行，沒什么阻塞
async 下載好后直接執(zhí)行，阻塞執(zhí)行階段
重排
1.dom 的增刪改查
2.瀏覽器窗口的變化滾動
3.用戶的輸入
4.dom的形狀大小動畫
5.重排必定發(fā)生重繪
6.影響范圍大，最好固定 dom 容器大小不影響到其他 dom重繪
1.dom 的顏色背景
2.dom border 樣式 如圓角內(nèi)陷
3.每次重繪前執(zhí)行 requestAnimationFrame
重排重繪優(yōu)化
- 目標(biāo) dom 父容器固定大小，重排不會影響其他 dom
// 改變 p 里的 dom 也會影響 h5 和 h4，固定 p 的大小
<body>
<div class="hello">
<h4>h4</h4>
<p><strong>Name:</strong>BDing</p>
<h5>h5</h5>
</div>
</body>
- 讀寫操作分離
// 只發(fā)生一次重繪重排, 讀取操作在寫入操作完成后才進(jìn)行, 有的瀏覽器低下仍會進(jìn)行4次
div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
console.log(div.offsetLeft);
console.log(div.offsetTop);
console.log(div.offsetWidth);
console.log(div.offsetHeight);
- 樣式集中改變
// 使用添加 className 和 cssText 的方式一次操作
el.className += " otherclass"
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
- 緩存布局信息
// bad 同時(shí)又讀寫操作 強(qiáng)制刷新 觸發(fā)兩次重排
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
// good 緩存布局信息 讀寫分離
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
- dom 離線更改
dom.display = 'none'
// 修改dom樣式
dom.display = 'block'
----
const fragment = document.createDocumentFragment();
// DocumentFragment 上批量操作 dom
list.appendChild(fragment);
----
復(fù)制 dom，操作完后替換掉原 dom
var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);
絕對定位 固定定位
position屬性為absolute或fixed 的dom 重排消耗小優(yōu)化動畫
動畫移動 1px 增加為 3px 減少 重排
啟動 GPU 操作-
react 調(diào)度優(yōu)化 調(diào)度模塊原理 - 實(shí)現(xiàn) requestIdleCallback ?
- 重繪的一幀 16.67，性能低是 33.33
- rAF 計(jì)算出當(dāng)前幀開始時(shí)間和下一幀開始時(shí)間
- 把 react 更新任務(wù)推入 addEventLisnter 隊(duì)列中
- 每一幀更新順序：隊(duì)列 react 任務(wù) -> UI 渲染動畫 -> idle 回調(diào)
- 每一次循環(huán)隊(duì)列開始根據(jù) react 任務(wù)過期時(shí)間判斷是否過期，過期了執(zhí)行 react 更新，再執(zhí)行 UI 操作
