2021-12-15
前端的發展歷程
什么是前端
- 前端：針對瀏覽器的開發，代碼在瀏覽器運行
- 后端：針對服務器的開發，代碼在服務器運行
前端三劍客
- HTML
- CSS
- JavaScript
HTML
HTML（超文本標記語言——HyperText Markup Language）是構成 Web 世界的基石。HTML是一種基礎技術，常與CSS、JavaScript一起被眾多網站用於設計令人賞心悅目的網頁、網頁應用程序以及移動應用程序的用戶界面。
超文本標記語言（第一版）——在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（並非標准）：
HTML 2.0——1995年11月作為RFC 1866發布，在RFC 2854於2000年6月發布之后被宣布已經過時
HTML 3.2——1997年1月14日，W3C推薦標准
HTML 4.0——1997年12月18日，W3C推薦標准
HTML 4.01（微小改進）——1999年12月24日，W3C推薦標准
HTML 5——2014年10月28日，W3C推薦標准
CSS
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標准通用標記語言的一個應用）或XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。
JavaScript
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
前端的發展離不開瀏覽器的發展
瀏覽器的發展其實也是前端的發展
我們來簡單了解一下瀏覽器的發展歷史
1991年，WorldWideWeb 瀏覽器發布
這款由 Web 之父 Tim Berners-Lee 親手設計的圖形化瀏覽器還包含一個所見即所得 HTML 編輯器，為了避免同 WWW 混淆，這個瀏覽器后來改名為 Nexus.
1993年，Mosaic 發布
Internet 的流行應該歸功於 Mosaic，這款瀏覽器將 Web 帶向了大眾。諸如 IE， Firefox 一類的當代瀏覽器仍然在延用 Mosaic 的圖形化操作界面思想。
1994年，Netscape 成立
Marc Andreessen 帶領 Mosaic 的程序員成立了 Netscape 公司，並發布了第一款商業瀏覽器 Netscape Navigator.
1995年，IE 發布，瀏覽器之戰即將爆發
微軟針對 Netscape 發布了他們自己的瀏覽器，IE，第一場瀏覽器之戰爆發。
1996年，Opera 發布
Telenor 是挪威最大的通訊公司，他們推出了 Opera，並在兩年后進軍移動市場，推出 Opera 的移動版。
1998年，Mozilla 項目成立
Netscape 成立 Mozilla 開源項目，開發下一代瀏覽器，后來證明，使用原有代碼開發新東西是一種負擔，接着他們着手從新開發。
1998年，Netscape 瀏覽器走向開源
隨着同 IE 征戰的失利，Netscape 市場份額急劇下降，Netscape 決定將自己的瀏覽器開源以期重整山河。
2002年，IE 開始主導瀏覽器市場
市場份額達到95%，借助操作系統的捆綁優勢，IE 贏得第一場瀏覽器之戰。
2003年，蘋果 Safari 瀏覽器登場
蘋果進入了瀏覽器市場，推出自己的 Webkit 引擎，該引擎非常優秀，后來被包括 Google， Nokia 之類的廠商用於手機瀏覽器。
2004年，Firefox 引發第二場瀏覽器之戰
Firefox 1.0 推出。早在 Beta 測試期間就積累了大量人氣的 Firefox 引發了第二場瀏覽器之戰，當年年底，Firefox 已經贏得 7.4% 的市場份額。
2006年，IE7 發布
IE6 發布后的第六年，迫於 Firefox 的壓力，微軟匆匆推出 IE7 應戰，吸取了 Firefox 的一些設計思想，如標簽式瀏覽，反釣魚等。但這款瀏覽器現在看來並不成功。
2008年，Google 攜 Chrome 參戰
Google 發布了他們自己的瀏覽器，加入這場戰爭。輕量，快，異常的穩固讓這款瀏覽器成為不可輕視的一個對手。
瀏覽器現狀
瀏覽器內核
早期的前端
早期受制於瀏覽器以及技術、兼容性等問題，導致網頁的顯示效果非常的單一，幾乎都是靜態頁，前端的工作也是非常簡單，說是前端，其實只是一個模板工程師，編寫頁面模板，然后讓后端負責渲染。所以在互聯網早期，前端工程師這個職位可以說是不存在，通常由后端或者是美工來兼任。
像這種古老的設計風格，現在已經很難看到了
后端MVC的開發模式
當時的網站開發，采用的是后端MVC模式 Model（模型層）：提供/保存數據 Controller（控制層）：數據處理，實現業務邏輯 * View（視圖層）：展示數據，提供用戶界面 前端只是后端 MVC 的 V
當用戶訪問網站時，會向后台發送一個請求，后台接收到請求，生成靜態HTML頁面，發送到瀏覽器。 比如JSP
<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>
Ajax
Ajax技術誕生，改變了一切。前端不再是后端的模板，可以獨立得到各種數據。
Ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
通過在后台與服務器進行少量數據交換，Ajax可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
舉個例子：用戶注冊
如果仔細觀察一個表單的提交，你就會發現，一旦用戶點擊“提交”按鈕，表單開始提交，瀏覽器就會刷新頁面，然后在新頁面里告訴你操作是成功了還是失敗了。如果不幸由於網絡太慢或者其他原因，就會得到一個404頁面。
這就是Web的運作原理：一次HTTP請求對應一個頁面。
如果要讓用戶留在當前頁面中，同時發出新的HTTP請求，就可以使用Ajax發送這個新請求，接收到數據后，再用JavaScript更新頁面，這樣一來，用戶就感覺自己仍然停留在當前頁面，但是數據卻可以不斷地更新。
2004年：最早大規模使用AJAX的就是Gmail，Gmail的頁面在首次加載后，剩下的所有數據都依賴於AJAX來更新。
Web 2.0
Ajax技術促成了 Web 2.0 的誕生。
Web 1.0：靜態網頁，純內容展示
Web 2.0：動態網頁，富交互，前端數據處理
至此，前端早期的發展史就介紹完了，當時對於前端的要求並不高，只要掌握html css js和一個jquery就足夠開發網頁了
新時代的前端
到目前為止 HTML已經發展到HTML5
CSS已經發展到CSS3.0
JavaScript已經發展到ES9，但是常用的還是ES5和ES6
現代標准瀏覽器(遵循W3C標准的瀏覽器)基本已經支持HTML5 CSS3 ES6的大部分特性
瀏覽器市場份額(2018.9)
由於IE的不思上進，導致市場份額越來越少，現在幾乎是現代標准瀏覽器的天下。
所以前端開發一個網頁幾乎不需要考慮IE兼容性
得益於前端技術和瀏覽器的發展，現在的網頁能展示越來越豐富的內容了，比如動畫 游戲 畫圖等等
所以，對於前端的要求也越來越高，特別是近幾年框架、技術、工具呈爆發式發展，前端變化特別快！
MVVM
MVVM最早由微軟提出來，它借鑒了桌面應用程序的MVC思想，在前端頁面中，把Model用純JavaScript對象表示，View負責顯示，兩者做到了最大限度的分離 把Model和View關聯起來的就是ViewModel。
ViewModel負責把Model的數據同步到View顯示出來，還負責把View的修改同步回Model
View 和 Model 之間的同步工作完全是自動的，無需人為干涉
因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理
一個MVVM框架和jQuery操作DOM相比有什么區別？ 我們先看用jQuery實現的修改兩個DOM節點的例子：
<!-- HTML -->
<p>Hello, <span id="name">Bart</span>!</p>
<p>You are <span id="age">12</span>.</p>
Hello, Bart!
You are 12.用jQuery修改name和age節點的內容：
var name = 'Homer';
var age = 51;
$('#name').text(name);
$('#age').text(age);如果我們使用MVVM框架來實現同樣的功能，我們首先並不關心DOM的結構，而是關心數據如何存儲。最簡單的數據存儲方式是使用JavaScript對象：
var person = {
name: 'Bart',
age: 12
}我們把變量person看作Model，把HTML某些DOM節點看作View，並假定它們之間被關聯起來了。
要把顯示的name從Bart改為Homer，把顯示的age從12改為51，我們並不操作DOM，而是直接修改JavaScript對象：
person.name = 'Homer';
person.age = 51;執行上面的代碼，我們驚訝地發現，改變JavaScript對象的狀態，會導致DOM結構作出對應的變化！這讓我們的關注點從如何操作DOM變成了如何更新JavaScript對象的狀態，而操作JavaScript對象比DOM簡單多了！
這就是MVVM的設計思想：關注Model的變化，讓MVVM框架去自動更新DOM的狀態，從而把開發者從操作DOM的繁瑣步驟中解脫出來！
三大MVVM框架
- Vue
- React
- Angular
Vue
Vue框架誕生於2014年，其作者為中國人——尤雨溪，也是新人最容易入手的框架之一，不同於React和Angular,其中文文檔也便於大家閱讀和學習。
React
React起源於Facebook的內部項目，因為該公司對市場上所有JavaScript MVC框架，都不滿意，就決定自己寫一套，用來架設Instagram的網站。做出來以后，發現這套東西很好用，就在2013年5月開源了。
Angular
Angular是谷歌開發的 Web 框架，具有優越的性能和絕佳的跨平台性。通常結合TypeScript開發，也可以使用JavaScript或Dart，提供了無縫升級的過渡方案。於2016年9月正式發布。
目前國內使用人數最多、最火的框架是Vue
webpack
如今對於每一個前端工程師來說，webpack已經成為了一項基礎技能，它基本上包辦了本地開發、編譯壓縮、性能優化的所有工作。
它的誕生意味着一整套工程化體系開始普及，並且讓前端開發徹底告別了以前刀耕火種的時代。現在webpack之於前端開發，正如同gcc/g++之於C/C++，是一個無論如何都繞不開的工具。
TypeScript(TS)
TypeScript 是 Microsoft 開發和維護的一種面向對象的編程語言。它是JavaScript的超集，包含了JavaScript的所有元素，可以載入JavaScript代碼運行，並擴展了JavaScript的語法。 TypeScript 具有以下特點：
- TypeScript是Microsoft推出的開源語言，使用Apache授權協議
- TypeScript增加了靜態類型、類、模塊、接口和類型注解
在開發大型項目時使用TS更有優勢
NodeJs
Node.js是一個Javascript運行環境(runtime environment)，發布於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。嚴格的來說，Node.js其實是一個后端語言。
特點： 單線程 非阻塞IO 事件驅動 V8引擎
現在的前端能做什么？
- 游戲開發(Egret Layabox coco2d-js)
- web開發(pc 移動端設備)
- webApp開發(Dcloud RN weex ionic)
- 圖形開發WebGl(three.js)
- 小程序/快應用
- 后端(nodejs)
- 桌面應用(electron)
- 嵌入式開發(Ruff)
前端的未來
現在基於Web的前端技術，將演變為未來所有軟件的通用的GUI解決方案。 所以前端有可能會變成一名端工程師。 PC端 手機端 TV端 VR端
......
一名合格的前端需要掌握哪些技能
- photoshop切圖(必修)
- html css js(特別是html5 css3 es6)(必修)
- 三大前端框架至少精通一個(必修)
- nodejs(選修)
- 自動化構建工具webpack(必修)
- http協議(必修)
- 瀏覽器渲染流程及原理(必修)
- TypeScript(選修)
技能會過時 計算機基礎知識不會過時
- 算法
- 編譯原理
建議學習編譯原理和算法這兩門課程
算法的好處相信大家都懂 在這里簡單說一下
懂算法的人善於計算時空復雜度，相當於在你做事情前，懂得怎么去衡量效率和開銷
編譯原理：將源語言轉化為目標語言,也就是將一門語言轉化為另一門語言
編譯原理在前端中的應用
- babel
- TypeScript
- Vue的VNode
......
參考資料-轉發：https://zhuanlan.zhihu.com/p/53211263
參考資料：http://software.cnw.com.cn/software-application/htm2009/20091013_183968.shtml
參考資料：https://github.com/ruanyf/jstraining/blob/master/docs/history.md
參考資料：https://www.liaoxuefeng.com/wiki/00