1. 程式人生 > >從輸入 URL 到頁面載入完成的過程中都發生了什麼事情?

從輸入 URL 到頁面載入完成的過程中都發生了什麼事情?

本文為閱讀筆記,閱讀內容見此:http://fex.baidu.com/blog/2014/05/what-happen/
今天拜讀了大神的博文,本意就是想清晰一下瀏覽器的工作原理,但沒想到大神講解的如此詳細精深,軟硬體結合,對我之前所學習的軟硬體知識都是一個很好的串聯融合。不過內容較多,大致瞭解的話內容過於複雜,所以我做了以下整理。
瀏覽器的工作分為以下幾步:

一、如何啟動瀏覽器

當手指在這個感測器上觸控時,有些電子會傳遞到手上,從而導致該區域的電壓變化,觸控式螢幕控制器晶片根據這個變化就能計算出所觸控的位置,然後通過匯流排介面將訊號傳到 CPU 的引腳上。cpu經過邏輯電路,暫存器等處理訊號,這都是數電模電的知識了。傳到CPU之後,接著就會觸發 CPU 的中斷機制,傳資訊給系統核心。作業系統的監聽程式就可以根據位置確定瀏覽器的連線請求。

二、瀏覽器如何向網絡卡傳送資料

首先是傳送http請求,從應用層看需要的步驟有兩個,一是用DNS查出IP,二是通過Socket傳送資料。得到IP之後,呼叫socket API傳送資料,此時就用到了網路分層協議,應用層,傳輸層,網路層,鏈路層和物理層。層層封裝資料包,物理層是MAC協議。當一臺電腦加入網路時,需要通過 ARP 協議告訴其它網路裝置它的 IP 及對應的 MAC 地址是什麼,這樣其它裝置就能通過 IP 地址來查詢對應的裝置了。最後傳送資料。

三、資料如何從本機網絡卡傳送到伺服器

前面說到呼叫 Socket API 後核心會對資料進行底層協議棧的封裝,接下來啟動 DMA 控制器,它將從記憶體中讀取資料寫入網絡卡。Wi-Fi 網絡卡需要通過 Wi-Fi 路由來與外部通訊,原理是基於無線電,通過電流變化來產生無線電,這個過程也叫「調製」,而反過來無線電可以引起電磁場變化,從而產生電流變化,利用這個原理就能將無線電中的資訊解讀出來就叫「解調」,其中單位時間內變化的次數就稱為頻率,目前在 Wi-Fi 中所採用的頻率分為 2.4 GHz 和 5 GHz 兩種。
無線訊號需要無線路由來調製,因為內網裝置的 IP 都是類似 192.168.1.x 這樣的內網地址,外網無法直接向這個地址傳送資料,所以網路資料在經過路由時,路由會修改相關地址和埠,這個操作稱為 NAT 對映。最後家庭路由一般會通過雙絞線連線到運營商網路的。資料過雙絞線傳送到運營商網路後,還會經過很多箇中間路由轉發,可以通過 traceroute (tracert)命令追蹤路徑。運營商網路內傳輸完成之後需要進入主幹網傳輸,一般採用光纖,又快又準。原文這樣介紹:對於長線的資料傳輸,通常使用光纖作為介質,光纖是基於光的全反射來實現的,使用光纖需要專門的發射器通過電致發光(比如 LED)將電訊號轉成光,比起前面介紹的無線電和雙絞線,光纖訊號的抗干擾性要強得多,而且能耗也小很多。
資料通過光纖最終會進入到伺服器所在的IDC機房,進入IDC內網。接下來光纖中的資料將進入叢集(Cluster)交換機,然後再轉發到機架(Rack)頂部的交換機,最後通過這個交換機的埠將資料發往機架中的伺服器。最後,因為 CPU 處理的是電氣訊號,所以光纖中的光線需要先使用相關裝置通過光電效應將光訊號轉成電訊號,然後進入伺服器網絡卡。資料已經到達伺服器網絡卡了,接著網絡卡會將資料拷貝到記憶體中(DMA),然後通過中斷來通知 CPU。

四、伺服器接收到資料後進行哪些處理

先是進行負載均衡,反向代理,在使用web server中的處理,呼叫一個獨立的程序來處理,很多是進行指令碼處理,比如PHP。接著進行後端解析,處理http請求,很多都是在虛擬機器上執行。最後讀取資料,寫入資料到資料中間層。

五、伺服器返回資料後瀏覽器如何處理

HTTP 請求返回的 HTML 傳遞到瀏覽器後,如果有 gzip 會先解壓,然後接下來最重要的問題是要知道它的編碼是什麼,這個一般瀏覽器會設定,或者有以下幾種方法:
使用者設定,在瀏覽器中可以指定頁面編碼
HTTP 協議中
中的 charset 屬性值
對於 JS 和 CSS
對於 iframe
正確解析了編碼,再JavaScript 的執行。在不同作業系統中都提供了自己的圖形繪製 API。

六、瀏覽器如何將頁面展示出來

前面提到瀏覽器已經將頁面渲染成一張圖片了,接下來的問題就是如何將這張圖片展示在螢幕上。以 Linux 為例,在應用中控制螢幕最直接的方法是將影象的 bitmap 寫入 /dev/fb0 檔案中,這個檔案實際上一個記憶體區域的對映,這段記憶體區域稱為 Framebuffer。需要注意的是在硬體加速下,如 OpenGL 是不經過 Framebuffer 的。顯示主要從內容要LCD控制器,目前 LCD 中通常使用 LED 作為光源,LED 接上電源後,在電壓的作用下,內部的正負電子結合會釋放光子,從而產生光,這種物理現象叫電致發光(Electroluminescence),這在前面介紹光纖時也介紹過。有了光源還得有色彩,在 LED 中通常做法是使用彩色濾光片(Color filter)來將 LED 光源轉成不同顏色。LCD 螢幕上的每個物理畫素點實際上是由紅、綠、藍 3 種色彩的點組成,每個顏色點能單獨控制,每 3 種顏色的濾光片都全亮的時候就是白色,都滅就是黑色,如果你仔細看還能看到有些點並不是完全黑,這是字型上的反鋸齒效果。
通過這 3 種顏色亮度的不同組合就能產生出各種色彩,如果每個顏色點能產生 256 種亮度,就能生成 256 * 256 * 256 = 16777216 種色彩。如何控制這些顏色點的亮度?這就要靠液晶體了,液晶體的特性是當有電流通過時會發生旋轉,從而將部分光線擋住,所以只要通過電壓控制液晶體的轉動就能控制這個顏色點的亮度,目前手機螢幕中通常使用 TFT 控制器來對其進行控制,在 TFT 中最著名的要數 IPS 面板。
這些過濾後的光線大部分會直接進入眼睛,有些光還會在其它表面上經過漫(diffuse)反射或鏡面(specular)反射後再進入眼睛,加上環境光的影響,要真正算出有多少光到眼睛是一個積分問題。