淺談對瀏覽器的認識

淺談對瀏覽器的認識

在前端開發工做中，瀏覽器就是咱們前端開發者的承載體，處理的全部的頁面都須要瀏覽器中表現。當看到咱們完成的代碼在瀏覽器中出現出來美輪美奐的網站，我老是會感覺到工做的成就感，還有就是能感覺到瀏覽器給咱們生活中帶來的巨大便利、以及它的強大展示能力。

什麼是瀏覽器（網頁瀏覽器）？

網頁瀏覽器（英語：Web Browser，常簡稱爲瀏覽器）是一種用於檢索並展現萬維網信息資源的應用程序。這些信息資源可爲網頁、圖片、影音或其餘內容，它們由統一資源標誌符標識。信息資源中的超連接可以使用戶方便地瀏覽相關信息。

網頁瀏覽器雖然主要用於使用萬維網，但也可用於獲取專用網絡中網頁服務器之信息或文件系統內之文件。

主流網頁瀏覽器有Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。

—— 摘自 【 維基百科】

截止到寫文時間，除了上述的通用瀏覽器，目前市場份額也佔大部分的瀏覽器：

Android WebView

IOS UIWebView

WeChat WebView

---

瀏覽器的主要功能

瀏覽器的主要功能就是向服務器發出請求，在瀏覽器窗口中展現您選擇的網絡資源。這裏所說的資源通常是指 HTML 文檔，也能夠是 PDF、圖片或其餘的類型。資源的位置由用戶使用 URI（統一資源標示符）指定。

瀏覽器解釋並顯示 HTML 文件的方式是在 HTML 和 CSS 規範中指定的。這些規範由網絡標準化組織 W3C（萬維網聯盟）進行維護。 多年以來，各瀏覽器都沒有徹底聽從這些規範，同時還在開發本身獨有的擴展程序，這給網絡開發人員帶來了嚴重的兼容性問題。現在，大多數的瀏覽器都是或多或少地聽從規範。

---

瀏覽器的高層結構

瀏覽器的用戶界面並無任何正式的規範，可是多年來的最佳實踐天然發展以及彼此之間相互模仿，瀏覽器的用戶界面有不少彼此相同的元素。瀏覽器的主要組件爲：

• 用戶界面 - 包括地址欄、前進/後退按鈕、書籤菜單等。除了瀏覽器主窗口顯示的您請求的頁面外，其餘顯示的各個部分都屬於用戶界面。
• 瀏覽器引擎 - 在用戶界面和呈現引擎之間傳送指令。
• 呈現引擎 - 負責顯示請求的內容。若是請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，並將解析後的內容顯示在屏幕上。
• 網絡 - 用於網絡調用，好比 HTTP 請求。其接口與平臺無關，併爲全部平臺提供底層實現。
• 用戶界面後端 - 用於繪製基本的窗口小部件，好比組合框和窗口。其公開了與平臺無關的通用接口，而在底層使用操做系統的用戶界面方法。
• Javascript 解釋器 - 用於解析和執行 JavaScript 代碼。
• 數據存儲 - 瀏覽器須要在硬盤上保存各類數據，常見的有：Cookie、LocalStorage、SessionStorage。

---

瀏覽器-解析器

有兩種基本類型的解析器：自上而下解析器和自下而上解析器。直觀地來講，自上而下的解析器從語法的高層結構出發，嘗試從中找到匹配的結構。而自下而上的解析器從低層規則出發，將輸入內容逐步轉化爲語法規則，直至知足高層規則。

HTML 解析器

• HTML 解析器的任務是將 HTML 標記解析成解析樹。
• HTML 的詞彙和語法在 W3C 組織建立的規範中進行了定義。
• 解析器的輸出「解析樹」是由 DOM 元素和屬性節點構成的樹結構。
• 具備容錯機制，在瀏覽 HTML 網頁時歷來不會看到「語法無效」的錯誤。
• ...

CSS 解析器

• CSS 是上下文無關的語法，可使用簡介中描述的各類解析器進行解析。
• 呈現樹和 DOM 樹的關係，呈現器是和 DOM 元素相對應的，但並不是一一對應。
• 構建呈現樹時，須要計算每個呈現對象的可視化屬性。
• 具備繼承和共享樣式數據。
• ...

---

咱們應該怎麼作？

瞭解瀏覽器的特性後，在咱們的平常開發中應該順應這些瀏覽器的特性，減小瀏覽器解析的運行時間，從而更快看到咱們的頁面，提升頁面的響應速度。

1. 書寫符合 W3C 語法規範的代碼，使用正確的標籤、字符。雖然各自的瀏覽器都有容錯機制，可是咱們仍是應該避免或減小瀏覽器跑着部分的解析。次之，萬一某一天這個容錯機制沒了，或者改了，那。。。
2. 避免過於複雜的標記層次結構，及多層嵌套。應儘量減小結構代碼，這是持續優化的過程。
3. 樣式結構優化，合理書寫選擇器。應避免 div div div div {...} 這種無節操的書寫操做...。
4. 合併公共css代碼。抽離公共的css ，提升耦合度。
5. 優雅降級漸進加強。哪怕現階段有不一樣包自動處理兼容代碼，可是這個思想在書寫代碼的時候應該須要的。
6. 書寫便於閱讀、符合 W3C 語法規範的js。毫不能出現死循環這樣的低級錯誤，必定要測試本身書寫的代碼，對本身的代碼負責。項目中、團隊中，最好定好書寫規範。
7. 儘量減小DOM的操做。實現項目中必然會對DOM進行操做，可是咱們要減小，畢竟每次操做DOM都是重繪。

---

內容參考網上文章整理，僅限我的學習使用：

www.html5rocks.com/en/tutorial…