前言：
本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、歸納和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端須要瞭解的知識大體有什麼，看上去有不少，但具體你要學什麼，仍是要 follow your heart & follow your BOSS。javascript初衷。寫這篇文章主要有如下幾個初衷：php
梳理知識體系。網上雖然有許多相似的內容，但每一個人都有各自獨特的思惟方式，適合本身的纔是最好的。css
探索不足之處。明確本身到底掌握了哪些，哪些本應掌握但尚未學習。前端
完善公司的前端培訓方向。前端技能培訓的方向由懂前端、懂公司前端團隊的人來設定最好不過了。vue
但願藉此激發你們的一點思考。咱們都在路上，我不是成功的例子，我寫下個人思考，但願藉此激發你們的一點思考。java
一個梗。自 2012 年以來，我知乎上獲贊最多的答案倒是引用他人的答案……有點尷尬：《一名合格的前端工程師的知識結構是怎樣的？》node
目錄
-
專業技能git
專業技能
前端理論
瀏覽器
知己知彼
-
瀏覽器內核渲染原理
HTML 解析器
CSS 解析器
JavaScript 引擎
-
渲染流程
加載
解析（肯定結構、計算樣式）
構建 DOM 樹、應用樣式
繪製
迴流
重繪
-
瀏覽器調試
-
工具
F12
擴展插件
瀏覽器經常使用快捷鍵
-
調試內容
-
元素
結構
屬性
樣式
-
腳本
日誌
斷點
事件
變量監聽
調用堆棧
-
性能
snapshot
耗時
-
網絡請求
模擬請求
審查網絡
模擬網絡環境
內存
-
本地存儲信息
cookie
local storage
cache
-
調試技巧
-
-
瀏覽器事件
-
常見事件
鼠標事件
表單元素事件
鍵盤事件
文檔事件
CSS 事件
……
事件處理、添加、移除
-
-
瀏覽器任務調度機制
micro queue
macro queue
-
瀏覽器兼容性
-
各平臺瀏覽器的坑（家家有個難填的坑，有的坑深，有的坑淺）
-
移動端瀏覽器
UC
Safari
微信瀏覽器
百度
……
-
PC 端瀏覽器
Chrome
Firefox
IE
Edge
……
小程序
-
-
不一樣瀏覽器內核差別
CSS 私有屬性前綴（注：建議使用 postcss 自動化補全）
Polyfill
-
HTML、CSS、Javascript 特性支持度
MDN
Can I use ?
-
-
常見問題
請求跨域
iframe 跨域通訊
各類兼容性問題
網頁加載速度慢
按鈕點擊沒反應……
HTML
吃土小2叉：聽說 HTML 和 CSS 一塊兒學習體驗最佳哦
-
語法 & 語義
-
!DOCTYPEHTML 文檔標準怪異模式
標準模式
-
head-
meta元數據標籤網頁描述
設備描述
HTTP 請求描述
HTTP Client Hints
-
-
body裝飾型標記（不推薦、部分已廢棄）
-
功能型標記
無語義容器（div、span）
-
用戶交互（交互型標記）
輸入框
選擇器
多選框
單選框
按鈕
-
數據可視化（展現型標記）
-
列表
定義列表
無序列表
有序列表
表格
結構化數據標記、微數據
-
多媒體
圖片
視頻
音頻
SVG、Canvas
文章（正文、摘要、段落、章節、前言、結語、引用）
-
-
-
規範
HTML 代碼規範
-
HTML 使用規範（標籤嵌套規則）
標籤類型
可訪問性、無障礙體驗
-
常見問題
圖片空 src 致使頁面加載兩次
iframe 空 src 致使無限循環加載本頁面
上圖聽說是 HTML5 規範中關於 HTML 標籤嵌套規則的示意圖
CSS
吃土小2叉：用設計師的思惟去理解 CSS，用程序員的思惟去寫 CSS
-
語法（CSS 從入門到放棄）
基本用法
-
選擇器
基礎選擇器
組合選擇器
媒體查詢
簡寫屬性
註釋
屬性運算 calc()
-
規範（編寫可讀性良好的 CSS）
-
用例規範
權限控制
最佳實踐
不良習慣
-
格式規範
風格
複用
BEM 規範
-
-
邏輯特性（在 CSS / Less 中運用 OO 思想和設計模式）
權重（優先級）
做用域
封裝（mixins）
組合（mixins+）
擴展（:extend）
繼承（mixins）
CSS 變量、Less 變量
模塊化（import）
-
視覺設計（單一狀態設計）
交互設計（多狀態設計）
-
-
動畫（運動和靜止是對立的統一）
過渡效果
動畫關鍵幀
-
-
反饋
active、checked 狀態
-
引導
結合 Javascript
CSS 動畫
-
互動
hover 狀態
-
多設備設計
-
響應式設計（多套代碼，多種設備）
媒體查詢
-
自適應設計（一套代碼，多種設備）
最小固定寬度佈局
百分比佈局
柵格佈局、彈性佈局
js + rem 方案（rpx）
-
-
常見問題
視覺還原度
調試技巧
-
屬性「失效」問題
transition 「失效」？
z-index 「失效」？
外邊距合併
邊框 1px 問題
垂直居中
大屏幕 rem 小屏幕 px
圖片適配
-
可維護性
權重控制
嵌套層級
語義性
-
擴展內容
預處理器：Less、Sass
後處理器：postcss
小程序的 WXSS
Weex、RN 中的 CSS
JavaScript
吃土小2叉：至今還沒看完一遍《JavaScript 高級程序設計》的我是該好好面壁思過了。
本段內容大量參考了：《The Modern JavaScript Tutorial》http://javascript.info/ ，推薦閱讀。
-
JavaScript 標準
嚴格模式
兼容模式
-
開發工具
IDE
輕量編輯器
-
基礎語法
-
數據類型
基本數據類型
number、string、boolean、null、undefined、object、symbol數據類型檢測
-
解構賦值
數組
對象
date與時間-
JSON
格式說明
序列化
反序列化
-
數組
數組操做（增、刪、改、遍歷、複製）
多維數組
-
變量
聲明
var、let、const聲明提高
做用域
-
邏輯控制
循環
分支
判斷
-
對象（基礎部分）
對象操做（增、刪、改、查、複製）
Symbols
類型轉換
垃圾回收機制
對象方法中的 this
new
-
函數
函數默認值
函數聲明
當即執行函數
箭頭函數
-
運算符
數值運算
邏輯運算
-
事件
瀏覽器事件
冒泡、捕獲
事件捕獲
瀏覽器默認行爲
-
文檔
DOM 樹
-
節點
節點類型
節點標籤
節點內容
window 對象
-
DOM 操做
元素節點（增、刪、移、換、複製）
元素屬性（增、刪、改、查）
文本內容（增、刪、改、查）
-
網絡請求
ajax（回調函數）
Promise
async、await
-
-
深刻細節
-
對象、類、繼承
屬性標記與屬性描述
原型、原型鏈
繼承
屬性定義
對象混合
類型檢測
-
數據類型
基本類型
複雜類型
-
函數進階
遞歸、調用堆棧
閉包
函數綁定、上下文
剩餘參數、擴展語法
函數對象
任務調度：定時器
柯里化
深刻箭頭函數
函數式
-
錯誤處理
異常捕獲
-
-
代碼質量
註釋
-
相關工具
ESLint、JSLint
Standard.js
Prettify
自動化測試工具：Jest、Mocha
-
用例規範
最佳實踐
不良習慣
-
格式規範
風格
-
正則表達式
普通字符、轉義字符
元字符
字符類
分支條件
分組
反義
貪婪與懶惰
後向引用
……
編程通用
軟件工程的核心就是管理複雜度 —— 《代碼大全 2》
推薦閱讀：來自法海@淘寶前端團隊《從達標到卓越 —— API 設計之道》
-
達標（語法、詞法）
正確拼寫
準確用詞
注意單複數
不要搞錯詞性
處理縮寫
用對時態和語態
-
熟練（語義、可用性）
單一職責
避免反作用
代碼一致性
合理設計函數參數
合理運用函數重載
使返回值可預期
固話術語表
遵循一致的代碼風格
-
卓越（系統性、大局觀）
版本控制
確保向下兼容
設計擴展機制（易於擴展）
控制 API 的抽象級別
設計模式
註釋
DRY
編碼規範
解耦
複雜度控制
SEO & 數據統計 & 數據分析
吃土小2叉：盡人事，聽天命（天者，用戶也）
-
SEO
-
影響因素
-
相關性
title
關鍵詞密度
-
權威性
外鏈
內鏈
域名年限
網站收錄
安全性
-
用戶體驗
廣告
加載速度
內容質量：內容真實性、內容原創性、內容有益性
用戶反饋
-
-
不良行爲
堆疊關鍵詞
抄襲、做弊
大量低價值外鏈
廣告、木馬、病毒
-數據統計
-
工具
統計、埋點工具：Google Analytics、百度統計、Piwik……
站長工具：Google Webmaster 、百度站長工具
其餘工具：百度指數、SEO 各項指標助手工具……
-
-
數據分析
-
工具
同數據統計工具
腦子是個好東西
-
分析方法
歸因、排查
-
細分
來源、渠道
-
用戶屬性
人口統計學
用戶終端、型號
-
用戶行爲
站內搜索關鍵詞
自定義事件（埋點事件）
瀏覽頻率、時間、跳出頁
訪問內容
訪問漏斗
站點屬性
-
對比
時間維度
統計指標維度
-
目標設置
轉化路徑
轉化目標
轉化價值
-
網絡基礎
此處是否是又要出現，經典問題：當你在瀏覽器輸入 URL 並回車（非單頁應用的傳統網站），直到你看見這個頁面，此時經歷了哪些過程（略去瀏覽器渲染環節）。
-
TCP / IP
-
HTTP
-
請求
請求頭
請求正文
-
響應
HTTP 狀態碼（2xx、3xx、4xx、5xx）
響應頭
響應正文
過程：三次握手
-
HTTP2
HTTPS
Web Socket
CORS
Session、Cookie
RESTful / RPC
-
-
DNS 、域名、IP
域名劫持
內網、公網地址段
-
緩存
服務端緩存
客戶端緩存
-
經常使用工具
F12 Network Panel
Advanced REST client
EditThisCookie
Wireshark
Fiddler、Charles
-
常見問題
-
HTTP 遷移到 HTTPS 站點部署問題
-
HTTPS 證書部署
TLS 版本問題
證書做用域（是否包含子域名）
證書、祕鑰配置文件
-
資源加載同協議
-
error 級外部 JavaScript 加載
iframe
-
warning 級img
CSS
-
-
網絡請求同協議
-
error級ajax
jsonp
-
-
-
交叉領域理論
吃土小2叉：學習交叉領域知識的一個很樸實的目的 —— 掌握如何甩鍋
產品設計相關
吃土小2叉：學會優雅地質疑設計 => 給用戶更好的體驗
與設計師的溝通、協做
-
設計理念 => 用戶體驗
一致性
可用性
易用性
反饋
-
提高審美
單反窮三代 // 單身狗 XX：也許學好攝影就能追到女神了呢？
競品分析 // 知己知彼，重視對手
-
經常使用工具
雪碧圖生成工具（http://www.spritecow.com/）
圖片有損壓縮工具（https://tinypng.com/）
.psd 智能標註（http://www.fancynode.com.cn/p...）
強烈建議設計師使用 Sketch 進行設計
後端基礎
吃土小2叉：只要把這篇文章《系統設計入門》上面你不認識的術語弄懂就能夠了 （迷之微笑）
XX 的觀點：時刻謹記編程語言只是一種工具，分別有不一樣適用的場景罷了。理性、客觀、結合實際。
-
與後端開發工程師的溝通、協做
明確分工
文檔先行
mock 數據
簡單瞭解一門後端語言 // XX 注：若是你已經本身搭建了我的博客站點，後端語言的語法層面足夠了。
瞭解前端路由與後端路由的區別
-
簡單應用數據庫（MySQL）
增、刪、改、查
備份、導出
-
瞭解做用與概念
GraphQL
Nginx
Redis
負載均衡
CDN
數據庫主從備份
-
計算機相關基礎知識 // 有時間多重溫（預習）重溫（預習）
數據庫
操做系統
編譯原理
離散數學
數字邏輯
前端實踐
實踐是檢驗真理的惟一標準，在此引用 Vue.js 做者尤雨溪的一段話：
技術方案都是先有問題，再有思路，同時伴隨着取捨。在選擇衡量技術的時候，儘可能去思考這個技術背後是在解決什麼問題，它作了怎樣的取捨。這樣一方面能夠幫助咱們更好的理解和使用這些技術，也爲之後哪天你遇到業務中的特殊狀況，須要本身作方案的時候打好基礎。
解決實際問題
Learn from you mistakes.
吃土小2叉：寫下這篇文章的時候恰逢今年高考，很感謝高一的英語老師當時給咱們佈置的一個做業：整理考試錯題集。由於經歷過太屢次，一樣類型的題目此次錯，下次仍然錯。而我又是一個比較較真的人，每次整理錯題的時候，不僅僅只記錄作錯的問題和答案，還會去分析這裏的考點，所涉及的知識點，去試着換位思考若是我是出題人，會怎麼出這道題，考哪些知識點能夠坑一下考生。而這一過程，又有着考試作錯題的心理愧疚感，記憶會特別深入。另外一方面，在複習階段，也能夠更具備針對性地複習，爲本身減壓。要儘可能把大腦當成 CPU 來用，或者倒排索引，而非硬盤、數據庫。
Learn from your practice.
而在編程過程當中，也是比較接近。咱們能夠記錄下本身犯過的錯誤，不良的編碼案例。同時，咱們也能夠像常常收集一些名人名言、固定搭配等寫做套路同樣，去整理、收集本身在開發過程當中的最佳實踐。固然如果有時間再去思考、反思、優化，那就更好了。
Learn from your worry & adversity.
另外，抱着積極的態度、強大的心裏去面對開發過程當中的任何困惑、困境，都是助力快速成長的好機會。
前陣子我在 GitHub 上也開了一個項目，專門記錄、收集我最近在前端開發過程當中遇到的一些問題，有已經解決的，也有仍待解決的。
目前整理的已解決問題有：
→_→ 沒有更多了……
仍待解決的問題：
如何優雅地監聽元素高度變化？
移動端 banner 輪播圖自適應的各類坑
固然我也簡單寫了一些方法論，包括：
後續我也會不斷完善這一塊內容。重點是：造成一套屬於本身的最佳實踐經驗庫。
學習型項目
這一部份內容更推薦你們關注 Phodal 大神的 Growth 系列
而我給準備入門前端的新手的建議是：
擁有一個徹底屬於本身的博客、域名、網站、服務器，並每週固定更新博客文章、每一年爲博客更新一次主題。
前端工程
勿忘本身的 title：前端工程師
第一階段：庫/框架選型
第二階段：簡單構建優化
第三階段：JS/CSS模塊化開發
第四階段：組件化開發與資源管理因爲先天缺陷，前端相比其餘軟件開發，在基礎架構上更加迫切的須要組件化開發和資源管理，而解決資源管理的方法其實一點也不復雜：
一個通用的資源表生成工具 + 基於表的資源加載框架
第一階段：框架應用
吃土小2叉：只要是一個文檔友好的框架，遇到不會的問題，去翻翻文檔，若是解決不了，再去認真翻一次。所以，第一階段，亦可認爲是：面向文檔編程。
此處建議再回憶一下剛纔說起的尤大的話。
如下是我我的的框架/庫應用路線：
jQuery => jQuery + artTemplate => Vue.js + lodash => Vue.js 全家桶
-
jQuery // 此處參考張鑫旭的 jQuery 1.4 中文文檔
-
核心
對象訪問
數據緩存
隊列控制
插件機制
多庫共存
-
事件
頁面載入
事件處理
事件委託
事件切換
-
經常使用事件
鼠標事件（click、dbclick、hover、mouse*……）
鍵盤事件（key*……）
表單事件（blur、change、focus、submit、select）
瀏覽器事件（error、resize、scroll）
觸摸事件（touch*……）
-
選擇器
基本
組合
僞類
內容
可見性
屬性
表單
-
篩選器
過濾
查找
串聯
-
CSS
CSS
位置
尺寸
-
DOM 操做
元素節點（增、刪、移、換、複製）
元素屬性（增、刪、改、查）
文本內容（增、刪、改、查）
-
網絡請求
Ajax
when
deferred
-
特效
基本（顯示、隱藏）
滑動
淡入淡出
自定義動畫控制
-
輔助工具（相似於 lodash）
數組、對象操做
函數操做
-
字符串操做
瀏覽器及特性檢測
類型檢測
JSON 序列化
-
-
artTemplate
模板引擎
-
Vue.js
MVVM 思想
聲明式渲染
條件與循環
處理用戶輸入
數據綁定、響應式數據
-
組件化應用構建
組件間通訊
狀態管理
-
lodash.js // 提供各類 helper 方法，專一於數據處理
-
數據類型
數組
集合
日期
函數
數值
對象
字符串
-
語言特性
類型檢測
類型比較
複製
數學運算
輔助工具
-
XX：
學會用 artTemplate 之後，會發現 Vue.js 很容易上手
當你學會 Vue.js 之後，你會發現小程序真的很容易上手
第二階段：簡單自動構建優化
專一業務開發
-
工具
Grunt
Gulp
-
預處理
Less
Babel
TypeScript
-
後處理
PostCSS
-
校驗
ESLint
-
壓縮
代碼
圖片
合併
打包
自動化測試
mock 接口調試
第三階段：JS/CSS模塊化開發
張雲龍：分治、分治、分治
AMD
CommonJS
UMD
ES6 Module
……
第四階段：組件化開發與資源管理
核心目的：提升開發效率 & 兼顧運行性能
分治、解耦、自由組合、就近維護
-
Vue.js 組件化開發
-
抽象業務邏輯組件
組合基礎 UI 組件造成業務組件
獨立編寫業務相關組件
……
-
定製基礎 UI 組件庫
輪播圖組件
彈窗組件
……
-
-
資源管理
推薦閱讀：靜態網頁資源的管理和優化
項目技術選型
理性、客觀、避免偏見
-
預計投入
-
開發資源
時間
人手
技術儲備
-
項目資源
溝通成本
設計文檔、功能文檔、產品原型
後端接口文檔
項目排期
-
產品資源
-
用戶羣體
瀏覽器兼容性
瀏覽器侷限性
SEO 問題
-
-
-
指望回報
開發人員自我成長
公司技術棧
開發效率
可維護性
性能、穩定性
易於測試
易於把控項目週期
-
應急預案
兼容方案
回退方案
A / B Test
漸進加強
Plan B
造輪子
吃土小2叉：要麼站在巨人的肩膀上，要麼本身成爲巨人
未完待續……
UI 組件庫
前端工具
前端微服務
-
前端框架
（如下內容是 XX 的 YY 內容）
學習優秀框架源碼
仿寫核心內容
掌握山寨一個框架的套路
發現問題
具有紮實的前端基礎 + 運氣 + 靈感
解決問題
？
版本規劃
本文會在 GitHub 上持續維護，歡迎你們提 issue ~
地址是：https://github.com/xunge0613/...
v x.x.x
更新
造輪子-
內容更新
性能監控
安全
考慮翻譯成英文？
-
加入重要性評分功能
引導目前階段應該掌握哪些
分爲：初級、中級、高級
===== 當前版本分割線 =====
v 0.0.3 內容迭代
-
更新
編程通用條目更新
更新
JavaScript-
更新
前端實踐新增引導語
更新支付寶圖標、微信圖標……
v 0.0.2 內容迭代
新增
後端基礎新增
前端工程第一階段jQuery、Vue.js 介紹新增
常見問題更新
前言更新
網絡基礎更新
學習型項目
致謝
MDN Web 開發 // 這裏有個小彩蛋，這個頁面右上角有某 XX
聯繫方式
歡迎聯繫我討論本文的不足、問題或者意見。
能夠在個人 GitHub 主頁上找到個人聯繫方式
亦可關注個人微信公衆號：清風迅來
結語
做爲一個老菜鳥，我只是知識的搬運工
本文大多討論的是有哪些知識點（what），至於如何學習與應用這些知識點（how & why），敬請期待我以後的一系列文章，目前已完成一些雛形，僅供試閱：
感謝您一路看到這裏，歡迎點擊閱讀原文在個人博客上進行留言一同探討。（小透明表示公衆號至今未開通留言功能……）
如有幫助，盡情打賞！^_^
ps: 好像圖片有點大=。=
許可
MIT