摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。

前言：
本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。
初衷。寫這篇文章主要有以下幾個初衷：

梳理知識體系。網上雖然有許多類似的內容，但每個人都有各自獨特的思維方式，適合自己的才是最好的。

探索不足之處。明確自己到底掌握了哪些，哪些本應掌握但還沒有學習。

完善公司的前端培訓方向。前端技能培訓的方向由懂前端、懂公司前端團隊的人來設定最好不過了。

希望借此激發大家的一點思考。我們都在路上，我不是成功的例子，我寫下我的思考，希望借此激發大家的一點思考。

一個梗。自 2012 年以來，我知乎上獲贊最多的答案卻是引用他人的答案……有點尷尬：《一名合格的前端工程師的知識結構是怎樣的？》

目錄

專業技能

前端理論

瀏覽器

HTML

CSS

JavaScript

編程通用

SEO 數據統計 數據分析

網絡基礎

交叉領域理論

產品設計相關

后端基礎

前端實踐

解決實際問題

學習型項目

前端工程

第一階段：框架應用

第二階段：簡單自動構建優化

第三階段：JS/CSS模塊化開發

第四階段：組件化開發與資源管理

項目技術選型

造輪子

版本規劃

致謝

聯系方式

結語

許可

專業技能 前端理論 瀏覽器

知己知彼

瀏覽器內核渲染原理

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 一起學習體驗最佳哦

語法 & 語義

!DOCTYPE HTML 文檔標準

怪異模式

標準模式

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）

視覺設計（單一狀態設計）

布局（分久必合、合久必分）

盒模型（高度、寬度、邊框、外邊距、內邊距、溢出控制）

定位方式

層疊上下文（z-index）

display 類型（table、inline、inline-block、block、flex、grid）

浮動

偽元素：:after、:before

字體排印（厲害了 word 哥）

字體（字體族、網絡字體）

文本（刪除線、下劃線、斜體、粗細、字號）

段落（行高、縮進、斷句方式、換行方式）

對齊

方向

裝飾（神說，要有光）

顏色

背景

邊框（border、outline）

圓角

陰影

漸變

透明度

變形（旋轉、縮放、矩陣變化）

交互設計（多狀態設計）

動畫（運動和靜止是對立的統一）

過渡效果

動畫關鍵幀

反饋

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 上也開了一個項目，專門記錄、收集我最近在前端開發過程中遇到的一些問題，有已經解決的，也有仍待解決的。

https://github.com/xunge0613/...

目前整理的已解決問題有：

解決跨域 iframe 父子頁面間通信問題

微信小程序開發 ide 的選擇

→_→ 沒有更多了……

仍待解決的問題：

如何優雅地監聽元素高度變化？

移動端 banner 輪播圖自適應的各種坑

當然我也簡單寫了一些方法論，包括：

如何解決問題？

如何提問題？

后續我也會不斷完善這一塊內容。重點是：形成一套屬于自己的最佳實踐經驗庫。

學習型項目

這一部分內容更推薦大家關注 Phodal 大神的 Growth 系列

https://github.com/phodal/growth

而我給準備入門前端的新手的建議是：

擁有一個完全屬于自己的博客、域名、網站、服務器，并每周固定更新博客文章、每年為博客更新一次主題。

前端工程

勿忘自己的 title：前端工程師

以下引用張云龍 dalao 的文章：前端工程 —— 基礎篇
第一階段：庫/框架選型
第二階段：簡單構建優化
第三階段：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 介紹

新增 常見問題

更新 前言

更新 網絡基礎

更新 學習型項目

致謝

前端工程 —— 基礎篇 by 張云龍

從達標到卓越 —— API 設計之道 by 法海@淘寶前端團隊

The Modern JavaScript Tutorial by Ilya Kantor

jQuery 1.4 中文文檔 by 張鑫旭

MDN Web 開發 // 這里有個小彩蛋，這個頁面右上角有某 XX

聯系方式

歡迎聯系我討論本文的不足、問題或者意見。

可以在我的 GitHub 主頁上找到我的聯系方式

亦可關注我的微信公眾號：清風迅來

結語

作為一個老菜鳥，我只是知識的搬運工

本文大多討論的是有哪些知識點（what），至于如何學習與應用這些知識點（how & why），敬請期待我之后的一系列文章，目前已完成一些雛形，僅供試閱：

Growth CSS

Growth Vue

感謝您一路看到這里，歡迎點擊閱讀原文在我的博客上進行留言一同探討。（小透明表示公眾號至今未開通留言功能……）

若有幫助，盡情打賞！^_^

ps: 好像圖片有點大=。=

許可

MIT