① 一名合格的前端工程師的知識結構是怎樣的
做為一個專職的頁面重構者，我們從事的工作簡單的說就是「將設計稿轉換成WEB頁面」，這一過程可以很簡單到直接把PSD從PS里導出成網頁；也可復雜到需要考慮頁面中每個標簽的使用，考慮「頁面性能」。以「前端工程師」為目標的同學可能會不願承認將頁面重構這塊分出來，但隨著工種的細分，加上頁面重構本身的專業性，獨立為一個職業也不是不可能，至少我現在從事的就是一個專職的職位。如果你覺得一個前端工程師必須去畫設計稿，可以不理會下面的內容。
單純的頁面重構，所涉及到的工作內容一般是「分析設計稿= > 切圖= > 寫HTML和CSS」，雖然看起來很少，但要做好這份工作，絕非所想的那麼容易。原因很簡單：工作內容單一，在時間和工作量上必會很苛刻，往往跟設計師的工作時間是3:1，即設計師給三天的時間，製作只給一天的時間完成；在這種工作強度下，很多人都是靠著對這份工作的喜愛在維持著，一旦工作熱情消失，很容易就會變得枯燥，保持熱情也成了重構工作者（也許是所有參加工作的人）應該具備的能力。
跟「前端工程師」所要求的有所不同，「頁面重構」雖然也是「前端工程師」的一個范疇，在職業化中，對專職的頁面重構者，要求當然也更高。不單是做出頁面，而是做出好頁面。又引出另一個話題，「何為好頁面？」，一般包括下面幾點：
1. 結構完整，可通過標准驗證
2. 標簽語義化，結構合理
3. 充分考慮到頁面在站點中的「作用和重要性」，並對其進行有針對性的優化
很多同學多少都遇到過方向不明，不知道自己應該提高些什麼，我們可以從「分析設計稿= > 切圖= > 寫HTML和CSS」這個工作內容，針對每一點提出一些要求，以方便我們分析自己的能力水平，為繼續提高確定個方向：
一，設計稿的分析
設計稿的分析是指對設計稿如何製作成頁面的分析，即哪一塊的內容可以做為公共的部分、哪一塊的內容結構可以如何實現等。對設計稿的分析能力可以劃分成下面的幾個階段：
1. 能分清設計稿中的公共與私有的部分
2. 在1的基礎上對各部分的實現方式有一個初步的方案（包括如何切圖、寫結構、寫樣式）
3. 在1的基礎上，准確的給出各部分的實現方案（包括如何切圖、寫結構、寫樣式）
4. 在3的基礎上，能同時考慮方案的擴展性、復用性及頁面性能（包括如何切圖、寫結構、寫樣式）
5. 在4的基礎上，考慮整站的結構分布（包括文件分布、目錄結構）
上面這些都是在還沒開始動手製作之前所要做的。
二，切圖
切圖是指將設計稿切成便於製作成頁面的圖片。都有個誤區，覺得切圖就是把圖片切出來，其實並不完全是這樣，還包括把切出來的圖片合並到一起，怎麼切、從哪切才能將性能最大化，說「切圖是一門藝術」完全不為過。切圖也可以劃分成幾個階段：
1. 切成所需要的圖片（如何將需要的部分切出來）
2. 在1的基礎上，對切出來的圖片進行一些優化（包括壓縮文件大小、選擇圖片類型）
3. 在2的基礎上，規劃切出來的圖片（包括文件分布）
4. 在3的基礎上，考慮整體的性能（包括合並圖片、壓縮文件大小）
HTML和CSS的編寫
HTML和CSS的編寫是指將上面完成的內容，通過HTML和CSS的編寫，將設計稿轉換成WEB頁面最重要的一塊，也是我們所要重點掌握的內容，把它們放在一起，是因為它們相互的關聯性太強，HTML的寫法會影響到CSS的寫法，它又可以劃分成下面幾個階段：
1. 還原設計稿視覺效果，並通過標准驗證（HTML）
2. 在1的基礎上，實現多瀏覽器的兼容（HTML）
3. 在2的基礎上，標簽語義化（HTML）
4. 在3的基礎上，選擇較優的實現方式（包括模塊化結構，方便程序腳本使用，HTML和CSS）
5. 在4的基礎上，考慮到擴展性、復用性和可維護性（HTML和CSS）
6. 在5的基礎上，考慮到整站的樣式分布（包括如何實現分布）
7. 在6的基礎上，樣式寫法的優化（包括技巧的應用）
是對所遇到問題的解決能力，這一點在不同的階段都可能會遇到，所以沒有寫到上面。
如果你已經達到或超過3、4、5，恭喜你，你已經是一個職業的「頁面重構工作者」了。為了我們自身的發展，關注新技術、技術創新、提高用戶體驗、審美觀、程序腳本的實現方式等，也是十分必要的。大家一起進步吧。
② 前端具體分為
前端即網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。簡單地說，能夠從 App 屏幕和瀏覽器上看到的東西都屬於前端。前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前台代碼實現，包括基本的HTML和CSS以及JavaScript/ajax，最新的高級版本HTML5、CSS3，以及SVG等。
而大前端就是所有前端的統稱，比如Android、iOS、web、Watch等，最接近用戶的那一層也就是UI層，然後將其統一起來，就是大前端。大前端最大的特點在於一次開發，同時適用於所有平台，開發者不用為一個APP需要做Android和iOS兩種模式而擔心。大前端是web統一的時代，利用web不僅能開發出網站，
③ 前端工程代碼結構是怎樣的
用html寫主體結構，用css寫樣式，用js寫各種效果，其中還會用到像Bootstrap，Vue,React這種框架等等。
④ 前端開發的學的框架都有什麼
蝸牛學院在這里給大家整理了一份web前端開發完整的學習路線，框架在第三階段中，希望可以幫到你~
第一階段：專業核心基礎
階段目標：
1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。
2. 熟練運用HTML+CSS特性完成頁面布局。
4. 熟練應用CSS3技術，動畫、彈性盒模型設計。
5. 熟練完成移動端頁面的設計。
6. 熟練運用所學知識仿製任意Web網站。
7. 能綜合運用所學知識完成網頁設計實戰。
知識點：
1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。
2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。
3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。
第二階段：Web後台技術
階段目標:
1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。
2. 熟練掌握JavaScript的基本數據類型和變數的概念。
3. 熟練掌握JavaScript中的運算符使用。
4. 深入理解分之結構語句和循環語句。
5. 熟練使用數組來完成各種練習。
6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。
7.DOM和BOM實戰練習和H5新特性和協議的學習。
知識點：
1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。
2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。
3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。
4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。
第三階段：資料庫和框架實戰
階段目標：
1. 綜合運用Web前端技術進行頁面布局與美化。
2. 綜合運用Web前端開發框架進行Web系統開發。
3. 熟練掌握Mysql、Mongodb資料庫的發開。
4. 熟練掌握vue.js、webpack、elementui等前端框技術。
5. 熟練運用Node.js開發後台應用程序。
6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。
知識點：
1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。
2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。
3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。
4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。
第四階段：移動端和微信實戰
階段目標：
1.熟練掌握React.js框架，熟練使用React.js完成開發。
2.掌握移動端開發原理，理解原生開發和混合開發。
3.熟練使用react-native和Flutter框架完成移動端開發。
4.掌握微信小程序以及了解支付寶小程序的開發。
5.完成大型電商項目開發。
知識點：
1、React面向組件編程、表單數據、組件通信、監聽、聲明周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。
2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。
3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。
4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。
⑤ 一名合格的前端工程師的知識結構是怎樣的
現在前端如此眼花繚亂，技能多多，都是基於此三板斧：
HTML、CSS、JavaScript
語言基礎：HTML、CSS、JavaScript
思想標准：W3C標准
現在運用的html 超文本標記語言，css 等所有基於web技術的范疇，基本都是w3c標准，並全世界統一執行的，所以符合w3c 也就是開啟前端之門了。
web前端，首先不是孤立存在的，前端相對於web後端編程而言，前端是瀏覽器自身支持的編程語言，包括html,css,javascript
HTML： 是構成網頁展示的基礎，是一種很簡單可視化的標識語言，說白了就是 一是一，你寫二就出二。網上所有的網頁網站，不管多麼牛鼻最後都會轉化成html，被瀏覽器渲染出來，用作展示。
CSS： 又稱作樣式表，簡單點說就是html的外衣，將html包裝的明艷動人。
JavaScript：是一種直譯式腳本語言，非常靈活，可以在任何瀏覽器上開發與調試的一種動態類型、弱類型、基於原型的語言。
⑥ 一名合格的前端工程師的知識結構是怎樣的
這里直接跳過最基本的HTML+CSS+JS, 包括但不僅限於:
- HTML各種element怎麼用什麼時候用?
- Event? EventLitsener? HTML中觸發event以及JS中處理event?
- DOM tree? 添加? 修改? 刪除? 搜索? 遍歷? 選擇? children? parent? sibling?
- 什麼是window? 什麼是document?
- JS基本語法? function? loop&condition? scope&closure? array&object? this?
- CSS 什麼是box modal? position? float? 各種選擇器(*, >, ~, :nth-child)?
## 程序員的基本素質和知識
(有些人覺得前端不同於傳統意義上的程序員, 這點我十分不贊同. 或許把前端工程師叫做JS程序員更加貼切, HTML和CSS就好比其他語言中的UI庫)-
- 高數, 基本的概率統計 (連簡單的微分方程都不會解的朋友們就不要稱自己為前端人員了!)
- 基本數據結構 能用JS寫出linked list, stack, queue, (binary)tree, graph, hashtable么?
- 基本演算法 能用JS實現各種search(linear, binary..), 各種sort(bubble, insertion, merge, quick, selection), 以及樹的搜索(Breadth First/Depth First)和遍歷(3種順序)么?
- 設計模式 知道什麼是singleton, factory, strategy, decrator么?
- Git 不要只是停留在把Github當做一個網路儲存器的層面上, 知道branch, diff, merge么?
- 基本的英語能力(不要求聽說, 只用來讀/寫文檔資料)
- 基本的計算機知識 知道位運算, 溢出, thread, lock, concurrency, parallelism么?
- 熟悉unix的基本命令么? 知道ssh public/private key都是幹嘛的么?
- 知道正則么? 能夠熟練的使用么?
- 能寫出詳細的注釋/文檔, 讓閱讀你代碼的人知道你要幹嘛么? 能短時間內快速地讀懂來自你同事或者其他地方(github, blog)的代碼, 知道什麼東西應該寫在什麼地方, 以便迅速地參與其中么?
- 給你一個你從來沒有接觸過的庫/語言, 能能夠在較短的時間內在你的代碼里正確使用么?
- 有一個得心應手用的熟練地編輯器/IDE么? 不要求大家都是vim/emacs大神, 但也不要做什麼都是用滑鼠來點.
- 基本的檢索查詢能力(google, stackoverflow, MDN)
- 單獨思考解決問題的能力, 團隊合作, 與人相處
### 前端專業知識
- 知道什麼是AMD, COMMONJS么? 知道call, apply, bind么? 知道JS中foreach, filter, some, every么? 知道怎麼實現functional JS(curry等)么?
- 知道各種所謂的高級HTML的API(File, Web Audio, WebSocket)么?
- 知道各種CSS Preprocessors么? 能講出他們各自的優點和缺點么? 熟悉並且會用其中的一種么?
- 知道各種CSS框架么? 能講出他們各自的優點和缺點么? 熟悉並且會用其中的一種么?
- 知道canvas, SVG么?
- 知道怎麼把你的東西做成responsive, cross-browser support么?
- 知道什麼是SEO並且怎麼優化么? 知道各種meta data的含義么?
- 知道什麼是Ajax, restful, get, post么? 知道怎麼和後台交互么?
- 知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能講出他們各自的優點和缺點么? 熟悉並且會用其中的一種或多種么?
- 知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
- 知道現在前端一般的工作流程(gulp, grunt, git, svn, npm)么?
- 知道怎麼測試代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
- 知道前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用么?
- 知道npm, V8, node, express, socket么? (這里補充一點, 現在越來越多的公司都採用: '前端網頁 -> 前端後台 -> 後台'這種構架來搭建東西, 也就是說, 前端工程師不僅要做傳統前端的網頁, 還要寫自己的後台, 來跟真正的後台進行交互, 至於前端的後台用什麼語言來寫, 一般是node/python/ruby, 不太會用到龐大的java, 所以這里我把node列為前端工程師必須要掌握的技能之一) 知道cache, authentication么?
- (如果要用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
- 另外, 前端這個行業跟傳統的c/c++/java程序員還是有一定的差別的. 由於是新興產業, 所以各種行業標准, 框架, 庫會隨時隨地的產生和更新 (作為一個c程序員, 十年前怎麼寫東西現在還是怎麼寫東西). 今天出了node和react, 明天又出了io和mean. 所以, 積極關注各種前端產品, 跟上變化的節奏, 也是身為一個前端程序員必備的技能之一. 知道ECMAScript 6里怎麼寫class么? 知道react, flux, reflux么? 知道polymer, dart么? 知道meteor么?
來自:http://www.hu.com/question/28860309
@haochuan的回答
⑦ 一名合格的前端工程師的知識結構是怎樣的
PHP，面向對象，測試，框架設計，安全性，需求分析，前端語言，資料庫等
一般會PHP和資料庫加點前端JS語言就可以做個一般的工程師了，
中級點的就是PHP，面向對象，需求分析，前端語言，資料庫，
高級的PHP，面向對象，緝恭光枷叱磺癸委含蓮測試，框架設計，安全性，需求分析，前端語言，資料庫，
大神級別就是開掛模式無限制，一般到了高級就沒什麼語言的限制了
⑧ 一名合格的前端工程師的知識結構是怎樣的
前端的知識架構看看下面這個圖應該就能了解大概了。
⑨ 什麼是前端架構
架構設計的最重要目的是為了進行整體系統概覽，以及開發方向指導。
而架構要包含的內容，簡單說就是下面四個
1、系統間關系
2、系統內關系
3、應用內架構
4、系統規范與原則
而架構的原則主要是三個方面
1、架構的合適：架構就像衣服，不能太長，也不能太短
2、可擴展的：架構需要充分考慮擴展性
3、持續不斷的：架構不是一次性物品，是一個跟著軟體生命周期的長期過程
⑩ 「產品前端架構」介面設計
用戶使用 Web 客戶端訪問 Web 系統，系統在收到請求後執行操作
（收集數據模型，選擇數據經行組裝），將結果返回給客戶。
其中包括的元素和關系如下圖所示：
約定
每個規范也會對應若干規定若干規則約定來指導前後端工程師的具體實施。
頁面入口規范（範例）
同步數據規范（範例）
非同步介面規范（範例）
通過 模擬數據 的形成，將前端本地開發與後端獨立出來，
這樣前端工程師就可以獨立的進行本地的開發工作。
使用頁面入口規范制定項目結構（配置信息，目錄結構和模板結構），
此過程可以使用自動化工具自動完成。
根據同步數據規范可生成模擬數據的配置文件。（此部分通用可以使用自動化工具來完成）
根據非同步介面規范生成模擬非同步數據。
前端開發環境包含兩個部分， 本地模擬伺服器 和 本地代理 。
Local Server
根據請求規則進行匹配，然後生成（整合模板和模擬數據）所請求的頁面
Local Proxy
攔截非同步請求後，根據請求的匹配規則返回所請求的數據（例如 JSON 或 XML）。
前後端聯調需要去除本地環境，在實際開發中只需要對配置文件進行調整既可
（控制哪些請求需要被本地伺服器或代理攔截，哪些需要使用遠程伺服器）。