目錄

版本控制工具

• 版本管理_svn_檢出_更新_提交_本機 MAC 地址_衝突
• 版本管理_git

 

---

 計算機軟件和硬件

• 性能優化_前言
• 瀏覽器的功能與組成
• 渲染引擎 & 頁面渲染流程 & 阻塞
• 圖層 & 重排 & 重繪
• 函數防抖 & 函數節流
• 高性能平滑動畫_requestAnimationFrame
• http 協議_DNS_域名解析 DNS 服務器_內容分發網絡 CDN_緩存機制_瀏覽器存儲
• js 模塊化
• webpack3_腳手架

 

---

 W3C標準

• 網頁 3 大組成部分

 

---

 軟件架構

 

---

 HTML

• 第一個網頁    <標籤 屬性="屬性值"></標籤>
• HTML 的發展
• 亂碼問題
• 常見的標籤
• 字符實體（轉義字符）
• 圖片標籤 <img />
• <meta /> 標籤
• xhtml 的語法規範
• <frame></frame>內聯框架 引入有一個外部html頁面
• <frameset></frameset>框架集  ---- frame 和 iframe 的區別
• 超連接
• 命名規範

 

---

 HTML5 新標籤

• HTML5 提供的新功能 ---- less 編譯
• HTML5_音視頻標籤 <audio> 和 <video>
• HTML5_canvas 畫布 ------------ diy 畫板 ---- 畫五角心 ---- 畫圓弧
• pen.translate(x, y); pen.scale(x, y); pen.rotate(radian); 旋轉案例
• canvas 圖片加載_雙緩衝_跳幀閃爍問題
• canvas 線性漸變 徑向漸變
• canvas_填充文本，描邊文本
• HTML5_圖片合成_刮刮卡
• canvas_像素操做_圖片馬賽克_圖片反相 ----------------

 

---

 層疊樣式表 CSS

• 瀏覽器默認樣式
• 塊元素block_內聯元素inline_行內塊元素inline-block
• css 樣式選擇器
• 文本標籤 及其樣式
• 有序列表 ul，無序列表 ol，自定義列表 dl
• css 盒模型 (框模型)
• 垂直外邊距重疊
• 父元素 對子元素 溢出內容的處理 overflow
• 文檔流_網頁最底層
• float 元素浮動
• 高度塌陷 問題
• 固定佈局
• 導航條練習 ---------------- div 版本
• 導航條練習 ---------------- ul 版本
• Photoshop 的基本操做
• 定位 position
• 層級 z-index
• opacity 透明度
• 背景 background
• 背景圖按鈕-圖片整合技術 CSS-Sprite 雪碧圖 ---- 雪碧圖的製做
• 表格 table ---- 表格美化 border-spacing border-collapse ---- 長表格（完整的 table）
• table 表格佈局
• clearfix 解決垂直外邊距重疊 和 高度塌陷
• form 表單 ---- 各類表單項
• IE6 到 IE11 對於包含中文路徑的 png 顯示問題
• css hack 技術

 

---

 css 細節總結 ---- 小結粘連佈局

• CSS3_邊框 border 詳解 三角形 圓形 ----------------一個 div 的陰陽圖
• CSS3_標準盒子模型和怪異盒子模型
• 文本樣式 text-shadow -webkit-text-stroke direction -webkit-background-clip 
• CSS3_盒陰影_倒影_盒子大小可調 resize: both; overflow: auto;     box-shadow -webkit-box-reflect
• 盒子背景 background-clip background-origin background-size background-image CSS3 過濾器: filter
• 背景的 線性漸變 和 徑向漸變 background-image: linear-gradient(#000, #fff); 顏色結點
• css3 多列布局 column-xxx: xxx;
• 過渡 transition transform 2D 變換 ---------------- 瓶體旋轉_動態時鐘
• css3 transition 過渡之 'transitioned' 事件 ---------------- 扇形導航
• 3D 變換 transform-style: preserve-3d; 開啓 3D 空間 景深 perspective: 300; 變換基點 transform-origin: px px;
• 天貓商品牆 -----------------
• css3 動畫 animation: ; 關鍵幀 @keyframes xxx{... ...}
• 移動端開機動畫 ----------------
• 伸縮和模型_CSS3 引入的佈局模式 Flexbox 佈局 ---------------- 毒液 (簡單案例)
• CSS3_元素拖曳原理_設置全局點擊捕獲_九宮格碰撞檢測_自定義滾動條

 

---

 JavaScript 的發展與簡介 ---- 須要注意的地方

• 面向對象 OOP new 構造函數 this
• 原型鏈_對象的繼承_多重繼承_封裝(函數式編程)
• console 對象 與 控制檯接口
• javascript 編寫位置 與 經常使用輸出語句
• 字面量/變量_標識符_數據類型_數據的存儲 ---- ES6 數值 Number 的擴展
• 對象的簡介及其分類 ---- 對象的存儲及引用
• Object 對象的相關屬性/方法
• 包裝對象 Number、String、Boolean
• 對象的 屬性描述符對象
• javascript 強制類型轉換 
• javascript 運算符 及運算符的優先級
• 字符串中使用 \u 輸出 Unicode 字符
• if 練習 ---- else if ---- 小到大排序
• switch 練習 ---- 今天星期幾
• 流程控制語句
• for 練習 ---- Sum of Odd/Even ---- sum of 7 ---- flower number ---- prime number ---- Meth.sqrt()
• 變量的做用域
• 函數_this_arguments_回調函數_IIFE_閉包_內存溢出_內存泄漏
• 預處理_預解析_函數上下文對象_函數的實參列表
• 對象的方法
• 重寫對象的 toString()
• 垃圾回收機制 GC
• 數組 與 類數組對象 以及數組的相關方法 ---- 數組常見方法 ---- ES6 數組的擴展以及擴展運算符
• 日期對象 Date 及其相關屬性/方法
• 數學對象 Math 及其相關屬性/方法
• Error 錯誤對象_throw new Error('SomeThingWrong');_try{...}catch(e){...}finally{...};
• 正則表達式對象 RegExp ---- ES6 的正則表達式擴展
• JSON 對象 用於數據交換的文本格式
• 嚴格模式
• 定時器
• 異步操做_單線程模型_同步任務_異步任務_任務隊列_事件循環
• Promise 對象 ---- 異步編程 Promise
• js 分線程——Web Workers 事件 Event 瀏覽器的事件模型 事件的傳播 事件委派 / 事件代理（delegation） Event 對象

 

---

 ECMAScript 6 簡介

• 必需要知道的
• 結構賦值 模式匹配
• 字符串_擴展_字符 是4字節仍是2字節？_模板字符串_標籤模板
• 函數的擴展_參數默認值 以及最後的 逗號,__參數初始化做用域_...多餘實參數組_箭頭函數_::運算符_尾調用_尾遞歸
• Symbol() 惟一類型值聲明函數_Symbol 數據類型
• symbol(symbol.iterator) 新接口_iterator接口
• 生成器 Generator
• ES6 的正則表達式擴展
• async 函數
• 數值 Number 的擴展
• 數組的擴展_擴展運算符
• 對象的擴展_super 關鍵字_擴展運算符_以及對象的新增方法
• 類 class
• 惟一容器 Set 與 映射容器 Map
• 模塊加載方案 與 ES6 Module 模塊語法_import_export
• 行爲重定義 Proxy

 

---

 DOM 文檔對象模型

• Element 元素節點對象 及其屬性/方法 ---- 屬性及相關方法 以及 data-set
• document 對象 的屬性/方法
• NodeList 接口，HTMLCollection 接口
• ParentNode 接口 、 ChildNode 接口
• document.querySelectorAll() 兼容 IE6
• javascript 操做 css 
• DocumentFragment 節點對象 ---- 反轉一個節點多有子節點順序
• Mutation Observer API 突變監視器 監聽 DOM 節點變更
• 鼠標事件
• 鍵盤事件
• 進度事件
• 表單事件
• 拖拉事件
• 觸摸事件
• 鼠標事件對象方法封裝 ----------------
• 自定義 獲取元素當前樣式 函數 兼容 IE
• 自定義綁定響應函數 解除響應函數 兼容 IE
• 獲取鼠標在目標元素中的座標
• 獲取元素在瀏覽器窗口的座標
• 獲取元素在網頁中的座標
• js 原生 拖動元素

---

 BOM 瀏覽器對象模型_渲染引擎_JavaScript 引擎_網頁加載流程

• window 對象的常見 屬性/方法
• window.navigator 對象
• 不超過 4 KB 的 document.cookie 對象
• express_瀏覽器存儲技術 Cookie（服務器將少許數據交於瀏覽器存儲管理）
• XMLHttpRequest 對象
• BOM 瀏覽器對象模型_同源限制
• BOM 瀏覽器對象模型_Storage 接口 - window.sessionStorage - window.localStorage
• BOM 瀏覽器對象模型_當前窗口的瀏覽歷史 history 對象

 

---

 jQuery

• 瀏覽器的事件模型 DOM0 DOM2
• 重點總結

 

---

 移動端 mobile

• 像素 屏幕分辨率 屏幕尺寸 屏幕像素密度 設備像素（物理像素）css 像素 設備獨立像素（密度無關像素）位圖像素 像素比（屏幕特性，高清屏仍是普通屏？）
• 佈局視口 視覺視口 理想視口
• 用戶縮放 與 系統縮放
• 移動端基礎事件 禁止瀏覽器默認行爲 準備工做
• 點透(傳透)
• 豎向滑屏 ----------------
• mobile_輪播圖 ---------------- style_left 版本
• mobile_輪播圖 ---------------- transform 版本 ---- transform 讀寫二合一
• 5 種常見適配(設備的兼容處理) ---- 具體像素值 rem 適配 viewport 適配 百分比適配 媒體選擇器（響應式佈局）
• 1 物理像素
• 音悅臺模擬項目 ----------------

 

---

 PC 官網 項目 ----------------

 

---

 bootstrap_響應式佈局簡介_媒體查詢_媒體選擇器_2x3x圖

• 基礎模版 柵格系統 響應式重疊 列偏移 列排序 表單 圖片 打印類 組件
• 柵格系統_響應式工具_源碼分析

 

---

 Zepto.js

 

---

 MongoDB_簡介_安裝_基本使用_js_mongoose 操做 MongoDB 編程

 

---

 node.js 簡介及其 npm 包管理器

• Buffer 緩衝區
• node 經過核心 FS 模塊來操做文件系統
• 原生 node 服務器 與 express_搭建服務器
• express route 路由 app.get() app.post()
• express_中間件 middleware ---------------- 登陸/註冊實例源代碼
• 加密庫_sha1 ---- 密碼明文_密文
• express.Router 路由器_模塊化管理路由 ---------------- 登陸/註冊實例源代碼
• 服務器渲染頁面 ejs 引擎
• 瀏覽器存儲技術 Cookie（服務器將少許數據交於瀏覽器存儲管理）
• 臨時會話對象 session
• 前端發送請求的技術 Ajax_簡介： 異步的 JS 和 XML_原生寫 ajax 分析其原理_art-template 模板引擎 ---- 藝術模板 art-template
• AJAX_違反了同源策略_就是"跨域"——jsonp 和 cors

微信公衆號 (訂閱號)

• 被動回覆用戶消息_服務器搭建_基本交互
• access_token_接口編程 建立菜單_菜單 name+表情
• 用戶管理_自定義菜單_自動回覆用戶消息_素材上傳與下載
• JS-SDK 網頁開發
• 結合 爬蟲 puppeteer 作個微信網頁

 

---

 http 原理 HTTP 協議簡介

• HTTP工做原理_HTTP消息結構格式
• HTTP請求方法 HTTP相應頭信息 HTTP狀態碼分類
• content-type 對照表

 

---

 angular JS 

AngularJS_簡介、特性及基本使用

 

---

React 

• React 簡介及其基本使用
• React 面向組件化編程 - 封裝了webpack - npm run build 產生的包的 /static 引用路徑問題
• 組件化 - 實例
• React_生命週期
• React_基本原理_ajax
• react_app 項目開發
• react_app 項目開發 (2)_axios_pubsub-js
• react_app 項目開發 (3)_單頁面設計_react-router4
• react_app 項目開發 (4)_ React UI 組件庫 ant-design
• react_app 項目開發 (5)_先後端分離_後臺管理系統_開始
• react_app 項目開發 (6)_後臺服務器端-node
• react_app 項目開發_遇到的坑
• react_app 項目開發 (7)_難點集合
• react_app 項目開發 (8)_角色管理_用戶管理----權限管理 ---- shouldComponentUpdate
• react_app 項目開發 (9)_數據可視化 ECharts
• react_結合 redux - 高階函數 - 高階組件 - 前端、後臺項目打包運行

 

---

Vue

• vue 項目界面繪製_stylus_iconfont_swiper
• vue_簡介_漸進式 js 框架
• vue_class 綁定_style 綁定
• vue_條件渲染_v-if_v-else_v-show
• vue_v-for_遍歷數組_遍歷對象
• vue_小項目_模糊搜索(列表過濾)_結果排序
• vue_事件綁定 v-on _事件修飾符
• vue_表單 input 的綁定
• vue_實例 viewModel 的生命週期
• vue_過渡_動畫
• vue_過濾器： 對要顯示的數據進行特定格式化後再顯示
• vue-cli 腳手架 Command Line Interface
• vue_小項目_吃飯睡覺打豆豆
• vue_組件間通訊：自定義事件、消息發佈與訂閱、槽
• vue_ajax 請求
• vue_mint-ui
• vue_VueRouter 路由_路由器管理n個路由_並向路由組件傳遞數據
• vue_vuex
• vue_源碼 原理 剖析
• vue_eHungry 餓了麼
• 什麼是 ajax？----異步 javascript 和 xml
• 面試題外話 - 關注微信公衆號 "前端早讀課"
• 微信小程序----沒有 DOM 對象，一切基於組件化 ---- mpvue
• 一步一步 copy163： 網易嚴選 ---- vue-cli
• 到位App_jQuery_art-template
• 阿里小程序 - 釘釘應用

 

---

 前端面試題

1. js數據類型_對象_函數_內存

2. 原型鏈_做用域鏈_預處理_預解析

3. 閉包_對象組合繼承模式_事件輪詢機制

4. 屬性描述符_訪問描述符

5. 箭頭函數_this 指向_es6 經常使用語法

6. 深度克隆_ES7**_arr.includes('孫悟空')

7. Buffer_包描述文件_npm經常使用指令_fs文件讀寫_模塊化require的規則

8. 環境變量_數據庫_mongoose的基本使用_模型對象的CRUD

9. http協議_響應狀態碼_頁面渲染流程_路由_中間件

10_常見的get和post請求_路由器_ejs服務器渲染模板引擎

11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用

12. 宏任務_微任務

13. 面試題： 多個 await 處理，有一個失敗，就算做失敗