Web前端工程師成長之路——知識匯總
阿新 • • 發佈：2017-10-29
val target avl media 影響 比較 知識 索引 成長之路
圖1、前端技術MSS
Web前端開發技術主要包括三個要素：HTML、CSS和JavaScript！
它要求前端開發工程師不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和服務器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
隨著近兩三年來RIA（Rich Internet Applications的縮寫，中文含義為：豐富的因特網應用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight、XML和服務器端語言（PHP、ASP.NET，JSP、Python）等語言，前端開發工程師也需要掌握。
前端開發的入門門檻其實很低，與服務器端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢。
圖2、Web前端工程師知識架構
優秀的前端工程師應該具備快速學習能力。推動Web發展的技術並不是靜止不動的，這些技術幾乎每天都在變化，如果沒有快速學習能力，你就跟不上Web發展 的步伐。你必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何 通過自己的Web應用程序來體現這種翻天覆地的變化。
四、前端開發知識架構
前端工程師
【轉】Web前端工程師成長之路——知識匯總
一、何為Web前端工程師？ 前端工程師，也叫Web前端開發工程師。他是隨著web發展，細分出來的行業。Web前端開發工程師，主要職責是利用(X)HTML/CSS /JavaScript/DOM/Flash等各種Web技術進行產品的界面開發。制作標準優化的代碼，並增加交互動態功能，開發JavaScript以 及Flash模塊，同時結合後臺開發技術模擬整體效果，進行豐富互聯網的Web開發，致力於通過技術改善用戶體驗。
圖1、前端技術MSS
Web前端開發技術主要包括三個要素：HTML、CSS和JavaScript！
它要求前端開發工程師不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和服務器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
隨著近兩三年來RIA（Rich Internet Applications的縮寫，中文含義為：豐富的因特網應用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight、XML和服務器端語言（PHP、ASP.NET，JSP、Python）等語言，前端開發工程師也需要掌握。
前端開發的入門門檻其實很低，與服務器端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢。
- HTML 甚至不是一門語言，他僅僅是簡單的標記語言！
- CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。
- Javascript 的基礎部分相對來說不難，入手還算快。
- DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
- DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。
- 事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
- XMLHttpRequest——這是什麽、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
- 嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
- 盒模型——外邊距、內邊距和邊框之間的關系，IE < 8中的盒模型有什麽不同。
- 塊級元素與行內元素——怎麽用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
- 浮動元素——怎麽使用它們、它們有什麽問題以及怎麽解決這些問題。
- HTML與XHTML——二者有什麽區別，你覺得應該使用哪一個並說出理由。
- JSON——它是什麽、為什麽應該使用它、到底該怎麽使用它，說出實現細節來。
- 產品經理。這些是負責策劃應用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現的應用。一般來說，產品經理都追求豐富的功能。
- UI設計師。這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麽敏感、交互的一貫性以及整體的好用性。一般來說，UI設計師於流暢靚麗、但並不容易實現的用戶界面，而且他們經常不滿前端工程師造成 1px 的誤差。
- 項目經理。這些人負責實際地運行和維護應用程序。項目管理的主要關註點，無外乎正常運行時間、應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。
- 最終用戶。指的是應用程序的主要消費者。盡管前端工程師不會經常與最終用戶打交道，但他們的反饋意見至關重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。
圖2、Web前端工程師知識架構
優秀的前端工程師應該具備快速學習能力。推動Web發展的技術並不是靜止不動的，這些技術幾乎每天都在變化，如果沒有快速學習能力，你就跟不上Web發展 的步伐。你必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何 通過自己的Web應用程序來體現這種翻天覆地的變化。
四、前端開發知識架構
前端工程師- 瀏覽器
- IE6/7/8/9
- Firefox
- Chrome/Safari/Opera
- 編程語言
- JavaScript/Node.js
- JavaScript語言精粹
- 切頁面
-
- HTML/HTML5
- CSS/CSS3
- PhotoShop/Paint.net
-
- 開發工具
- IDE
- VIM/Sublime Text2
- Notepad++/EditPlus
- WebStorm
- 調試工具
- Firebug/Firecookie
- YSlow
- IEDeveloperToolbar/IETester
- Fiddler
- 版本管理
- Git/SVN
- Github/Bitbucket/Google Code
- IDE
- 代碼質量
- Coding style
- JSLint/JSHint
- CSSLint
- Markup Validation Service
- 單元測試
- QUnit/Jasmine
- Mocha/Should/Chai
- 自動化測試
- WebDriver
- WebDriver
- Coding style
- 前端庫/框架
- jQuery/Underscore/Mootools/Prototype.js
- YUI3/Dojo/ExtJS
- Backbone/KnockoutJS/Emberjs
- 前端標準/規範
- HTTP1.1
- ECMAScript3/5
- W3C/DOM/BOM/XHTML/XML/JSON/JSONP
- CommonJS/AMD
- HTML5/CSS3
- 性能
- JSPerf
- YSlow 35 rules
- PageSpeed
- HTTPWatch
- DynaTrace’s Ajax
- 高性能JavaScript
- 編程知識儲備
- 數據結構
- OOP/AOP
- 原型鏈/作用域鏈
- 閉包
- 函數式編程
- 設計模式
- Javascript Tips
- 部署流程
- 壓縮合並
- YUI Compressor
- Google Clousure Complier
- CleanCSS/UglifyJS
- 文檔輸出
- JSDoc
- Dox/Doxmate
- 項目構建工具
- make/Ant
- GYP
- Grunt
- Yeoman
- 壓縮合並
- 代碼組織
- 類庫模塊化
- CommonJS/AMD
- YUI3模塊
- 業務邏輯模塊化
- 文件加載
- LABjs
- SeaJS/Require.js
- 類庫模塊化
- 安全
- CSRF/XSS
- ADsafe/Caja/Sandbox
- 移動Web
- HTML5/CSS3
- 響應式設計
- Zeptojs/iScroll
- V5/Sencha Touch
- PhoneGap
- jQuery Mobile
- JavaScript生態
- MongoDB/CouchDB
- MongoDB/CouchDB
- 前沿技術社區/會議
- D2/WebRebuild
- NodeParty/W3CTech/HTML5夢工廠
- JSConf/滬JS(JSConf.cn)
- QCon/Velocity/SDCC
- JSConf/NodeConf
- YDN/YUIConf
- 計算機知識儲備
- 編譯原理
- 計算機網絡
- 操作系統
- 算法原理
- 軟件工程/軟件測試原理
- 軟技能
- 知識管理/總結分享
- 溝通技巧/團隊協作
- 需求管理/PM
- 交互設計/可用性/可訪問性知識
- 可視化
- SVG/Canvas/VML
- D3/Rapha?l/DataV
- 開發工具
- 後端工程師
-
- 編程語言
- C/C++/Java/PHP/Ruby/Python/…
- C/C++/Java/PHP/Ruby/Python/…
- 數據庫
- SQL
- MySQL/MongoDB/Oracle
- 操作系統
- Unix/Linux/OS X/Windows
- Unix/Linux/OS X/Windows
- 數據結構
- 編程語言
Web前端工程師成長之路——知識匯總