前言
大二的時候?qū)戇^一篇文章叫做如何被稱為一名前端工程師，由于當(dāng)時技術(shù)認知和眼界有限，只是一味的摘抄別人的回答和百科上定義，希望自己能夠通過努力達到那種定義上的前端工程師，文章結(jié)尾也寫道“那些我不懂的專業(yè)名詞，我全部百度了一遍。這一年，我大二，我什么都沒有?！爆F(xiàn)在想來著實是有些年輕人的熱血和矯情。
基礎(chǔ)知識
現(xiàn)在前端框架和庫層出不窮，讓人眼花繚亂，對于前端開發(fā)者，尤其是剛?cè)腴T的前端開發(fā)者，我們更應(yīng)該做好的是打好基礎(chǔ)知識，無論是前端基礎(chǔ)知識還是計算機基礎(chǔ)知識，都是我們需要掌握的重點，開發(fā)過程中我們遇到問題首先也是通過基礎(chǔ)知識去解決，其次才是調(diào)用別人寫好的庫。本文先講解前端應(yīng)該掌握的基礎(chǔ)知識，前端基礎(chǔ)知識包括三個大項：JavaScript、HTML、CSS。以后如果有時間再將計算機基礎(chǔ)知識。
I.JavaScript
1.基本數(shù)據(jù)類型和基本類型的常用方法
js定義了7種數(shù)據(jù)類型:Boolean、Null、Undefined、Number、String、Symbol (ECMAScript 6 新定義)和 Object。
知道類型轉(zhuǎn)換以及類型判斷，以及null和undefined類型的區(qū)別，基本數(shù)據(jù)有哪些常用方法，以及這些方法的使用
例：字符串Strin常用方法有indexOf、lastIndexOf、charAt、substring、substr、search、trim。
JavaScript 不區(qū)分整數(shù)值和浮點數(shù)值造成的0.1+0.2=0.30000000000000004問題如何解決。
2.引用數(shù)據(jù)類型以及內(nèi)置對象
知道js有哪些內(nèi)置對象，引用數(shù)據(jù)類型和基本數(shù)據(jù)類型有哪些不同，如何判斷一些常用的內(nèi)置對象。
例：如何判斷數(shù)組、對象。
JavaScript中arguments和caller callee都是什么？
3.表達式和運算符以及函數(shù)
js表達式很靈活，需要掌握很多種不同的方式定義的表達式以及這些表達式之間的異同。js有哪些運算符。js函數(shù)如何定義以及函數(shù)的定義有哪幾種方法以及異同。
js如何循環(huán)對象，如何循環(huán)數(shù)組，以及不同循環(huán)方式的異同
例：數(shù)組循環(huán)for循環(huán)、forEach、map
對象循環(huán)map、for in、for of
call和apply的區(qū)別
4.原型鏈和內(nèi)置方法以及原型方法
正確理解原型鏈以及使用，js常用內(nèi)置對象有哪些原型方法，有哪些內(nèi)置方法。
例：數(shù)組Array常用原型方法有concat，filter，find，indexof，join，pop，push，keys，map，unshift，shift，slice，splice，reduce，sort，reverse。數(shù)組常用內(nèi)置方法有Array.from(),Array.isArray()，對象常用原型方法有hasOwnProperty()、isPrototypeOf()、valueOf()。對象常用內(nèi)置方法有Object.assign()、Object.create()、Object.defineProperty()、Object.getOwnPropertyNames()、Object.is()、Object.keys()。
5.類的寫法以及模塊的定義
理解面向?qū)ο蟮膉s的寫法，js如何定義一個類，如何繼承，如何寫構(gòu)造函數(shù)，理解js原型和js原型鏈，以及ES6中如何頂定義一個類，class、super、static關(guān)鍵字的作用。
6.ES6新增的關(guān)鍵字的使用以及擴展屬性和方法
ES6和ES6有哪些不同，增加了哪些關(guān)鍵字，這些關(guān)鍵字怎么使用，例：let 和 const ，變量的解構(gòu)賦值，字符串、正則、函數(shù)、數(shù)值還有對象都有哪些擴展，理解promise，為什么要使用promise，generator函數(shù)的使用，async函數(shù)的使用，ES6類和模塊模塊如何定義和使用。
7.JavaScript作用域、閉包和IIFE（立即執(zhí)行函數(shù)）
8.JavaScript中this關(guān)鍵字的理解以及this的指向性
9.js嚴格模式和js寬松模式的區(qū)別
10.JavaScript在瀏覽器中的使用
10-1.js如何操作DOM，js中BOM對象的使用，如何跨域
例：DOM節(jié)點的增刪改查，如何獲取子節(jié)點、父節(jié)點、兄弟節(jié)點，如何選取select中的值、如何獲取checkbox選中的值。
BOM對象有哪些常用對象，有哪些常用方法？
10-2.js事件處理，事件冒泡和事件捕獲的區(qū)別以及使用
10-3.js如何發(fā)送請求，ajax原生寫法以及ajax發(fā)送的HTTP頭部，以及返回的HTTP頭部信息，如何修改這些信息
10-4.js如何處理緩存
10-5.web性能優(yōu)化上js的使用
11-6.常見的攻擊方式以及如何預(yù)防
11.JavaScript在服務(wù)器端的使用（nodejs）
11-1.nodejs特點以及優(yōu)缺點
11-2.nodejs有哪些全局對象，process、util（工具類）有哪些常用方法。
11-3.nodejs事件監(jiān)聽和事件發(fā)射器，如何用nodejs寫一個服務(wù)器監(jiān)聽8080端口
11-4.nodejs stream是什么以及如何使用
11-5.nodejs中buffer是什么以及如何使用
11-6.服務(wù)器推與長連接與持久化連接
II.HTML
1.HTML標(biāo)簽有哪些，哪些是塊級元素哪些是行級元素，什么是空元素。
2.HTML5添加了哪些新標(biāo)簽，移除了哪些標(biāo)簽，HTML有哪些新特性。
3.HTML如何保證兼容性，如何理解漸進增強和優(yōu)雅降級
4.前端性能優(yōu)化
III.CSS
1.css選擇器，以及選擇器之間的優(yōu)先級，偽類和偽元素的運用
2.css的布局，什么是flex布局，如何使用響應(yīng)式布局，margin和padding的區(qū)別，什么是浮動，如何清除浮動。position有哪些值，各種定位的區(qū)別。
例：如何垂直水平居中，css如何使高度或者寬度自動填充
3.什么是css盒模型，如何改變盒模型，height、line-height、max-height、max-width、min-height、min-width、width的屬性和使用，什么是BFC規(guī)范，有哪些使用范圍？
4.如何保證css的兼容性，css hack的技巧有哪些？
5.css3有哪些新特性？
例：css3如何實現(xiàn)動畫以及2D/3D 轉(zhuǎn)換，css3的框模型，css3偽類選擇器有哪些以及如何運用。
6.移動端CSS有哪些技巧以及兼容性問題？
例：position:fixed;在android下無效怎么處理？移動端meta如何設(shè)置？
進階知識
對于一個合格的程序員來說，這些計算機基礎(chǔ)知識都是需要掌握的，其中包括計算機網(wǎng)絡(luò)、算法和數(shù)據(jù)結(jié)構(gòu)、操作系統(tǒng)、數(shù)據(jù)庫，對于前端工程師來說，其中需要著重掌握的是計算機網(wǎng)絡(luò)中的HTTP協(xié)議，所以把HTTP單獨拎出來。
I.HTTP
1.HTTP狀態(tài)碼有哪些？
2.HTTP請求和響應(yīng)報文的組成部分，都有哪些頭部字段以及其具體含義，實現(xiàn)緩存的頭部有哪些？各自有什么不同。
3.HTTP methods都有哪些，get和post請求的區(qū)別以及優(yōu)缺點。
4.一次完成的網(wǎng)絡(luò)請求，分別經(jīng)歷了哪些過程，具體描述，而HTTP跨域請求的完整過程又是怎樣的？
5.HTTP如何持久化連接，什么是長連接和短連接。如何進行會話跟蹤。
6.HTTPS是什么，它是如何保證安全性的。
7.HTTP 2.0有哪些新的改進？
II.計算機網(wǎng)絡(luò)
1.網(wǎng)絡(luò)分為幾層協(xié)議，以及每層協(xié)議的作用？
2.IP地址的分類，IP地址和子網(wǎng)掩碼以及網(wǎng)絡(luò)號之間的聯(lián)系。什么是回環(huán)地址有什么作用，什么是多播和廣播？
3.什么是ARP協(xié)議，簡述其工作原理，描述一下RARP協(xié)議。
4.TCP、UDP報文首部格式，TCP和UDP協(xié)議的區(qū)別，哪些協(xié)議是基于TCP，哪些是基于UDP，描述TCP的三次握手和四次揮手，以及為什么要三次握手和四次揮手。
5.了解交換機、路由器、網(wǎng)關(guān)的概念，并知道各自的用途。
6.什么是滑動窗口協(xié)議，什么是擁塞避免和慢啟動。
III.算法和數(shù)據(jù)結(jié)構(gòu)
1.一般數(shù)據(jù)結(jié)構(gòu)都有哪些？數(shù)組和鏈表的異同和優(yōu)缺點，什么是堆，什么是棧，以及在系統(tǒng)中的使用，什么是線性結(jié)構(gòu)，什么是非線性結(jié)構(gòu)。
2.什么是樹結(jié)構(gòu)，樹結(jié)構(gòu)的一般分類：滿二叉樹和完全二叉樹，哈夫曼樹，二叉排序樹和平衡二叉樹，B-樹和Trie樹，紅黑樹。知道樹的操作算法，廣度優(yōu)先遍歷（BFS）和深度優(yōu)先遍歷（DFS，包括前序遍歷，中序遍歷，后續(xù)遍歷）
3.什么是數(shù)組，什么是鏈表，數(shù)組和鏈表的異同和優(yōu)缺點，什么是雙向鏈表，有什么使用場景。
4.什么是堆、棧、隊列。
5.什么是圖結(jié)構(gòu)，圖在內(nèi)存中怎么存儲（實現(xiàn)圖的數(shù)據(jù)結(jié)構(gòu)），存儲方式各自有什么優(yōu)缺點，圖的算法：最短路徑（貪心算法，Dijkstra算法）、最小生成樹。
6.排序算法都有哪些以及實現(xiàn)？算法的時間復(fù)雜度，空間復(fù)雜度，什么是排序算法的穩(wěn)定性，哪些是穩(wěn)定的，哪些是不穩(wěn)定的？
7.哈希表（散列表）如何實現(xiàn)，如何解決沖突問題，什么是分布式哈希，以及分布式哈希表的運用，怎么解決分布式系統(tǒng)雪崩問題，提高系統(tǒng)可擴展性和可用性。一致性哈希：可擴展性強，數(shù)據(jù)遷移小，環(huán)形結(jié)構(gòu)。一致性hash的虛擬節(jié)點映射。
8.其他：實現(xiàn)二分查找、按位運算、動態(tài)規(guī)劃（找零問題）、遞歸（尾遞歸優(yōu)化）。
IV.操作系統(tǒng)
1.進程和線程的區(qū)別和聯(lián)系，進程調(diào)度的方式，進程同步與進程間如何通信，什么是線程池，有什么作用。
2.什么數(shù)據(jù)分配在堆上，什么數(shù)據(jù)分配在棧上，頁面置換算法有哪些？
3.內(nèi)存對齊是什么，為什么需要內(nèi)存對齊。
4.什么是大端，什么是小端，以及主要運用。
5.IO多路復(fù)用，常見的IO多路復(fù)用的實現(xiàn)。
6.數(shù)據(jù)編碼的方式。
7.什么是流水線技術(shù)，有哪些運用。
V.數(shù)據(jù)庫
1.數(shù)據(jù)庫增刪改查，連接查詢，數(shù)據(jù)庫語句的執(zhí)行順序。
2.數(shù)據(jù)庫范式 - 1NF, 2NF, 3NF 和 4NF
2.數(shù)據(jù)庫事務(wù)的特性（ACID），事務(wù)的隔離級別，臟讀、不可重復(fù)讀、幻讀。
2.數(shù)據(jù)庫如何建立索引，索引失效的情況。
3.數(shù)據(jù)庫優(yōu)化，垂直分割、水平分割、讀寫分離，分布式。
4.緩存數(shù)據(jù)庫，redis的原理的特點，以及和memcached的區(qū)別，redis的優(yōu)勢
前端框架和庫
這部分是前端常用的框架和庫，一般我們項目中會使用到的，也是需要我們掌握的，其中包括jQuery、React、Vue和Bootstrap。
I.jQuery
1.jQuery選擇器，如何選擇子節(jié)點、父節(jié)點、兄弟節(jié)點
例：基本過濾器： ":first"、":last"
子元素過濾器：":nth-child(index/even/odd)"、":first-child"、":last-child"、":only-child"
如何遍歷父節(jié)點，子節(jié)點，同級節(jié)點？
父節(jié)點：parents()、parents()、parentsUntil()
子節(jié)點：children()、find()
同級節(jié)點：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()
2.jQuery增刪改查
增加：
- append() - 在被選元素的結(jié)尾插入內(nèi)容
- prepend() - 在被選元素的開頭插入內(nèi)容
- after() - 在被選元素之后插入內(nèi)容
- before() - 在被選元素之前插入內(nèi)容
- appendTo() -?把所有匹配的元素追加到指定的元素元素集合中，例如：$("Hello World!").appendTo("p");
刪除：
- remove() - 刪除被選元素（及其子元素），例如：（過濾被刪除的元素）$("p").remove(".italic");
- empty() - 從被選元素中刪除子元素，例如：$("#div1").empty();
獲?。?/b>
獲得內(nèi)容- text()、html() 以及 val()
- text() - 設(shè)置或返回所選元素的文本內(nèi)容
- html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
- val() - 設(shè)置或返回表單字段的值
獲取屬性- attr()
jQuery attr() 方法用于獲取屬性值$("#w3s").attr("href")
設(shè)置：
設(shè)置內(nèi)容- text()、html() 以及 val()
- text() - 設(shè)置或返回所選元素的文本內(nèi)容：$("#test1").text("Hello world!");
- html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）：$("#test2").html("Hello world!");
- val() - 設(shè)置或返回表單字段的值：$("#test3").val("Dolly Duck");
設(shè)置屬性- attr()
jQuery attr() 方法也用于設(shè)置/改變屬性值。
attr設(shè)置多個值
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
3.jQuery事件，其核心機制和原理是什么，on()、bind(), live(), delegate()的區(qū)別。
4.jQuery中$.extend(obj)和$.fn.extend(obj)方法分別是什么意思？如何解決名稱沖突？body中的window.onload=function(){}函數(shù)和jQuery中的$(document).ready(function(){})有什么區(qū)別？
5.如何實現(xiàn)jQuery的免new實例化對象（即$(selector)），鏈式寫法（Chaining）
6.jQuery有哪些動畫函數(shù)，各有什么效果？
7.jQuery如何發(fā)送AJAX，如何切換同步和異步？
II.React
1.react有哪些特點，工作原理是什么，他的虛擬DOM解決了什么問題？
2.react組件的周期函數(shù)，使用場景都有哪些？
例：ajax請求寫在哪個周期函數(shù)中？
3.react組件如何使用JSX，它的里面的寫法有哪些特點？
例：如何在JSX中插入HTML標(biāo)簽，和HTML普通寫法有哪些差異？
4.組件之間如何通信，父子組件間如何通信？refs屬性有什么作用，一般使用場景是什么？
5.react事件處理，react支持哪些事件？
6.如何在react中使用redux，為什么要使用redux？
III.Vue
1.vue有哪些語法，條件和循環(huán)語法，計算屬性，模板語法，事件處理，vue有哪些指令，v-model和v-bind指令的使用。
1.vue組件生命周期，如何使用vue的生命周期函數(shù)？
2.vue有哪些特點？vue和react有哪些異同？
3.vue原理以及vue是如何實現(xiàn)雙向綁定的？
IV.Bootstrap
1.了解其響應(yīng)式布局，流式布局
2.了解其基本的CSS樣式使用，bootstrap的一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)
前端行業(yè)最新消息獲取
I.國內(nèi)博客
4.百度前端FEX
10.微信公眾號：前端早讀課
11.阮一峰博客
12.張鑫旭博客
13.大前端
14.W3cplus
II.國外博客資源
1.JSFeeds
2.Echo JS
3.Daily JS
10.A List Apart
11.Shop Talk
13.JSJ Episodes
14.FiveJS
（end）
歡迎關(guān)注我的微信公眾號：前端八點半
