溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
?
?
目錄
前端技術：... 1
HTML：... 1
瀏覽器：... 1
瀏覽器技術：... 2
CSS：... 2
動態網頁技術：... 3
網頁布局：... 3
同步&異步：... 4
同步：... 4
異步：... 4
前端開發：... 5
硬件發展：... 5
?
?
?
?
HyperText Markup Language，超文本標記語言，它不同于編程語言；
超文本就是超出純文本的范疇，如描述文本的顏色、大小、字體等信息，或使用圖片、音頻、視頻等非文本內容；
?
HTML由一個個標簽組成，這些標簽各司其職，有的提供網頁信息，有的負責圖片，有的負責網頁布局；
?
超文本需要顯示，就得有軟件能夠呈現超文本定義的排版格式，如顯示圖片、表格，顯示字體的大小、顏色，這個軟件就是browser；
?
超文本需要共享，產生了HTTP協議；
?
?
1980年，Tim Berners-Lee為CERN（歐洲核子研究中心，當時歐洲最大的互聯網節點）設計基于超文本思想的ENQUIRE項目，以促進科研人員之間的信息共享和更新。
1989年，他編寫了《信息化管理：建議》，并構建基于internet的hypertext系統，并在CERN開發了world wide web項目，打造了世界上第一個網站，于1991-8-6正式上線；
?
Tim Berners-Lee于1990年發明了第一個瀏覽器，還發明了HTTP協議；
?
1994年，在MIT他創建了W3C（萬維網聯盟），負責萬維網持續發展，他提出W3C的標準應該基于無專利權、無版稅；
?
Marc Andreessen于1993年發明了Mosaic瀏覽器，他看到了這個技術的前景，不久后成立自己的公司——netscape；
1994年，發布了Netscape Navigator瀏覽器，席卷全球；
?
1995年，MS發布了IE，開啟第一次瀏覽器大戰，最終IE后來居上；
?
Netscape公司成立了Mozilla組織，使用Gecko引擎基于開源技術開發了新的瀏覽器，最終這個瀏覽器更名為firefox，發布于2004年；
?
Apple的Safari于2003年發布第一個測試版；
?
2008年google的chrome瀏覽器帶著v8引擎橫空出世；
?
?
browser是一種特殊的客戶端，能夠基于http(s)、ftp等協議和web服務器進行交互，呈現網頁內容的軟件；
?
可簡單的認為browser分為2部分：
外殼，外殼提供用戶交互的界面；
內核，提供html、圖像的渲染引擎、提供DOM編程接口、提供javascript引擎、提供瀏覽器內建對象；
?
排版引擎 | 瀏覽器 | 說明 |
Trident | IE | 早期未按照W3C標準實現，兼容性較差，IE9之后內核升級已符合標準 |
Gecko | firefox | C++開發，可支持復雜的網頁效果，提供強大的瀏覽器擴展接口 |
WebKit | Safari、Chrome | 基于KHTML；網頁瀏覽速度較快，但網頁容錯性不高 |
Presto | Opera | 目前公認的網頁瀏覽速度最快的內核，但犧牲一部分兼容性 |
?
國內browser，一般都采用了以上的一個或兩個內核加上外殼實現；
?
js引擎，不同瀏覽器內核中用了不同的js引擎；
常見的js引擎有JScript、TraceMonkey(firefox)、V8等，這些引擎差異不小，實現ECMA標準不同，甚至有不按照標準實現的；
?
?
cascading style sheets，層疊樣式表；
HTML本身為了格式化顯示文本，但當網頁呈現在大家面前時，更多需求讓HTML提供更多樣式能力，使得HTML變得越來越臃腫，促使了CSS的誕生；
?
1994年，W3C成立，CSS設計小組成員加入W3C，并努力研發CSS的標準，MS最終加入；
1996-12，發布CSS1.0；
1998-5，發布CSS2.0；
?
CSS3采用了模塊化思想，每個模塊都在CSS2基礎上分別增強功能，所以這些模塊是陸續發布的；
?
不同廠家的browser使用的引擎，對CSS的支持不一樣，導致網頁布局、樣式在不同browser上不一樣，因此，想要保證不同用戶使用不同browser看到的網頁效果一樣，變得非常困難；
?
?
js的引入使得browser可顯示動態的效果，但這不是動態網頁；
?
發明web技術的初衷是為了分享文檔，這些內容是靜態的（寫好的不變的文件），通過url定位到這些文檔，將內容下載到browser上，由browser呈現；
?
互聯網的發展，網民的需求增加，大家希望提供交互式訪問，用戶提交需求，服務端找到需求匹配的資源并發回瀏覽器端顯示，這就是動態網頁；
?
動態網頁，指網頁的內容是動態的，url不變，里面的內容變化，如訪問一個查詢頁面，提交的關鍵字不同，提交到后臺查詢并展示；
?
動態網頁，表現的是browser端內容的變化，而本質上它是一種服務端動態網頁技術server-side dynamic web page；
?
最早誕生的動態網頁技術有：ASP、JSP、PHP等，后來幾乎所有流行的高級語言都提供了開發動態網頁的能力；
?
?
早期的網頁只需要標題，使用<P>標簽分段；
?
來有人大量使用表格標簽，可做好很好的內容布局，也出現結構化的布局方案，但隨著頁面內容的堆積，出現了成百上千個表格嵌套的情況，browser繪制很慢；
?
后來出現了div+css布局風格，舍棄了表格，加上js，使得前后端開發分離，而且可做到很好的自適應布局，如流式瀑布一樣布局（https://www.guokr.com/scientific/）；
?
?
早期，網頁就是一頁頁的文本，沒什么圖片、樣式；
后來，互聯網時代到來，網頁的內容越來越大；
?
瀏覽器渲染HTML，需要先下載CSS并加載，為的是好渲染網頁，之后，下載網頁內容，并逐步渲染，構建DOM樹，加載js腳本并執行，js可能需要修改DOM網頁就要重新渲染；
如果js放在網頁head中，還需要等待js下載并加載；
圖片使用<img>標簽，是發起新的請求的，如果圖片返回，需要重新繪制網頁；
?
好不容易，一張網頁繪制完畢，用戶提交了請求，就是想看到查詢的結果，服務器響應到來后是一個全新的頁面內容，哪怕url不變，整個網頁都需要重新渲染，如用戶填寫注冊信息，只是2次密碼不一致，提交后，整個注冊頁面重新刷新，所有填寫項目重新填寫（有辦法讓用戶減少重填），這種交互非常不友好；
從代價的角度看，就是為了注冊的一點點信息，結果返回了整個網頁內容，不但浪費了帶寬，還需要瀏覽器重新渲染網頁，太浪費資源了；
?
上面這些請求的過程，就是同步過程，用戶發起請求，頁面整個刷新，直至服務器端響應的數據到來并重新渲染；
?
1996年，MS實現了iframe標簽，可在一個網頁使用iframe標簽，局部異步加載內容；
1999年，MS推出異步數據傳輸的ActiveX插件技術，太笨重了，但也火了很多年，有一個組件XMLHttpRequest被大多數瀏覽器支持；
?
AJAX，asynchronous javascript and xml，異步javascript和xml，使用XMLHttpRequest組件，結合js，數據格式采用xml，將這三者結合，實現網頁的異步請求；
ajax是一種技術的組合，技術的重新發現，而不是發明，但是它深遠地影響了整個web開發；
?
2005年，google在Gmail和地圖中應用，使它大受歡迎并推廣開來；
?
有了異步請求，就可動態的從瀏覽器發起請求到服務器端，服務器端返回響應的數據封裝成XML（json）返回給瀏覽器，瀏覽器只需要使用js把內容加入到DOM中，局部渲染就可以了，這個過程中，整個網頁不用重新刷新，只需要局部動態改變即可；
?
?
早期前端開發使用網頁三劍客：dreamweaver、firework、flash；
MS的有frontpage；
?
不管使用什么工具，都不能改變js兼容、css兼容、瀏覽器版本兼容的問題，非常頭疼；
?
2006年jQuery庫出現，有了JS框架，抹平了平臺差異，基于它產生眾多的插件，前端開發終于輕松了些；
2008年，V8引擎伴隨著chrome瀏覽器發布；
2009年，ES5標準發布；
2009年，Nodejs發布，服務器端也可以使用JavaScriptb ;
2009年，AngularJS誕生，之后被google收購；
2010年，Backbone.js誕生；
2011年，React和ember誕生，React于2013年5月開源；
2014年，國人尤雨溪的Vue.js誕生；
2014年，HTML5標準發布；
?
前端工具和框架越來越多，前端開發已經不是隨便使用一個什么文本編輯器就可完成的了，如果使用框架，需要很多工具的配合，配置好一個開發環境非常重要；
?
注：
AngularJs、React、Vue.js這三個前端框架類似py的web框架Django、Flask、Tornado；
?
?
最初，網頁就是簡單的文本，計算機輕松勝任；
后來，網頁對多媒體的支持、動態效果的支持，都需要使用大量的cpu、內存資源，甚至是顯卡的渲染能力；
所以，個人pc需要不斷升級，否則瀏覽網頁很困難；
?
移動互聯網到來的早期，手機看的網頁，都需要單獨處理；
手機屏幕小、cpu弱、內存小，能看的網頁純文本加小圖，這樣產生的流量小，2G時代談不上網速；
?
2007年，第一代iphone誕生，2008年安卓手機誕生，3G的移動互聯網時代到來了；
手機硬件水平不斷提升，手機的開發平臺可以讓眾多開發者開發app，用戶可下載安裝使用這些app；
對于開發者來說，開發就是個問題了，是不是需要開發一套iphone版本、再開發一套安卓、再開發一套網頁的版本？
?
2013年，中國進入4G時代，手機硬件水平也得到了很大的提升；
眾多平臺思考的是，能夠有一套架構，解決所有前端問題，還是最通用的網頁+js；
?
如今的前端開發，已不是以前的幾個js文件、幾百行代碼了，為了適應需求，新框架、新編程模式不斷涌現，這些工具都大大方便了協作開發，同時解決平臺兼容性問題；
?
?
?
?
?
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
