資訊專欄INFORMATION COLUMN
摘要：渲染引擎渲染引擎也稱為瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每個瀏覽器的核心部分。
瀏覽器的結構
瀏覽器的主要組件包括：
用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個部分都屬于用戶界面。
用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應用無關的通用接口，而在底層使用操作系統的用戶界面方法。
瀏覽器引擎——在用戶界面和渲染引擎之間傳遞指令。
渲染引擎——負責顯示請求的內容。如果請求的內容是HTML,它就解析HTML和css內容，并將解析后的內容顯示在窗口上。
網絡——用于網絡調用。比如http請求。其接口與web應用無關，并為所有web應用提供底層實現。
JavaScript解釋器。用于解析和執行 JavaScript 代碼，比如chrome的javascript解釋器是V8。
數據存儲。這是持久層。瀏覽器需要在硬盤上保存各種數據，例如cookie。新的HTML5規范定義了“網絡數據庫”，這是一個完整的且輕便的瀏覽器內數據庫。
值得注意的是，不同于大多數瀏覽器，chrome瀏覽器為每個標簽頁都分配了各自的渲染引擎實例，每個標簽頁都是一個獨立的進程（即每個標簽頁都在獨立的“沙箱”內運行，在提高安全性的同時，一個標簽頁面崩潰也不會導致其他的標簽頁被關閉）
瀏覽器進程與線程進程是cpu資源分配的最小單位（是能擁有資源和獨立運行的最小單位）
線程是cpu調度的最小單位（線程是建立在進程的基礎上的一次程序運行單位，一個進程可以有多個線程）
瀏覽器是多進程的，有一個主控進程，以及每一個tab頁面都會新開一個進程（某些情況下多個tab會合并進程）
瀏覽器的進程為以下幾種：
Browser進程：瀏覽器的主進程（負責協調、主控），只有一個
第三方插件進程：每種類型的插件對應一個進程，僅當使用該插件的時候才創建
GPU進程：最多一個，用于3D繪制
瀏覽器渲染進程（內核）：默認每個tab頁面一個進程，互不影響，控制頁面渲染，腳本執行，事件處理等（有時會優化，如多個空白tab會合成一個進程）
每一個tab頁面可以看作是瀏覽器內核進程，然后這個進程是多線程的，他又幾大類子線程：
GUI線程
注意：GUI渲染線程與js引擎線程是互斥的，當js引擎執行時GUI線程會被掛起（相當于被凍結），GUI更新會被保存在一個隊列中等到Js引擎空閑時立即被執行
JS引擎線程
js引擎一直等待著任務隊列中任務的到來，然后加以處理，一個tab頁中無論什么時候都只有一個js線程在運行js程序
事件觸發線程
定時器線程
setInterval與setTimeout所在的線程
瀏覽器定時器計數器并不是由js引擎計數的，（因為js引擎時單線程的，如果處于阻塞線程狀態就會影響計時的準確）
因此通過單線程來計時并觸發定時（計時完畢后，添加到事件隊列中，等待js引擎空閑后執行）
注意，W3C在HTML標準中規定，規定要求setTimeout中低于4ms的時間間隔算為4ms。
網絡請求線程
在XMLHttpRequest在連接后是通過瀏覽器新開一個線程請求
將檢測到狀態變更時，如果設置有回調函數，異步線程就產生狀態變更事件，將這個回調再放入事件隊列中。再由JavaScript引擎執行。
每次網絡請求時都需要開辟多帶帶的線程進行，譬如如果URL解析到http協議，就會新建一個網絡線程去處理資源下載。因此瀏覽器會根據解析出得協議，開辟一個網絡線程，前往請求資源
進程之間的通信
五種通訊方式總結：
管道：速度慢，容量有限，只有父子進程能通訊
FIFO：任何進程間都能通訊，但速度慢
消息隊列：容量受到系統限制，且要注意第一次讀的時候，要考慮上一次沒有讀完的數據的問題
信號量：不能傳遞復雜消息，只能用來同步
共享內存區：能夠很容易控制容量，速度快，但要保持同步，比如一個進程在寫的時候，另一個進程要注意讀寫的問題，相當于線程種的線程安全，當然，共享內存區同樣可以用作線程間通訊，不過沒有這個必要，線程間本來就已經共享了統一進程內的一塊內存。
由于瀏覽器每一個tab頁面即為一個進程，頁面間的通信即為進程的通信
window.open(url,name,featrues,replace)
url:(可選)為空則打開空白新窗口
name：（可選）子窗口的句柄。聲明新窗口的名稱。若名字已存在則在指定窗口打開。僅當同源或該腳本打開了這個窗口才可以通過名字進項指定窗口
Features (可選) 聲明新窗口要顯示的標準瀏覽器的特征(必須是打開空白窗口)。
Replace(可選) 為true的話則替換瀏覽歷史中的當前條目(返回回不去)，默認為false,創建新條目。
渲染引擎也稱為瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每個瀏覽器的核心部分。
常見的瀏覽器渲染引擎有兩種：一是firefox使用的Gecko，這是Mozilla公司“自制”的渲染引擎。另一個是safari和chrome使用的都是webkit。
渲染流程：
渲染引擎一開始會從網絡層獲取請求的文檔的內容，通常以8k分塊的方式完成，獲取了文檔內容之后，渲染引擎開始正式工作
渲染引擎解析HTML文檔，并將文檔中的標簽轉化為dom節點樹，同時，它會解析外部css文件以及style標簽中的樣式數據。這些樣式信息連同HTML中的可見內容一起，被用于構建另一顆樹——渲染樹（RenderTree）。
渲染樹由一些帶有視覺屬性（如顏色、大小等）的矩形組成，這些矩形將按照正確的順序顯示在屏幕上。
渲染樹構建完畢之后，將會進入“布局”處理階段，即為每一個節點分配一個屏幕坐標。再下一步就是繪制，即遍歷renderTree，并使用UI后端層繪制每個節點。
注意：這個過程時逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能的早的將內容呈現在屏幕上，并不會等到所有的Html都解析完成之后再去構建和布局renderTree。它時解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114207.html
摘要：在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流。圖片可以點擊查看原圖進行觀看 做前端的同學都知道，前端技術目前需要學習的知識太多了，各種框架，技術層出不窮，但只要我們自己有自己的一套知識體系，打好基礎，再學習新東西就會很容易。在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流...
摘要：在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流。圖片可以點擊查看原圖進行觀看 做前端的同學都知道，前端技術目前需要學習的知識太多了，各種框架，技術層出不窮，但只要我們自己有自己的一套知識體系，打好基礎，再學習新東西就會很容易。在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流...
摘要：在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流。圖片可以點擊查看原圖進行觀看 做前端的同學都知道，前端技術目前需要學習的知識太多了，各種框架，技術層出不窮，但只要我們自己有自己的一套知識體系，打好基礎，再學習新東西就會很容易。在這里，我根據瀏覽器的工作原理整理了一套自己的知識體系，方便自己學習，有很多不足的地方，希望大家多多交流...
摘要：每種可被解析的格式必須具有由詞匯及語法規則組成的特定的文法，稱為上下文無關文法。解析解析器，每個標識都有特定的正則進行解析。開發者可以將腳本標識為，以使其不阻塞文檔解析，并在文檔解析結束后執行。 瀏覽器組成 用戶界面-地址欄、按鈕之類的 瀏覽器引擎-用來查詢及操作渲染引擎的接口 渲染引擎-顯示請求的內容 網絡-進行網絡請求 ui后端-用來滬指選擇框、對話框的基本組件 js解析器 數據...
摘要：渲染引擎渲染引擎也稱為瀏覽器內核，主要時在瀏覽器窗口中顯示所請求的內容，這是每個瀏覽器的核心部分。 瀏覽器的結構 瀏覽器的主要組件包括： 用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應用無關的通用接口，而在底層使用操作系統的用戶...
閱讀 2027·2023-04-26 01:33
閱讀 1659·2023-04-26 00:52
閱讀 1034·2021-11-18 13:14
閱讀 5392·2021-09-26 10:18
閱讀 2900·2021-09-22 15:52
閱讀 1488·2019-08-29 17:15
閱讀 3016·2019-08-29 16:11
閱讀 1037·2019-08-29 16:11
