摘要：前端的發(fā)展歷程什么是前端前端針對(duì)瀏覽器的開發(fā)，代碼在瀏覽器運(yùn)行后端針對(duì)服務(wù)器的開發(fā)，代碼在服務(wù)器運(yùn)行前端三劍客超文本標(biāo)記語言是構(gòu)成世界的基石。

前端：針對(duì)瀏覽器的開發(fā)，代碼在瀏覽器運(yùn)行

后端：針對(duì)服務(wù)器的開發(fā)，代碼在服務(wù)器運(yùn)行

HTML

CSS

JavaScript

HTML（超文本標(biāo)記語言——HyperText Markup Language）是構(gòu)成 Web 世界的基石。HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計(jì)令人賞心悅目的網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動(dòng)應(yīng)用程序的用戶界面。

超文本標(biāo)記語言（第一版）——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)）：

HTML 2.0——1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)

HTML 3.2——1997年1月14日，W3C推薦標(biāo)準(zhǔn)

HTML 4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)

HTML 4.01（微小改進(jìn)）——1999年12月24日，W3C推薦標(biāo)準(zhǔn)

HTML 5——2014年10月28日，W3C推薦標(biāo)準(zhǔn)

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格式化。

CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力。

JavaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。

瀏覽器的發(fā)展其實(shí)也是前端的發(fā)展

我們來簡單了解一下瀏覽器的發(fā)展歷史

1991年，WorldWideWeb 瀏覽器發(fā)布

這款由 Web 之父 Tim Berners-Lee 親手設(shè)計(jì)的圖形化瀏覽器還包含一個(gè)所見即所得 HTML 編輯器，為了避免同 WWW 混淆，這個(gè)瀏覽器后來改名為 Nexus.

1993年，Mosaic 發(fā)布

Internet 的流行應(yīng)該歸功于 Mosaic，這款瀏覽器將 Web 帶向了大眾。諸如 IE， Firefox 一類的當(dāng)代瀏覽器仍然在延用 Mosaic 的圖形化操作界面思想。

1994年，Netscape 成立

Marc Andreessen 帶領(lǐng) Mosaic 的程序員成立了 Netscape 公司，并發(fā)布了第一款商業(yè)瀏覽器 Netscape Navigator.

1995年，IE 發(fā)布，瀏覽器之戰(zhàn)即將爆發(fā)

微軟針對(duì) Netscape 發(fā)布了他們自己的瀏覽器，IE，第一場瀏覽器之戰(zhàn)爆發(fā)。

1996年，Opera 發(fā)布

Telenor 是挪威最大的通訊公司，他們推出了 Opera，并在兩年后進(jìn)軍移動(dòng)市場，推出 Opera 的移動(dòng)版。

1998年，Mozilla 項(xiàng)目成立

Netscape 成立 Mozilla 開源項(xiàng)目，開發(fā)下一代瀏覽器，后來證明，使用原有代碼開發(fā)新東西是一種負(fù)擔(dān)，接著他們著手從新開發(fā)。

1998年，Netscape 瀏覽器走向開源

隨著同 IE 征戰(zhàn)的失利，Netscape 市場份額急劇下降，Netscape 決定將自己的瀏覽器開源以期重整山河。

2002年，IE 開始主導(dǎo)瀏覽器市場

市場份額達(dá)到95%，借助操作系統(tǒng)的捆綁優(yōu)勢，IE 贏得第一場瀏覽器之戰(zhàn)。

2003年，蘋果 Safari 瀏覽器登場

蘋果進(jìn)入了瀏覽器市場，推出自己的 Webkit 引擎，該引擎非常優(yōu)秀，后來被包括 Google， Nokia 之類的廠商用于手機(jī)瀏覽器。

2004年，F(xiàn)irefox 引發(fā)第二場瀏覽器之戰(zhàn)

Firefox 1.0 推出。早在 Beta 測試期間就積累了大量人氣的 Firefox 引發(fā)了第二場瀏覽器之戰(zhàn)，當(dāng)年年底，F(xiàn)irefox 已經(jīng)贏得 7.4% 的市場份額。

2006年，IE7 發(fā)布

IE6 發(fā)布后的第六年，迫于 Firefox 的壓力，微軟匆匆推出 IE7 應(yīng)戰(zhàn)，吸取了 Firefox 的一些設(shè)計(jì)思想，如標(biāo)簽式瀏覽，反釣魚等。但這款瀏覽器現(xiàn)在看來并不成功。

2008年，Google 攜 Chrome 參戰(zhàn)

Google 發(fā)布了他們自己的瀏覽器，加入這場戰(zhàn)爭。輕量，快，異常的穩(wěn)固讓這款瀏覽器成為不可輕視的一個(gè)對(duì)手。

早期受制于瀏覽器以及技術(shù)、兼容性等問題，導(dǎo)致網(wǎng)頁的顯示效果非常的單一，幾乎都是靜態(tài)頁，前端的工作也是非常簡單，說是前端，其實(shí)只是一個(gè)模板工程師，編寫頁面模板，然后讓后端負(fù)責(zé)渲染。所以在互聯(lián)網(wǎng)早期，前端工程師這個(gè)職位可以說是不存在，通常由后端或者是美工來兼任。

像這種古老的設(shè)計(jì)風(fēng)格，現(xiàn)在已經(jīng)很難看到了

當(dāng)時(shí)的網(wǎng)站開發(fā)，采用的是后端MVC模式

Model（模型層）：提供/保存數(shù)據(jù)

Controller（控制層）：數(shù)據(jù)處理，實(shí)現(xiàn)業(yè)務(wù)邏輯

View（視圖層）：展示數(shù)據(jù)，提供用戶界面

前端只是后端 MVC 的 V

當(dāng)用戶訪問網(wǎng)站時(shí)，會(huì)向后臺(tái)發(fā)送一個(gè)請(qǐng)求，后臺(tái)接收到請(qǐng)求，生成靜態(tài)HTML頁面，發(fā)送到瀏覽器。
比如JSP

Hello World!

<%
out.println("Your IP address is " + request.getRemoteAddr());
%>

Ajax技術(shù)誕生，改變了一切。前端不再是后端的模板，可以獨(dú)立得到各種數(shù)據(jù)。

Ajax是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。

通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。

如果仔細(xì)觀察一個(gè)表單的提交，你就會(huì)發(fā)現(xiàn)，一旦用戶點(diǎn)擊“提交”按鈕，表單開始提交，瀏覽器就會(huì)刷新頁面，然后在新頁面里告訴你操作是成功了還是失敗了。如果不幸由于網(wǎng)絡(luò)太慢或者其他原因，就會(huì)得到一個(gè)404頁面。

這就是Web的運(yùn)作原理：一次HTTP請(qǐng)求對(duì)應(yīng)一個(gè)頁面。

如果要讓用戶留在當(dāng)前頁面中，同時(shí)發(fā)出新的HTTP請(qǐng)求，就可以使用Ajax發(fā)送這個(gè)新請(qǐng)求，接收到數(shù)據(jù)后，再用JavaScript更新頁面，這樣一來，用戶就感覺自己仍然停留在當(dāng)前頁面，但是數(shù)據(jù)卻可以不斷地更新。

2004年：最早大規(guī)模使用AJAX的就是Gmail，Gmail的頁面在首次加載后，剩下的所有數(shù)據(jù)都依賴于AJAX來更新。

Ajax技術(shù)促成了 Web 2.0 的誕生。

Web 1.0：靜態(tài)網(wǎng)頁，純內(nèi)容展示

Web 2.0：動(dòng)態(tài)網(wǎng)頁，富交互，前端數(shù)據(jù)處理

至此，前端早期的發(fā)展史就介紹完了，當(dāng)時(shí)對(duì)于前端的要求并不高，只要掌握html css js和一個(gè)jquery就足夠開發(fā)網(wǎng)頁了

到目前為止
HTML已經(jīng)發(fā)展到HTML5

CSS已經(jīng)發(fā)展到CSS3.0

JavaScript已經(jīng)發(fā)展到ES9，但是常用的還是ES5和ES6

現(xiàn)代標(biāo)準(zhǔn)瀏覽器(遵循W3C標(biāo)準(zhǔn)的瀏覽器)基本已經(jīng)支持HTML5 CSS3 ES6的大部分特性

由于IE的不思上進(jìn)，導(dǎo)致市場份額越來越少，現(xiàn)在幾乎是現(xiàn)代標(biāo)準(zhǔn)瀏覽器的天下。

所以前端開發(fā)一個(gè)網(wǎng)頁幾乎不需要考慮IE兼容性

得益于前端技術(shù)和瀏覽器的發(fā)展，現(xiàn)在的網(wǎng)頁能展示越來越豐富的內(nèi)容了，比如動(dòng)畫 游戲 畫圖等等

所以，對(duì)于前端的要求也越來越高，特別是近幾年框架、技術(shù)、工具呈爆發(fā)式發(fā)展，前端變化特別快！

MVVM最早由微軟提出來，它借鑒了桌面應(yīng)用程序的MVC思想，在前端頁面中，把Model用純JavaScript對(duì)象表示，View負(fù)責(zé)顯示，兩者做到了最大限度的分離
把Model和View關(guān)聯(lián)起來的就是ViewModel。

ViewModel負(fù)責(zé)把Model的數(shù)據(jù)同步到View顯示出來，還負(fù)責(zé)把View的修改同步回Model

View 和 Model 之間的同步工作完全是自動(dòng)的，無需人為干涉

因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理

一個(gè)MVVM框架和jQuery操作DOM相比有什么區(qū)別？
我們先看用jQuery實(shí)現(xiàn)的修改兩個(gè)DOM節(jié)點(diǎn)的例子：

Hello, Bart!
You are 12.

Hello, Bart!

You are 12.

用jQuery修改name和age節(jié)點(diǎn)的內(nèi)容：

var name = "Homer";
var age = 51;

$("#name").text(name);
$("#age").text(age);

如果我們使用MVVM框架來實(shí)現(xiàn)同樣的功能，我們首先并不關(guān)心DOM的結(jié)構(gòu)，而是關(guān)心數(shù)據(jù)如何存儲(chǔ)。最簡單的數(shù)據(jù)存儲(chǔ)方式是使用JavaScript對(duì)象：

var person = {
    name: "Bart",
    age: 12
}

我們把變量person看作Model，把HTML某些DOM節(jié)點(diǎn)看作View，并假定它們之間被關(guān)聯(lián)起來了。

要把顯示的name從Bart改為Homer，把顯示的age從12改為51，我們并不操作DOM，而是直接修改JavaScript對(duì)象：

person.name = "Homer";
person.age = 51;

執(zhí)行上面的代碼，我們驚訝地發(fā)現(xiàn)，改變JavaScript對(duì)象的狀態(tài)，會(huì)導(dǎo)致DOM結(jié)構(gòu)作出對(duì)應(yīng)的變化！這讓我們的關(guān)注點(diǎn)從如何操作DOM變成了如何更新JavaScript對(duì)象的狀態(tài)，而操作JavaScript對(duì)象比DOM簡單多了！

這就是MVVM的設(shè)計(jì)思想：關(guān)注Model的變化，讓MVVM框架去自動(dòng)更新DOM的狀態(tài)，從而把開發(fā)者從操作DOM的繁瑣步驟中解脫出來！

Vue

React

Angular

Vue框架誕生于2014年，其作者為中國人——尤雨溪，也是新人最容易入手的框架之一，不同于React和Angular,其中文文檔也便于大家閱讀和學(xué)習(xí)。

React起源于Facebook的內(nèi)部項(xiàng)目，因?yàn)樵摴緦?duì)市場上所有JavaScript MVC框架，都不滿意，就決定自己寫一套，用來架設(shè)Instagram的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。

Angular是谷歌開發(fā)的 Web 框架，具有優(yōu)越的性能和絕佳的跨平臺(tái)性。通常結(jié)合TypeScript開發(fā)，也可以使用JavaScript或Dart，提供了無縫升級(jí)的過渡方案。于2016年9月正式發(fā)布。

目前國內(nèi)使用人數(shù)最多、最火的框架是Vue

如今對(duì)于每一個(gè)前端工程師來說，webpack已經(jīng)成為了一項(xiàng)基礎(chǔ)技能，它基本上包辦了本地開發(fā)、編譯壓縮、性能優(yōu)化的所有工作。

它的誕生意味著一整套工程化體系開始普及，并且讓前端開發(fā)徹底告別了以前刀耕火種的時(shí)代。現(xiàn)在webpack之于前端開發(fā)，正如同gcc/g++之于C/C++，是一個(gè)無論如何都繞不開的工具。

TypeScript 是 Microsoft 開發(fā)和維護(hù)的一種面向?qū)ο蟮木幊陶Z言。它是JavaScript的超集，包含了JavaScript的所有元素，可以載入JavaScript代碼運(yùn)行，并擴(kuò)展了JavaScript的語法。
TypeScript 具有以下特點(diǎn)：

TypeScript是Microsoft推出的開源語言，使用Apache授權(quán)協(xié)議

TypeScript增加了靜態(tài)類型、類、模塊、接口和類型注解

在開發(fā)大型項(xiàng)目時(shí)使用TS更有優(yōu)勢

Node.js是一個(gè)Javascript運(yùn)行環(huán)境(runtime environment)，發(fā)布于2009年5月，由Ryan Dahl開發(fā)，實(shí)質(zhì)是對(duì)Chrome V8引擎進(jìn)行了封裝。Node.js對(duì)一些特殊用例進(jìn)行優(yōu)化，提供替代的API，使得V8在非瀏覽器環(huán)境下運(yùn)行得更好。嚴(yán)格的來說，Node.js其實(shí)是一個(gè)后端語言。

特點(diǎn)：

單線程

非阻塞IO

事件驅(qū)動(dòng)

V8引擎

游戲開發(fā)(Egret Layabox coco2d-js)

web開發(fā)(pc 移動(dòng)端設(shè)備)

webApp開發(fā)(Dcloud RN weex ionic)

圖形開發(fā)WebGl(three.js)

小程序/快應(yīng)用

后端(nodejs)

桌面應(yīng)用(electron)

嵌入式開發(fā)(Ruff)

現(xiàn)在基于Web的前端技術(shù)，將演變?yōu)槲磥硭熊浖耐ㄓ玫腉UI解決方案。
所以前端有可能會(huì)變成一名端工程師。

PC端

手機(jī)端

TV端

VR端

......

photoshop切圖(必修)

html css js(特別是html5 css3 es6)(必修)

三大前端框架至少精通一個(gè)(必修)

nodejs(選修)

自動(dòng)化構(gòu)建工具webpack(必修)

http協(xié)議(必修)

瀏覽器渲染流程及原理(必修)

TypeScript(選修)

算法

編譯原理

建議學(xué)習(xí)編譯原理和算法這兩門課程

算法的好處相信大家都懂 在這里簡單說一下

懂算法的人善于計(jì)算時(shí)空復(fù)雜度，相當(dāng)于在你做事情前，懂得怎么去衡量效率和開銷

編譯原理：將源語言轉(zhuǎn)化為目標(biāo)語言,也就是將一門語言轉(zhuǎn)化為另一門語言

babel

TypeScript

Vue的VNode

......

參考資料：http://software.cnw.com.cn/so...
參考資料：https://github.com/ruanyf/jst...
參考資料：https://www.liaoxuefeng.com/w...