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

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

想用三言兩語說清前端技術(shù)不大可能,但是用一篇不長的文章說清何謂前端,還是可以做到的.因?yàn)楣ぷ髦形页o后臺開發(fā)的同學(xué)介紹前臺技術(shù),所以會經(jīng)常涉及這類話題.?

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

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

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。