一诗良、CSS問題
1.flex布局
display:flex; 在父元素設(shè)置，子元素受彈性盒影響朽合，默認(rèn)排成一行，如果超出一行饱狂，按比例壓縮 flex:1; 子元素設(shè)置曹步，設(shè)置子元素如何分配父元素的空間，flex:1,子元素寬度占滿整個父元素align-items:center 定義子元素在父容器中的對齊方式休讳，center 垂直居中justify-content:center 設(shè)置子元素在父元素中居中讲婚，前提是子元素沒有把父元素占滿，讓子元素水平居中俊柔。
2.css3的新特性
transtion transition-property 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱筹麸。
transition-duration 規(guī)定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規(guī)定速度效果的速度曲線雏婶。
transition-delay 定義過渡效果何時開始物赶。
animation屬性可以像Flash制作動畫一樣，通過控制關(guān)鍵幀來控制動畫的每一步留晚，實(shí)現(xiàn)更為復(fù)雜的動畫效果酵紫。
ainimation實(shí)現(xiàn)動畫效果主要由兩部分組成：
通過類似Flash動畫中的幀來聲明一個動畫；
在animation屬性中調(diào)用關(guān)鍵幀聲明的動畫。
translate 3D建模效果
3.img中alt和title的區(qū)別
圖片中的 alt屬性是在圖片不能正常顯示時出現(xiàn)的文本提示奖地。alt有利于SEO優(yōu)化
圖片中的 title屬性是在鼠標(biāo)在移動到元素上的文本提示状蜗。
4.用純CSS創(chuàng)建一個三角形
<style>
? ? div {
? ? ? ? width: 0;
? ? ? ? height: 0;
? ? ? ? border-top: 40px solid transparent;
? ? ? ? border-left: 40px solid transparent;
? ? ? ? border-right: 40px solid transparent;
? ? ? ? border-bottom: 40px solid #ff0000;
? ? }
? ? </style>
</head>
<body>
? <div></div>
</body>
5.如何理解CSS的盒子模型？
標(biāo)準(zhǔn)盒子模型：寬度=內(nèi)容的寬度（content）+ border + padding
低版本IE盒子模型：寬度=內(nèi)容寬度（content+border+padding)
6.如何讓一個div水平居中
已知寬度鹉动，block元素 ，添加添加margin:0 auto屬性宏邮。
已知寬度泽示，絕對定位的居中 ，上下左右都為0蜜氨，margin:auto
7.如何讓一個div水平垂直居中
div {
position: relative / fixed; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin-top:-150px;
margin-left:-250px;
外邊距為自身寬高的一半 */
background-color: pink; /* 方便看效果 */
}
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div {
width: 100px; /* 可省 */
height: 100px; /* 可省 */
background-color: pink; /* 方便看效果 */
}?
8.如何清除浮動械筛？
clear清除浮動（添加空div法）在浮動元素下方添加空div,并給該元素寫css樣式 {clear:both;height:0;overflow:hidden;}
給浮動元素父級設(shè)置高度
父級同時浮動（需要給父級同級元素添加浮動）
父級設(shè)置成inline-block，其margin: 0 auto居中方式失效
給父級添加overflow:hidden 清除浮動方法
萬能清除法 after偽類 清浮動（現(xiàn)在主流方法飒炎，推薦使用）
float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
9.css3實(shí)現(xiàn)三欄布局埋哟，左右固定，中間自適應(yīng)
圣杯布局/雙飛翼布局
<style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .middle,
? ? ? ? .left,
? ? ? ? .right {
? ? ? ? ? ? position: relative;
? ? ? ? ? ? float: left;
? ? ? ? ? ? min-height: 130px;
? ? ? ? }
? ? ? ? .container {
? ? ? ? ? ? padding: 0 220px 0 200px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .left {
? ? ? ? ? ? margin-left: -100%;
? ? ? ? ? ? left: -200px;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? background: red;
? ? ? ? }
? ? ? ? .right {
? ? ? ? ? ? margin-left: -220px;
? ? ? ? ? ? right: -220px;
? ? ? ? ? ? width: 220px;
? ? ? ? ? ? background: green;
? ? ? ? }
? ? ? ? .middle {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? background: blue;
? ? ? ? ? ? word-break: break-all;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div class='container'>
? ? ? ? <div class='middle'></div>
? ? ? ? <div class='left'></div>
? ? ? ? <div class='right'></div>
? ? </div>
</body>
10.display:none 和 visibility: hidden的區(qū)別
display:none 隱藏對應(yīng)的元素郎汪，在文檔布局中不再給它分配空間赤赊，它各邊的元素會合攏，就當(dāng)他從來不存在煞赢。
visibility:hidden 隱藏對應(yīng)的元素抛计，但是在文檔布局中仍保留原來的空間。
11.CSS中 link 和@import 的區(qū)別是照筑？
link屬于HTML標(biāo)簽吹截，而@import是CSS提供的頁面被加載的時，link會同時被加載凝危，而@import引用的CSS會等到頁面被加載完再加載
import只在IE5以上才能識別波俄，而link是HTML標(biāo)簽，無兼容問題
link方式的樣式的權(quán)重 高于@import的權(quán)重.
12.position的absolute與fixed共同點(diǎn)與不同點(diǎn)
共同點(diǎn)： 改變行內(nèi)元素的呈現(xiàn)方式蛾默，display被置為block 讓元素脫離普通流懦铺，不占據(jù)空間 默認(rèn)會覆蓋到非定位元素上
不同點(diǎn)： absolute的”根元素“是可以設(shè)置的 fixed的”根元素“固定為瀏覽器窗口。當(dāng)你滾動網(wǎng)頁趴生，fixed元素與瀏覽器窗口之間的距離是不變的阀趴。
13..transition和animation的區(qū)別
Animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值苍匆，他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性刘急， 而animation不需要觸發(fā)任何事件的情況下才會隨時間改變屬性值，并且transition為2幀浸踩，從from .... to叔汁，而animation可以一幀一幀的。
transition 規(guī)定動畫的名字 規(guī)定完成過渡效果需要多少秒或毫秒 規(guī)定速度效果 定義過渡效果何時開始 animation 指定要綁定到選擇器的關(guān)鍵幀的名稱
14.CSS優(yōu)先級
不同級別：總結(jié)排序：!important > 行內(nèi)樣式>ID選擇器 > 類選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
1.屬性后面加!import 會覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素內(nèi)的樣式
3.id選擇器
4.類選擇器
5.標(biāo)簽選擇器
6.通配符選擇器（*）
7.瀏覽器自定義或繼承
**同一級別：后寫的會覆蓋先寫的**
css選擇器的解析原則：選擇器定位DOM元素是從右往左的方向，這樣可以盡早的過濾掉一些不必要的樣式規(guī)則和元素
15.雪碧圖：
? ? 多個圖片集成在一個圖片中的圖
使用雪碧圖可以減少網(wǎng)絡(luò)請求的次數(shù)据块，加快允許的速度
通過background-position码邻，去定位圖片在屏幕的哪個位置
二、JS問題
1.typeof和instance of 檢測數(shù)據(jù)類型有什么區(qū)別另假？
相同點(diǎn)： 都常用來判斷一個變量是否為空像屋，或者是什么類型的。
不同點(diǎn)： typeof 返回值是一個字符串边篮，用來說明變量的數(shù)據(jù)類型 instanceof 用于判斷一個變量是否屬于某個對象的實(shí)例.
16.使元素消失的方法
visibility:hidden己莺、display:none、z-index=-1戈轿、opacity：0
1.opacity：0,該元素隱藏起來了凌受，但不會改變頁面布局，并且思杯，如果該元素已經(jīng)綁定了一些事件胜蛉，如click事件也能觸發(fā)
2.visibility:hidden,該元素隱藏起來了，但不會改變頁面布局色乾，但是不會觸發(fā)該元素已經(jīng)綁定的事件
3.display:node, 把元素隱藏起來誊册，并且會改變頁面布局，可以理解成在頁面中把該元素刪掉
.談一談深克隆和淺克妈就濉解虱？
淺克隆: 只是拷貝了基本類型的數(shù)據(jù)，而引用類型數(shù)據(jù)漆撞，復(fù)制后也是會發(fā)生引用殴泰，我們把這種拷貝叫做“（淺復(fù)制）淺拷貝”，換句話說浮驳，淺復(fù)制僅僅是指向被復(fù)制的內(nèi)存地址悍汛，如果原地址中對象被改變了，那么淺復(fù)制出來的對象也會相應(yīng)改變至会。
深克吕敫馈： 創(chuàng)建一個新對象，屬性中引用的其他對象也會被克隆奉件，不再指向原有對象地址宵蛀。 JSON.parse、JSON.stringify()
3.es6的新特性都有哪些县貌？
let定義塊級作用域變量 沒有變量的提升术陶，必須先聲明后使用 let聲明的變量，不能與前面的let煤痕，var梧宫，conset聲明的變量重名
const 定義只讀變量 const聲明變量的同時必須賦值接谨，const聲明的變量必須初始化，一旦初始化完畢就不允許修改 const聲明變量也是一個塊級作用域變量 const聲明的變量沒有“變量的提升”塘匣，必須先聲明后使用 const聲明的變量不能與前面的let脓豪， var ， const聲明的變量重 const定義的對象\數(shù)組中的屬性值可以修改,基礎(chǔ)數(shù)據(jù)類型不可以
ES6可以給形參函數(shù)設(shè)置默認(rèn)值
在數(shù)組之前加上三個點(diǎn)（...）展開運(yùn)算符
數(shù)組的解構(gòu)賦值忌卤、對象的解構(gòu)賦值
箭頭函數(shù)的特點(diǎn) 箭頭函數(shù)相當(dāng)于匿名函數(shù)扫夜，是不能作為構(gòu)造函數(shù)的，不能被new 箭頭函數(shù)沒有arguments實(shí)參集合,取而代之用...剩余運(yùn)算符解決 箭頭函數(shù)沒有自己的this驰徊。他的this是繼承當(dāng)前上下文中的this 箭頭函數(shù)沒有函數(shù)原型 箭頭函數(shù)不能當(dāng)做Generator函數(shù)历谍，不能使用yield關(guān)鍵字 不能使用call、apply辣垒、bind改變箭頭函數(shù)中this指向 Set數(shù)據(jù)結(jié)構(gòu)，數(shù)組去重
4.==和===區(qū)別是什么印蔬？
=賦值
==返回一個布爾值勋桶；相等返回true，不相等返回false侥猬； 允許不同數(shù)據(jù)類型之間的比較例驹； 如果是不同類型的數(shù)據(jù)進(jìn)行，會默認(rèn)進(jìn)行數(shù)據(jù)類型之間的轉(zhuǎn)換退唠； 如果是對象數(shù)據(jù)類型的比較鹃锈，比較的是空間地址
=== 只要數(shù)據(jù)類型不一樣，就返回false瞧预；
5.常見的設(shè)計模式有哪些屎债？
1、js工廠模式
2垢油、js構(gòu)造函數(shù)模式
3盆驹、js原型模式
4、構(gòu)造函數(shù)+原型的js混合模式
5滩愁、構(gòu)造函數(shù)+原型的動態(tài)原型模式
6躯喇、觀察者模式
7、發(fā)布訂閱模式
6.call bind apply 的區(qū)別硝枉？
call() 和apply()的第一個參數(shù)相同廉丽，就是指定的對象。這個對象就是該函數(shù)的執(zhí)行上下文妻味。
call()和apply()的區(qū)別就在于正压，兩者之間的參數(shù)。
call()在第一個參數(shù)之后的 后續(xù)所有參數(shù)就是傳入該函數(shù)的值弧可。
apply() 只有兩個參數(shù)蔑匣，第一個是對象劣欢，第二個是數(shù)組，這個數(shù)組就是該函數(shù)的參數(shù)裁良。 bind() 方法和前兩者不同在于： bind() 方法會返回執(zhí)行上下文被改變的函數(shù)而不會立即執(zhí)行凿将，而前兩者是 直接執(zhí)行該函數(shù)。他的參數(shù)和call()相同价脾。
7.js繼承方式有哪些牧抵？
原型鏈繼承 核心： 將父類的實(shí)例作為子類的原型
構(gòu)造繼承 核心：使用父類的構(gòu)造函數(shù)來增強(qiáng)子類實(shí)例，等于是復(fù)制父類的實(shí)例屬性給子類
實(shí)例繼承 核心：為父類實(shí)例添加新特性侨把，作為子類實(shí)例返回
拷貝繼承
組合繼承 核心：通過調(diào)用父類構(gòu)造犀变，繼承父類的屬性并保留傳參的優(yōu)點(diǎn)，然后通過將父類實(shí)例作為子類原型秋柄，實(shí)現(xiàn) 函數(shù)復(fù)用
寄生組合繼承 核心：通過寄生方式获枝，砍掉父類的實(shí)例屬性，這樣骇笔，在調(diào)用兩次父類的構(gòu)造的時候省店，就不會初始化兩次實(shí) 例方法/屬性，避免的組合繼承的缺點(diǎn)
8.你怎樣看待閉包笨触？
個人感覺懦傍，簡單來說閉包就是在函數(shù)里面聲明函數(shù)，本質(zhì)上說就是在函數(shù)內(nèi)部和函數(shù)外部搭建起一座橋梁芦劣，使得子函數(shù)可以訪問父函數(shù)中所有的局部變量粗俱，但是反之不可以，這只是閉包的作用之一虚吟，另一個作用寸认，則是保護(hù)變量不受外界污染，使其一直存在內(nèi)存中串慰，在工作中我們還是少使用閉包的好废麻，因?yàn)殚]包太消耗內(nèi)存，不到萬不得已的時候盡量不使用模庐。
9.你是如何理解原型和原型鏈的烛愧？
把所有的對象共用的屬性全部放在堆內(nèi)存的一個對象（共用屬性組成的對象），然后讓每一個對象的 __proto__存儲這個「共用屬性組成的對象」的地址掂碱。而這個共用屬性就是原型怜姿，原型出現(xiàn)的目的就是為了減少不必要的內(nèi)存消耗。而原型鏈就是對象通過__proto__向當(dāng)前實(shí)例所屬類的原型上查找屬性或方法的機(jī)制疼燥，如果找到Object的原型上還是沒有找到想要的屬性或者是方法則查找結(jié)束沧卢，最終會返回undefined
10.瀏覽器渲染的主要流程是什么?
將html代碼按照深度優(yōu)先遍歷來生成DOM樹。 css文件下載完后也會進(jìn)行渲染醉者，生成相應(yīng)的CSSOM但狭。 當(dāng)所有的css文件下載完且所有的CSSOM構(gòu)建結(jié)束后披诗，就會和DOM一起生成Render Tree。 接下來立磁，瀏覽器就會進(jìn)入Layout環(huán)節(jié)呈队，將所有的節(jié)點(diǎn)位置計算出來。 最后唱歧，通過Painting環(huán)節(jié)將所有的節(jié)點(diǎn)內(nèi)容呈現(xiàn)到屏幕上宪摧。
11.從輸入url地址到頁面相應(yīng)都發(fā)生了什么？
1颅崩、瀏覽器的地址欄輸入URL并按下回車几于。
2、瀏覽器查找當(dāng)前URL是否存在緩存沿后，并比較緩存是否過期沿彭。3、DNS解析URL對應(yīng)的IP尖滚。
4膝蜈、根據(jù)IP建立TCP連接（三次握手）。
5熔掺、HTTP發(fā)起請求。
6非剃、服務(wù)器處理請求置逻，瀏覽器接收HTTP響應(yīng)。
7备绽、渲染頁面券坞，構(gòu)建DOM樹。
8肺素、關(guān)閉TCP連接（四次揮手）
12.session恨锚、cookie、localStorage的區(qū)別
相同點(diǎn) 都是保存在瀏覽器端倍靡，且同源的猴伶。
不同點(diǎn)
cookie數(shù)據(jù)始終在同源的http請求中攜帶，即cookie在瀏覽器和服務(wù)器間來回傳遞塌西。
而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器他挎，僅在本地保存。
cookie數(shù)據(jù)還有路徑（path）的概念捡需，可以限制cookie只屬于某個路徑下办桨。 存儲大小限制也不同，cookie數(shù)據(jù)不能超過4k站辉，同時因?yàn)槊看蝖ttp請求都會攜帶cookie呢撞，所以cookie只適合保存很小的數(shù)據(jù)损姜。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多殊霞，可以達(dá)到5M或更大摧阅。 數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效脓鹃，自然也就不可能持久保持逸尖；
localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存瘸右，因此用作持久數(shù)據(jù)娇跟；
cookie只在設(shè)置的cookie過期時間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉太颤。 作用域不同苞俘，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面龄章；
localStorage 在所有同源窗口中都是共享的吃谣；cookie也是在所有同源窗口中都是共享的。
13.js中跨域方法
同源策略（協(xié)議+端口號+域名要相同）
1做裙、jsonp跨域(只能解決get） 原理：動態(tài)創(chuàng)建一個script標(biāo)簽离斩。利用script標(biāo)簽的src屬性不受同源策略限制，因?yàn)樗械膕rc屬性和href屬性都不受同源策略的限制苏揣，可以請求第三方服務(wù)器資源內(nèi)容
步驟： 1).去創(chuàng)建一個script標(biāo)簽 2).script的src屬性設(shè)置接口地址 3).接口參數(shù)吆寨，必須要帶一個自定義函數(shù)名，要不然后臺無法返回數(shù)據(jù) 4).通過定義函數(shù)名去接受返回的數(shù)據(jù)
2拧廊、document.domain 基礎(chǔ)域名相同 子域名不同
3监徘、window.name 利用在一個瀏覽器窗口內(nèi)，載入所有的域名都是共享一個window.name
4吧碾、服務(wù)器設(shè)置對CORS的支持 原理：服務(wù)器設(shè)置Access-Control-Allow-Origin HTTP響應(yīng)頭之后凰盔，瀏覽器將會允許跨域請求
5、利用h5新特性window.postMessage()
14.前端有哪些頁面優(yōu)化方法?
減少 HTTP請求數(shù)
從設(shè)計實(shí)現(xiàn)層面簡化頁面
合理設(shè)置 HTTP緩存
資源合并與壓縮
合并 CSS圖片倦春，減少請求數(shù)的又一個好辦法户敬。
將外部腳本置底（將腳本內(nèi)容在頁面信息內(nèi)容加載后再加載）
多圖片網(wǎng)頁使用圖片懶加載。
在js中盡量減少閉包的使用
盡量合并css和js文件
盡量使用字體圖標(biāo)或者SVG圖標(biāo)睁本，來代替?zhèn)鹘y(tǒng)的PNG等格式的圖片
減少對DOM的操作
在JS中避免“嵌套循環(huán)”和 “死循環(huán)”
盡可能使用事件委托（事件代理）來處理事件綁定的操作
15.Ajax的四個步驟
1.創(chuàng)建ajax實(shí)例
2.執(zhí)行open 確定要訪問的鏈接 以及同步異步
3.監(jiān)聽請求狀態(tài)
4.發(fā)送請求
16.數(shù)組去重的方法
ES6的set對象 先將原數(shù)組排序山叮，在與相鄰的進(jìn)行比較，如果不同則存入新數(shù)組
function unique(arr){
? ? var arr2 = arr.sort();
? ? var res = [arr2[0]];
? ? for(var i=1;i<arr2.length;i++){
? ? ? ? if(arr2[i] !== res[res.length-1]){
? ? ? ? res.push(arr2[i]);
? ? }
}
return res;
}
利用下標(biāo)查詢
function unique(arr){
? ? var newArr = [arr[0]];
? ? for(var i=1;i<arr.length;i++){
? ? ? ? if(newArr.indexOf(arr[i]) == -1){
? ? ? ? newArr.push(arr[i]);
? ? }
}
return newArr;
}
17.ajax中g(shù)et和post請求的區(qū)別
get 一般用于獲取數(shù)據(jù)
get請求如果需要傳遞參數(shù)添履，那么會默認(rèn)將參數(shù)拼接到url的后面屁倔；然后發(fā)送給服務(wù)器；
get請求傳遞參數(shù)大小是有限制的暮胧；是瀏覽器的地址欄有大小限制锐借；
get安全性較低
get 一般會走緩存问麸，為了防止走緩存，給url后面每次拼的參數(shù)不同钞翔；放在?后面严卖，一般用個時間戳
post 一般用于發(fā)送數(shù)據(jù)
post傳遞參數(shù)，需要把參數(shù)放進(jìn)請求體中布轿，發(fā)送給服務(wù)器哮笆；
post請求參數(shù)放進(jìn)了請求體中，對大小沒有要求汰扭；
post安全性比較高稠肘；
post請求不會走緩存；
18.ajax的狀態(tài)碼
2開頭
200 : 代表請求成功萝毛；
3開頭
301 : 永久重定向项阴；
302: 臨時轉(zhuǎn)移
304 : 讀取緩存 [表示瀏覽器端有緩存，并且服務(wù)端未更新笆包，不再向服務(wù)端請求資源]
307:臨時重定向
以4開頭的都是客戶端的問題环揽；
400 :數(shù)據(jù)/格式錯誤
401: 權(quán)限不夠；（身份不合格庵佣，訪問網(wǎng)站的時候歉胶，登錄和不登錄是不一樣的）
404 : 路徑錯誤，找不到文件
以5開頭都是服務(wù)端的問題
500 : 服務(wù)器的問題
503: 超負(fù)荷巴粪；
19.移動端的兼容問題
給移動端添加點(diǎn)擊事件會有300S的延遲 如果用點(diǎn)擊事件通今，需要引一個fastclick.js文件，解決300s的延遲 一般在移動端用ontouchstart验毡、ontouchmove、ontouchend
移動端點(diǎn)透問題,touchstart 早于 touchend 早于click,click的觸發(fā)是有延遲的帝嗡，這個時間大概在300ms左右晶通，也就是說我們tap觸發(fā)之后蒙層隱藏， 此時 click還沒有觸發(fā)哟玷，300ms之后由于蒙層隱藏狮辽，我們的click觸發(fā)到了下面的a鏈接上 盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)巢寡。 用fastclick喉脖，github.com/ftlabs/fast…?用preventDefault阻止a標(biāo)簽的click 消除 IE10 里面的那個叉號 input:-ms-clear{display:none;}
設(shè)置緩存 手機(jī)頁面通常在第一次加載后會進(jìn)行緩存，然后每次刷新會使用緩存而不是去重新向服務(wù)器發(fā)送請求抑月。如果不希望使用緩存可以設(shè)置no-cache树叽。
圓角BUG 某些Android手機(jī)圓角失效 background-clip: padding-box; 防止手機(jī)中網(wǎng)頁放大和縮小 這點(diǎn)是最基本的，做為手機(jī)網(wǎng)站開發(fā)者來說應(yīng)該都知道的谦絮，就是設(shè)置meta中的viewport
設(shè)置用戶截止縮放题诵，一般寫視口的時候就已經(jīng)寫好了洁仗。
20.JS中同步和異步,以及js的事件流
同步：在同一時間內(nèi)做一件事情
異步：在同一時間內(nèi)做多個事情 JS是單線程的，每次只能做一件事情性锭，JS運(yùn)行在瀏覽器中赠潦，瀏覽器是多線程的，可以在同一時間執(zhí)行多個任務(wù)草冈。
21.JS中常見的異步任務(wù)
定時器她奥、ajax、事件綁定怎棱、回調(diào)函數(shù)哩俭、async await、promise
22.TCP的三次握手和四次揮手
三次握手
第一次握手：客戶端發(fā)送一個SYN碼給服務(wù)器蹄殃，要求建立數(shù)據(jù)連接携茂；
第二次握手： 服務(wù)器SYN和自己處理一個SYN（標(biāo)志）；叫SYN+ACK（確認(rèn)包）诅岩；發(fā)送給客戶端讳苦，可以建立連接
第三次握手： 客戶端再次發(fā)送ACK向服務(wù)器，服務(wù)器驗(yàn)證ACK沒有問題吩谦，則建立起連接鸳谜；
四次揮手
第一次揮手： 客戶端發(fā)送FIN(結(jié)束)報文，通知服務(wù)器數(shù)據(jù)已經(jīng)傳輸完畢式廷；
第二次揮手: 服務(wù)器接收到之后咐扭，通知客戶端我收到了SYN,發(fā)送ACK(確認(rèn))給客戶端，數(shù)據(jù)還沒有傳輸完成
第三次揮手： 服務(wù)器已經(jīng)傳輸完畢滑废，再次發(fā)送FIN通知客戶端蝗肪，數(shù)據(jù)已經(jīng)傳輸完畢
第四次揮手： 客戶端再次發(fā)送ACK,進(jìn)入TIME_WAIT狀態(tài)；服務(wù)器和客戶端關(guān)閉連接蠕趁；
23.為什么建立連接是三次握手薛闪，而斷開連接是四次揮手呢?
建立連接的時候， 服務(wù)器在LISTEN狀態(tài)下俺陋，收到建立連接請求的SYN報文后豁延，把ACK和SYN放在一個報文里發(fā)送給客戶端。 而關(guān)閉連接時腊状，服務(wù)器收到對方的FIN報文時诱咏，僅僅表示對方不再發(fā)送數(shù)據(jù)了但是還能接收數(shù)據(jù)，而自己也未必全部數(shù)據(jù)都發(fā)送給對方了缴挖，所以己方可以立即關(guān)閉袋狞，也可以發(fā)送一些數(shù)據(jù)給對方后，再發(fā)送FIN報文給對方來表示同意現(xiàn)在關(guān)閉連接，因此硕并，己方ACK和FIN一般都會分開發(fā)送法焰，從而導(dǎo)致多了一次。
24.DOM diff原理
如果元素類型發(fā)生變化倔毙，直接替換
如果是文本埃仪，則比較文本里面的內(nèi)容，是否有差異陕赃，如果是元素就需要比較當(dāng)前元素的屬性是否相等,會先比較key卵蛉， 在比較類型 為什么 react中循環(huán) 建議不要使用索引 ,如果純?yōu)榱苏故?那可以使用索引
25.作用域
全局作用域
瀏覽器打開一個頁面時，瀏覽器會給JS代碼提供一個全局的運(yùn)行環(huán)境么库，那么這個環(huán)境就是全局作用域 一個頁面只有一個全局作用域傻丝，全局作用域下有一個window對象 window是全局作用域下的最大的一個內(nèi)置對象（全局作用域下定義的變量和函數(shù)都會存儲在window下） 如果是全局變量，都會給window新增一個鍵值對诉儒；屬性名就是變量名葡缰，屬性值就是變量所存儲的值 如果變量只被var過，那么存儲值是undefined 在私有作用域中是可以獲取到全局變量的忱反，但是在全局作用域中不能獲取私有變量
私有作用域
函數(shù)執(zhí)行會形成一個新的私有的作用域（執(zhí)行多次泛释，形成多個私有作用域） 私有作用域在全局作用域中形成，具有包含的關(guān)系温算； 在一個全局作用域中怜校，可以有很多個私有作用域 在私有作用域下定義的變量都是私有變量 形參也是私有變量 函數(shù)體中通過function定義的函數(shù)也是私有的，在全局作用域不能使用注竿；
塊級作用域
es6中新引入的一種作用域 在js中常見到的if{}茄茁、for{}、while{}巩割、try{}裙顽、catch{}、switch case{}都是塊級作用域 var obj = {} //對象的大括號不是塊級作用域 塊級作用域中的同一變量不能被重復(fù)聲明（塊級下var和function不能重名宣谈，否則會報錯） 作用域鏈
上級作用域
函數(shù)在哪里定義愈犹，他的上一級作用域就是哪，和函數(shù)在哪個作用域下執(zhí)行沒有關(guān)系 作用域鏈：當(dāng)獲取變量所對應(yīng)的值時蒲祈，首先看變量是否是私有變量甘萧，如果不是私有變量萝嘁，要繼續(xù)向上一級作用域中查找梆掸，如果上一級也沒有，那么會繼續(xù)向上一級查找牙言，直到找到全局作用域?yàn)橹顾崆眨蝗绻肿饔糜蛞矝]有，則會報錯咱枉；這樣一級一級向上查找卑硫，就會形成作用域鏈 當(dāng)前作用域沒有的徒恋，則會繼續(xù)向上一級作用域查找 當(dāng)前函數(shù)的上一級作用域跟函數(shù)在哪個作用域下執(zhí)行沒有關(guān)系，只跟函數(shù)在哪定義有關(guān)（重點(diǎn)）
26.Promise處理異步
他是ES6中新增加的一個類（new Promise）,目的是為了管理JS中的異步編程的欢伏，所以把他稱為“Promise設(shè)計模式” new Promise 經(jīng)歷三個狀態(tài)：padding(準(zhǔn)備狀態(tài)：初始化成功入挣、開始執(zhí)行異步的任務(wù))、fullfilled(成功狀態(tài))硝拧、rejected(失敗狀態(tài))== Promise本身是同步編程的径筏，他可以管理異步操作的（重點(diǎn)），new Promise的時候障陶，會把傳遞的函數(shù)立即執(zhí)行 Promise函數(shù)天生有兩個參數(shù)滋恬，resolve(當(dāng)異步操作執(zhí)行成功，執(zhí)行resolve方法),rejected(當(dāng)異步操作失敗抱究，執(zhí)行reject方法) then()方法中有兩個函數(shù)恢氯，第一個傳遞的函數(shù)是resolve,第二個傳遞的函數(shù)是reject ajax中false代表同步，true代表異步鼓寺，如果使用異步勋拟，不等ajax徹底完成
27.map和forEach的區(qū)別
相同點(diǎn)
都是循環(huán)遍歷數(shù)組中的每一項(xiàng) forEach和map方法里每次執(zhí)行匿名函數(shù)都支持3個參數(shù)，參數(shù)分別是item（當(dāng)前每一項(xiàng)）侄刽、index（索引值）指黎、arr（原數(shù)組），需要用哪個的時候就寫哪個 匿名函數(shù)中的this都是指向window 只能遍歷數(shù)組
不同點(diǎn)
map方法返回一個新的數(shù)組州丹，數(shù)組中的元素為原始數(shù)組調(diào)用函數(shù)處理后的值醋安。(原數(shù)組進(jìn)行處理之后對應(yīng)的一個新的數(shù)組。) map()方法不會改變原始數(shù)組 map()方法不會對空數(shù)組進(jìn)行檢測 forEach()方法用于調(diào)用數(shù)組的每個元素墓毒，將元素傳給回調(diào)函數(shù).(沒有return吓揪，返回值是undefined）
注意：forEach對于空數(shù)組是不會調(diào)用回調(diào)函數(shù)的。
28.async await函數(shù)
async/await函數(shù)是異步代碼的新方式
async/await是基于promise實(shí)現(xiàn)的
async/await使異步代碼更像同步代碼
await 只能在async函數(shù)中使用所计，不能再普通函數(shù)中使用柠辞，要成對出現(xiàn)
默認(rèn)返回一個promise實(shí)例，不能被改變
await下面的代碼是異步主胧，后面的代碼是同步的
29.this指向
全局作用域下的this指向window
如果給元素的事件行為綁定函數(shù)叭首，那么函數(shù)中的this指向當(dāng)前被綁定的那個元素
函數(shù)中的this，要看函數(shù)執(zhí)行前有沒有 . , 有 . 的話踪栋，點(diǎn)前面是誰焙格，this就指向誰，如果沒有點(diǎn)夷都，指向window
自執(zhí)行函數(shù)中的this永遠(yuǎn)指向window
定時器中函數(shù)的this指向window
構(gòu)造函數(shù)中的this指向當(dāng)前的實(shí)例
call眷唉、apply、bind可以改變函數(shù)的this指向
箭頭函數(shù)中沒有this，如果輸出this冬阳，就會輸出箭頭函數(shù)定義時所在的作用域中的this
30.原型
所有的函數(shù)數(shù)據(jù)類型都天生自帶一個prototype屬性蛤虐，該屬性的屬性值是一個對象 prototype的屬性值中天生自帶一個constructor屬性，其constructor屬性值指向當(dāng)前原型所屬的類 所有的對象數(shù)據(jù)類型肝陪，都天生自帶一個_proto_屬性驳庭，該屬性的屬性值指向當(dāng)前實(shí)例所屬類的原型
31.異步回調(diào)（如何解決回調(diào)地獄）
promise、generator氯窍、async/await
promise： 1.是一個對象嚷掠，用來傳遞異步操作的信息。代表著某個未來才會知道結(jié)果的時間荞驴，并未這個事件提供統(tǒng)一的api不皆，供進(jìn)異步處理
? 2.有了這個對象，就可以讓異步操作以同步的操作的流程來表達(dá)出來熊楼，避免層層嵌套的回調(diào)地獄
? 3.promise代表一個異步狀態(tài)霹娄，有三個狀態(tài)pending（進(jìn)行中），Resolve(以完成）鲫骗，Reject（失斎堋）
? 4.一旦狀態(tài)改變，就不會在變执泰。任何時候都可以得到結(jié)果枕磁。從進(jìn)行中變?yōu)橐酝瓿苫蛘呤?/p>
promise.all() 里面狀態(tài)都改變，那就會輸出术吝，得到一個數(shù)組
promise.race() 里面只有一個狀態(tài)變?yōu)閞ejected或者fulfilled即輸出
promis.finally()不管指定不管Promise對象最后狀態(tài)如何计济，都會執(zhí)行的操作（本質(zhì)上還是then方法的特例）
32.前端事件流
事件流描述的是從頁面中接受事件的順序，事件 捕獲階段 處于目標(biāo)階段 事件冒泡階段 addeventListener 最后這個布爾值參數(shù)如果是true排苍，表示在捕獲階段調(diào)用事件處理程序沦寂；如果是false，表示在冒泡階段調(diào)用事件處理程序淘衙。
? 1传藏、事件捕獲階段：實(shí)際目標(biāo)div在捕獲階段不會接受事件，也就是在捕獲階段彤守，事件從document到<html>再到<body>就停止了毯侦。
? ? ? 2、處于目標(biāo)階段：事件在div發(fā)生并處理具垫，但是事件處理會被看成是冒泡階段的一部分侈离。
? ? ? 3、冒泡階段：事件又傳播回文檔
? 阻止冒泡事件event.stopPropagation()
? function stopBubble(e) {
? ? if (e && e.stopPropagation) { // 如果提供了事件對象event 這說明不是IE瀏覽器
? ? ? e.stopPropagation()
? ? } else {
? ? ? window.event.cancelBubble = true //IE方式阻止冒泡
? ? ? ? ? }
? ? }
? 阻止默認(rèn)行為event.preventDefault()
function stopDefault(e) {
? ? if (e && e.preventDefault) {
? ? ? e.preventDefault()
? ? } else {
? ? ? // IE瀏覽器阻止函數(shù)器默認(rèn)動作的行為
? ? ? window.event.returnValue = false
? ? }
? }
33.事件如何先捕獲后冒泡做修？
在DOM標(biāo)準(zhǔn)事件模型中霍狰，是先捕獲后冒泡。但是如果要實(shí)現(xiàn)先冒泡后捕獲的效果饰及， 對于同一個事件蔗坯，監(jiān)聽捕獲和冒泡，分別對應(yīng)相應(yīng)的處理函數(shù)燎含，監(jiān)聽到捕獲事件宾濒，先暫緩執(zhí)行，直到冒泡事件被捕獲后再執(zhí)行捕獲事件屏箍。
哪些事件不支持冒泡事件：鼠標(biāo)事件：mouserleave mouseenter 焦點(diǎn)事件：blur focus UI事件：scroll resize
34. 如何判斷一個變量是對象還是數(shù)組（prototype.toString.call()）绘梦。
千萬不要使用typeof來判斷對象和數(shù)組，因?yàn)檫@種類型都會返回object赴魁。
typeOf()是判斷基本類型的Boolean,Number卸奉，symbol, undefined, String。 對于引用類型：除function颖御，都返回object null返回object榄棵。
installOf() 用來判斷A是否是B的實(shí)例，installof檢查的是原型潘拱。
toString() 是Object的原型方法疹鳄，對于 Object 對象，直接調(diào)用 toString() 就能返回 [Object Object] 芦岂。而對于其他對象瘪弓，則需要通過 call / apply 來調(diào)用才能返回正確的類型信息。
hasOwnProperty()方法返回一個布爾值禽最，指示對象自身屬性中是否具有指定的屬性腺怯，該方法會忽略掉那些從原型鏈上繼承到的屬性。
isProperty()方法測試一個對象是否存在另一個對象的原型鏈上川无。
35.setTimeout 和 setInterval的機(jī)制
因?yàn)閖s是單線程的瓢喉。瀏覽器遇到etTimeout 和 setInterval會先執(zhí)行完當(dāng)前的代碼塊，在此之前會把定時器推入瀏覽器的
待執(zhí)行時間隊(duì)列里面舀透，等到瀏覽器執(zhí)行完當(dāng)前代碼之后會看下事件隊(duì)列里有沒有任務(wù)栓票，有的話才執(zhí)行定時器里的代碼
36.splice和slice、map和forEach愕够、 filter()走贪、reduce()的區(qū)別
1.slice(start,end):方法可以從已有數(shù)組中返回選定的元素，返回一個新數(shù)組惑芭，
包含從start到end（不包含該元素）的數(shù)組方法
注意：該方法不會更新原數(shù)組坠狡，而是返回一個子數(shù)組
2.splice():該方法想或者從數(shù)組中添加或刪除項(xiàng)目，返回被刪除的項(xiàng)目遂跟。（該方法會改變原數(shù)組）
splice(index, howmany,item1,...itemx)
·index參數(shù)：必須逃沿，整數(shù)規(guī)定添加或刪除的位置婴渡，使用負(fù)數(shù)，從數(shù)組尾部規(guī)定位置
·howmany參數(shù)：必須凯亮，要刪除的數(shù)量边臼，
·item1..itemx:可選，向數(shù)組添加新項(xiàng)目
3.map()：會返回一個全新的數(shù)組假消。使用于改變數(shù)據(jù)值的時候柠并。會分配內(nèi)存存儲空間數(shù)組并返回，forEach（）不會返回數(shù)據(jù)
4.forEach(): 不會返回任何有價值的東西富拗，并且不打算改變數(shù)據(jù)臼予，單純的只是想用數(shù)據(jù)做一些事情，他允許callback更改原始數(shù)組的元素
5.reduce(): 方法接收一個函數(shù)作為累加器啃沪，數(shù)組中的每一個值（從左到右）開始縮減粘拾，最終計算一個值，不會改變原數(shù)組的值
6.filter(): 方法創(chuàng)建一個新數(shù)組创千，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素半哟。它里面通過function去做處理
VUE問題
1.聊聊對vue的理解
vue是一個漸進(jìn)式的JS框架。他易用签餐，靈活寓涨，高效； 可以把一個頁面分隔成多個組件氯檐；當(dāng)其他頁面有類似功能時戒良，直接讓封裝的組件進(jìn)行復(fù)用； 他是構(gòu)建用戶界面的聲明式框架冠摄，只關(guān)心圖層糯崎；不關(guān)心具體是如何實(shí)現(xiàn)的
2.V-model的原理是什么？
Vue的雙向數(shù)據(jù)綁定是由數(shù)據(jù)劫持結(jié)合發(fā)布者訂閱者實(shí)現(xiàn)的河泳。 數(shù)據(jù)劫持是通過Object.defineProperty()來劫持對象數(shù)據(jù)的setter和getter操作沃呢。 在數(shù)據(jù)變動時作你想做的事
原理 通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令拆挥，最終利用Watcher搭起Observer和Compile之間的通信橋梁薄霜，達(dá)到數(shù)據(jù)變化->視圖更新 在初始化vue實(shí)例時，遍歷data這個對象纸兔，給每一個鍵值對利用Object.definedProperty對data的鍵值對新增get和set方法惰瓜，利用了事件監(jiān)聽DOM的機(jī)制，讓視圖去改變數(shù)據(jù)
3.談?wù)剬ι芷诘睦斫?/b>
beforeCreate階段：vue實(shí)例的掛載元素el和數(shù)據(jù)對象data都是undefined汉矿，還沒有初始化崎坊。
created階段：vue實(shí)例的數(shù)據(jù)對象data有了，可以訪問里面的數(shù)據(jù)和方法洲拇，未掛載到DOM奈揍，el還沒有
beforeMount階段：vue實(shí)例的el和data都初始化了曲尸，但是掛載之前為虛擬的dom節(jié)點(diǎn)
mounted階段：vue實(shí)例掛載到真實(shí)DOM上，就可以通過DOM獲取DOM節(jié)點(diǎn)
beforeUpdate階段：響應(yīng)式數(shù)據(jù)更新時調(diào)用男翰，發(fā)生在虛擬DOM打補(bǔ)丁之前另患，適合在更新之前訪問現(xiàn)有的DOM，比如手動移除已添加的事件監(jiān)聽器
updated階段：虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用奏篙，組成新的DOM已經(jīng)更新，避免在這個鉤子函數(shù)中操作數(shù)據(jù)迫淹，防止死循環(huán)
beforeDestroy階段：實(shí)例銷毀前調(diào)用秘通，實(shí)例還可以用，this能獲取到實(shí)例敛熬，常用于銷毀定時器肺稀，解綁事件
destroyed階段：實(shí)例銷毀后調(diào)用，調(diào)用后所有事件監(jiān)聽器會被移除应民，所有的子實(shí)例都會被銷毀
4.VUE和REACT有什么區(qū)別话原？
react整體是函數(shù)式的思想，把組件設(shè)計成純組件诲锹，狀態(tài)和邏輯通過參數(shù)傳入繁仁，所以在react中，是單向數(shù)據(jù)流归园；
vue的思想是響應(yīng)式的黄虱，也就是基于是數(shù)據(jù)可變的，通過對每一個屬性建立Watcher來監(jiān)聽庸诱，當(dāng)屬性變化的時候捻浦，響應(yīng)式的更新對應(yīng)的虛擬dom。
5.vuex的流程
頁面通過mapAction異步提交事件到action桥爽。action通過commit把對應(yīng)參數(shù)同步提交到mutation。
mutation會修改state中對于的值。 最后通過getter把對應(yīng)值跑出去轰传，在頁面的計算屬性中
通過mapGetter來動態(tài)獲取state中的值
6.vuex有哪幾種狀態(tài)和屬性
state中保存著共有數(shù)據(jù)纱昧，數(shù)據(jù)是響應(yīng)式的
getter可以對state進(jìn)行計算操作，主要用來過濾一些數(shù)據(jù)缀去，可以在多組件之間復(fù)用
mutations定義的方法動態(tài)修改state中的數(shù)據(jù)环疼，通過commit提交方法，方法必須是同步的
actions將mutations里面處理數(shù)據(jù)的方法變成異步的朵耕，就是異步操作數(shù)據(jù)炫隶，通store.dispatch來分發(fā)actions，把異步的方法寫在actions中阎曹，通過commit提交mutations伪阶，進(jìn)行修改數(shù)據(jù)煞檩。
modules：模塊化vuex
7.vue路由的兩種模式
hash ——即地址欄URL中的#符號（此hsah 不是密碼學(xué)里的散列運(yùn)算） hash 雖然出現(xiàn)URL中，但不會被包含在HTTP請求中栅贴，對后端完全沒有影響斟湃，因此改變hash不會重新加載頁面。
history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法
這兩個方法應(yīng)用于瀏覽器的歷史記錄站檐薯，在當(dāng)前已有的back凝赛、forward、go 的基礎(chǔ)之上坛缕，它們提供了對歷史記錄進(jìn)行修改的功能墓猎。只是當(dāng)它們執(zhí)行修改是，雖然改變了當(dāng)前的URL赚楚，但你瀏覽器不會立即向后端發(fā)送請求毙沾。
8.vue中 key 值的作用
當(dāng) Vue.js 用v-for正在更新已渲染過的元素列表時，它默認(rèn)用“就地復(fù)用”策略宠页。 如果數(shù)據(jù)項(xiàng)的順序被改變左胞，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序，而是簡單復(fù)用此處每個元素举户，并且確保它在特定索引下顯示已被渲染過的每個元素烤宙。
key的作用主要是為了高效的更新虛擬DOM。
9$route和$router的區(qū)別
$route是“路由信息對象”俭嘁，包括path门烂，params，hash兄淫，query屯远，fullPath，matched捕虽，name等路由信息參數(shù)慨丐。
$router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等泄私。
10.vue-router守衛(wèi)
導(dǎo)航守衛(wèi) router.beforeEach 全局前置守衛(wèi)
to: Route: 即將要進(jìn)入的目標(biāo)（路由對象）
from: Route: 當(dāng)前導(dǎo)航正要離開的路由
next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子房揭。（一定要用這個函數(shù)才能去到下一個路由，如果不用就攔截） 執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)晌端。
next(): 進(jìn)行管道中的下一個鉤子捅暴。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)咧纠。
next(false): 取消進(jìn)入路由蓬痒，url地址重置為from路由地址(也就是將要離開的路由地址)。
// main.js 入口文件
? ? import router from './router'; // 引入路由
? ? router.beforeEach((to, from, next) => {
? ? ? next();
? ? });
? ? router.beforeResolve((to, from, next) => {
? ? ? next();
? ? });
? ? router.afterEach((to, from) => {
? ? ? console.log('afterEach 全局后置鉤子');
? ? });
路由獨(dú)享的守衛(wèi) 你可以在路由配置上直接定義 beforeEnter 守衛(wèi)
const router = new VueRouter({
? routes: [
? ? {
? ? ? path: '/foo',
? ? ? component: Foo,
? ? ? beforeEnter: (to, from, next) => {
? ? ? ? // ...
? ? ? }
? ? }
? ]
})
組件內(nèi)的守衛(wèi) 你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)
const Foo = {
? template: `...`,
? beforeRouteEnter (to, from, next) {
? ? // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
? ? // 不漆羔！能梧奢！獲取組件實(shí)例 `this`
? ? // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前狱掂，組件實(shí)例還沒被創(chuàng)建
? },
? beforeRouteUpdate (to, from, next) {
? ? // 在當(dāng)前路由改變，但是該組件被復(fù)用時調(diào)用
? ? // 舉例來說亲轨，對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id趋惨，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候，
? ? // 由于會渲染同樣的 Foo 組件惦蚊，因此組件實(shí)例會被復(fù)用器虾。而這個鉤子就會在這個情況下被調(diào)用。
? ? // 可以訪問組件實(shí)例 `this`
? },
? beforeRouteLeave (to, from, next) {
? ? // 導(dǎo)航離開該組件的對應(yīng)路由時調(diào)用蹦锋，我們用它來禁止用戶離開
? ? // 可以訪問組件實(shí)例 `this`
? ? // 比如還未保存草稿兆沙，或者在用戶離開前，
? ? 將setInterval銷毀晕粪，防止離開之后挤悉，定時器還在調(diào)用渐裸。
? }
}
11.axios是什么巫湘？怎么使用？描述使用它實(shí)現(xiàn)登錄功能的流程昏鹃？
請求后臺資源的模塊尚氛。
$ npm install axios -S裝好 復(fù)制代碼
然后發(fā)送的是跨域，需在配置文件中config/index.js進(jìn)行設(shè)置洞渤。后臺如果是Tp5則定義一個資源路由阅嘶。 js中使用import進(jìn)來，然后.get或.post载迄。返回在.then函數(shù)中如果成功讯柔，失敗則是在.catch函數(shù)中
12.vue修飾符
stop：阻止事件的冒泡
prevent：阻止事件的默認(rèn)行為
once：只觸發(fā)一次
self：只觸發(fā)自己的事件行為時，才會執(zhí)行
13.vue項(xiàng)目中的性能優(yōu)化
1.不要在模板里面寫過多表達(dá)式
2.循環(huán)調(diào)用子組件時添加key
3.頻繁切換的使用v-show护昧，不頻繁切換的使用v-if
4.盡量少用float魂迄，可以用flex
5.按需加載，可以用require或者import()按需加載需要的組件
6.路由懶加載
14.vue.extend和vue.component
extend 是構(gòu)造一個組件的語法器惋耙。 然后這個組件你可以作用到Vue.component這個全局注冊方法里 還可以在任意vue模板里使用組件捣炬。 也可以作用到vue實(shí)例或者某個組件中的components屬性中并在內(nèi)部使用apple組件。
Vue.component 你可以創(chuàng)建 绽榛，也可以取組件湿酸。
常見的兼容問題
png24位的圖片在iE6瀏覽器上出現(xiàn)背景 解決方案是做成PNG8.也可以引用一段腳本處理.
瀏覽器默認(rèn)的margin和padding不同。 解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一灭美。
IE6雙邊距bug:塊屬性標(biāo)簽float后推溃，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大届腐。
浮動ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下美莫，如果對元素設(shè)置了浮動页眯，同時又設(shè)置了margin-left或margin-right，margin值會加倍厢呵。） #box{ float:left; width:10px; margin:0 0 0 100px;}
React問題
1.react和vue的區(qū)別
=>? 相同點(diǎn)：
1.數(shù)據(jù)驅(qū)動頁面窝撵，提供響應(yīng)式的試圖組件
2.都有virtual DOM,組件化的開發(fā)，通過props參數(shù)進(jìn)行父子之間組件傳遞數(shù)據(jù)襟铭，都實(shí)現(xiàn)了webComponents規(guī)范
3.數(shù)據(jù)流動單向碌奉，都支持服務(wù)器的渲染SSR
4.都有支持native的方法，react有React native寒砖， vue有wexx
=>? 不同點(diǎn)：
1.數(shù)據(jù)綁定：Vue實(shí)現(xiàn)了雙向的數(shù)據(jù)綁定赐劣，react數(shù)據(jù)流動是單向的
2.數(shù)據(jù)渲染：大規(guī)模的數(shù)據(jù)渲染，react更快
3.使用場景：React配合Redux架構(gòu)適合大規(guī)模多人協(xié)作復(fù)雜項(xiàng)目哩都，Vue適合小快的項(xiàng)目
4.開發(fā)風(fēng)格：react推薦做法jsx + inline style把html和css都寫在js了
? ? vue是采用webpack + vue-loader單文件組件格式魁兼，html, js, css同一個文件
2.redux中的reducer（純函數(shù)）
Redux數(shù)據(jù)流里，reduces其實(shí)是根據(jù)之前的狀態(tài)（previous state）和現(xiàn)有的action（current action）
更新state(這個state可以理解為上下累加器的結(jié)果）
每次redux reducer被執(zhí)行時漠嵌，state和action被傳入咐汞，這個state根據(jù)action進(jìn)行累加或者是'自身消減'(reduce),
進(jìn)而返回最新的state,這也就是典型reduce函數(shù)的用法：state ->? action ->? state
3.react的refs
refs就想一個逃生窗，允許我們之間訪問dom元素或者組件實(shí)例儒鹿，可以向組件添加一個ref屬性的值是一個回調(diào)函數(shù)化撕，
它將接受地城dom元素或組件的已掛在實(shí)例，作為第一個參數(shù)
4.react中的keys
幫組我們跟蹤哪些項(xiàng)目已更改约炎、添加植阴、從列表中刪除，key是獨(dú)一無二的圾浅，可以讓我們高效的去定位元素掠手，并且操作它
5.React的生命周期
三個狀態(tài)：Mounting(已插入真實(shí)的DOM）
? Updating(正在被重新渲染)
? Unmounting(已移除真實(shí)的DOM)
componentDIdMount 在第一次渲染后調(diào)用，只在客服端狸捕。之后組件已經(jīng)生成對應(yīng)的DOM結(jié)構(gòu)喷鸽，
componentDidUpdate 在組件完成更新后立即調(diào)用，在出初始化是不會調(diào)用
6.React子組件向父組件傳值
父組件通過props 給子組件傳遞數(shù)據(jù)府寒，子組件則是通過調(diào)用父組件傳給它的函數(shù)給父組件傳遞數(shù)據(jù)魁衙。
7.為什么虛擬DOM會提高性能?www.zhihu.com/question/29…
虛擬DOM相當(dāng)于在js和真實(shí)dom中間加了一個緩存，利用dom diff算法避免了沒有必要的doom操作株搔，從而提高性能
具體實(shí)現(xiàn)步驟：
·用JavaScript對象結(jié)構(gòu)表示DOM樹的結(jié)構(gòu)剖淀；然后用這個樹構(gòu)建一個真正的DOM樹，插到文檔中
? ? ? ? ·當(dāng)狀態(tài)變更的時候纤房，重新構(gòu)造一棵樹的對象樹纵隔，然后用新的樹和舊的樹進(jìn)行對比，記錄兩棵樹差異
·把2所記錄的差異應(yīng)用到步驟1所構(gòu)建的真正的DOM樹上，試圖就更新了捌刮。
8.diff算法
1.把樹形結(jié)構(gòu)按照層級分解碰煌，只比較同級元素
2.給列表結(jié)構(gòu)的每個單元添加key屬性，方便比較绅作。在實(shí)際代碼中芦圾，會對新舊兩棵樹進(jìn)行一個深度優(yōu)先的遍歷，這樣每個節(jié)點(diǎn)都會有一個標(biāo)記
3.在深度優(yōu)先遍歷的時候俄认，每遍歷到一個節(jié)點(diǎn)就把該節(jié)點(diǎn)和新的樹進(jìn)行對比个少。如果有差異的話就記錄到一個對象里面
Vritual DOM 算法主要實(shí)現(xiàn)上面步驟的三個函數(shù)：element， diff眯杏， patch夜焦。然后就可以實(shí)際的進(jìn)行使用
react只會匹配相同的class的component（這里的class指的是組件的名字）
合并操作，條用component的setState方法的時候岂贩，React將其標(biāo)記為dirty.到每一個時間循環(huán)借宿茫经，React檢查所有標(biāo)記dirty的component重新繪制
4.選擇性子樹渲染∥颍可以重寫shouldComponentUpdate提高diff的性能
9.簡述下flux的思想
flux的最大特點(diǎn)卸伞，就是數(shù)據(jù)的‘單向流動’
1.用戶訪問View
2.View發(fā)出用戶的Action
3.Dispatcher收到Action,要求state進(jìn)行相應(yīng)的更新
4.store更新后，發(fā)出一個‘change’事件后姜性，更新頁面
10.reac性能優(yōu)化是哪個周期函
shouldComponentUpdate 這個方法用來判斷是否需要調(diào)用render方法重新描繪dom.因?yàn)閐om的描繪非常消耗性能瞪慧，
如果我們在shouldComponentUpdate方法中能夠?qū)懗龈鼉?yōu)化的dom diff算法髓考，可以極大的提高性能
11.react怎么劃分業(yè)務(wù)組件和技術(shù)組件
根據(jù)組件的職責(zé)通常把組件分為UI組件和容器組件
UI組件負(fù)責(zé)UI的呈現(xiàn)部念，容器組件負(fù)責(zé)管理數(shù)據(jù)和邏輯
兩者通過React-redux提供connect方法聯(lián)系起來
12.setState
setState通過一個隊(duì)列機(jī)制實(shí)現(xiàn)state更新，當(dāng)執(zhí)行setState時氨菇，會將需要更新的state很后放入狀態(tài)隊(duì)列
而不會立即更新this.state儡炼，隊(duì)列機(jī)制可以高效地批量更新state。如果不通過setState而直接修改this.state的值
那么該state將不會被放入狀態(tài)隊(duì)列中查蓉。當(dāng)下次調(diào)用setState并對狀態(tài)隊(duì)列進(jìn)行合并時乌询，就會忽略之前修改的state，造成不可預(yù)知的錯誤
同時豌研，也利用了隊(duì)列機(jī)制實(shí)現(xiàn)了setState的異步更新妹田，避免了頻繁的重復(fù)更新state
同步更新state:
setState 函數(shù)并不會阻塞等待狀態(tài)更新完畢，因此 setNetworkActivityIndicatorVisible 有可能先于數(shù)據(jù)渲染完畢就執(zhí)行鹃共。
第二個參數(shù)是一個回調(diào)函數(shù)鬼佣，在setState的異步操作結(jié)束并且組件已經(jīng)重新渲染的時候執(zhí)行
也就是說，我們可以通過這個回調(diào)來拿到更新的state的值霜浴，實(shí)現(xiàn)代碼的同步
例子：componentDidMount() {
fetch('https://test.com')
.then((res) => res.json())
.then(
? ? (data) => {
this.setState({ data:data });
StatusBar.setNetworkActivityIndicatorVisible(false);
? ? ? ? }
性能優(yōu)化
一晶衷、webpack打包文件體積過大？（最終打包為一個js文件）
1.異步加載模塊
2.提取第三庫
3.代碼壓縮
4.去除不必要的插件
二、如何優(yōu)化webpack構(gòu)建的性能
一晌纫、減少代碼體積 1.使用CommonsChunksPlugin 提取多個chunk之間的通用模塊税迷，減少總體代碼體積
2.把部分依賴轉(zhuǎn)移到CDN上，避免每次編譯過程都由Webpack處理
3.對一些組件庫采用按需加載锹漱，避免無用的代碼
二箭养、減少目錄檢索范圍
·在使用loader的時候，通過制定exclude和include選項(xiàng)哥牍，減少loader遍歷的目錄范圍露懒，從而加快webpack編譯速度
三、減少檢索路經(jīng)：resolve.alias可以配置webpack模塊解析的別名砂心，對于比較深的解析路經(jīng)懈词，可以對其配置alias
三、移動端的性能優(yōu)化
? 1辩诞、首屏加載和按需加載坎弯，懶加載
? 2、資源預(yù)加載
? 3译暂、圖片壓縮處理抠忘，使用base64內(nèi)嵌圖片
? 4、合理緩存dom對象
? 5外永、使用touchstart代替click（click 300毫秒的延遲）
? 6崎脉、利用transform:translateZ(0)，開啟硬件GUP加速
? 7伯顶、不濫用web字體囚灼，不濫用float（布局計算消耗性能），減少font-size聲明
? 8祭衩、使用viewport固定屏幕渲染灶体，加速頁面渲染內(nèi)容
? 9、盡量使用事件代理掐暮，避免直接事件綁定
四蝎抽、Vue的SPA 如何優(yōu)化加載速度
1.減少入口文件體積
2.靜態(tài)資源本地緩存
3.開啟Gzip壓縮
4.使用SSR,nuxt.js
五、移動端300ms延遲
由來：
300毫米延遲解決的是雙擊縮放路克。雙擊縮放樟结，手指在屏幕快速點(diǎn)擊兩次。safari瀏覽器就會將網(wǎng)頁縮放值原始比例精算。由于用戶可以雙擊縮放或者是滾動的操作瓢宦，
當(dāng)用戶點(diǎn)擊屏幕一次之后，瀏覽器并不會判斷用戶確實(shí)要打開至這個鏈接殖妇，還是想要進(jìn)行雙擊操作
因此刁笙，safair瀏覽器就會等待300ms，用來判斷用戶是否在次點(diǎn)擊了屏幕
解決方案：1.禁用縮放，設(shè)置meta標(biāo)簽 user-scalable=no
? 2.fastclick.js
原理：FastClick的實(shí)現(xiàn)原理是在檢查到touchend事件的時候疲吸，會通過dom自定義事件立即
? ? ? 發(fā)出click事件座每，并把瀏覽器在300ms之后真正的click事件阻止掉
fastclick.js還可以解決穿透問題
六、頁面的重構(gòu)摘悴；
在不改變外部行為的前提下峭梳，簡化結(jié)構(gòu)、添加可讀性
服務(wù)器端
一蹂喻、狀態(tài)碼：
? 2XX（成功處理了請求狀態(tài)）
? ? ? 200 服務(wù)器已經(jīng)成功處理請求葱椭，并提供了請求的網(wǎng)頁
? ? ? 201 用戶新建或修改數(shù)據(jù)成功
? ? ? 202 一個請求已經(jīng)進(jìn)入后臺
? ? ? 204 用戶刪除成功
? 3XX（每次請求使用的重定向不要超過5次）
? ? ? 304 網(wǎng)頁上次請求沒有更新，節(jié)省帶寬和開銷
? 4XX（表示請求可能出錯口四，妨礙了服務(wù)器的處理）
? ? ? 400 服務(wù)器不理解請求的語法
? ? ? 401 用戶沒有權(quán)限（用戶名孵运，密碼輸入錯誤）
? ? ? 403 用戶得到授權(quán)（401相反），但是訪問被禁止
? ? ? 404 服務(wù)器找不到請求的網(wǎng)頁蔓彩，
? 5XX（表示服務(wù)器在處理請求的時候發(fā)生內(nèi)部錯誤）
? ? ? 500 服務(wù)器遇到錯誤治笨，無法完成請求
? ? ? 503 服務(wù)器目前無法使用（超載或停機(jī)維護(hù)）? ?
二、304的緩存原理（添加Etag標(biāo)簽.last-modified） 304 網(wǎng)頁上次請求沒有更新赤嚼，節(jié)省帶寬和開銷
1.服務(wù)器首先產(chǎn)生Etag,服務(wù)器可在稍后使用它來判斷頁面是否被修改旷赖。本質(zhì)上，客戶端通過該記號傳回服務(wù)器要求服務(wù)器驗(yàn)證（客戶端）緩存）
2.304是 HTTP的狀態(tài)碼更卒，服務(wù)器用來標(biāo)識這個文件沒有被修改等孵，不返回內(nèi)容，瀏覽器接受到這個狀態(tài)碼會去去找瀏覽器緩存的文件
3.流程：客戶端請求一個頁面A蹂空。服務(wù)器返回頁面A俯萌，并在A上加一個Tage客服端渲染該頁面，并把Tage也存儲在緩存中腌闯∩粒客戶端再次請求頁面A
并將上次請求的資源和ETage一起傳遞給服務(wù)器雕憔。服務(wù)器檢查Tage.并且判斷出該頁面自上次客戶端請求之后未被修改姿骏。直接返回304
last-modified: 客服端請求資源，同時有一個last-modified的屬性標(biāo)記此文件在服務(wù)器最后修改的時間
客服端第二次請求此url時斤彼，根據(jù)http協(xié)議分瘦。瀏覽器會向服務(wù)器發(fā)送一個If-Modified-Since報頭，
詢問該事件之后文件是否被修改琉苇，沒修改返回304
有了Last-Modified嘲玫，為什么還要用ETag？
? 1并扇、因?yàn)槿绻谝幻腌娭畠?nèi)對一個文件進(jìn)行兩次更改去团，Last-Modified就會不正確（Last—Modified不能識別秒單位的修改）
? 2、某些服務(wù)器不能精確的得到文件的最后修改時間
? 3、一些文件也行會周期新的更改土陪，但是他的內(nèi)容并不改變（僅僅改變修改的事件）昼汗，這個時候我們并不希望客戶端認(rèn)為文件被修改，而重新Get
ETag鬼雀，為什么還要用Last-Modified顷窒？
? 1、兩者互補(bǔ)源哩，ETag的判斷的缺陷鞋吉，比如一些圖片等靜態(tài)文件的修改
? 2、如果每次掃描內(nèi)容都生成ETag比較励烦，顯然要比直接比較修改時間慢的多谓着。
ETag是被請求變量的實(shí)體值（文件的索引節(jié)，大小和最后修改的時間的Hash值）
? 1坛掠、ETag的值服務(wù)器端對文件的索引節(jié)漆魔，大小和最后的修改的事件進(jìn)行Hash后得到的。
三却音、get/post的區(qū)別
1.get數(shù)據(jù)是存放在url之后改抡，以？分割url和傳輸數(shù)據(jù)系瓢，參數(shù)之間以&相連阿纤； post方法是把提交的數(shù)據(jù)放在http包的Body中
2.get提交的數(shù)據(jù)大小有限制，（因?yàn)闉g覽器對url的長度有限制）夷陋，post的方法提交的數(shù)據(jù)沒有限制
3.get需要request.queryString來獲取變量的值欠拾，而post方式通過request.from來獲取變量的值
4.get的方法提交數(shù)據(jù)，會帶來安全問題骗绕，比如登錄一個頁面藐窄，通過get的方式提交數(shù)據(jù)，用戶名和密碼就會出現(xiàn)在url上
四酬土、http協(xié)議的理解
1.超文本的傳輸協(xié)議荆忍，是用于從萬維網(wǎng)服務(wù)器超文本傳輸?shù)奖镜刭Y源的傳輸協(xié)議
2.基于TCP/IP通信協(xié)議來傳遞數(shù)據(jù)（HTML，圖片資源）
3.基于運(yùn)用層的面向?qū)ο蟮膮f(xié)議撤缴，由于其簡潔刹枉、快速的方法、適用于分布式超媒體信息系統(tǒng)
4.http請求信息request：
請求行（request line）屈呕、請求頭部（header）,空行和請求數(shù)據(jù)四部分構(gòu)成
請求行微宝，用來說明請求類型,要訪問的資源以及所使用的HTTP版本.
請求頭部，用來說明服務(wù)器要使用的附加信息
空行虎眨，請求頭部后面的空行是必須的
請求數(shù)據(jù)也叫主體蟋软，可以添加任意的其他數(shù)據(jù)镶摘。
5.http相應(yīng)信息Response
狀態(tài)行、消息報頭岳守、空行和響應(yīng)正文
狀態(tài)行钉稍，由HTTP協(xié)議版本號， 狀態(tài)碼棺耍， 狀態(tài)消息 三部分組成
消息報頭贡未，用來說明客戶端要使用的一些附加信息
空行，消息報頭后面的空行是必須的
響應(yīng)正文蒙袍，服務(wù)器返回給客戶端的文本信息俊卤。
五、http和https
https：是以安全為目標(biāo)的HTTP通道害幅，簡單講是HTTP的安全版本消恍，通過SSL加密
http：超文本傳輸協(xié)議。是一個客服端和服務(wù)器端請求和應(yīng)答的標(biāo)準(zhǔn)（tcp）,使瀏覽器更加高效以现，使網(wǎng)絡(luò)傳輸減少
六狠怨、http1.0 1.1 2.0的區(qū)別
長連接：HTTP1.0需要使用keep-alive參數(shù)來告知服務(wù)器建立一個長連接，而HTP1.1默認(rèn)支持長連接
節(jié)約寬帶：HTTP1.1支持只發(fā)送一個header信息（不帶任何body信息）
host域（設(shè)置虛擬站點(diǎn)邑遏，也就是說佣赖，web server上的多個虛擬站點(diǎn)可以共享同一個ip端口）：HTTP1.0沒有host域
1.http2采用的二進(jìn)制文本傳輸數(shù)據(jù)，而非http1文本格式记盒，二進(jìn)制在協(xié)議的解析和擴(kuò)展更好
2.數(shù)據(jù)壓縮：對信息頭采用了HPACK進(jìn)行壓縮傳輸憎蛤，節(jié)省了信息頭帶來的網(wǎng)絡(luò)流量
3.多路復(fù)用：一個連接可以并發(fā)處理多個請求
4.服務(wù)器推送：我們對支持HTTP2.0的web server請求數(shù)據(jù)的時候，服務(wù)器會順便把一些客戶端需要的資源一起推送到客戶端纪吮，免得客戶端再次創(chuàng)建連接發(fā)送請求到服務(wù)器端獲取俩檬。這種方式非常合適加載靜態(tài)資源
七、web緩存
1.web緩存就是存在于客戶端與服務(wù)器之間的一個副本碾盟、當(dāng)你第一個發(fā)出請求后棚辽，緩存根據(jù)請求保存輸出內(nèi)容的副本
2.緩存的好處
? ? ? ? （1）減少不必要的請求
? ? （2）降低服務(wù)器的壓力，減少服務(wù)器的消耗
? ? （3）降低網(wǎng)絡(luò)延遲冰肴，加快頁面打開速度（直接讀取瀏覽器的數(shù)據(jù)）
八屈藐、常見的web安全及防護(hù)原理
1.sql注入原理：是將sql代碼偽裝到輸入?yún)?shù)中，傳遞到服務(wù)器解析并執(zhí)行的一種攻擊手法嚼沿。也就是說估盘，
? ? ? ? ? ? 在一些對server端發(fā)起的請求參數(shù)中植入一些sql代碼，server端在執(zhí)行sql操作時骡尽，會拼接對應(yīng)參數(shù)，
? ? ? ? ? ? 同時也將一些sql注入攻擊的“sql”拼接起來擅编，導(dǎo)致會執(zhí)行一些預(yù)期之外的操作攀细。
防范：1.對用戶輸入進(jìn)行校驗(yàn)
? ? ? 2.不適用動態(tài)拼接sql
2.XSS（跨站腳本攻擊）：往web頁面插入惡意的html標(biāo)簽或者js代碼箫踩。
? ? ? ? 舉例子：在論壇放置一個看是安全的鏈接，竊取cookie中的用戶信息
防范：1.盡量采用post而不使用get提交表單
? ? ? 2.避免cookie中泄漏用戶的隱式
3.CSRF(跨站請求偽裝）：通過偽裝來自受信任用戶的請求
舉例子：黃軼老師的webapp音樂請求數(shù)據(jù)就是利用CSRF跨站請求偽裝來獲取QQ音樂的數(shù)據(jù)
防范：在客服端頁面增加偽隨機(jī)數(shù)谭贪，通過驗(yàn)證碼
XSS和CSRF的區(qū)別：
? 1.XSS是獲取信息境钟，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包
? 2.CSRF代替用戶完成指定的動作，需要知道其他頁面的代碼和數(shù)據(jù)包
九俭识、CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）
1.盡可能的避開互聯(lián)網(wǎng)有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)慨削。使內(nèi)容傳輸?shù)母旄€(wěn)定。
2.關(guān)鍵技術(shù)：內(nèi)容存儲和分發(fā)技術(shù)中
3.基本原理：廣泛采用各種緩存服務(wù)器套媚，將這些緩存服務(wù)器分布到用戶訪問相對的地區(qū)或者網(wǎng)絡(luò)中缚态。當(dāng)用戶訪問網(wǎng)絡(luò)時利用全局負(fù)載技術(shù)
? ? 將用戶的訪問指向距離最近的緩存服務(wù)器，由緩存服務(wù)器直接相應(yīng)用戶的請求（全局負(fù)載技術(shù)）
十堤瘤、TCP三次握手 (客服端和服務(wù)器端都需要確認(rèn)各自可收發(fā)）
客服端發(fā)c起請求連接服務(wù)器端s確認(rèn)玫芦，服務(wù)器端也發(fā)起連接確認(rèn)客服端確認(rèn)。
第一次握手：客服端發(fā)送一個請求連接本辐，服務(wù)器端只能確認(rèn)自己可以接受客服端發(fā)送的報文段
第二次握手： 服務(wù)端向客服端發(fā)送一個鏈接桥帆，確認(rèn)客服端收到自己發(fā)送的報文段
第三次握手： 服務(wù)器端確認(rèn)客服端收到了自己發(fā)送的報文段
十一、從輸入url到獲取頁面的完整過程?blog.csdn.net/samjustin1/…
1.查詢NDS(域名解析),獲取域名對應(yīng)的IP地址? 查詢?yōu)g覽器緩存
2.瀏覽器與服務(wù)器建立tcp鏈接（三次握手）
3.瀏覽器向服務(wù)器發(fā)送http請求(請求和傳輸數(shù)據(jù)）
4.服務(wù)器接受到這個請求后慎皱，根據(jù)路經(jīng)參數(shù)老虫，經(jīng)過后端的一些處理生成html代碼返回給瀏覽器
5.瀏覽器拿到完整的html頁面代碼開始解析和渲染，如果遇到外部的css或者js茫多，圖片一樣的步驟
6.瀏覽器根據(jù)拿到的資源對頁面進(jìn)行渲染张遭，把一個完整的頁面呈現(xiàn)出來
十二、瀏覽器渲染原理及流程 DOM -> CSSOM -> render -> layout -> print
流程：解析html以及構(gòu)建dom樹 -> 構(gòu)建render樹 ->? 布局render樹 -> 繪制render樹
概念：1.構(gòu)建DOM樹： 渲染引擎解析HTML文檔地梨，首先將標(biāo)簽轉(zhuǎn)換成DOM樹中的DOM node(包括js生成的標(biāo)簽)生成內(nèi)容樹
? ? ? 2.構(gòu)建渲染樹： 解析對應(yīng)的css樣式文件信息（包括js生成的樣式和外部的css）
? ? ? 3.布局渲染樹：從根節(jié)點(diǎn)遞歸調(diào)用菊卷，計算每一個元素的大小，位置等宝剖。給出每個節(jié)點(diǎn)所在的屏幕的精準(zhǔn)位置
? ? ? 4.繪制渲染樹：遍歷渲染樹洁闰，使用UI后端層來繪制每一個節(jié)點(diǎn)
重繪：當(dāng)盒子的位置、大小以及其他屬性万细，例如顏色扑眉、字體大小等到確定下來之后，瀏覽器便把這些顏色都按照各自的特性繪制一遍赖钞，將內(nèi)容呈現(xiàn)在頁面上
觸發(fā)重繪的條件：改變元素外觀屬性桐智。如：color懈万，background-color等
重繪是指一個元素外觀的改變所觸發(fā)的瀏覽器行為，瀏覽器會根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀
注意：table及其內(nèi)部元素需要多次計算才能確定好其在渲染樹中節(jié)點(diǎn)的屬性值舅柜，比同等元素要多發(fā)時間，要盡量避免使用table布局
重排（重構(gòu)/回流/reflow）： 當(dāng)渲染書中的一部分（或全部）因?yàn)樵氐囊?guī)模尺寸口蝠，布局，隱藏等改變而需要重新構(gòu)建镣陕，這就是回流。
每個頁面都需要一次回流姻政，就是頁面第一次渲染的時候
重排一定會影響重繪呆抑，但是重繪不一定會影響重排
十三、為什么css放在頂部而js寫在后面
1.瀏覽器預(yù)先加載css后汁展，可以不必等待HTML加載完畢就可以渲染頁面了
2.其實(shí)HTML渲染并不會等到完全加載完在渲染頁面鹊碍，而是一邊解析DOM一邊渲染。
3.js寫在尾部食绿，主要是因?yàn)閖s主要扮演事件處理的功能侈咕，一方面很多操作是在頁面渲染后才執(zhí)行的。另一方面可以節(jié)省加載時間炫欺，使頁面能夠更加的加載乎完，提高用戶的良好體驗(yàn)
但是隨著JS技術(shù)的發(fā)展，JS也開始承擔(dān)頁面渲染的工作品洛。比如我們的UI其實(shí)可以分被對待树姨，把渲染頁面的js放在前面，時間處理的js放在后面
十四桥状、存儲方式與傳輸方式
1.indexBD: 是h5的本地存儲庫帽揪，把一些數(shù)據(jù)存儲到瀏覽器中，沒網(wǎng)絡(luò)辅斟，瀏覽器可以從這里讀取數(shù)據(jù)转晰，離線運(yùn)用。5m
2.Cookie: 通過瀏覽器記錄信息確認(rèn)用戶身份士飒，最大4kb,這也就限制了傳輸?shù)臄?shù)據(jù)查邢，請求的性能會受到影響
3.Session: 服務(wù)器端使用的一種記錄客戶狀態(tài)的機(jī)制（session_id存在set_cookie發(fā)送到客服端，保存為cookie）
4.localStroage: h5的本地存儲酵幕，數(shù)據(jù)永久保存在客服端
cookie扰藕，sessionStorage，localStorage
1芳撒、cookie邓深，sessionStorage，localStorage是存放在客戶端笔刹，session對象數(shù)據(jù)是存放在服務(wù)器上 實(shí)際上瀏覽器和服務(wù)器之間僅需傳遞session id即可芥备，服務(wù)器根據(jù)session-id找到對應(yīng)的用戶session對象 session存儲數(shù)據(jù)更安全一些，一般存放用戶信息舌菜，瀏覽器只適合存儲一般的數(shù)據(jù)
2萌壳、cookie數(shù)據(jù)始終在同源的http請求中攜帶，在瀏覽器和服務(wù)器來回傳遞，里面存放著session-id sessionStorage讶凉，localStorage僅在本地保存
3染乌、大小限制區(qū)別山孔，cookie數(shù)據(jù)不超過4kb懂讯，localStorage在谷歌瀏覽中2.6MB
4、數(shù)據(jù)有效期不同台颠，cookie在設(shè)置的（服務(wù)器設(shè)置）有效期內(nèi)有效褐望，不管窗口和瀏覽器關(guān)閉 sessionStorage僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，關(guān)閉即銷毀（臨時存儲） localStorage始終有效
SessionStorage和localStorage區(qū)別： 1.sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)串前，這些數(shù)據(jù)只有在用一個會話的頁面中才能被訪問（也就是說在第一次通信過程中） 并且在會話結(jié)束后數(shù)據(jù)也隨之銷毀瘫里，不是一個持久的本地存儲，會話級別的儲存 2.localStorage用于持久化的本地存儲荡碾，除非主動刪除數(shù)據(jù)谨读，否則不會過期
token、cookie坛吁、session三者的理解劳殖？？拨脉？６咭觥！玫膀！
1矛缨、token就是令牌，比如你授權(quán)(登錄)一個程序時,他就是個依據(jù),判斷你是否已經(jīng)授權(quán)該軟件（最好的身份認(rèn)證帖旨，安全性好箕昭，且是唯一的）
? ? 用戶身份的驗(yàn)證方式? ?
2、cookie是寫在客戶端一個txt文件解阅，里面包括登錄信息之類的落竹，這樣你下次在登錄某個網(wǎng)站，就會自動調(diào)用cookie自動登錄用戶名
? ? 服務(wù)器生成瓮钥，發(fā)送到瀏覽器筋量、瀏覽器保存，下次請求再次發(fā)送給服務(wù)器（存放著登錄信息）
3碉熄、session是一類用來客戶端和服務(wù)器之間保存狀態(tài)的解決方案桨武，會話完成被銷毀（代表的就是服務(wù)器和客戶端的一次會話過程）
? ? cookie中存放著sessionID，請求會發(fā)送這個id锈津。sesion因?yàn)閞equest對象而產(chǎn)生呀酸。
基于Token的身份驗(yàn)證：（最簡單的token: uid用戶唯一的身份識別 + time當(dāng)前事件戳 + sign簽名）
? 1、用戶通過用戶名和密碼發(fā)送請求
? 2琼梆、服務(wù)器端驗(yàn)證
? 3性誉、服務(wù)器端返回一個帶簽名的token窿吩，給客戶端
? 4、客戶端儲存token错览，并且每次用于發(fā)送請求
? 5纫雁、服務(wù)器驗(yàn)證token并且返回數(shù)據(jù)
? 每一次請求都需要token
cookie與session區(qū)別
1、cookie數(shù)據(jù)存放在客戶的瀏覽器上倾哺，session數(shù)據(jù)放在服務(wù)器上轧邪。
2、cookie不是很安全羞海，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙考慮到安全應(yīng)當(dāng)使用session忌愚。
3、session會在一定時間內(nèi)保存在服務(wù)器上却邓。當(dāng)訪問增多硕糊，會比較占用你服務(wù)器的性能考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE腊徙。
4简十、單個cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個站點(diǎn)最多保存20個cookie昧穿。
session與token區(qū)別
? 1勺远、session認(rèn)證只是把簡單的User的信息存儲Session里面，sessionID不可預(yù)測时鸵，一種認(rèn)證手段胶逢。只存在服務(wù)端，不能共享到其他的網(wǎng)站和第三方App
? 2饰潜、token是oAuth Token初坠，提供的是認(rèn)證和授權(quán)，認(rèn)證針對用戶彭雾，授權(quán)是針對App碟刺，目的就是讓某APP有權(quán)訪問某用戶的的信息。Token是唯一的薯酝，
? ? token不能轉(zhuǎn)移到其他的App半沽，也不能轉(zhuǎn)到其他用戶上。（適用于App）
? 3吴菠、session的狀態(tài)是存在服務(wù)器端的者填，客戶端只存在session id， Token狀態(tài)是存儲在客戶端的
Cookie的弊端有哪些做葵？占哟？？（優(yōu)勢：保存客戶端數(shù)據(jù)，分擔(dān)了服務(wù)器存儲的負(fù)擔(dān)）
1榨乎、數(shù)量和長度的限制怎燥。每個特定的域名下最多生成20個cookie（chorme和safari沒有限制）
? 2、安全性問題蜜暑。
設(shè)計模式
一铐姚、觀察者模式：juejin.im/post/684490…?juejin.im/post/684490…?在軟件開發(fā)設(shè)計中是一個對象(subject)，維護(hù)一系列依賴他的對象（observer）史煎，當(dāng)任何狀態(tài)發(fā)生改變自動通知他們谦屑。強(qiáng)依賴關(guān)系 簡單理解：數(shù)據(jù)發(fā)生改變時驳糯，對應(yīng)的處理函數(shù)就會自動執(zhí)行篇梭。一個Subjet,用來維護(hù)Observers,為某些event來通知（notify）觀察者
二、發(fā)布-訂閱者 有一個信息中介酝枢，過濾 耦合性低 它定義了一種一對多的關(guān)系恬偷，可以使多個觀察者對象對一個主題對象進(jìn)行監(jiān)聽，當(dāng)這個主題對象發(fā)生改變時帘睦，依賴的所有對象都會被通知到袍患。
-兩者的區(qū)別： 1.觀察者模式中，觀察者知道Subject ,兩者是相關(guān)聯(lián)的竣付，而發(fā)發(fā)布訂閱者只有通過信息代理進(jìn)行通信 2.在發(fā)布訂閱模式中诡延，組件式松散耦合的。正好和觀察者模式相反古胆。 3.觀察者大部分是同步的肆良，比如事件的觸發(fā)。Subject就會調(diào)用觀察者的方法逸绎。而發(fā)布訂閱者大多數(shù)是異步的（） 4.觀察者模式需要在單個應(yīng)用程序地址空間中實(shí)現(xiàn)惹恃，而發(fā)布訂閱者更像交叉應(yīng)用模式。
數(shù)據(jù)結(jié)構(gòu)和算法
一棺牧、兩個棧實(shí)現(xiàn)一個隊(duì)列巫糙，兩個隊(duì)列實(shí)現(xiàn)一個棧?www.cnblogs.com/MrListening…
二、紅黑樹（解決二叉樹依次插入多個節(jié)點(diǎn)時的線型排列）?juejin.im/post/684490…
三颊乘、最小棧的實(shí)現(xiàn)（查找最小元素参淹，用兩個棧配合棧內(nèi)元素的下標(biāo)）juejin.im/post/684490…
四、十大排序
1.冒泡排序：重復(fù)走訪過要排序的數(shù)列乏悄，一次比較兩個元素浙值，如果他們的順序錯誤就把它們交換過來。
? 實(shí)現(xiàn)過程：1.比較相鄰的元素纲爸。如果第一個比第二個大亥鸠，就交換他們兩個
? ? 2.對每一對相鄰元素作同樣的工作，從開始第一對到結(jié)尾的最后一對，這樣在最后的元素應(yīng)該會是最大的數(shù)
? ? 3.針對所有的元素重復(fù)以上的步驟负蚊，除了最后一個
? ? 4.重復(fù)步驟1-3神妹，直到排序完成。
2.選擇排序：首先在未排序序列中找到最小值家妆，放在排序序列的起始位置鸵荠，然后，在從剩下未排序元素中繼續(xù)尋找最小值伤极，然后放在與排序序列的末尾
? 實(shí)現(xiàn)過程：
3.插入排序：構(gòu)建有序序列蛹找，對于未排序數(shù)據(jù)，在已排序序列中沖后向前掃描哨坪，找到相應(yīng)位置并插入
? 實(shí)現(xiàn)過程：1.從第一個元素開始庸疾，該元素可以認(rèn)為已經(jīng)被排序
? ? 2.取出下一個元素，在已排序的元素序列中沖后向前掃描
? ? 3.如果該元素（以排序）大于新元素当编，將元素向后移一位
? ? 4.在取出一個元素届慈，比較之前的，直到找到自己合適的位置
4.桶排序：將數(shù)據(jù)分布到有限數(shù)量的桶里忿偷，每個桶在分別排序
1.快速排序：快速排序使用分治法把一個串（list）分為兩個子串（sub-lists）.具體算法實(shí)現(xiàn)
? 實(shí)現(xiàn)過程：1.從數(shù)組中挑出一個元素金顿，成為一個基準(zhǔn)
? ? 2.重新排列數(shù)組，所有元素比基準(zhǔn)小的擺在基準(zhǔn)前面鲤桥，所有元素比基準(zhǔn)大的擺在基準(zhǔn)后面（相同的可以擺在一邊）
這個分區(qū)退出之后揍拆，該基準(zhǔn)就處于數(shù)列的中間位置。成為分區(qū)操作茶凳。
? ? 3.遞歸的把小于基準(zhǔn)值的子數(shù)列和大于基準(zhǔn)值元素的子數(shù)列排序
算法實(shí)現(xiàn)： function quickSort (arr) {
if （arr.length <= 1） {return arr}
var destIndex = Math.floor(arr.length/2)
var left = [], right = [];
var dest = arr.splice(destIndex,1)[0];
for (var i =0;i<arr.length;i++){
if (arr[i]<dest) {
left.push(arr[i])
} else {
right.push(arr[i]) }
return quickSort(left).concat([dest],quickSort(right)
2.堆排序：利用對這種數(shù)據(jù)結(jié)構(gòu)所涉及的一種排序算法嫂拴，堆積是一個近乎完全二叉樹的結(jié)構(gòu)，并同時滿足堆積的性質(zhì)：即子節(jié)點(diǎn)的鍵值或索引總是小于（或大于）它的父節(jié)點(diǎn)慧妄。
? 實(shí)現(xiàn)過程：1.
五顷牌、數(shù)組去重?juejin.im/post/684490…
1.雙重循環(huán)
2.indexOf
3.數(shù)組排序去重 最快你Olong
六、字符串
判斷回文字符串：（遞歸的思想）
1.字符串分隔塞淹，倒轉(zhuǎn)窟蓝，聚合[...obj].reverse().join('')
2.字符串頭部和尾部，逐次向中間檢測
實(shí)現(xiàn)：function isPalindrome(line) {
line += '';
for (var i=0,j=line.length-1;i<j;i++,j--) {
if (line.chartAt(i) !== line.chartAt(j) {
return false
}
3.遞歸
七饱普、二分查找（有序數(shù)組的查找）
二分查找可以解決已排序數(shù)組的查找問題运挫，即只要數(shù)組中包含T(要查找的值)，那么通過不斷的縮小包含T的數(shù)據(jù)范圍套耕，就可以最終要找到的數(shù)
(1) 一開始,數(shù)據(jù)范圍覆蓋整個數(shù)組谁帕。
(2) 將數(shù)組的中間項(xiàng)與T進(jìn)行比較，如果T比數(shù)組的中間項(xiàng)小冯袍，則到數(shù)組的前半部分繼續(xù)查找匈挖，反之碾牌，則到數(shù)組的后半部分繼續(xù)查找。
(3) 就這樣儡循，每次查找都可以排除一半元素舶吗，相當(dāng)于范圍縮小一半。這樣反復(fù)比較择膝，反復(fù)縮小范圍誓琼，最終會在數(shù)組中找到T
代碼實(shí)現(xiàn)：function binarySearch (data, dest, start, end){
var end = end || data.length-1;
var start = start || 0;
var m = Math.floor((start+end)/2);
if (dest<data[m]){
return binarySearch(data, dest, 0, m-1)
} else {
return binarySearch(data, dest, m+1, end)
}}
return false
手寫代碼
一、動手實(shí)現(xiàn)一個bind（原理通過apply肴捉，call）
一句話概括：1.bind()返回一個新函數(shù)腹侣，并不會立即執(zhí)行。
? ? 2.bind的第一個參數(shù)將作為他運(yùn)行時的this齿穗，之后的一系列參數(shù)將會在傳遞的實(shí)參前傳入作為他的參數(shù)
? ? 3.bind返回函數(shù)作為構(gòu)造函數(shù)傲隶，就是可以new的，bind時指定的this值就會消失缤灵，但傳入的參數(shù)依然生效
Function.prototype.bind = function (obj, arg) {
? var arg = Array.prototype.slice.call(arguments, 1);
? var context = this;
? var bound = function (newArg) {
? arg = arg.concat(Array.prototype.slice.call(newArg);
? return context.apply(obj, arg)
}
? var F =? function () {}? // 在new一個bind會生成新函數(shù)伦籍，必須的條件就是要繼承原函數(shù)的原型，因此用到寄生繼承來完成我們的過程
? F.prototype = context.prototype;
? bound.prototype =? new F();
? return bound;
}
二腮出、 AJAX （異步的javascript和xml）
ajax的原理：相當(dāng)于在用戶和服務(wù)器之間加一個中間層（ajax引擎),使用戶操作與服務(wù)器響應(yīng)異步化。
優(yōu)點(diǎn)：在不刷新整個頁面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)芝薇。不會導(dǎo)致頁面的重載
? ? ? 可以把前端服務(wù)器的任務(wù)轉(zhuǎn)嫁到客服端來處理胚嘲，減輕服務(wù)器負(fù)擔(dān)，節(jié)省寬帶
劣勢：不支持back洛二。對搜索引擎的支持比較弱馋劈；不容易調(diào)試
怎么解決呢？通過location.hash值來解決Ajax過程中導(dǎo)致的瀏覽器前進(jìn)后退按鍵失效晾嘶，
解決以前被人常遇到的重復(fù)加載的問題妓雾。主要比較前后的hash值，看其是否相等垒迂，在判斷是否觸發(fā)ajax
function getData(url) {
? ? var xhr = new XMLHttpRequest();? // 創(chuàng)建一個對象械姻，創(chuàng)建一個異步調(diào)用的對象
? ? xhr.open('get', url, true)? // 設(shè)置一個http請求，設(shè)置請求的方式机断，url以及驗(yàn)證身份
? ? xhr.send() //發(fā)送一個http請求
? ? xhr.onreadystatechange = function () {? //設(shè)置一個http請求狀態(tài)的函數(shù)
? ? ? if (xhr.readyState == 4 && xhr.status ==200) {
? ? ? ? console.log(xhr.responseText)? // 獲取異步調(diào)用返回的數(shù)據(jù)
? ? ? }
? ? }
? }
? Promise(getData(url)).resolve(data => data)
AJAX狀態(tài)碼：0 - （未初始化）還沒有調(diào)用send()方法
? ? 1 - （載入）已調(diào)用send方法楷拳，正在發(fā)送請求
? ? 2 - （載入完成呢）send()方法執(zhí)行完成
? ? 3 - （交互）正在解析相應(yīng)內(nèi)容
? ? 4 - （完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了
```
#### 三吏奸、函數(shù)節(jié)流（throttle）
```
function throttle (func, wait) {
? ? ? ? var timeout;
? ? ? ? var previous = 0;
? ? ? ? return function () {
? ? ? ? ? ? context = this;
? ? ? ? ? ? args = arguments;
? ? ? ? ? ? if (!timeout) {
? ? ? ? ? ? ? ? timeout = setTimeout(() => {
? ? ? ? ? ? ? ? ? ? timeout = null;
? ? ? ? ? ? ? ? ? ? func.apply(context,args)
? ? ? ? ? ? ? ? }, wait);
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
```
#### 四欢揖、函數(shù)防抖（dobounce）
```
function debounce (func, wait) {
? ? ? ? var timeout;
? ? ? ? return function() {
? ? ? ? ? ? var context = this;
? ? ? ? ? ? var args = arguments;
? ? ? ? ? ? clearTimeout(timeout);
? ? ? ? ? ? timeout = setTimeout(() => {
? ? ? ? ? ? ? ? func.apply(context,args)
? ? ? ? ? ? }, wait);
? ? ? ? }
? ? }
```
#### 五、實(shí)現(xiàn)一個函數(shù)clone奋蔚，可以對JavaScript中的5種主要的數(shù)據(jù)類型（包括Number她混、String烈钞、Object、Array坤按、Boolean）進(jìn)行值復(fù)制
```? ?
? ? Object.prototype.clone = function() {
? ? ? var newObject = this.constructor === Array ? [] : {}? //對象的深拷貝 獲取對應(yīng)的構(gòu)造函數(shù) [] 或者 {}
? ? ? for (let e in this) { //遍歷對象的屬性 in? this[e]
? ? ? ? newObject[e] = typeof this[e] === 'object' ? this[e].clone() : this[e]? //對象中的屬性如果還是對象 那就繼續(xù)遞歸 否則就返回基本的數(shù)據(jù)類型
? ? ? }
? ? ? return newObject
? ? }
```
#### 六棵磷、實(shí)現(xiàn)一個簡單的Promise https://juejin.im/post/6844903625769091079
```
class Promise {
? constructor (executor) {? // executor里面有兩個參數(shù)，一個叫resolve（成功）晋涣，一個叫reject（失斠敲健）。
? ? this.status = 'pending',
? ? this.value = undefined;
? ? this.reason = undefined;
? ? // 成功存放的數(shù)組
? ? this.onResolvedCallbacks = [];
? ? // 失敗存放法數(shù)組
? ? this.onRejectedCallbacks = [];
? ? let resolve = (value) => {
? ? ? if (this.status == 'pending') {
? ? ? ? this.status = 'resolve';
? ? ? ? this.value = value;
? ? ? ? this.onResolvedCallbacks.forEach(fn => fn())
? ? ? }
? ? }
? ? let reject = (reason) => {
? ? ? if (this.status == 'pending') {
? ? ? ? this.status = 'reject';
? ? ? ? this.reason = reason;
? ? ? ? this.onRejectedCallbacks.forEach(fn => fn())
? ? ? }
? ? }
? ? try{
? ? ? executor(resolve, reject);
? ? } catch (err) {
? ? ? reject(err);
? ? }
? }
? then (onFullFilled,onRejected) {
? ? if (this.status == 'resolved') {
? ? ? onFullFilled(this.value)
? ? }
? ? if (this.status == 'rejectd') {
? ? ? onRejected(this.reason);
? ? }
? ? if (this.status == 'pending') {
? ? ? this.onResolvedCallbacks.push(()=>{
? ? ? ? onFullFilled(this.value);
? ? ? })
? ? ? this.onRejectedCallbacks.push(()=> {
? ? ? ? ? onRejected(this.reason);
? ? ? })
? }
? }
}
const p = new Promise((resolve, reject) => {
? setTimeout(() => {
? ? ? resolve('hello world')
? }, 1000);
})
p.then((data) =>{
? console.log(data)
},(err) =>{
? console.log(err);
})
```
#### 七谢鹊、發(fā)布訂閱者模式（觀察者模式）
```
var event = {}; // 發(fā)布者
event.clientList = [] //發(fā)布者的緩存列表
event.listen = function (fn) {? // 增加訂閱者函數(shù)
? this.clientList.push(fn)
}
event.trigger = function () {? // 發(fā)布信息
? for (var i =0;i<this.clientList.length;i++) {
? ? var fn = this.clientList[i];
? ? fn.apply(this, arguments);
? }
}
event.listen (function(time) {
? console.log('正式上班時間為：' +time)
})
event.trigger ('2018/7')
```
#### 八算吩、手動寫一個node服務(wù)器
```
const http = require('http');
const fs = require('fs');
const server = http.createServer((req,res) => {
if (reu.url == '/') {
const indexFile = fs.createReadStream('./index.html')
req.writeHead(200,{'context-Type':'text/html;charset = utf8})
indexFile.pipe(res)
}
server.listen(8080)
```
