1. 解析html，生成dom樹，解析css，生成cssom樹
2. 將dom樹和cssom樹結合，生成渲染樹(render tree)
3. layout(回流): 根據生成的渲染樹，計算它們在裝置視口(viewport)內的確切位置和大小，這個計算的階段就是回流
4. painting(重繪): 根據渲染樹以及回流得到的幾何資訊，得到節點的絕對畫素
5. display:將畫素傳送給gpu，展示在頁面上
link 使用是非同步 的 會開啟乙個新執行緒 專門來解析 這個css 檔案 並不會影響主線程的任務
style 內嵌樣式 從上往下解析 解析完成繼續解析dom 解構
import 是同步的 不會開啟新的執行緒 而是讓主線程去獲取 這樣會阻礙主線程的任務 ，只有等這個外部樣式 匯入解析後 才會繼續解析 dom 解構
注意如果樣式不是特別多 可以選擇內嵌樣式這種方式 減少http 請求 提高頁面的渲染速度
js:script 主線程會從伺服器獲取資源 並且將js 資源解析載入 載入完成後才繼續渲染dom 結構 可以 看出來是非同步 這也是為什麼 script 放到底部的原因 為了獲取dom 元素 或者 不阻礙dom 的渲染
可以使用defer 或者 async 變成非同步獲取資源
列印：
defer 可以遵循原來的載入順序
async 是無序的 哪個先獲取哪個就先載入
瀏覽器渲染原理
最近在開發b s 框架的專案。開發都是web頁面，也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方，後台做的好，前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先，這裡有乙個新詞，渲染。什麼是網頁渲染呢？網頁渲染就是html 根據css定義的...
瀏覽器渲染原理
瀏覽器中輸入url到頁面返回的全過程 根據網域名稱，進行dns網域名稱解析 拿到解析的ip位址，建立tcp連線 向ip位址傳送http請求 伺服器處理請求 返回響應結果 關閉tcp連線 瀏覽器解析html 瀏覽器布局渲染 通過url向伺服器傳送請求,web服務端返回html文字 字串 拿到 後，瀏覽...
瀏覽器渲染原理
1.http請求階段 2.http響應階段 3.瀏覽器渲染階段 瀏覽器渲染頁面的機制和原理 程序 process 乙個程式就是乙個程序 執行緒 thread 棧記憶體 stack 用來提供環境 客戶端 瀏覽器 瀏覽器核心 拿到 後，瀏覽器在記憶體條中開闢出一塊棧記憶體，用來給 的執行環境，同時分配乙...