原文轉(zhuǎn)自https://www.cnblogs.com/kidney/p/6079530.html
從靜態(tài)走向動(dòng)態(tài)
1994年可以看做前端歷史的起點(diǎn)，
這一年10月13日網(wǎng)景推出了第一版Navigator吗讶；
這一年酌摇，Tim Berners-Lee創(chuàng)建了W3C；
這一年小槐，Tim的基友發(fā)布了CSS他挎。
還是這一年，為動(dòng)態(tài)web網(wǎng)頁(yè)設(shè)計(jì)的服務(wù)端腳本PHP以及筆者本人誕生丙唧。
萬(wàn)維網(wǎng)（WWW）是歐洲核子研究組織的一幫科學(xué)家為了方便看文檔、傳論文而創(chuàng)造的觅玻，這就是為什么Web網(wǎng)頁(yè)都基于Document想际。Document就是用標(biāo)記語(yǔ)言+超鏈接寫成的由文字和圖片構(gòu)成的HTML頁(yè)面，這樣的功能已經(jīng)完全滿足學(xué)術(shù)交流的需要溪厘，所以網(wǎng)頁(yè)的早期形態(tài)和Document一樣胡本，完全基于HTML頁(yè)面，并且所有內(nèi)容都是靜態(tài)的畸悬。
隨著網(wǎng)頁(yè)從學(xué)術(shù)機(jī)構(gòu)走向公眾社會(huì)侧甫，網(wǎng)頁(yè)承載的功能便超出了學(xué)術(shù)范圍而變得愈加豐富，因此早期網(wǎng)頁(yè)的局限性也逐漸顯露出來(lái)蹋宦。
第一披粟，所有的網(wǎng)頁(yè)都基于HTML頁(yè)面，因?yàn)闆](méi)有任何手段可以控制局部?jī)?nèi)容的顯示和隱藏冷冗，因此任何局部的變化哪怕只多出一個(gè)標(biāo)點(diǎn)符號(hào)守屉，都只能重新下載一個(gè)新的頁(yè)面。
第二贾惦，計(jì)算任務(wù)只能在服務(wù)端實(shí)現(xiàn)胸梆。由于網(wǎng)速限制，與服務(wù)器通信的過(guò)程是非常緩慢的须板，并且此過(guò)程是同步阻塞的碰镜，于是會(huì)出現(xiàn)這樣的場(chǎng)景：用戶提交一個(gè)表單，然后整個(gè)頁(yè)面消失习瑰，瀏覽器呈現(xiàn)白屏绪颖，經(jīng)過(guò)漫長(zhǎng)的等待，瀏覽器渲染出一個(gè)和之前一模一樣的頁(yè)面，只不過(guò)輸入框旁邊多了一排紅色小字：用戶名錯(cuò)誤柠横。
第三窃款，所有頁(yè)面都是靜態(tài)的，這意味著一個(gè)電商網(wǎng)站有一千種商品牍氛，哪怕頁(yè)面布局一模一樣晨继，也必須寫一千個(gè)單獨(dú)的頁(yè)面。
早期網(wǎng)頁(yè)形態(tài)低下的效率是無(wú)法僅僅通過(guò)提高網(wǎng)速解決的搬俊。
1994年一個(gè)叫Rasmus Lerdorf的加拿大人為了維護(hù)個(gè)人網(wǎng)站而創(chuàng)建了PHP紊扬。PHP原意是Personal Home Page，宣傳語(yǔ)是Hypertext Preprocessor（超文本處理者）唉擂。PHP實(shí)現(xiàn)了與數(shù)據(jù)庫(kù)的交互以及用于生產(chǎn)動(dòng)態(tài)頁(yè)面的模板引擎餐屎，是Web領(lǐng)域中最主流的服務(wù)端語(yǔ)言。
1995年網(wǎng)景推出了JavaScript玩祟，實(shí)現(xiàn)了客戶端的計(jì)算任務(wù)（如表單驗(yàn)證）。
1996年微軟推出了iframe標(biāo)簽空扎，實(shí)現(xiàn)了異步的局部加載。
1999年W3C發(fā)布第四代HTML標(biāo)準(zhǔn)伙判，同年微軟推出用于異步數(shù)據(jù)傳輸?shù)腁ctiveX象对，隨即各大瀏覽器廠商模仿實(shí)現(xiàn)了XMLHttpRequest黑忱。這標(biāo)識(shí)著Ajax的誕生，但是Ajax這個(gè)詞是在六年后問(wèn)世的甫煞，特別是在谷歌使用Ajax技術(shù)打造了Gmail和谷歌地圖之后冠绢，Ajax獲得了巨大的關(guān)注抚吠。Ajax是Web網(wǎng)頁(yè)邁向Web應(yīng)用的關(guān)鍵技術(shù)，它標(biāo)識(shí)著Web2.0時(shí)代的到來(lái)弟胀。
2006年楷力，XMLHttpRequest被W3C正式納入標(biāo)準(zhǔn)孵户。
至此，早期的Document終于進(jìn)化為了Web page夏哭，上述三個(gè)局限都得到了妥善的解決。
從后端走向前端
早期的網(wǎng)頁(yè)開(kāi)發(fā)是由后端主導(dǎo)的何址，前端能做的也就是操作一下DOM。2006年 John Resig發(fā)布了jQuery用爪，jQuery主要用于操作DOM，其優(yōu)雅的語(yǔ)法班眯、符合直覺(jué)的事件驅(qū)動(dòng)型的編程思維使其極易上手烁巫，因此很快風(fēng)靡全球，大量基于jQuery的插件構(gòu)成了一個(gè)龐大的生態(tài)系統(tǒng)磁餐，更加穩(wěn)固了jQuery作為JS庫(kù)一哥的地位阿弃。
jQuery最早的版本在這里：
http://genius.it/ejohn.org/files/jquery-original.html
起初制約Web開(kāi)發(fā)從后到前的因素很簡(jiǎn)單，就是前端很多事干不了或干不好渣淳，當(dāng)時(shí)的瀏覽器性能弱，標(biāo)準(zhǔn)化程度低鄙漏。特別是占據(jù)大量市場(chǎng)份額的IE棺蛛，不僅ugly怔蚌，并且buggy。
于2008年問(wèn)世的谷歌V8引擎改變了這一局面¤胗唬現(xiàn)代瀏覽器的崛起終結(jié)了微軟的壟斷時(shí)代终畅，前端的計(jì)算能力一下子變得過(guò)剩了。標(biāo)準(zhǔn)組織也非常配合的在2009年發(fā)布了第五代JavaScript杖狼，前端的裝備得到了整體性的提高术徊，前端界如同改革開(kāi)放走進(jìn)了一個(gè)令人目不暇接的新時(shí)代。
2009年AngularJS誕生子寓，隨后被谷歌收購(gòu)。2010年backbone.js誕生斜友。2011年React和Ember誕生。2014年Vue.js誕生……前后端分離可謂大勢(shì)所趨烹看。
后端只負(fù)責(zé)數(shù)據(jù)洛史，前端負(fù)責(zé)其余工作，這種分工模式一定是更清晰也更高效的土思。隨著基礎(chǔ)設(shè)置的不斷完善以及代碼封裝層級(jí)的不斷提高忆嗜，使得前端一個(gè)人能夠完成的事越來(lái)越多，這是技術(shù)積累的必然結(jié)果闪湾。就好像今天高中生的知識(shí)水平绩卤，可能遠(yuǎn)遠(yuǎn)超過(guò)五百年前的科學(xué)家，今天要成為Web全棧工程師娘纷，門檻也只會(huì)越來(lái)越低跋炕。
2014年律适，第五代HTML標(biāo)準(zhǔn)發(fā)布。H5是由瀏覽器廠商主導(dǎo)纠修，與W3C合作制定的一整套Web應(yīng)用規(guī)范厂僧，至今仍在不斷補(bǔ)充新的草案。我們可以清晰的感受到這一系列規(guī)范背后隱含的領(lǐng)導(dǎo)者的勃勃雄心：占領(lǐng)所有屏幕辰妙。
從前端走向全端
2009年Ryan Dahl發(fā)布了node，node是一個(gè)基于V8引擎的服務(wù)端JavaScript運(yùn)行環(huán)境密浑，類似于一個(gè)虛擬機(jī)尔破，也就是說(shuō)js在服務(wù)端語(yǔ)言中有了一席之地。如果說(shuō)ajax是前端的第一次飛躍懒构，那么node可算作前端的第二次飛躍。它意味著JavaScript走出了瀏覽器的藩籬颤介，邁出了全端化的第一步赞赖。
一種流行的組合就是利用Express和Mongo搭建服務(wù)端程序。
Web開(kāi)疆拓土的步伐并不止于此辕近。
2007年第一代iphone發(fā)布匿垄，2008年第一臺(tái)安卓手機(jī)發(fā)布椿疗。悄然間互聯(lián)網(wǎng)進(jìn)入了移動(dòng)時(shí)代。移動(dòng)端的發(fā)展進(jìn)程和PC的歷史如出一轍届榄，一開(kāi)始都是Native App的天下。但瀏覽器試圖取代操作系統(tǒng)的篡位之心從未消減靖苇。相比原生應(yīng)用班缰，Web APP有太多好處：無(wú)須開(kāi)發(fā)兩套系統(tǒng)版本、無(wú)須安裝脾拆、無(wú)須手動(dòng)升級(jí)、無(wú)須審核……我認(rèn)為最大的好處以及驅(qū)動(dòng)軟件形態(tài)轉(zhuǎn)向的主要原因在于降低成本绰上，記得13年的時(shí)候韓寒說(shuō)做一個(gè)APP大概需要五十萬(wàn)包帚，今天網(wǎng)上比較靠譜的分析評(píng)估半年時(shí)間從零做出一個(gè)稍微像樣的APP至少100萬(wàn)，而開(kāi)發(fā)Web App花的錢一定少得多渴邦。
制約Web App的因素有很多谋梭，但我們可以看到Web App一直在不斷修復(fù)缺陷、突破局限瓮床。你說(shuō)網(wǎng)頁(yè)有tab bar隘庄，好吧，給你個(gè)fullpage API丑掺，你說(shuō)網(wǎng)頁(yè)不能調(diào)取系統(tǒng)功能街州，好吧，Geolocation API唆缴、Vibration API、Luminosity API艳丛、Orientation API斗忌、Camera API……你說(shuō)網(wǎng)頁(yè)不像APP有圖標(biāo)，IOS早就支持在桌面上添加網(wǎng)頁(yè)鏈接的快捷圖標(biāo)，還得是喬幫主遠(yuǎn)見(jiàn)砰粹；你說(shuō)網(wǎng)頁(yè)必須聯(lián)網(wǎng)，現(xiàn)在離線的方案也很多芭浴；你說(shuō)Web App性能差谐丢，這個(gè)……你說(shuō)得對(duì)蚓让，也就是這個(gè)原因，Native App還能作為主流存在一段時(shí)間窄瘟，可是如果Web App的性能逐漸趕上Native了呢趟卸？目前的Hybrid、nw.js图云、Electron邻邮、react native、weex等都可以看做Web App在性能方面向Native靠近的嘗試帕翻。更何況半路又殺出個(gè)微信小程序萝风。
