1.不包含掘金小冊
掘金小冊的內(nèi)容就不在這總結(jié)了，下邊的內(nèi)容是其他一些小細節(jié)创坞，面試分為筆試和口頭面對面交流府寒。本大綱只是自己總結(jié)的注意的點，有的具體知識還需要自己去查相關(guān)資料深入學(xué)習(xí)伤提。這只是適合本人的平時閱讀和注意的小冊巫俺。
注重基礎(chǔ)知識，算法基礎(chǔ)（數(shù)組降維肿男，去重介汹，排序），html布局舶沛，css選擇器嘹承，http（狀態(tài)碼），緩存及更新問題，，服務(wù)器端知識抚太。
2.清除浮動的方式（介紹幾種就行,幾乎全部了芦圾，O(∩_∩)O哈哈~）
（1）父級div定義height豪娜。
（2）結(jié)尾處加空div標(biāo)簽clear:both餐胀。
（3）父級div定義偽類:after和zoom（兼容ie6,7,推薦使用）。
（4）父級div定義overflow:hidden瘤载。
（5）父級div定義overflow:auto否灾。
（6）父級div也浮動，需要定義寬度鸣奔。
（7）父級div定義display:table墨技。
（8）結(jié)尾處加br標(biāo)簽clear:both。
3.Html5新特性
(1)繪畫 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數(shù)據(jù)挎狸，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;
(5)語意化更好的內(nèi)容元素扣汪，比如 article、footer锨匆、header崭别、nav、section;
(6)表單控件恐锣，calendar茅主、date、time土榴、email诀姚、url、search;
4.Js數(shù)據(jù)類型相關(guān)
（1）原始類型有哪幾種玷禽？null 是對象嘛赫段？
原始類型：boolean,null,undefined,number,string,symbol
typeof null 結(jié)果為 object,即typeof null === ‘object’typeof返回字符串
（2）對象類型
在JS 中，除了原始類型那么其他的都是對象類型了矢赁。對象類型和原始類型不同的是糯笙，原始類型存儲的是值，對象類型存儲的是地址（指針）撩银。當(dāng)你創(chuàng)建了一個對象類型的時候给涕，計算機會在內(nèi)存中幫我們開辟一個空間來存放值，但是我們需要找到這個空間蜒蕾，這個空間會擁有一個地址（指針）。
這句話很重要焕阿，解答題的關(guān)鍵就是創(chuàng)建一個對象類型的時候咪啡，重新分配一個地址（指針）
（3）typeof和instanceof
typeof對于原始類型來說，當(dāng)然除了null都可以顯示正確的類型暮屡，eg:typeof ‘1’//’string’
typeof 對于對象類型來說撤摸，除了函數(shù)都會顯示 object，所以說typeof 并不能準(zhǔn)確判斷變量到底是什么類型 eg:typeof console.log //’function’。
instanceof 用于判斷一個變量是否某個對象的實例准夷。
（4）類型轉(zhuǎn)換
具體看掘金小冊钥飞，多做一些類型裝換的題，把概念練熟了衫嵌。
加法運算：
自己的概括為读宙，（1）如果有對象類型，先轉(zhuǎn)化為基本數(shù)據(jù)類型（就是轉(zhuǎn)化為字符串楔绞，eg:{}=>’[object,Object]’）第一個o小寫,第二個大寫结闸。（2）有字符串就會都轉(zhuǎn)為字符串，（3）酒朵，其他情況都轉(zhuǎn)換為數(shù)字運算
其他運算：只要一方是數(shù)字桦锄，另一方也會轉(zhuǎn)為數(shù)字,eg:
4 * '3' // 12
4 * [] // 0
4 * [1, 2] // NaN
(5)null和undefined區(qū)別
雖然都是原始類型。但是比如null==undefined返回true,null===undefined,返回false,因為類型不一樣蔫耽，
null:typeof null是‘object’结耀，轉(zhuǎn)為數(shù)字為0。
Undefined:typeof undefined是undefined,轉(zhuǎn)為數(shù)字為NaN匙铡。
5.This指向
優(yōu)先級從上到下
（1）new方式图甜，this指向new的對象。
（2）bind,apply,call這些綁定函數(shù)的第一個參數(shù)
（3）Obj.foo()慰枕，this指向Obj對象
（4）function foo(),普通函數(shù)this指向window,
（5）箭頭函數(shù)的this,一旦被綁定具则，不會再被改變
6. Call,apply,bind
都是改變函數(shù)調(diào)用中this的指向的
call和apply: 臨時借用構(gòu)造函數(shù)，并臨時替換函數(shù)中的this為指定對象具帮。 立刻執(zhí)行函數(shù)調(diào)用后博肋，this回復(fù)原樣.
call和apply接受兩個參數(shù)，第一個參數(shù)是要綁定給this的值蜂厅，第二個函數(shù)需要的參數(shù)匪凡。當(dāng)?shù)谝粋€參數(shù)為null、undefined的時候掘猿，默認指向window病游。
call: 參數(shù)單獨傳入
apply: 參數(shù)以數(shù)組傳入
bind: 創(chuàng)建一個函數(shù)，并永久綁定this稠通，不會立刻執(zhí)行新函數(shù)衬衬，一旦被bind創(chuàng)建的函數(shù)，其中的this改橘，無法再被call/apply替換
7.React內(nèi)容
react描述：聲明式的（自己描述自己想要的東西滋尉，讓react自己決定怎么做，如何做飞主，開發(fā)人員不需要關(guān)心這個）狮惜，組件化（組件化最重要的目的就是達到可重用）高诺，用于構(gòu)建UI的一個js框架。
React特點：
1.聲明式設(shè)計：用于描述應(yīng)用
2.高效：采用虛擬DOM結(jié)構(gòu)碾篡，減少DOM操作（內(nèi)部采用diff算法來檢查更新DOM）
3.靈活：可以結(jié)合很多框架
4.jsx：js語法的擴展
5.組件：可以組件重用虱而，構(gòu)建大型應(yīng)用
6.單項數(shù)據(jù)流：數(shù)據(jù)流是從上到下的數(shù)據(jù)流，可以搭配redux使用
Redux描述：適用于开泽，多交互牡拇，多數(shù)據(jù)源的應(yīng)用，web應(yīng)用是一個狀態(tài)對應(yīng)一個視圖眼姐，它是將所有的狀態(tài)都保存在一個對象里邊诅迷，然后向下傳遞。
8. React和vue的區(qū)別
相似之處：
（1）使用 Virtual DOM众旗；
（2）提供了響應(yīng)式 (Reactive) 和組件化 (Composable) 的視圖組件罢杉；
（3）將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫贡歧。
區(qū)別（自己總結(jié)滩租，vue官網(wǎng)有相關(guān)介紹）：
（1）在 React 應(yīng)用中，當(dāng)某個組件的狀態(tài)發(fā)生變化時利朵，它會以該組件為根律想，重新渲染整個組件子樹。如要避免不必要的子組件的重渲染绍弟，你需要在所有可能的地方使用 PureComponent技即，或是手動實現(xiàn) shouldComponentUpdate 方法。在 Vue 應(yīng)用中樟遣，組件的依賴是在渲染過程中自動追蹤的而叼，所以系統(tǒng)能精確知曉哪個組件確實需要被重渲染。你可以理解為每一個組件都已經(jīng)自動獲得了 shouldComponentUpdate豹悬，并且沒有上述的子樹問題限制葵陵。
（2）Html和css方面：react采用jsx語法，vue采用模板語法瞻佛。React采用引入css文件來渲染樣式脱篙，vue直接在一個文件里寫樣式和html模板來描述組件
（3）狀態(tài)管理：react:redux,vue:vuex
（4）原生渲染，跨平臺：react 對應(yīng)react native vue對應(yīng)weex
9.解決問題的方法（每個人都應(yīng)該有一個通用的思路伤柄，這很重要）
(1)收集足夠信息描述出問題绊困，比如說發(fā)現(xiàn)一個bug，不知道問題出在哪适刀，這就是沒有收集到足夠的信息導(dǎo)致的秤朗，你可以通過在搜索引擎搜索關(guān)鍵字的方式，查詢相關(guān)的解決方案蔗彤，不斷的搜索收集足夠多的信息川梅，
(2)學(xué)會問問題，要達到三點然遏，1.問題發(fā)生的場景是什么贫途，2.收集到相關(guān)的問題描述有哪些，3.希望問題解決后達到的效果是什么待侵。
(3)努力創(chuàng)造問題的重現(xiàn)環(huán)境丢早，這樣可以更快的發(fā)現(xiàn)問題的關(guān)鍵
(4)不制造新問題。
10. Websocket
它是http5提供的一種客戶端和服務(wù)器端雙向的通訊的協(xié)議秧倾，和輪詢不同怨酝，允許服務(wù)器主動發(fā)送信息給客戶端
11.輪詢
輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務(wù)器發(fā)出HTTP請求那先，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器农猬。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求售淡，然而HTTP請求可能包含較長的頭部斤葱，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源揖闸。
12. Less和sass
13.React native了解一下
14. Dependencies和devDependencies區(qū)別
（1）devDependencies用于本地環(huán)境開發(fā)時候
（2) Dependencies用于生產(chǎn)環(huán)境（發(fā)布的時候
devDependencies是只會在開發(fā)環(huán)境下依賴的模塊揍堕，生產(chǎn)環(huán)境不會被打入包內(nèi)。通過NODE_ENV=developement或NODE_ENV=production指定開發(fā)還是生產(chǎn)環(huán)境汤纸。而dependencies依賴的包不僅開發(fā)環(huán)境能使用衩茸，生產(chǎn)環(huán)境也能使用。其實這句話是重點贮泞，按照這個觀念很容易決定安裝模塊時是使用--save還是--save-dev楞慈。、
15. npm常用命令
-4048報錯：npm cache clean --force,清除緩存
Npm install 安裝依賴
Npm uptate 更新
Npm uninstall 卸載依賴
Npm list -g 查看全局安裝的包隙畜，也可以查看單獨的
Npm version patch 升級補丁號 即 0.1.0->0.1.1抖部，主版本：major，次版本：minor议惰。
Npm publish 發(fā)布npm包
16.flex布局-掘金
17.原型和原型鏈
原型：
舉個例子吧慎颗，比如創(chuàng)建一個對象，控制臺打印言询，發(fā)現(xiàn)里邊不只對象的屬性還有proto屬性俯萎，他就是原型對象，查看里邊還有constructor 屬性运杭，也就是構(gòu)造函數(shù)夫啊，打開 constructor 屬性我們又可以發(fā)現(xiàn)其中還有一個 prototype 屬性，并且這個屬性對應(yīng)的值和先前我們在 proto 中看到的一模一樣辆憔。所以我們又可以得出一個結(jié)論：原型的 constructor 屬性指向構(gòu)造函數(shù)撇眯，構(gòu)造函數(shù)又通過 prototype 屬性指回原型报嵌。
原型鏈：
對象的 proto 屬性指向原型， proto 將對象和原型連接起來組成了原型鏈
18. 閉包
高階函數(shù)除了可以接受函數(shù)作為參數(shù)外熊榛，還可以把函數(shù)作為結(jié)果值返回锚国。
在js中，閉包存在意義就是讓我們能夠訪問到函數(shù)內(nèi)部的變量玄坦。
發(fā)現(xiàn)的衍生題：如何創(chuàng)建js私有變量血筑？
function func() {
var priv = "secret code";
return function() {
return priv;
}
}
var getPriv = func();
console.log(getPriv()); // => secret code
閉包的定義其實很簡單：函數(shù) A 內(nèi)部有一個函數(shù) B，函數(shù) B 可以訪問到函數(shù) A 中的變量煎楣，那么函數(shù) B 就是閉包豺总。
function A() {
let a = 1
window.B = function () {
console.log(a)
}
}
A()
B() // 1
19. Reduce()函數(shù)（連接）
arr.reduce(function (x, y) {
return x + y;
});
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total:必需。初始值, 或者計算結(jié)束后的返回值择懂。
currentValue 必需喻喳。當(dāng)前元素
currentIndex 可選。當(dāng)前元素的索引
arr 可選困曙。當(dāng)前元素所屬的數(shù)組對象沸枯。
initialValue 可選。傳遞給函數(shù)的初始值
20. 數(shù)組去重
（1）利用filter和indexOf
r = arr.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
（2）普通函數(shù)
Array.prototype.removeDup3 = function(){
var result = [];
var obj = {};
for(var i = 0; i < this.length; i++){
if(!obj[this[i]]){
result.push(this[i]);
obj[this[i]] = 1;
}
}
return result;
}
var arr = [1,2,2,5,2,"測試","test","測試","test"];
console.log(arr.removeDup3());
21. 素數(shù)（質(zhì)數(shù)）
含義：素數(shù)和質(zhì)數(shù)是沒有區(qū)別的赂弓。質(zhì)數(shù)（又稱素數(shù)）绑榴，是指在大于1的自然數(shù)中，除了1和它本身外盈魁，不能被其他自然數(shù)整除（除0以外）的數(shù)稱之為素數(shù)（質(zhì)數(shù)）翔怎。比1大但不是素數(shù)的數(shù)稱為合數(shù)，1和0既非素數(shù)也非合數(shù)杨耙。用到的數(shù)學(xué)知識：只要小于或等于根號N的數(shù)（1除外）不能整除N赤套，則N一定是素數(shù)
鄙視題：帥選出1到100中的素數(shù)。
function get_primes(arr){
return arr.filter(function(y){
if (y == 1) {
return false;
}
for(var i=2;i<=Math.sqrt(y);i++){
if (y%i == 0){
return false;
}
}
return true;
});
}
--------------------- 或者將Math.sqrt(y)換成key(filter函數(shù)的索引)
22. 常用的排序算法（冒泡珊膜、快速等)
簡單介紹下數(shù)組的排序函數(shù)sort()
sort（）：1.接受function(x,y){}函數(shù)作為參數(shù)容握，2.返回的結(jié)果還是原數(shù)組，修改原數(shù)組
arr.sort(function (a, b) {
return a-b//從小到大车柠，return b-a 從大到小
});
快速排序：
var quickSort = function(arr) {
if (arr.length <= 1) { return arr; }
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];//非常關(guān)鍵剔氏，改變了原數(shù)組
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++){
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right)); };
var arr1 = [1,4,65,21,2,222,111];
console.log(quickSort(arr1));
冒泡排序：外循環(huán)控制需要比較的元素，比如第一次排序后竹祷，最后一個元素就不需要比較了谈跛，內(nèi)循環(huán)則負責(zé)兩兩元素比較，將元素放到正確位置上
function bubbleSort(arr){
var len=arr.length;
for(var i=len-1;i>0;i--){
for(var j=0;j<i;j++){
if(arr[j]<arr[j+1]){
var tmp = arr[j];
arr[j]=arr[j+1];
arr[j+1]=tmp
}
}
}
return arr;
}
插入排序：
算法描述：
1. 從第一個元素開始塑陵，該元素可以認為已經(jīng)被排序
2. 取出下一個元素感憾，在已經(jīng)排序的元素序列中從后向前掃描
3. 如果該元素（已排序）大于新元素，將該元素移到下一位置
4. 重復(fù)步驟 3令花，直到找到已排序的元素小于或者等于新元素的位置
5. 將新元素插入到該位置后
6. 重復(fù)步驟 2~5
編程思路：雙層循環(huán)阻桅，外循環(huán)控制未排序的元素凉倚，內(nèi)循環(huán)控制已排序的 元素，將未排序元素設(shè)為標(biāo)桿嫂沉，與已排序的元素進行比較占遥，小于則交換位置，大于則位置不動
function insertSort(arr){
var tmp;
for(let i=1;i<arr.length;i++){
tmp = arr[i];
//第二層循環(huán)输瓜，是遍歷已排序的元素，并且是從后向前遍歷
for(let j=i;j>=0;j--){
//如果已排序的元素大于未排序的則芬萍，已排序的元素向后移一位
// if(arr[j-1]==undefined){
// console.log(j);
// }
if(arr[j-1]>tmp){
//向后移一位
arr[j]=arr[j-1];
//否則(這里包括兩種情況尤揣，第一種就是小于,第二種情況就是，當(dāng)arr[j-1]==undefined柬祠，即當(dāng)j=0的時候北戏，也會走這個)
}else{
arr[j]=tmp;
break;
}
}
}
return arr
}
選擇排序：把每一個數(shù)都與第一個數(shù)比較，如果小于第一個數(shù)漫蛔，就把它們交換位置嗜愈；這樣一輪下來，最小的數(shù)就排到了最前面莽龟；重復(fù)n-1輪蠕嫁，就實現(xiàn)了選擇排序，選擇排序和冒泡排序思想上有些相近
function selectSort(arr){
var len=arr.length;
var temp;
for(var i=0;i<len-1;i++){
for(var j=i+1;j<len;j++){
if(arr[j]<arr[i]){
temp=arr[j];
arr[j]=arr[i];
arr[i]=temp;
}
}
}
return arr;
}
23. property和attribute的區(qū)別
為什么稱attribute和property為'表親戚'呢?因為他們既有共同處,也有不同點.
attribute 是 dom 元素在文檔中作為 html 標(biāo)簽擁有的屬性毯盈；
property 是 dom 元素在 js 中作為對象擁有的屬性剃毒。
從定義上可以看出:
對于 html 的標(biāo)準(zhǔn)屬性來說，attribute 和 property 是同步的搂赋，是會自動更新的
但是對于自定義的屬性來說赘阀，他們是不同步的.(自定義屬性不會自動添加到property)
property 的值可以改變；attribute 的值不能改變
24. 事件相關(guān)
事件捕獲或者冒泡脑奠，由element.addEventListener(event, function, useCapture)第三個參數(shù)決定基公，默認false,冒泡，
25. Ajax和Fetch
Ajax:AJAX不是JavaScript的規(guī)范宋欺，它只是一個哥們“發(fā)明”的縮寫：Asynchronous JavaScript and XML轰豆，意思就是用JavaScript執(zhí)行異步網(wǎng)絡(luò)請求。
代碼：
var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象
request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時齿诞，函數(shù)被回調(diào)
if (request.readyState === 4) { // 成功完成
// 判斷響應(yīng)結(jié)果:
if (request.status === 200) {
// 成功秒咨，通過responseText拿到響應(yīng)的文本:
return success(request.responseText);
} else {
// 失敗，根據(jù)響應(yīng)碼判斷失敗原因:
return fail(request.status);
}
} else {
// HTTP請求還在繼續(xù)...
}
}
// 發(fā)送請求:
request.open('GET', '/api/categories'掌挚，true);//第三個參數(shù)可以省略雨席，默認是true,表示是否異步，即使用回調(diào)函數(shù)
//修改請求消息頭部xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');post請求需要
request.send( null/data);//如果是post請求吠式，字符串結(jié)構(gòu)是‘name=lal&age=23’陡厘，POST請求需要把body部分以字符串或者FormData對象傳進去
Fetch:是運用了異步Promise的,和XHR（XMLHttpRequest）同樣的功能抽米，是XHR的替代方案
Fetch,問一下 fetch 如何解決跨域問題？如何取消 fetch 請求糙置？能否監(jiān)聽 fetch 的上傳進度云茸？這樣也相當(dāng)于間接地問到了 Promise 的問題，是不是要比讓人突兀地講一講 Promise 好一些谤饭？
注意的點：注意的點太多标捺，自行點擊鏈接查看。
26. 跨域
產(chǎn)生原因：瀏覽器的同源策略導(dǎo)致揉抵。
1. 在同源域名下架設(shè)一個代理服務(wù)器
2. Jsonp
3. CORS
27. Cookie,sessionstorage,localstorage的區(qū)別
sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)亡容，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲冤今，僅僅是會話級別的存儲闺兢。而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)戏罢，否則數(shù)據(jù)是永遠不會過期的屋谭。web storage和cookie的區(qū)別 Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的龟糕。Cookie的大小是受限的桐磁，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬讲岁，另外cookie還需要指定作用域所意，不可以跨域調(diào)用。除此催首，Web Storage擁有setItem,getItem,removeItem,clear等方法扶踊，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie郎任。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進行交互秧耗，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生舶治。
28. 經(jīng)常瀏覽的技術(shù)社區(qū)
掘金分井，思否，CSDN霉猛，GitHub尺锚，博客園
29. 什么是IIFE（立即調(diào)用函數(shù)表達式）
在避免污染全局命名空間時經(jīng)常使用這種模式，因為IIFE（與任何其他正常函數(shù)一樣）內(nèi)部的所有變量在其作用域之外都是不可見的惜浅。
30. 防抖和節(jié)流
1.https://www.cnblogs.com/walls/p/6399837.html;
2.https://juejin.im/post/5c87b54ce51d455f7943dddb
函數(shù)節(jié)流和函數(shù)防抖瘫辩，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。(簡單解釋一下)
防抖：就是在頻繁的觸發(fā)的情況下，一段指定時間后在伐厌，才執(zhí)行代碼一次承绸，比如搜索，不斷的輸入問題挣轨，在輸入完后一段時間军熏，再檢索輸入內(nèi)容；
節(jié)流：就是卷扮，一段時間內(nèi)荡澎，js只執(zhí)行一次，比如說： 用戶點擊提交按鈕晤锹，有可能服務(wù)器返回數(shù)據(jù)較慢摩幔，在頻繁點擊的情況下，在一段時間內(nèi)只請求一次
31.重繪和回流
重繪：指的是當(dāng)頁面中的元素不脫離文檔流抖甘，而簡單地進行樣式的變化，比如修改顏色葫慎、背景等衔彻，瀏覽器重新繪制樣式（不改變DOM結(jié)構(gòu)的操作，比如：改變字體顏色偷办，背景顏色）
回流：指的是處于文檔流中DOM 的尺寸大小艰额、位置或者某些屬性發(fā)生變化時，導(dǎo)致瀏覽器重新渲染部分或全部文檔的情況（改變DOM的操作椒涯，比如：改變寬高柄沮，改變位置）
重點：回流必定會觸發(fā)重繪，重繪不一定會觸發(fā)回流废岂。重繪的開銷較小祖搓，回流的代價較高。
那么湖苞，在工作中我們要如何避免大量使用重繪與回流呢拯欧？：
1.避免頻繁操作樣式，可匯總后統(tǒng)一一次修改
2.盡量使用 class 進行樣式修改财骨，而不是直接操作樣式
3.減少 DOM 的操作镐作，可使用字符串一次性插入
32. 瀏覽器解析URL
1.用戶輸入 URL 地址。
2.對 URL 地址進行 DNS 域名解析隆箩。
3.建立 TCP 連接（三次握手）该贾。
4.瀏覽器發(fā)起 HTTP 請求報文。
5.服務(wù)器返回 HTTP 響應(yīng)報文捌臊。
6.關(guān)閉 TCP 連接（四次揮手）杨蛋。
7.瀏覽器解析文檔資源并渲染頁面。
33.DNS域名解析
提供的服務(wù)是用于將主機名和域名轉(zhuǎn)換為IP 地址的工作：
34.TCP三次握手和四次揮手
一直沒想到怎么說這個問題（看見那些陌生的字符，就醉了_）
什么是TCP 呢六荒？TCP（Transmission Control Protocol 傳輸控制協(xié)議）是一種面向連接的护姆、可靠的、基于字節(jié)流的傳輸層通信協(xié)議掏击。（能大致描述出來就行卵皂，其他一些為什么，以后再研究）
三次握手：建立連接階段砚亭，第一舔箭，客戶端發(fā)送SYN=1的連接請求信號施蜜，告訴服務(wù)器，我想和你通訊，第二掘而，服務(wù)器收到客戶端的請求連接之后，就會發(fā)送給客戶端一個確認信息（ACK）员寇，告訴客戶端昧穿，我收到了，然后向客戶端發(fā)送請求SYN（synchronous）連接署尤，第三耙替，客戶端收到服務(wù)器的確認信息和連接請求，然后就開始通信曹体。
四次揮手：第一次：客戶端發(fā)送斷開連接請求FIN給服務(wù)器俗扇，然后等待服務(wù)器確認，第二次：服務(wù)器發(fā)送最后的信息并且確認（知道）（ACK）客戶端要斷開連接箕别，：第三次铜幽，（客戶端知道服務(wù)器收到了自己的斷開連接請求），所以此時接受服務(wù)器發(fā)送的消息并處于等待斷開連接串稀，服務(wù)器發(fā)送完數(shù)據(jù)后除抛，處于等待斷開連接狀態(tài)，然后發(fā)送FIN斷開連接母截，第四次镶殷，客戶端收到服務(wù)器的斷開連接請求，就會發(fā)送確認ACK消息給服務(wù)器微酬，然后客戶端處于時間等待狀態(tài)绘趋，經(jīng)過2MSL時間后，客戶端斷開自身連接颗管，處于close狀態(tài)陷遮，服務(wù)器只要收到了客戶端發(fā)出的確認，立即進入CLOSED狀態(tài)
35. 瀏覽器渲染頁面（有時間改成自己的話描述）
瀏覽器通過HTMLParser 根據(jù)深度遍歷的原則把 HTML 解析成 DOM Tree垦江。
瀏覽器通過CSSParser 將 CSS 解析成 CSS Rule Tree（CSSOM Tree）帽馋。
瀏覽器將JavaScript 通過 DOM API 或者 CSSOM API 將 JS 代碼解析并應(yīng)用到布局中，按要求呈現(xiàn)響應(yīng)的結(jié)果。
根據(jù)DOM 樹和 CSSOM 樹來構(gòu)造 render Tree（渲染樹）绽族。
layout：重排（也可以叫回流）姨涡，當(dāng) render tree 中任一節(jié)點的幾何尺寸發(fā)生改變，render tree 就會重新布局吧慢，重新來計算所有節(jié)點在屏幕的位置涛漂。
repaint：重繪，當(dāng) render tree 中任一元素樣式屬性（幾何尺寸沒改變）發(fā)生改變時检诗，render tree 都會重新畫匈仗，比如字體顏色，背景等變化逢慌。
paint：遍歷 render tree悠轩，并調(diào)動硬件圖形 API 來繪制每個節(jié)點。
36. 深拷貝
深拷貝是會拷貝所有層級的屬性
(1)遞歸
function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};//很重要攻泼，不然會出現(xiàn)將數(shù)組復(fù)制成對象的形式
if(obj && typeof obj==="object"){//‘object’一定要是字符串火架，首字母小寫
for(let key in obj){
if(obj.hasOwnProperty(key)){
//判斷ojb子元素是否為對象，如果是忙菠，遞歸復(fù)制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是何鸡，簡單復(fù)制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
（2）json方式
function deepClone(obj){
let _obj = JSON.stringify(obj),
objClone = JSON.parse(_obj);
return objClone
}
這種方式有局限性：
(1)會忽略undefined
(2)會忽略symbol
(3)不能序列化函數(shù)
(4)不能解決循環(huán)引用對象的問題
淺克隆
（1）Object.assign
let a = {
age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1
(2)對象...解構(gòu)
let a = {
age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1
(3)遍歷對象
function clone(obj){//淺克隆
//創(chuàng)建空對象objClone
var objClone={};
//遍歷obj中每個屬性
for(var key in obj){
//向objClone中添加一個新屬性,和obj中當(dāng)前屬性同名，并賦值為obj的當(dāng)前屬性值
objClone[key]=obj[key];
}//(遍歷結(jié)束)
return objClone;
}
37. 正則相關(guān)
38. Git和svn的區(qū)別
1. svn是集中式版本控制系統(tǒng)只搁，git是分布式版本控制系統(tǒng)音比。 這句話相信不知道多少人都聽過俭尖，究竟什么是集中式什么是分布式氢惋？很明顯嘛，就字面意思啊稽犁，這么來說吧焰望，svn就是所有人修改的都是服務(wù)器上的程序，如果有人修改了同樣的部分已亥，那就沖突了熊赖。所以呢，一般團隊會約定虑椎，對于公共部分的程序震鹉，盡量標(biāo)注出開發(fā)人員特有標(biāo)識，又或者A從上添加捆姜，B從下添加传趾。
2.git就是開發(fā)人員創(chuàng)建自己的分支，這個分支就相當(dāng)于將源碼copy一份在本機上泥技，之后修改的都是本地的代碼浆兰，可隨時拉取服務(wù)器的代碼進行同步，git可創(chuàng)建無數(shù)分支，開發(fā)人員只需將自己修改的代碼提交就可以了簸呈，這樣沖突的幾率會小很多榕订。
3.svn是直接與服務(wù)器進行交互，git是將項目緩存在本地再推送到服務(wù)器蜕便。
4.svn必須在聯(lián)網(wǎng)的情況下工作劫恒，git可不聯(lián)網(wǎng)開發(fā)。
5.svn易沖突玩裙，git不易沖突兼贸。
6.svn旨在項目管理，git旨在代碼管理吃溅。
7.svn適用于多項目并行開發(fā)溶诞，git適用于單項目開發(fā)。
8.svn適用于企業(yè)內(nèi)部决侈，由項目經(jīng)理協(xié)調(diào)多個項目統(tǒng)籌開發(fā)螺垢，git適用于通過網(wǎng)絡(luò)多人開發(fā)同一項目。
39. 性能優(yōu)化（用戶體驗）
（1） 減少http請求次數(shù)：CSS Sprites, JS赖歌、CSS源碼壓縮等枉圃、
（2） CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問網(wǎng)站的響應(yīng)速度庐冯。
（3） 用innerHTML代替DOM操作孽亲，減少DOM操作次數(shù)，優(yōu)化javascript性能展父。
（4） 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style返劲。
（5） 少用全局變量、緩存DOM節(jié)點查找的結(jié)果栖茉。減少IO讀取操作篮绿。
（6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態(tài)屬性)。
(7) 圖片預(yù)加載吕漂，將樣式表放在頂部亲配，將腳本放在底部（放在底部的原因：然后當(dāng)瀏覽器在解析到 script 標(biāo)簽時，會暫停構(gòu)建 DOM惶凝，完成后才會從暫停的地方重新開始）吼虎。
（8）緩存AJAX
(9)html結(jié)構(gòu)扁平化，減少嵌套苍鲜。Css選擇器優(yōu)化思灰，
40. 優(yōu)雅降級和漸進增強
優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器坡贺，則代碼會檢查以確認它們是否能正常工作官辈。由于IE獨特的盒模型布局問題箱舞，針對不同版本的IE的hack實踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效拳亿。
漸進增強：從被所有瀏覽器支持的基本功能開始晴股，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時肺魁，它們會自動地呈現(xiàn)出來并發(fā)揮作用电湘。
41. XSS和CSRF簡述及預(yù)防措施
XSS:Cross Site Script 跨站腳本攻擊
防XSS：（1）HttpOnly防止竊取cookie(2)用戶的輸入檢查（3）服務(wù)端的輸出檢查
CSRF：Cross Site Request Forgery 跨站網(wǎng)站請求偽造
防CSRF：（1）驗證碼 (2)Referer Check (3)token驗證
42.Css相關(guān)
Css hack:
43. Js模塊化簡介
44. Webpack
只能簡單介紹下，需要運用才知道里邊的東西：
介紹：webpack是一個js應(yīng)用程序（前端）的模塊打包工具鹅经，大致流程呢就是寂呛，找到入口文件，然后遞歸尋找依賴的文件瘾晃，構(gòu)造出依賴關(guān)系圖贷痪，用loader加載不同的模塊，plugins插件擴展webpack的功能蹦误，最后輸出一個文件劫拢。
Loader:loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。 loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊强胰，然后你就可以利用webpack 的打包能力舱沧，對它們進行處理。
本質(zhì)上偶洋，webpack loader 將所有類型的文件熟吏，轉(zhuǎn)換為應(yīng)用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。
Plugins:loader 被用于轉(zhuǎn)換某些類型的模塊玄窝，而插件則可以用于執(zhí)行范圍更廣的任務(wù)牵寺。插件的范圍包括，從打包優(yōu)化和壓縮哆料，一直到重新定義環(huán)境中的變量缸剪。插件接口功能極其強大吗铐，可以用來處理各種各樣的任務(wù)东亦。
45. 職業(yè)規(guī)劃
在前端技術(shù)上有一定深度理解的基礎(chǔ)上，開始擴展后端技術(shù)唬渗，服務(wù)器典阵、數(shù)據(jù)庫，等镊逝，朝著架構(gòu)師和項目經(jīng)理方向發(fā)展壮啊。
46. 自我介紹
47. 談薪資（對薪資的要求）
48. 有什么要問的
能否簡單的評價一下我的不足
49.為什么跳槽
個人遇見了天花板，希望找個更好的發(fā)展機會撑蒜，最主要的就是歹啼，在上家公司玄渗，在技術(shù)上沒有提升的空間，為了更好的發(fā)展狸眼，當(dāng)然一小部分原因是藤树，沒有相關(guān)加薪制度。隨意選擇重新找份工作拓萌。
50.復(fù)習(xí)結(jié)構(gòu)圖
