近年來，前端技術的發展迅速，但因為前端知識面龐大，在實際學習當中往往無法理清其中的脈絡。下面從各種庫、框架、插件的層面上，對前端知識點做一些簡單的梳理。從軟件工程上，將前端分為四個由淺及深的層面或階段。
一、基礎層（瀏覽器原生支持html/css/js）
- HTML超文本標記語言，用標簽構建網頁的內容。HTML5擴展了標簽及其功能。
- CSS層疊樣式表，控制頁面內容的表現。CSS3增加了更多的特效，比如文本效果和2D/3D轉換，以及動畫。
- JavaScript的原生API（包括DOM、BOM、Style樣式、Canvas、SVG、WebGL等）
有了這些以后，我們已經可以開發基本的網絡應用了，但是會發現它們並不好用，或者說存在一些缺陷，有優化的余地。
- 當前后端分離后，通過API獲取到的數據，需要填充到頁面中，原生DOM操作非常消耗性能，且傳統JS使用字符串拼接的方式不太好用
- CSS不能像其他程序語言一樣，通過變量、計算、繼承等方式很好的管理。
- JS原生API不好用，還存在瀏覽器兼容等問題。
這些問題，前端開發者通過多年的填坑，花費巨大的精力封裝了各種框架層，用來減少開發工作量。
二、框架層（各類前端庫）
JQuery、YUI、Zepto、以及針對H5中canvas的游戲庫Lufylegend等等，主要為了解決瀏覽器原生API不好用和兼容問題，即對原型API做了二次封裝，使其更易於開發和掌握，本質上等於依靠框架層間接操作原生瀏覽器的基礎API。在此基礎上，又針對一些常用的頁面組件，擴展了為插件，即組件或插件層。
三、組件層（或插件）
常用的如：日歷選擇器、富文本編輯器、圖片輪播等等。這些僅僅是對WEB應用中，比較常用或通用的部分進行了再次封裝。除此之外，那些平台特有的業務邏輯屬於應用層。
四、應用層（業務層）
如購物車，權限管理等等，應用層的業務邏輯通常隨WEB應用的場景有關。
如上只是傳統的開發模式，隨着前后端的分離，前端開發分擔了越來越多業務邏輯。通過HTTPrequest與后台交互數據，然后通過拼接字符串的方式，生成瀏覽器識別的DOM結構與樣式。這些都讓前端開發越來越重，但js本身不能很好的實現模塊化管理，所以出現了require、sea等AMD和CMD的模塊加載框架。
前端的革命
Node的出現，讓前端領域發生了巨大的改變，前端開發者終於可以自己開發工具了（如同猿人學會了制造工具，前端脫離了刀耕火種的年代）。隨着自動化工具glup、webpack的火熱，多種多樣的預編譯程序（如HTML模板引擎jade、Ejs等，CSS預處理器Sass、Less等），以及前端MVC、MVVM框架angular、react、vue等如雨后春筍般蜂擁出現，前端開發進入一次全面封裝的時代，組件化開發模式在一定程度上，利用JS的可編程性管理html和css，最后通過編譯，再生成瀏覽器識別的HTML/CSS/JS。
移動端的出現，在一定程度上，也對前端技術提出了更高的要求，基於移動端的網絡環境，需要用更少的資源實現最大化的效果。
最后小程序的推出，進一步拓展了前端開發的應用領域，將應用程序存儲到雲端的嵌入式開發，或許是未來應用的新方向。