了解網路背後的運作原理與瀏覽器的基本渲染機制Web ...

了解網路背後的運作原理與瀏覽器的基本渲染機制Web Application ... Client-Server Framework & Internet 用戶與伺服器架構& 網際網路. HomeNotificationsListsStoriesWrite了解網路背後的運作原理與瀏覽器的基本渲染機制WebApplication當我們在瀏覽器搜尋任何網址，按下搜尋、到網頁回傳結果，其中背後經歷了什麼？這篇文章記錄我自己內化的知識、對網頁的理解，希望能幫助未來的我還有其他對網路運作有興趣的人。

Source:BrendanFortuner認識一些網頁運作過程中重要的名詞，建立基本知識Client-ServerFramework&Internet用戶與伺服器架構&網際網路Client:用戶指的是大眾任何可以聯網的電子產品，例如：手機、電腦、平板。

用戶可以透過網路連線，瀏覽或享受軟體的所提供的服務(如Youtube,Facebook,Netflix…etc)Server:伺服器相較用戶端就比較難懂一些，可以把它想成一間智慧倉庫，倉庫裡存放了製作好的網頁、軟體、應用程式。

於是，用戶便可以向倉庫發出請求，告訴他想要的東西，例如：我想要“Youtube”，倉庫便會把“Youtube”送到用戶端的面前，也就是瀏覽器。

連接Client與Server的橋樑就是網路(Internet)，讓雙方的設備可以互相傳遞訊息、資料，來回溝通。

Source:https://commons.wikimedia.org/wiki/File:Client-server-model.svgHyperTextTransferProtocol,DomainNameServer&InternetProtocolAddress超文本傳輸協定、域名系統&網路協定位址HyperTextTransferProtocol:簡稱HTTP，是網路設備間相互溝通的語言，就像我們依靠中文來交流訊息。

Client與Server之間的語言就是HTTP。

InternetProtocolAddress:縮寫為大家熟悉的IPAddress，是由四個數字所組成的序列，可用十進位或十六進位表示。

IP網址就像是店家地址是專門給電腦設備讀取，每個網站有獨一無二IP網址，例如：google.com的IP網址為172.217.160.110。

DomainNameServer:簡稱DNS，相較難懂難記的IP網址，域名就是給人讀的，如同前面提到的google.com就是域名。

DNS就像是一本通訊簿，記載網站IP網址與域名，而域名與網址為一對一的關係。

TransmissionControlProtocol,Packet&Router傳輸控制協定、封包&路由器TranmissionControlProtocol:簡稱TCP，為屬於OSI模型中的傳輸層。

簡單來說TCP就像是來回乘載的工具，他會想盡辦法把用戶想上傳的資料送到伺服器或者是從伺服器下載的資料送到用戶眼前。

例如：用戶想要瀏覽youtube網頁，伺服器就會找出youtube的html,css,js,img&JSON相關的檔案，並請TCP運送給用戶。

Packet:封包指的是網路資料經過分批打包準備被運送前的過程。

TCP在運送資料的方式也一樣有容量限制，稱為最大傳輸單元(MaximumTransmissionUnit，這部分探討到OSI的網路架構，先不多著墨，可以參考wiki)。

根據網路基礎設施不同，最大傳輸單元也不同，通常大多數人用的網路，最大傳輸值為1500bytes。

因此，一張1.5mb的照片會變成大約1000個封包（1.5*1024*1024/1500=1048）。

Router：前面這些封包在網路的是界裡要怎麼準確到達用戶端呢？這時候路由器就像一個交通監控中心，他會看看封包上的IP位址，並指揮封包走最適合的路線，避開「塞車」或是死路。

最後，這些封包可能會經過不同的旅程到達用戶端並結合。

小結：當用戶搜尋facebook，用戶端便發送了請求給DNS伺服器，於是DNSServer中找到facebook.com相對應的IP位址31.13.87.1，並把這個網址回傳給用戶。

用戶於是對31.13.87.1發出HTTP請求，facebook的伺服器收到請求後，透過TCP/IP與用戶建立傳輸管道，接著把相關的html,css,js檔案封包，並在路由器的指示下，送到客戶的流覽器。

接下來，要來看看瀏覽器(Browser)是怎麼解析這些收到的檔案，並渲染在用戶眼前。

通常一個瀏覽器通常會包含渲染引擎(RenderingEngine)來呈現畫面與JavaScriptEngine(JSEngine)來與網頁互動，例如Chrome使用的Webkit與V8分別作為渲染與JavaScript引擎。

Source:https://github.com/faressoftSource:hannahpunBrowser透過渲染引擎來呈現網頁畫面的過程稱為：關鍵渲染路徑(CriticalRenderPath)，有以下五個步驟:Html透過Parser解析成DOMTree（深入瞭解Tree是什麼）Css透過Parser解析成CssOMTree執行JavaScript兩者相疊成為RenderTree，RenderTree包含了內容與樣式Layout計算版面配置，例如：width,height,margin&addingPaint:最後將上述所提到的RenderTree根據Layout渲染在Browser的畫面上大家這裡可能會想那JavaScript的檔案中可能會更動html,css中的動態渲染或樣式風格更動的這些程式碼會在上方流程圖的哪裡運行。

其實通常在產生DOMTree與CssOMTree時，Browser會一併執行JavaScript來檢視Tree的結構有沒有受影響。

下圖為完整機制流程圖，看似很多步驟，但Browser能在幾秒甚至是毫秒之間完成所有任務，真心覺得這些引擎的作者還有網頁開發者特別猛！Source:eommoonjoo這篇文章到這裡結束，如果有錯誤或問題，還請見諒，也請不吝嗇提出。

除此之外，針對網頁的渲染細節步驟，網路上有許多強者解釋非常清楚，我也是從他們的解說中慢慢理解其中的過程，我把寫這篇筆記所參考到的資料都列在下方，有興趣的人可以深入研究。

參考資料[熱門面試題]從輸入網址列到渲染畫面，過程經歷了什麼事？[WEB]從輸入網址列到渲染畫面，過程經歷了什麼事情？MDN:HowtheWebworksMDN:IntroductiontotheserversideMDN:Whatisawebserver?MDN:Client-ServerOverview深入理解網頁架構：DOMJS原力覺醒Day25—CRP:關鍵渲染路徑增進效能從了解瀏覽器開始—關鍵渲染路徑浏览器的工作原理：新式网络浏览器幕后揭秘HowTheWebWorks—TheBigPicturewiki:TransmissionControlProtocolwiki:OpenSystemsInterconnectionmodel(OSImodel)MorefromDinjerChangFollowLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableGetstartedDinjerChangFollowRelated4ColorGeneratorToolsUsedbyWebDevelopersLearnhowtobuildLightningWebComponentsIMPORTANTNOTESHowtouseLorem.spaceforgeneratingrandomimageplaceholderswithyourlocalimagesWebDevelopmentCompleteGuide   AreyoulookingforaCompleteWebDevelopmentGuide?HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable