瀏覽器
屏幕刷新頻率
屏幕每秒出現圖像的次數。(普通筆記本為60Hz)
動畫原理
計算機每16.7ms刷新一次，由於人眼的視覺停留，所以看起來是流暢的移動
實現動畫的方式
- HTML5：Canvas動畫 / requestAnimationFrame API
- CSS3：transition / animation；
- JS：setTimeout / setInterval
- SVG（可伸縮矢量圖形）
requestAnimationFrame（rAF）請求動畫幀
優勢：
由系統決定回調函數的執行時機。60Hz的刷新頻率，那么每次刷新的間隔中會執行一次回調函數，不會像setTimeout那樣容易卡頓、抖動、引起丟幀
優點：CPU節能、函數節流
缺點：容易考慮優雅降級
clientHeight,scrollHeight,offsetHeight,以及scrollTop, offsetTop,clientTop
LocalStorage、SessionStorage、Cookie的區別：
| LocalStorage | SessionStorage | Cookie | |
|---|---|---|---|
| 存儲位置 | 客戶端 | ||
| 存儲類型 | 字符串 | ||
| 增刪改查 | set、get、remove | ||
| 存儲大小 | 5M | 4K | |
| 有效期 | 永久：需手動清除 | 僅當前會話有效 | 在設置的有效期后過期 |
| 與服務端通信 | × | 攜帶在HTTP請求頭信息中 | |
| 頁面共享 | √ | 不同頂級窗口不共享 | 同域名不同端口可共享 |
Cookie和Session
| Cookie | Session | |
|---|---|---|
| 是否安全 | √ | × |
| 儲存限制 | ≤4K | / |
| 位置 | 客戶端 | 服務器端 |
| 保存的數據類型 | 字符串 | 任意類型 |
| 語法 | if(request.Cookies["admin"]!=null) |
if(session["admin"]!=null) |
- Cookie 在客戶端，Session 在服務器端。
- Cookie的安全性一般，他人可通過分析存放在本地的Cookie並進行Cookie欺騙。在安全性第一的前提下，選擇Session更優。重要交互信息比如權限等就要放在Session中，一般的信息記錄放Cookie就好了。
- 單個Cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個Cookie。
- Session 可以放在文件、數據庫或內存中，比如在使用Node時將Session保存在redis中。由於一定時間內它是保存在服務器上的，當訪問增多時，會較大地占用服務器的性能。考慮到減輕服務器性能方面，應當適時使用Cookie。
- Session 的運行依賴Session ID，而 Session ID 是存在 Cookie 中的，也就是說，如果瀏覽器禁用了 Cookie，Session 也會失效（但是可以通過其它方式實現，比如在 url 中傳遞 Session ID）。
- 用戶驗證這種場合一般會用 Session。因此，維持一個會話的核心就是客戶端的唯一標識，即Session ID。
web worker
運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能
Ajax
創建交互式、快速動態網頁應用的網頁開發技術，無需重新加載整個網頁的情況下，能夠更新部分網頁的技術
優點：減輕服務器的負擔,按需取數據,最大程度的減少冗余請求，局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗，基於xml標准化,並被廣泛支持,不需安裝插件等，進一步促進頁面和數據的分離
缺點：因為大量的使用了JS和AJAX引擎,這些取決於瀏覽器的支持.在編寫的時候考慮對瀏覽器的兼容性。
Web安全色
URL到整個頁面加載完畢顯示在屏幕上的整個流程
graph TD 輸入網址 --> DNS解析-->建立TCP連接-->客戶端發送HTTP請求-->服務器處理並響應請求-->客戶端解析資源渲染布局
頁面渲染過程
解析HTML、構建DOM樹、DOM樹與CSS樣式進行附着構造呈現樹、布局、繪制
graph TD 根據html代碼生成DOM樹-->根據css代碼生成CSSOM-->將DOM樹和CSSOM整合形成Render樹-->根據render樹渲染頁面-->遇到script標簽則暫停渲染-->優先加載並執行js代碼-->直至渲染完成Render樹
頁面展示過程
graph TD Javascript:負責業務交互邏輯-->Style:根據CSS對每個DOM元素匹配樣式-->Layout:計算DOM元素顯示在屏幕的位置大小-->Paint:由多個渲染層完成DOM元素的可視效果-->Composite:每層繪制完成后將所有的層依序合並為一個圖層顯示到屏幕
框架
單向數據流和雙向數據流
| 單向數據流 | 雙向數據流 | |
|---|---|---|
| 架構 | MVC | MVVM |
| 框架 | React | Vue、Angular |
| 例子 | Vue 中 v-bind 、父傳子的 props | Vue 中 v-model |
| 特點 | 所有狀態的改變可記錄、可跟蹤，源頭易追溯； 一旦數據變化，就去更新頁面(data-頁面)，但是沒有(頁面-data)； 如果用戶在頁面上做了變動，那么就手動收集起來(雙向是自動)，合並到原有的數據中； 所有數據只有一份，組件數據只有唯一的入口和出口，使得程序更直觀更容易理解，有利於應用的可維護性 |
無論數據改變，或是用戶操作，都能帶來互相的變動，並且自動更新 |
Vue和React
架構
RESTful
一種網絡應用程序的設計風格和開發方式，基於HTTP，可以使用XML格式定義或JSON格式定義（用 URL 定位資源，用 HTTP 描述操作）
MVC和MVVM
MVC：在Controller里面把Model的數據賦值給View
性能優化
頁面加載及渲染優化
- HTML：文檔結構層次盡量少（最好不深於六層）
- CSS：樣式結構層次盡量簡單；少量首屏樣式內聯放在標簽內；動畫盡量使用在絕對定位或固定定位的元素上；隱藏在屏幕外，或在頁面滾動時，盡量停止動畫；
- JS：在腳本中盡量減少DOM操作，盡量緩存訪問DOM的樣式信息，避免過度觸發回流；減少通過JavaScript修改元素樣式，盡量使用修改class名方式操作樣式/動畫；盡量緩存DOM查找，查找器盡量簡潔；
- CSS置頂，JS置底；涉及多域名的網站開啟域名預解析
頁面交互優化
懶加載
可以通過為圖片文件添加loading="lazy"的屬性來實現
節流防抖
節流
觸發高頻事件，但在n秒內只會執行一次，在於稀釋函數的執行頻率
（就像游戲里無論手速多快，多次平A也有頻率上限）
防抖
觸發高頻事件后，n秒內只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間
（就像游戲里釋放技能的時候，再按一次技能就會重新冷卻）
服務器
服務的有狀態和無狀態
都是負載均衡服務
判斷兩個來自相同發起者的請求在服務器端是否具備上下文關系
| 有狀態 | 無狀態 | |
|---|---|---|
| 數據同步 | 需要 | / |
| 資源消耗 | 保存數據 | / |
| 帶寬消耗 | 數據同步 | / |
| 部署發布 | 需要額外的數據同步 | 直接部署 |
| failover | 數據可能丟失，同步不完全 | 數據不會丟失，負載均衡失效轉移 |