當我們開啟乙個網頁時，瀏覽器都會去請求對應的 html 檔案。雖然平時我們寫**時都會分為 js、css、html 檔案，也就是字串，但是計算機硬體是不理解這些字串的，所以在網路中傳輸的內容其實都是 0 和 1 這些位元組資料。當瀏覽器接收到這些位元組資料以後，它會將這些位元組資料轉換為字串，也就是我們寫的**。
當資料轉換為字串以後，瀏覽器會先將這些字串通過詞法分析轉換為標記（token），這一過程在詞法分析中叫做標記化（tokenization）。
那麼什麼是標記呢？這其實屬於編譯原理這一塊的內容了。簡單來說，標記還是字串，是構成**的最小單位。這一過程會將**分拆成一塊塊，並給這些內容打上標記，便於理解這些最小單位的**是什麼意思。
當結束標記化後，這些標記會緊接著轉換為 node，最後這些 node 會根據不同 node 之前的聯絡構建為一顆 dom 樹。
以上就是瀏覽器從網路中接收到 html 檔案然後一系列的轉換過程。
其實轉換 css 到 cssom 樹的過程和上一小節的過程是極其類似的
在這一過程中，瀏覽器會確定下每乙個節點的樣式到底是什麼，並且這一過程其實是很消耗資源的。因為樣式你可以自行設定給某個節點，也可以通過繼承獲得。在這一過程中，瀏覽器得遞迴cssom 樹，然後確定具體的元素到底是什麼樣式。
<
/span>
<
/a>
<
/div>
span
div > a > span
<
/style>對於第一種設定樣式的方式來說，瀏覽器只需要找到頁面中所有的 span 標籤然後設定顏色，但是對於第二種設定樣式的方式來說，瀏覽器首先需要找到所有的 span 標籤，然後找到 span 標籤上的 a 標籤，最後再去找到 div 標籤，然後給符合這種條件的 span 標籤設定顏色，這樣的遞迴過程就很複雜。所以我們應該盡可能的避免寫過於具體的 css 選擇器，然後對於 html 來說也盡量少的新增無意義標籤，保證層級扁平。
當我們生成 dom 樹和 cssom 樹以後，就需要將這兩棵樹組合為渲染樹。
當瀏覽器生成渲染樹以後，就會根據渲染樹來進行布局（也可以叫做回流），然後呼叫 gpu 繪製，合成圖層，顯示在螢幕上。
想必大家都聽過操作 dom 效能很差，但是這其中的原因是什麼呢？
因為 dom 是屬於渲染引擎中的東西，而 js 又是 js 引擎中的東西。當我們通過 js 操作 dom 的時候，其實這個操作涉及到了兩個執行緒之間的通訊，那麼勢必會帶來一些效能上的損耗。操作 dom 次數一多，也就等同於一直在進行執行緒之間的通訊，並且操作 dom 可能還會帶來重繪回流的情況，所以也就導致了效能上的問題。
經典面試題：插入幾萬個 dom，如何實現頁面不卡頓？
對於這道題目來說，首先我們肯定不能一次性把幾萬個 dom 全部插入，這樣肯定會造成卡頓，所以解決問題的重點應該是如何分批次部分渲染 dom。大部分人應該可以想到通過requestanimationframe的方式去迴圈的插入 dom，其實還有種方式去解決這個問題：虛擬滾動（virtualized scroller）。
首先渲染的前提是生成渲染樹，所以 html 和 css 肯定會阻塞渲染。如果你想渲染的越快，你越應該降低一開始需要渲染的檔案大小，並且扁平層級，優化選擇器。
然後當瀏覽器在解析到script標籤時，會暫停構建 dom，完成後才會從暫停的地方重新開始。也就是說，如果你想首屏渲染的越快，就越不應該在首屏就載入 js 檔案，這也是都建議將 script 標籤放在 body 標籤底部的原因。
在這一篇文章中，我們了解了瀏覽器如何將檔案渲染為頁面，同時也掌握了一些優化效能的小技巧，希望能夠幫到你。
瀏覽器渲染原理
最近在開發b s 框架的專案。開發都是web頁面，也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方，後台做的好，前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先，這裡有乙個新詞，渲染。什麼是網頁渲染呢？網頁渲染就是html 根據css定義的...
瀏覽器渲染原理
瀏覽器中輸入url到頁面返回的全過程 根據網域名稱，進行dns網域名稱解析 拿到解析的ip位址，建立tcp連線 向ip位址傳送http請求 伺服器處理請求 返回響應結果 關閉tcp連線 瀏覽器解析html 瀏覽器布局渲染 通過url向伺服器傳送請求,web服務端返回html文字 字串 拿到 後，瀏覽...
瀏覽器渲染原理
1.http請求階段 2.http響應階段 3.瀏覽器渲染階段 瀏覽器渲染頁面的機制和原理 程序 process 乙個程式就是乙個程序 執行緒 thread 棧記憶體 stack 用來提供環境 客戶端 瀏覽器 瀏覽器核心 拿到 後，瀏覽器在記憶體條中開闢出一塊棧記憶體，用來給 的執行環境，同時分配乙...