• 瀏覽器/RunTime內核（渲染引擎）JavaScript 引擎

  Chrome	Blink（28~） Webkit（Chrome 27）	V8
  FireFox	Gecko	SpiderMonkey
  Safari	Webkit	JavaScriptCore
  Edge	EdgeHTML	Chakra(for JavaScript)
  IE	Trident	Chakra(for JScript)
  PhantomJS	Webkit	JavaScriptCore
  Node.js	-	V8

• 用戶界面：包括地址欄、前進/后退按鈕、書簽菜單等
• 瀏覽器引擎：在用戶界面和呈現引擎之間傳遞指令
• 呈現引擎：負責顯示請求的內容
• 網絡：用于網絡調用，比如HTTP請求
• 用戶界面后端：用于繪制基本的窗口小部件，比如組合框和窗口
• JavaScript解釋器：用于解釋和執行JavaScript代碼
• 數據存儲

• 瀏覽器獲取HTML文件，然后對文件進行解析，形成DOM Tree
• 與此同時，進行CSS解析，生成Style Rules
• 接著將DOM Tree和Style Rules合成為Render Tree
• 接著進入布局（Layout）階段，也就是為每個節點分配出現在屏幕上的確切坐標
• 然后調用GPU進行繪制，遍歷Render Tree的節點，并將元素呈現出來

• 轉碼：瀏覽器將接收到的二進制數據按照指定的編碼格式轉換為HTML字符串
• 生成Tokens：瀏覽器將HTML字符串解析成Tokens
• 構建Nodes：對Node添加特定的屬性，通過指針確定Node的父、子、兄弟關系和所屬的treeScope
• 生成DOM Tree：通過Node包含的指針確定的關系構建出DOM Tree

• 重排：渲染樹需要重新分析并且節點尺寸需要重新計算，表現為重新生成布局，重新排列元素
• 重繪：節點的幾何屬性發生改變或樣式發生改變，表現為元素的外觀發生改變
• 重排的性能影響大于重繪的性能影響
• 重繪不一定會出現重排，重排一定會出現重繪

• 添加、刪除、更新DOM節點
• 通過display: none隱藏一個節點——觸發重排和重繪
• 通過visibility: hidden隱藏一個節點——觸發重繪，因為沒有幾何變化
• 移動或者給頁面中的DOM節點添加動畫
• 添加一個樣式表，調整樣式屬性
• 用戶行為，例如調整窗口大小，改變字號，或者滾動

• 通過改變class的方式集中改變樣式
• 使用DocumentFragment
• 通過CSS的will-change屬性提升為合成層

• 短輪詢
  • 優點：兼容性強，實現非常簡單
  • 缺點：延遲性高，非常消耗請求資源，影響性能
• comet
  • 基于AJAX的長輪詢方式
    • 優點：兼容性好，資源浪費較小
    • 缺點：服務器hold連接會浪費資源，返回數據順序無保證，難以管理維護
  • 基于Iframe及htmlfile的流方式（長連接）
    • 優點：兼容性好，消息即時到達，不發無用請求
    • 缺點：服務器維護長連接消耗資源
• SSE：Server-Sent Event，服務端推送事件，是一種允許服務端向客戶端推送新數據的HTML5技術
  • 優點：基于HTTP而生，不需要太多改造即可使用，而websocket則相對復雜，大多時候需要借助成熟的庫或框架
  • 缺點：基于文本傳輸，效率沒有websocket高，不是嚴格的雙向通信，客戶端向服務端發送請求無法復用之前的連接，需要重新發出獨立的連接
• Websocket：全新的、獨立的協議，基于TCP協議，與HTTP協議兼容，作為html5的一部分，其作用是在服務器和客戶端建立實時的雙向通信
  • 優點：真正意義上的實時雙向通信，性能好，延遲低
  • 缺點：獨立于HTTP協議，因此需要額外項目改造，使用復雜度相對較高，需要引入成熟的庫，無法兼容低版本瀏覽器

• 同源：“協議+域名+端口”三者相同
• 同源策略限制了從同一個源加載的文件或腳本與來自另一個源的資源進行交互，這是一個用于隔離潛在惡意文件的重要安全機制
• 不受同源策略限制的標簽：link、img、script

• jsonp
  • 優點
    • 實現簡答
    • 兼容性好
  • 缺點
    • 只支持get請求
    • 有安全性問題，容易遭受xss攻擊
    • 需要服務端配合jsonp做一定程度的改造
• 跨域資源共享（CORS）
  res.header('Access-Control-Allow-Origin', 'http://example.com'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type')復制代碼

• Nginx轉發（首選）
  • 實現方便
  • 輕量級
  • 啟動快
  • 高并發

www.cxymsg.com/guide/