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