瀏覽器是如何運行的

瀏覽器的發展史

• 1991年Berners Lee(互聯網發明者之一)font>建立了第一代網絡瀏覽器 WorldWideWeb —— 只支持顯示文本圖片
• 1993年 Mosaic —— 可以同時顯示文本和圖像的瀏覽器
• 1994年 網景瀏覽器 —— 只能顯示簡單的 html 沒有css、js 獲得世界范圍內的成功、占領了絕大多數的市場份額
  • 同年出現了 opera 瀏覽器
• 1995年 Microsoft 發布了萬惡的 IE1.0、IE2.0 自此第一次瀏覽器大戰正式打響
• 1996年 Windows 集成 IE3.0
  • 網景市場份額 86% IE發行后的4年內在Windows操作系統的幫助下逐漸取代了網景瀏覽器的領導地位，達到了市場份額的75%
• 1998年網景公司成立了 Mozilla 基金會 開發了著名的開源項目 Firefox 瀏覽器
• 1999年 IE市場份額為 99%
• 2003年 Apple 發布了 Safari 瀏覽器 集成于所有 Apple 操作系統中
• 2004年 Firefox 發布1.0版本 拉開了瀏覽器第二次大戰的序幕有
• 2005年 Apple 開源了 Safari 瀏覽器的內核 webkit
• 2008年 Google 以Apple 開源項目 webkit 作為內核創建了一個新的項目 Chromium 在此基礎上 Google 發布了 Chrome 瀏覽器 Chrome發展十分迅速 現在已經成為了全球最受歡迎的瀏覽器
• 2015年 由于IE性能和體驗問題IE逐漸掉隊，Microsoft也放棄了IE推出了基于 webkit 內核的 Edge 瀏覽器
• 2020年 Microsoft 正式發布基于chromium 內核的 Edge瀏覽器

簡化的瀏覽器結構圖

渲染引擎

渲染引擎可以說是一個瀏覽器的核心與靈魂
IE —— Trident
Firefox —— Gecko
Safari —— Webkit
Chrome 、Opera、Edge—— Blink 基于 Webkit 優化改造的

渲染過程

??瀏覽器進程中的網絡線程請求獲取到html數據后，通過IPC將數據傳遞給渲染器進程的主線程，主線程將html解構造成DOM樹，然后進行樣式計算，根據DOM樹和生成好的樣式生成Layout Tree，通過遍歷Layout Tree生成繪制順序表，接著便離了Layout Tree生成了Layer Tree，然后主線程將Layer Tree和繪制順序信息一起傳給合成器線程，合成器線程按規則進行分圖層，并把圖層分為更小的土塊傳給柵格線程進行柵格化，柵格化完成后，合成器線程會獲得柵格線程傳過來的“draw quads”圖塊信息，根據這信息合成器線上合成了一個合成器幀，然后將該合成器幀通過IPC傳回給瀏覽器進程，瀏覽器進程再傳到GPU進行渲染之后就展示在你的屏幕上了。

??當我們改變一個元素的尺寸位置屬性時，會重新進行樣式計算、布局、繪制以及后面的所有流程——重排

??當我們改變某個元素的顏色屬性時，不會重新觸發布局，但還是會觸發樣式計算和繪制——重繪

• 重排和重繪都會占用主線程 JS也運行在主線程

優化手段

一、requestAnimationFrame()

• requestAnimationFrame()這個方法會在每一幀被調用，通過API的回調，然后我們可以把JS運行任務分成一些更小的任務塊(分到每一幀)
• 在每一幀時間用完前暫停JS執行，歸還主線程，這樣的話在下一幀開始時，主線程就可以按時執行布局和繪制

二、只在合成器線程和柵格線程中運行

• CSS動畫屬性 transform 通過該屬性實現的動畫不會經過布局和繪制，而是直接運行在合成器線程和柵格線程中，所以不會受到主線程中JS執行的影響
• 哪些CSS屬性可以用 transform 來代替: 位置變化、寬高變化（旋轉、3D等）

總結

以上是生活随笔為你收集整理的浏览器是如何运行的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。