科普文一則,說說我對前端技術體系(也稱瀏覽器端技術體系)的認識,希望能讓更多人了解前端,也希望能借此豐富前端開發的大局觀.?

去年我寫了網站性能優化系列文章,看過的朋友會知道,這類文章重點并非介紹各種具體的優化技巧,而是在關注發掘這些優化點的思路和方法.然后介紹給大家多種檢測手段去發現問題,進而有目標的解決問題.所有這些需要我們對有網頁整個生命周期有清晰的認識,對網頁中各種技術極其相互結合的方式有明確的認知.這就回歸到一個更本質的問題:瀏覽器端技術體系是怎樣的.?

想用三言兩語說清前端技術不大可能,但是用一篇不長的文章說清何謂前端,還是可以做到的.因為工作中我常會給后臺開發的同學介紹前臺技術,所以會經常涉及這類話題.?

解析前端,我想需要回答如下幾個問題.?
1.前端涉及幾種技術?分別是做什么的??
2.在前端內部各種技術之間如何整合協作??
3.前端如何和后臺交流??

回答這些問題我會立即丟出前端開發的"七種武器"論,介紹前端主要涉及七種技術分別是什么的同時,重點關注"七種武器"如何對內協作,如何對外交流.(鑒于本文的科普文性質,下面具體介紹中出現的"一切","都是","全部"這類定語可能并非絕對,但可以確定在99%的情況下是正確的)?

一.HTTP:網頁上的一切來自Http請求?
頁面上所有內容都是通過若干Http請求從服務端加載而來.?
第一個請求通常是一份(X)HTML文檔,也就是瀏覽器中地址欄的指向.如圖:?
?????????
(這張圖可以通過Fixfox的Firebug插件,IE的Httpwatch工具,或者Chrome直接按Ctrl+Shift+I得到)?
地址欄中的url通常會包含地址和一些參數,這樣就可以找到對應的后臺服務,同時讓其據這些動態參數來確定輸出內容.?

多個Http請求之間是獨立的.那么其他請求又是由誰觸發的呢??
由瀏覽器觸發!是在瀏覽器解析這第一份(X)HTML文檔的過程中發出,接下來我就將介紹這個過程.?

二.HTML:在瀏覽器中HTML被解析成DOM樹?
HTML文檔是一份不那么嚴謹的XML(文本)文檔.在任意網頁上點擊右鍵,點擊查看源代碼就可以看到.?
瀏覽器按照HTML文檔內容自上而下的解析運行.最終HTML文本被完整的解析成一顆樹,稱DOM樹.?
注意:DOM樹是瀏覽器內一切所依附的根本,是本文的重點,以后也會多次強調.?

總結

以上是生活随笔為你收集整理的浏览器端技术体系概览 -- 前端开发的七种武器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。