前端開發知識點整理

時間 2019-11-09

標籤前端開發知識整理简体版

原文原文鏈接

前言：
本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、歸納和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端須要瞭解的知識大體有什麼，看上去有不少，但具體你要學什麼，仍是要 follow your heart & follow your BOSS。javascript

初衷。寫這篇文章主要有如下幾個初衷：php

梳理知識體系。網上雖然有許多相似的內容，但每一個人都有各自獨特的思惟方式，適合本身的纔是最好的。css

探索不足之處。明確本身到底掌握了哪些，哪些本應掌握但尚未學習。前端

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

但願藉此激發你們的一點思考。咱們都在路上，我不是成功的例子，我寫下個人思考，但願藉此激發你們的一點思考。java

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

專業技能

前端理論

瀏覽器

知己知彼

瀏覽器內核渲染原理
- 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/...

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

仍待解決的問題：

如何優雅地監聽元素高度變化？
移動端 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