1.跟原生的區(qū)別就是框架已經(jīng)搭建好了基本的骨架，你只需往里面添加自己的東西就可以了，原生就是什么都沒有，骨架和具體的東西都要你自己來完成。

前者是為了方便用戶的使用和二次開發(fā)，后者主要是考驗(yàn)用戶的基本功，對(duì)這些東西的底層實(shí)現(xiàn)了解程度有多少。2.可以簡單的理解成是：使用廣泛的前端開發(fā)套件，可以幫助你快速的網(wǎng)站。前段框架的好處：對(duì)于互聯(lián)網(wǎng)的產(chǎn)品而言，前端用戶體驗(yàn)往往決定了一款產(chǎn)品的競(jìng)爭力和吸引力;而對(duì)于前端工程師來說，考慮的問題更為復(fù)雜，他們既要為網(wǎng)站上提供的產(chǎn)品和服務(wù)實(shí)現(xiàn)一流的Web頁面、優(yōu)化代碼，保證體驗(yàn)的最佳，更要考慮與市面上各大瀏覽器的兼容性，還需顧及Web前端表現(xiàn)層和前后端交互的架構(gòu)，以及模塊化、通用類庫、框架編寫等一系列問題，由此提升前端開發(fā)的效率，降低開發(fā)成本和周期。

我覺得這是一個(gè)有意思的問題，相比于其他領(lǐng)域比如編譯器開發(fā)、游戲引擎開發(fā)、推薦系統(tǒng)開發(fā)等等，前端開發(fā)的壁壘在哪兒？或者換句話說，前端開發(fā)的競(jìng)爭力在哪兒？有些人答偏了，壁壘是指別人不能輕易進(jìn)入。前端開發(fā)的壁壘主要體現(xiàn)在以下幾個(gè)方面。

一、基本能力

1.1、為網(wǎng)站上提供的產(chǎn)品和服務(wù)實(shí)現(xiàn)一流的Web界面，優(yōu)化代碼并保持良好兼容性；

1.2、Web前端表現(xiàn)層及與前后端交互的架構(gòu)設(shè)計(jì)和開發(fā)；

1.3、JavaScript程序模塊開發(fā)，通用類庫、框架編寫；

1.4、利用各種Web技術(shù)模擬開發(fā)產(chǎn)品原型；

1.5、配合后臺(tái)開發(fā)人員實(shí)現(xiàn)產(chǎn)品界面和功能；

1.6、Web新技術(shù)調(diào)研和資訊整理；

1.7、精通HTML/XHTML、CSS，熟悉頁面架構(gòu)和布局，精通Ajax、JavaScript、DOM等前端技術(shù)，掌握面向?qū)ο缶幊趟枷耄?/p>

二、多端能力

現(xiàn)在的前端已經(jīng)不是幾年前的切圖仔，很多公司要求你會(huì)移動(dòng)端H5、小程序、桌面開發(fā)、PC端、移動(dòng)APP。

高級(jí)前端開發(fā)人才缺又是十分緊缺，很多中級(jí)前端和后端都想擠入（錢多，需求多），那么高級(jí)前端開發(fā)人才的技術(shù)能力可以看做是前端開發(fā)的一些技術(shù)壁壘。這些可以從一些招聘網(wǎng)站上找到，搜索相關(guān)前端架構(gòu)師，前端teamleader，前端高級(jí)開發(fā)工程師等職位的要求可以了解到一些。

三、框架能力

無論前端后端還是全棧工程師，一定是經(jīng)常聽說 Angular 和 React 以及Vue三大框架。像BAT這種大公司一般都要求精通其中一個(gè)框架，而有些公司希望你全會(huì)。

四、架構(gòu)能力

除了要求你的編碼能力外，如果你像往上提高為前端架構(gòu)師或者前端專家，架構(gòu)能力也是必不可少的能力，其中架構(gòu)包括學(xué)會(huì)封裝常用組件，使用webpack等能力。

五、后端能力

前端的壁壘除了要學(xué)會(huì)前端知識(shí)外，學(xué)會(huì)一門后端語言也是必不可少的一門技能，常見的后端語言有nodejs、php、Java、python等，以及一種數(shù)據(jù)庫(如MySQL/Oracle)。

綜上所述，除了要有以上的能力，還要經(jīng)常保持學(xué)習(xí)，不然這些分分鐘都會(huì)成為阻礙你的壁壘。

這里整理了一份web前端的系統(tǒng)學(xué)習(xí)路線，包含的技術(shù)如下：

第一階段：專業(yè)核心基礎(chǔ)

階段目標(biāo)：

1. 熟練掌握HTML5、CSS3、Less、Sass、響應(yīng)書布局、移動(dòng)端開發(fā)。

2. 熟練運(yùn)用HTML+CSS特性完成頁面布局。

4. 熟練應(yīng)用CSS3技術(shù)，動(dòng)畫、彈性盒模型設(shè)計(jì)。

5. 熟練完成移動(dòng)端頁面的設(shè)計(jì)。

6. 熟練運(yùn)用所學(xué)知識(shí)仿制任意Web網(wǎng)站。

7. 能綜合運(yùn)用所學(xué)知識(shí)完成網(wǎng)頁設(shè)計(jì)實(shí)戰(zhàn)。

知識(shí)點(diǎn)：

1、Web前端開發(fā)環(huán)境，HTML常用標(biāo)簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運(yùn)用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿制任意網(wǎng)站的前端頁面實(shí)現(xiàn)。

2、CSS3選擇器、偽類、過渡、變換、動(dòng)畫、字體圖標(biāo)、彈性盒模型、響應(yīng)式布局、移動(dòng)端。熟練運(yùn)用CSS3來開發(fā)網(wǎng)頁、熟練開發(fā)移動(dòng)端，整理網(wǎng)頁開發(fā)技巧。

3、預(yù)編譯css技術(shù)：less、sass基礎(chǔ)知識(shí)、以及插件的運(yùn)用、BootStrap源碼分析。能夠熟練使用 less、sass完成項(xiàng)目開發(fā)，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技術(shù)完成網(wǎng)頁項(xiàng)目實(shí)戰(zhàn)。通過項(xiàng)目掌握第一階段html、css的內(nèi)容、完成PC端頁面設(shè)計(jì)和移動(dòng)端頁面設(shè)計(jì)。

第二階段：Web后臺(tái)技術(shù)

階段目標(biāo):

1. 了解JavaScript的發(fā)展歷史、掌握Node環(huán)境搭建及npm使用。

2. 熟練掌握J(rèn)avaScript的基本數(shù)據(jù)類型和變量的概念。

3. 熟練掌握J(rèn)avaScript中的運(yùn)算符使用。

4. 深入理解分之結(jié)構(gòu)語句和循環(huán)語句。

5. 熟練使用數(shù)組來完成各種練習(xí)。

6.熟悉es6的語法、熟練掌握J(rèn)avaScript面向?qū)ο缶幊獭?/p>

7.DOM和BOM實(shí)戰(zhàn)練習(xí)和H5新特性和協(xié)議的學(xué)習(xí)。

知識(shí)點(diǎn)：

1、軟件開發(fā)流程、算法、變量、數(shù)據(jù)類型、分之語句、循環(huán)語句、數(shù)組和函數(shù)。熟練運(yùn)用JavaScript的知識(shí)完成各種練習(xí)。

2、JavaScript面向?qū)ο蠡A(chǔ)、異常處理機(jī)制、常見對(duì)象api，js的兼容性、ES6新特性。熟練掌握J(rèn)avaScript面向?qū)ο蟮拈_發(fā)以及掌握es6中的重要內(nèi)容。

3、BOM操作和DOM操作。熟練使用BOM的各種對(duì)象、熟練操作DOM的對(duì)象。

4、h5相關(guān)api、canvas、ajax、數(shù)據(jù)模擬、touch事件、mockjs。熟練使用所學(xué)知識(shí)來完成網(wǎng)站項(xiàng)目開發(fā)。

第三階段：數(shù)據(jù)庫和框架實(shí)戰(zhàn)

階段目標(biāo)：

1. 綜合運(yùn)用Web前端技術(shù)進(jìn)行頁面布局與美化。

2. 綜合運(yùn)用Web前端開發(fā)框架進(jìn)行Web系統(tǒng)開發(fā)。

3. 熟練掌握Mysql、Mongodb數(shù)據(jù)庫的發(fā)開。

4. 熟練掌握vue.js、webpack、elementui等前端框技術(shù)。

5. 熟練運(yùn)用Node.js開發(fā)后臺(tái)應(yīng)用程序。

6. 對(duì)Restful，Ajax，JSON，開發(fā)過程有深入的理解,掌握git的基本技能。

知識(shí)點(diǎn)：

1、數(shù)據(jù)庫知識(shí)，范式，MySQL配置，命令，建庫建表，數(shù)據(jù)的增刪改查，mongodb數(shù)據(jù)庫。深入理解數(shù)據(jù)庫管理系統(tǒng)通用知識(shí)及MySQL數(shù)據(jù)庫的使用與管理，為Node.js后臺(tái)開發(fā)打下堅(jiān)實(shí)基礎(chǔ)。

2、模塊系統(tǒng)，函數(shù)，路由，全局對(duì)象，文件系統(tǒng)，請(qǐng)求處理，Web模塊，Express框架，MySQL數(shù)據(jù)庫處理，RestfulAPI，文件上傳等。熟練運(yùn)用Node.js運(yùn)行環(huán)境和后臺(tái)開發(fā)框架完成Web系統(tǒng)的后臺(tái)開發(fā)。

3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運(yùn)用Vue.js完成基礎(chǔ)前端開發(fā)、熟練運(yùn)用Vue.js框架的高級(jí)功能完成Web前端開發(fā)和組件開發(fā)，對(duì)MVVM模式有深刻理解。

4、需求分析，數(shù)據(jù)庫設(shè)計(jì)，后臺(tái)開發(fā)，使用vue、node完成pc和移動(dòng)端整站開發(fā)。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實(shí)現(xiàn)整站項(xiàng)目完整功能并上線發(fā)布。

第四階段：移動(dòng)端和微信實(shí)戰(zhàn)

階段目標(biāo)：

1.熟練掌握React.js框架，熟練使用React.js完成開發(fā)。

2.掌握移動(dòng)端開發(fā)原理，理解原生開發(fā)和混合開發(fā)。

3.熟練使用react-native和Flutter框架完成移動(dòng)端開發(fā)。

4.掌握微信小程序以及了解支付寶小程序的開發(fā)。

5.完成大型電商項(xiàng)目開發(fā)。

知識(shí)點(diǎn)：

1、React面向組件編程、表單數(shù)據(jù)、組件通信、監(jiān)聽、聲明周期、路由、Redux基本概念。練使用react完成項(xiàng)目開發(fā)、掌握Redux中的異步解決方案Saga。

2、react-native、開發(fā)工具、視圖與渲染、api操作、Flutter環(huán)境搭建、路由、ListView組件、網(wǎng)絡(luò)請(qǐng)求、打包。練掌握react-native和Flutter框架，并分別使用react-native和Flutter分別能開發(fā)移動(dòng)端項(xiàng)目。

3、微信小程序基本介紹、開發(fā)工具、視圖與渲染、api操作、支付寶小程序的入門和api學(xué)習(xí)。掌握微信小程序開發(fā)了解支付寶小程序。

4、大型購物網(wǎng)站實(shí)戰(zhàn)，整個(gè)項(xiàng)目前后端分離開發(fā)；整個(gè)項(xiàng)目分為四部分：PC端網(wǎng)頁、移動(dòng)端APP、小程序、后臺(tái)管理。團(tuán)隊(duì)協(xié)作開發(fā)，使用git進(jìn)行版本控制。目期間可以擴(kuò)展Three.js 、TypeScript。