瀏覽器工做原理--分析

在此以前，我一直使用csdn來記錄學習。因此接下來的部分文章都是摘抄自我csdn帳號的文章。

衆所周知，瀏覽器可謂是目前使用率最高的軟件。從 1992年 世界上第一個圖形網頁瀏覽器（ Erwise ）的誕生髮展到如今，市面上主流的瀏覽器有 IE、Firefox、Safari、Chrome及Opera。萬惡的ie果斷已經被微軟放棄，這對於咱們前端程序員來講，簡直是出了一口惡氣！瀏覽器的發展史：請戳這裏。

同一個web頁面在不一樣的瀏覽器中，可能會呈現不一樣的效果甚至會錯亂。這是爲何？這是由於可能該頁面使用了瀏覽器不支持的技術，也有多是分辨率形成的。這就產生了瀏覽器的兼容性問題，高版本不兼容低版本瀏覽器。不一樣的瀏覽器可能使用着不一樣的內核，也有使用相同內核的不一樣瀏覽器，只是改頭換面爲了更加符合用戶的需求。

瀏覽器根據訪問的地址（網址）來肯定信息資源的位置，並將用戶感興趣的資源讀取出來，而後解析html文件，把圖像、文字或者多媒體信息展示出來造成了用戶瀏覽的網頁。

web服務器對靜態網頁的處理過程：

用戶經過瀏覽器向服務器發出的靜態網頁請求–>web服務器找到這個網頁–>分析其中相關聯的各類文件（如圖片，css，js等等）–>找到這些相關聯的文件–>一併傳回到瀏覽器的緩衝區–>瀏覽器進行解析執行文件–>瀏覽器呈現網頁內容

瀏覽器的主要組件包括：

1. 用戶界面 - 包括地址欄、前進/後退按鈕、書籤菜單等。除了瀏覽器主窗口顯示的你請求的頁面外，其餘顯示的各個部分都屬於用戶界面。
2. 瀏覽器引擎 - 在用戶界面和渲染引擎之間傳送指令。
3. 渲染引擎 - 負責顯示請求的內容。若是請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。
4. 網絡 - 用於網絡調用，好比 HTTP 請求。其接口與平臺無關，併爲全部平臺提供底層實現。
5. 用戶界面後端 - 用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。
6. JavaScript 解釋器 - 用於解析和執行 JavaScript 代碼，好比chrome的javascript解釋器是V8。
7. 數據存儲 - 這是持久層。瀏覽器須要在硬盤上保存各類數據，例如 Cookie。新的 HTML 規範 (html5)定義了「網絡數據庫」，這是一個完整（可是輕便）的瀏覽器內數據庫。

瀏覽器的物理文件傳輸

咱們都知道瀏覽器只是下載到本地來瀏覽網頁的一個軟件！那麼既然是軟件，就有軟件的詬病。軟件的算法、代碼的質量、所使用的內核、安全性的設置等等。都會影響着瀏覽器的運行速度，這就是爲何相同頁面在不一樣瀏覽器下面運行效率不同問題，固然也不排除其餘因素。因此這就要求咱們代碼質量必定得提升。

咱們瀏覽的全部網頁說透徹一點，其實就是文件的請求，而且是真實文件。這裏拿ie和chrome舉例。

咱們每安裝一個瀏覽器以後，都會在電腦裏面生成一個該瀏覽器用來存放文件的臨時文件夾。每請求一個網頁，該網頁全部使用到的全部文件、圖片、視頻等資源都會緩存到這個臨時文件夾，這就是爲何第二次訪問相同網頁比第一次要快的緣由。

如今咱們來找找這個臨時文件夾的位置！

（ie）打開ie瀏覽器在設置裏面找到intemet選項–>常規–>設置–>intemet臨時文件–>查看文件。這時候咱們就能找到ie的臨時文件夾。刪除裏面的全部文件，而後再訪問頁面，再刷新這個文件夾，咱們會發現這個文件夾又多了一堆文件，而且裏面的文件都能在該網頁上找到。

chrome也是如此，這裏介紹一下chrome的臨時文件查找方法。

在Chrome瀏覽器地址欄中輸入chrome://version,打開全部URL列表頁面–>找到「我的資料路徑」對應的磁盤。哪裏就是谷歌的臨時文件夾，不一樣的是谷歌的文件是分開放的，這裏就不作細節描述了。

看到這裏，總結出來就是一句話！
服務器上存放着網頁的相關文件，包括html文件、css文件、js文件、圖片等。當咱們打開瀏覽器，輸入網址，咱們的計算機就會對這些文件發出HTTP請求。服務器收到請求以後，會把這些文件經過HTTP協議，傳輸到咱們的計算機中（保存到了剛纔那個臨時文件夾中）。這些文件，將在咱們計算機本地的瀏覽器中，進行渲染、呈遞。咱們平時上網的時候，是有真實的、物理的文件傳輸的！

我是貓哆哩，一個不成熟的程序員！