《現代前端技術解析》第一章讀書筆記（未完成）

　　今天是2017年6月26日，星期一，開始從第一章看起。第一章主要講的是前端技術的發展概況以及一些必須掌握的瀏覽器基礎知識與經常使用開發技術。

　　頁面內容多而複雜，爲了保證開發效率，咱們能夠藉助符合特定場景的前端框架來提升開發效率，例如使用JQuery丶MVVM等開發框架，對經常使用的 HTML DOM 操做進行高效封裝，大大簡化開發工做量，提升效率。

　　前端項目代碼愈來愈多丶結構愈來愈複雜，咱們必須考慮用模塊化和組件化的思路來管理。所謂的模塊化和組件化是指採用代碼管理中分治的思想，將複雜的代碼結構拆分紅多個獨立丶簡單丶解耦合的結構或文件分開管理，使項目結構更加清晰。若是頁面的內容增多，咱們能夠藉助 Web Component（HTML 5的一種組件化規範），註冊一個<news>的標籤來直接引入使用，而後再使用<news>這個標籤來代替上面組件的內容進行管理維護，頁面中其餘的標籤內容也能夠這樣來處理。

　　頁面加載的內容不少，爲了儘快將網頁內容顯示給客戶，咱們能夠經過異步的方式來實現，即將一部份內容先展現給用戶，而後根據用戶的操做，異步加載用戶須要的其餘內容，避免用戶長時間等待。

　　爲了限制頁面內圖片的大小以保證頁面快速展現，就須要對圖片進行優化處理，如使用更高壓縮比 webp 格式的圖片，在圖片質量不下降的狀況下，能夠大幅度減少圖片的網絡流量消耗，提升圖片的加載速度。

　　對於重複打開的頁面，使用 文件緩存 能夠使瀏覽器再也不向服務器請求重複的內容，這樣能夠大幅度提升網頁資源的加載速度。並且幸運的是，瀏覽器默承認以支持文件緩存，對於一段時間內瀏覽器的重複請求，服務器可能會返回 HTTP 的 304 狀態碼或者不發送請求，讓瀏覽器直接從本地讀取內容。

　　前端結構的開發實現模式前後經歷了 靜態黃頁時期丶服務器組裝動態網頁數據時期丶後端爲主的 MVC 模式時期丶先後端分離時期丶純前端 MV* 爲主和中間層直出時期丶前端 Virtual DOM 丶MNV*丶先後端同構時期。前端從無到有且發展到如今的不變宗旨是，一直持續在以效率和質量爲最終導向的道路上探索前進，而且將來關於 Web 技術效率和質量這兩方面的探索仍會有增無減。

 

 

　　接下來談論一個比較常見的問題：從咱們打開瀏覽器輸入一個網址到頁面展現網頁內容的這段時間內，瀏覽器和服務端都發生了什麼事情？ 咱們直接來看一個相對簡潔但比較清晰的過程描述。

• 　　在接受到用戶輸入的網址後，瀏覽器會開啓一個線程來處理這個請求，對用戶輸入的 URL 地址進行分析判斷，若是是 HTTP 協議就按照 HTTP 方式來處理。
• 　　調用瀏覽器引擎中的對應方法，好比 Web View 中的 loadUrl 方法，分析並加載這個 URL 地址。
• 　　經過 DNS 解析獲取該網址地址對應的 IP 地址，查詢完成後連同瀏覽器的 Cookie丶userAgent 等信息向網站目的 IP 發出 GET 請求。
• 　　進行 HTTP 協議會話，瀏覽器客戶端向 Web 服務器發送報文。
•       入網站後臺上的 Web 服務器處理請求，如 Apache丶Tomcat丶Node.js 等服務器。
•       進入部署好的後端應用，如 PHP丶Java丶Javascript丶Python 等後端程序，找到對應的請求處理邏輯，這期間可能會讀取服務器緩存或查詢數據庫等。
•        服務器處理請求並返回響應報文，此時若是瀏覽器訪問過該頁面，緩存上有對應資源，會與服務器最後修改記錄對比，一致則返回 304 ，不然返回 200 和對應的內容。
•        瀏覽器開始下載 HTML  文檔（響應報頭狀態碼爲 200 時）或者從本地緩存讀取文件內容（瀏覽器緩存有效或響應報頭狀態碼爲 304  時）。
•        瀏覽器根據下載接收到的 HTML 文件解析結構創建 DOM 文檔樹，並根據 HTML 中的標記請求下載指定的 MIME 類型文件 （如 CSS丶Javascript腳本等），同時設置緩存等內容。
•        頁面開始解析渲染 DOM ，CSS 根據規則解析並結合 DOM 文檔樹進行網頁內容佈局和繪製渲染，Javascript 根據 DOM API 操做 DOM ,並讀取瀏覽器緩存丶執行事件綁定等，頁面整個展現過程完成。

　　整個過程當中使用到了較多的瀏覽器功能，如用戶地址欄輸入框丶網絡請求丶瀏覽器文檔解析丶渲染引擎丶Javascript 執行引擎丶客戶端存儲等。

　　一般咱們認爲瀏覽器主要由七部分組成：用戶界面丶網絡丶Javascript 引擎丶渲染引擎丶UI 後端丶Javascript 解釋器和持久化數據存儲。以下圖所示：　　做爲前端開發者，咱們須要重點理解渲染引擎的工做原理，靈活運用數據持久化存儲技術，由於實際的開發工做中這部分的操做比較多，而其餘幾個部分都是由瀏覽器決定的，開發者控制的部分相對較少。渲染引擎在瀏覽器中主要用於解析 HTML 文檔和 CSS 文檔，而後 將 CSS 規則應用到 HTML 標籤元素上，並將 HTML 渲染到瀏覽器窗口中以顯示具體的 DOM 內容。