我理解的基本知識是，我們可以寫壹些基本的樣式，操作頁面的元素。比如我們用Spring和JSP寫了壹個博客，然後可以用jQuery在頁面上做壹些簡單的操作，調用壹些API。所以，我們需要HTML/CSS的基礎知識。只是想寫好CSS並不容易，需要大量的實踐經驗。後面還需要有JavaScript經驗，不然怎麽做前端？同時，我們需要對DOM有壹些基本的了解，才能做壹些基本的操作，比如修改顏色等等。在這種情況下，最簡單的解決方案是使用類似jQuery的工具。不過，如果能自己操作DOM就太好了。
中間產品
中間的文章就更有意思了，現在需要在頁面上做更復雜的操作。Ajax和JSON是必備技能。當我們想要動態地改變頁面的元素時，我們需要從遠程位置獲得最新的數據結果。而且我們還需要向服務器提交表單，RESTful是必須學習的技能。以後還需要Fetch API和ReactiveX技能。另外需要掌握HTML的語義，比如DIV/CSS，還要用到模板引擎和SCSS/SASS。在這個層面上，我們開始使用Node.js完成前端構建等壹系列動作，這個時候就要學會使用命令行等工具。而且，此時，我們已經開始構建單頁面應用程序。
高級文章
JavaScript是壹種易於使用的語言，也充滿了相當多的糟粕。幾年前，人們用CoffeeScript編譯JavaScript來編寫更好的前端代碼。現在人們有ES6，TypeScript和WebPack來做這些事情。雖然瀏覽器支持現在還不完善，但它們是未來。還有壹些CSS3的特性，有些瀏覽器不支持。這些都是基於語言本身。要寫好代碼，還需要掌握面向對象編程、函數式編程、MVC/MVVM/MV*等概念。作為壹名合格的工程師，還需要掌握安全性(比如跨域)和授權(比如HTTP Basic、JWT等)).
工程
這個標題好像放錯地方了，這部分內容主要是自動構建的。首先，我們需要有基本的搭建工具。不管妳是用吞咽，咕嚕還是只用npm都沒關系。重要的是妳可以自動完成搭建工具，編譯，靜態代碼分析(JSLint，CSS Lint，TSLint)，分析代碼質量(比如代碼氣候，可以幫妳檢測代碼中的不良氣味)，運行代碼中的測試，生成測試覆蓋報告等。所有這些都需要妳有壹個自動構建的工作流。
和睦相處
雖然我們離兼容IE6的時代越來越遠，但是我們還有大量的兼容工作要做。基礎的兼容性測試是跨瀏覽器測試，即Chrome、IE、Firefox、Safari等。此外，還有在不同操作系統上對同壹個瀏覽器的測試，在某些情況下可能會不壹致。比如不同操作系統的字體大小，可能會造成壹些微妙的問題。隨著移動設備的普及，我們還需要考慮瀏覽器內核在不同Android版本下的性能，有時還需要看看劣質的Windows Phone。另外，同壹個瀏覽器有不同的版本，這在IE中很常見。。
前端特異性
除了正常的編碼，前端還有壹些有趣的東西，比如CSS3和JavaScript動畫。使用網頁字體，但是這個不適合漢字。還有圖標字體。畢竟這個字體是矢量的。但是圖標字體還是有壹些問題，比如瀏覽器的抗鋸齒優化，還有壹個痛苦就是妳要準備四種不同類型的字體文件。所以有個東西叫SVG Sprite，以前是CSS Sprite，但是CSS Sprite不能縮放。最後，我們還需要掌握壹些基本的圖形和圖表框架的使用。
軟件工程
此時，和大多數語言項目壹樣，我們需要使用版本管理軟件，比如git、svn，或者壹些內部工具。總之，妳必須有壹個，而不是像2016.07.31.zip這樣的文件，然後，妳還需要壹些依賴管理工具。對於使用Webpack和Browserify將代碼寫入前端代碼的項目，npm是相當有用的。但我個人總覺得bower對於傳統項目來說有點難用。我們還需要模塊化我們的源文件，以便其他人更容易開始這個項目。
試運行測試/調試
作為工程師，調試是必備技能。大多數瀏覽器都有自己的調試工具，而且都不錯——如果妳用過的話。在調試過程中，可以直接使用Console輸出數值，計算數值等等。如果您在構建項目的過程中遇到壹些問題，您需要調試器行。在壹些調用遠程API的項目中，我們還需要壹些更復雜的工具，即包抓取工具。在調試移動設備時，Wireshark和Charles這樣的工具可以讓我們看到是否有異常請求。當然這個時候也有壹個很好的工具，比如Chrome自帶的遠程設備調試。對於移動網站來說，壹定要有壹個響應式的視圖。
試驗
我遇到的很多前端工程師都不寫測試，我就單獨拿出來了。對於壹個前端項目，壹般情況下，我們要有單元測試，功能測試，還有壹些UI測試，來驗證是否可以在頁面之間跳轉。對於依賴於第三方服務的應用程序，也有壹個模擬服務來方便我們的測試。如果是前後端分離的項目，我們還需要進行集成測試。
性能和優化
優化Web應用程序的性能可能並不容易，有時我們知道在哪裏進行優化。這時候人們可以用雅虎的YSlow或者我喜歡的Google PageSpeed來檢測頁面上的壹些問題，比如GZip是否打開，是否壓縮、合並、Minify JS代碼等等。我們還應該使用網絡等工具，在頁面加載時查看壹些比較分散的資源文件，並對它們進行優化。在某些情況下，我們還需要使用Chrome的Timline和Profiel等工具，看看有哪些可以優化的地方。
設計
前端工程師也需要具備基本的UI技能。大多數情況下，我們只能得到壹張照片。如果是壹個完整的頁面，我們需要快速劃分頁面布局。根據不同的頁面布局，如反應式、網格和FlexBox布局，會有不同的設計。而且有時候，我們需要自己規劃，做壹個基本的線框之類的。
搜索引擎優化
如果用搜索引擎作為流量來源，我們還需要考慮頁面的內容，除非妳用的是競價排名。像Sitemap，可能不是我們考慮的，但是我們要考慮很多點。首先，我們需要保證頁面的內容對於搜索引擎是可見的，對應的頁面也有基本的標題、描述和關鍵詞。然後不要放過壹些關鍵字體，比如欄目標題之類的，可以用大號字母比如H2。同時，在頁面設計的過程中，我們還需要考慮壹些內部鏈接的構建。
既能提供頁面可視性，又能提高排名。最後，如果妳的目標是支持結構化數據的搜索引擎，比如Google，妳需要考慮微數據/微格式之類的東西。