儲存
cookie，localStorage，sessionStorage，indexDB
cookie大小不超過4kb
localStorage在2.5-10M之間
IndexedDB 可儲存至少250M，建立索引，提供介面查詢。
複製程式碼Service Worker
Service Worker 是執行在瀏覽器背後的獨立執行緒，一般可以用來實現快取功能。使用 Service Worker的話，傳輸協議必須為 HTTPS。因為 Service Worker 中涉及到請求攔截，所以必須使用 HTTPS 協議來保障安全。
它的特性包括推送訊息,離線、資料同步、後臺編譯，攔截和處理網路請求。
快取位置
Service Worker
Memory Cache
Disk Cache
Push Cache
網路請求
複製程式碼http快取策略
強快取
Expires相對於伺服器時間定義 ，不可靠；
Cache-control用絕對時間max-age=60 單位s；
複製程式碼協商快取
Last-Modified 比較請求頭部If-Modified-Since與當前最後修改日期Last-Modified來驗證資源是否有改動；1.檔案開啟即為修改，2.無法精確到ms；
ETag 比較請求頭部的If-None-Match與當前資源的ETag是否一致來判斷資源是否在兩次請求之間有過修改
Last-Modified（實體首部） 和 If-Modified-Since（請求首部）
複製程式碼安全問題
xxs攻擊？
攻擊者想盡一切辦法將可以執行的程式碼注入到網頁中。
攻擊的程式碼被服務端寫入進資料庫中，這種攻擊危害性很大，因為如果網站訪問量很大的話，就會導致大量正常訪問頁面的使用者都受到攻擊。
複製程式碼 <script>alert(1)</script>
//轉義字元 引號 尖括號 斜槓
//csp 建立白名單
設定 HTTP Header 中的 Content-Security-Policy
設定 meta 標籤的方式 <meta http-equiv="Content-Security-Policy">
複製程式碼CSRF
CSRF 中文名為跨站請求偽造。原理就是攻擊者構造出一個後端請求地址，誘導使用者點選或者通過某些途徑自動發起請求。如果使用者是在登入狀態下的話，後端就以為是使用者在操作，從而進行相應的邏輯。
複製程式碼防範 CSRF 攻擊可以遵循以下幾種規則：
Get 請求不對資料進行修改
不讓第三方網站訪問到使用者 Cookie 設定 SameSite 屬性
阻止第三方網站請求介面 驗證 Referer
請求時附帶驗證資訊， 驗證 Token 是否有效
複製程式碼點選劫持
點選劫持是一種視覺欺騙的攻擊手段。
複製程式碼X-FRAME-OPTIONS
JS防禦
中間人攻擊
中間人攻擊是攻擊方同時與服務端和客戶端建立起了連線，並讓對方認為連線是安全的，但是實際上整個通訊過程都被攻擊者控制了。攻擊者不僅能獲得雙方的通訊資訊，還能修改通訊資訊。
HTTPS 就可以用來防禦中間人攻擊
複製程式碼效能優化
網頁效能優化
減少http請求次數
減少DNS查詢次數
避免頁面跳轉
快取Ajax
延遲載入
提前載入
減少DOM元素數量
根據域名劃分內容
減少iframe數量
避免404
伺服器優化
使用CDN
新增Expires 或Cache-Control報文頭
Gzip壓縮傳輸檔案
配置ETags
儘早flush輸出
使用GET Ajax請求
避免空的圖片src
cookie
減少Cookie大小
頁面內容使用無cookie域名
javaxcript
將指令碼置底
使用外部Javascirpt和CSS檔案
精簡Javascript和CSS
去除重複指令碼
減少DOM訪問
使用智慧事件處理 圖片 優化影象
優化CSS Sprite
不要在HTML中縮放圖片
使用小且可快取的favicon.ico
移動客戶端 保持單個內容小於25KB
打包組建成符合文件
DNS預解析 rel="dns-prefetch"
節流與防抖
預載入
預渲染 rel="prerender"
CDN 靜態資源儘量使用CDN載入，需要注意CDN域名要與主站不同，否則每次請求都會帶上主站的 Cookie，平白消耗流量。
減少重繪重排
requestAnimationFrame
createDocumentFragment
複製程式碼Timeline皮膚
藍色：網路通訊和HTML解析 黃色：JavaScript執行 紫色：樣式計算和佈局，即重排 綠色：重繪
window.requestAnimationFrame()
推遲到下一次重新渲染 可分離讀寫操作
window.requestIdleCallback(fn)
//指定只有當一幀的末尾有空閒時間，才會執行回撥函式。
大多數顯示器的重新整理頻率是60Hz
如果網頁動畫能夠做到每秒60幀，就會跟顯示器同步重新整理，達到最佳的視覺效果。
一秒之間能夠完成多少次重新渲染，這個指標就被稱為"重新整理率"，英文為FPS（frame per second）。60次重新渲染，就是60FPS。
複製程式碼