前言
記錄面試大廠的一些面試題，用作保留并分享（部分重復(fù)題目會剔除）
阿里
1沿侈、promise規(guī)范琅捏？有多少種狀態(tài)
* Promise 必須處于以下三個狀態(tài)之一: pending（等待狀態(tài)）, fulfilled（執(zhí)行狀態(tài)） 或者是 rejected（拒絕狀態(tài)）；
* Promise 的狀態(tài)只能從 **pending->fulfilled** 或 **pending->rejected**孙蒙；
* Promise 成功會有成功的value项棠，失敗會有失敗的reason
* Promise 必須提供一個then方法來訪問最終的結(jié)果悲雳，then方法接收兩個參數(shù) **promise.then(onFulfilled,onRejected)**
2挎峦、多promise對象怎么進行處理？
如果某結(jié)果需要多個對象全部成功返回處理后才能完成合瓢，可以使用 Promise.all 方法坦胶；
如果某結(jié)果需要任意一個對象返回后才能完成，可以使用 Promise.any方法 和 Promise.race方法晴楔。
下面展示 Promise.all 方法使用
console.log("start")
let p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log(1000+"s, p1 done")
resolve()
}, 1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(2000+"s, p2 done")
resolve()
}, 2000)
})
let p3 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(3000+"s, p3 done")
resolve()
}, 3000)
})
let r = Promise.all([p1,p2,p3]); // 等待
r.then(()=>{
console.log("All done")
})
3顿苇、JS的模塊加載機制有哪些？
模塊機制有amd税弃，cmd和commonJs機制
amd對應(yīng)的實現(xiàn)是requireJs纪岁，cmd對應(yīng)實現(xiàn)是Seals，CommonJs對應(yīng)實現(xiàn)是nodeJs
amd和cmd針對的是瀏覽器端则果，而commonJs針對的是服務(wù)端
amd是預(yù)加載幔翰，加載同時還會解析代碼；（優(yōu)點是快西壮，缺點是加載順序不固定遗增，容易出問題，埋下大坑）
cmd是懶加載款青，加載后暫時不執(zhí)行代碼做修，需要時候再執(zhí)行（優(yōu)點是加載順序可控，缺點是加載速度慢）
require和import的區(qū)別
require是amd的加載方式抡草，import是es6中module的加載方式
require在文件任何時候都可以調(diào)用饰及，但是import只能放在文件開頭使用，因為它是編譯時就調(diào)用康震，而require是在文件運行時調(diào)用
require的本質(zhì)是將require的結(jié)果（其實就是各種對象旋炒，數(shù)字，函數(shù)等等）賦值給某個變量签杈；
而import的實質(zhì)是依賴于node的一種將es6轉(zhuǎn)碼為es5的一種加載方式瘫镇，import最終會被轉(zhuǎn)碼為require
4鼎兽、節(jié)流和防抖？
節(jié)流(throttle)：
優(yōu)化高頻率執(zhí)行js代碼的一種手段铣除，核心是保證一段時間內(nèi)只執(zhí)行一次核心代碼谚咬，
讓一個函數(shù)不要執(zhí)行得太頻繁，減少一些過快的調(diào)用來節(jié)流尚粘。
防抖(debounce)：
指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次择卦，如果在 n 秒內(nèi)又觸發(fā)了事件，則會重新計算函數(shù)執(zhí)行時間郎嫁。
先看一段無任何處理的onmousemove的代碼秉继，效果是移動的時候，數(shù)字+1泽铛。
let _text = document.getElementById('text');
let nowTime = new Date().getTime();
function addCount() {
let count = Number(_text.innerHTML);
_text.innerHTML = count + 1;
}
function normal_mouseMove() {
addCount();
}
_text.onmousemove = normal_mouseMove;
如果我們需要實現(xiàn)簡單的 節(jié)流 功能尚辑，如執(zhí)行核心代碼addCount后，需隔 1 秒才能繼續(xù)執(zhí)行下一次,需要把監(jiān)聽改成這樣：
function throttle_mouseMove() {
let _time = new Date().getTime();
if (_time > nowTime + 1000) {
nowTime = _time;
addCount();
}
}
_text.onmousemove = throttle_mouseMove;
如果我們需要實現(xiàn)簡單的 防抖 功能盔腔，如執(zhí)行核心代碼addCount后杠茬，需停止 1 秒才能繼續(xù)執(zhí)行下一次,需要把監(jiān)聽改成這樣：
function debounce_mouseMove() {
let _time = new Date().getTime();
if (_time > nowTime + 1000) {
addCount();
}
nowTime = _time;
}
5、前端性能優(yōu)化弛随？
（1）資源加載優(yōu)化
靜態(tài)資源合并壓縮瓢喉、CDN托管、資源緩存舀透、非核心代碼異步加載async/defer/動態(tài)腳本創(chuàng)建js栓票、；
（2）渲染優(yōu)化
CSS文件放在HEAD頭部愕够、JS文件放在BODY底部走贪、圖片懶加載、多個DOM操作合并到一個链烈、DOM查詢緩存厉斟、事件節(jié)流、事件防抖强衡；
（3）工具優(yōu)化 - webpack
用webpack優(yōu)化前端性能是指優(yōu)化webpack的輸出結(jié)果擦秽，讓打包的最終結(jié)果在瀏覽器運行快速高效。
1漩勤、壓縮代碼感挥。刪除多余的代碼、注釋越败、簡化代碼的寫法等等方式触幼。
可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin來壓縮JS文件， 利用cssnano（css-loader?minimize）來壓縮css
2究飞、利用CDN加速置谦。在構(gòu)建過程中堂鲤，將引用的靜態(tài)資源路徑修改為CDN上對應(yīng)的路徑。
可以利用webpack對于output參數(shù)和各loader的publicPath參數(shù)來修改資源路徑
3媒峡、刪除死代碼（Tree Shaking）瘟栖。將代碼中永遠不會走到的片段刪除掉。
可以通過在啟動webpack時追加參數(shù)--optimize-minimize來實現(xiàn)
4谅阿、提取公共代碼半哟。
6、React相關(guān)問題和React-hooks使用的時候有哪些性能優(yōu)化签餐？
7寓涨、React，子組件不改變時氯檐，如何令父組件渲染時子組件不重新渲染戒良？
在子組件的shouldComponentUpdate判斷條件，返回false則不更新
8男摧、Cookie蔬墩、session译打、sessionStorage和localStorage具體什么區(qū)別耗拓？
image
參考： cookies、session奏司、sessionStorage和localStorage解釋及區(qū)別
9乔询、事件代理有什么作用？優(yōu)點韵洋？具體原理竿刁？
優(yōu)點：相較于一般為每個子節(jié)點添加事件監(jiān)聽的方式，可以減少添加事件監(jiān)聽器的次數(shù)搪缨，提高性能食拜；后續(xù)新增的子節(jié)點不需要重新添加事件監(jiān)聽；
window.onload = function(){
let _ul = document.querySelector('ul');
_ul.onclick = function(e){
let ev = e || window.event;
let target = ev.target || ev.srcElement;
if(target.nodeName.toLocaleLowerCase() === 'li'){
alert(target.innerHTML);
}
}
}
10副编、diff算法實現(xiàn)和原理负甸？
參考： 談?wù)凴eact中Diff算法的策略及實現(xiàn)
11、React中setState原理痹届？
參考： react的setstate原理
setState干了什么：
image
多個setState合并成一個更新：
image
12呻待、React-router實現(xiàn)原理？
React Router 是一個基于 React 的強大路由庫队腐，它可以讓你向應(yīng)用中快速地添加視圖和數(shù)據(jù)流蚕捉，其實現(xiàn)需依賴庫history；
history 有三種實現(xiàn)方式：
1柴淘、BrowserHistory：用于支持 HTML5 歷史記錄 API 的現(xiàn)代 Web 瀏覽器
2迫淹、HashHistory：用于舊版Web瀏覽器
3秘通、MemoryHistory：用作參考實現(xiàn)，也可用于非 DOM 環(huán)境敛熬，如 React Native 或測試
頁面跳轉(zhuǎn)實現(xiàn)
BrowserHistory：pushState充易、replaceState;
HashHistory：location.hash、location.replace
瀏覽器回退
BrowserHistory：popstate;
HashHistory：hashchang;
13荸型、工程化相關(guān)：babel的工作原理盹靴？
babel是一個轉(zhuǎn)譯器，感覺相對于編譯器compiler瑞妇，叫轉(zhuǎn)譯器transpiler更準(zhǔn)確稿静，因為它只是把同種語言的高版本規(guī)則翻譯成低版本規(guī)則，而不像編譯器那樣辕狰，輸出的是另一種更低級的語言代碼改备。
但是和編譯器類似，babel的轉(zhuǎn)譯過程也分為三個階段：parsing蔓倍、transforming悬钳、generating，以ES6代碼轉(zhuǎn)譯為ES5代碼為例偶翅，babel轉(zhuǎn)譯的具體過程如下：
ES6代碼輸入 ==》 babylon進行解析 ==》 得到AST==》 plugin用babel-traverse對AST樹進行遍歷轉(zhuǎn)譯
==》 得到新的AST樹==》 用babel-generator通過AST樹生成ES5代碼
此外默勾，還要注意很重要的一點就是，babel只是轉(zhuǎn)譯新標(biāo)準(zhǔn)引入的語法聚谁，比如ES6的箭頭函數(shù)轉(zhuǎn)譯成ES5的函數(shù)母剥；而新標(biāo)準(zhǔn)引入的新的原生對象，部分原生對象新增的原型方法形导，新增的API等（如Proxy环疼、Set等），這些babel是不會轉(zhuǎn)譯的朵耕。需要用戶自行引入polyfill來解決
14炫隶、引起跨域的原因有哪些？怎么解決跨域阎曹？
引起跨域的原因：
瀏覽器的同源策略是瀏覽器上為安全性考慮實施的非常重要的安全策略伪阶。
從一個域上加載的腳本不允許訪問另外一個域的文檔屬性。
URL由協(xié)議芬膝、域名望门、端口和路徑組成辣恋，如果兩個URL的協(xié)議蹦疑、域名和端口都相同，則表示它們同源逊笆，反之則不同源癣缅。
在瀏覽器中厨剪，<script>哄酝、<img>、<iframe>祷膳、<link>等標(biāo)簽（包含src屬性）都可以加載跨域資源陶衅，而不受同源限制，
但瀏覽器會限制腳本中發(fā)起的跨域請求直晨。比如搀军，使用 XMLHttpRequest 對象和Fetch發(fā)起 HTTP 請求就必須遵守同源策略。
解決跨域的方法：
(1)通過jsonp跨域：需要目標(biāo)服務(wù)器配合一個callback函數(shù)勇皇。
(2)通過修改document.domain來跨子域
(3)使用window.name來進行跨域：window.name+iframe 需要目標(biāo)服務(wù)器響應(yīng)window.name罩句。
(4)使用HTML5中新引進的window.postMessage方法來跨域：需要目標(biāo)服務(wù)器或者說是目標(biāo)頁面寫一個postMessage，主要側(cè)重于前端通訊敛摘。
(5)使用代理服務(wù)器：如nginx反向代理门烂，可以不用目標(biāo)服務(wù)器配合，不過需要你搭建一個中轉(zhuǎn)nginx服務(wù)器兄淫，用于轉(zhuǎn)發(fā)請求屯远。
(6)CORS 需要服務(wù)器設(shè)置header ：Access-Control-Allow-Origin。
對于客戶端捕虽，我們還是正常使用xhr對象發(fā)送ajax請求慨丐。
唯一需要注意的是，需要設(shè)置我們的xhr屬性withCredentials為true薯鳍，不然的話咖气，cookie是帶不過去挨措；
設(shè)置： xhr.withCredentials = true;
對于服務(wù)器端挖滤，需要在 response header中設(shè)置如下兩個字段:
Access-Control-Allow-Origin: http://www.YOURHOST.com
Access-Control-Allow-Credentials:true
騰訊篇
**1. 移動端自適應(yīng)布局****
flex布局參考鏈接：一勞永逸的搞定 flex 布局
// 自適應(yīng)rem + flex布局
// 如果設(shè)計稿基于iphone6，橫向分辨率為750浅役，為方便計算斩松，那么比例計算為 750 / 100 = 7.5rem
// 假設(shè)設(shè)計稿規(guī)范為640px，例如1rem=100px計算觉既，就把html節(jié)點的font-size設(shè)為100px（deviceWidth/6.4）
// 在dom ready后惧盹，deviceWidth設(shè)備寬度可以通過document.documentElement.clientWidth；
function resize() {
var width = document.documentElement.clientWidth;
var scale = 6.4; //設(shè)計稿分線率除以100的比例值
document.documentElement.style.fontSize = width / scale + 'px';
}
window.onresize = function(){
resize();
}
window.onload = function(){
resize();
}
2. css動畫和js動畫的區(qū)別
JS動畫：
缺點：
1.JS在瀏覽器的主線程中運行瞪讼，而主線程還有其他的js腳本钧椰，樣式布局，繪制任務(wù)等符欠，
對其干擾可能導(dǎo)致線程出現(xiàn)阻塞嫡霞，從而造成丟幀的情況。
2.對于簡單的動畫來說希柿，JS動畫代碼復(fù)雜度高于CSS3動畫诊沪。
優(yōu)點：
1.JS動畫可以在動畫運行的任意時間節(jié)點养筒，去做一系列的事件控制，自由度高端姚。
2.動畫效果比CSS3動畫豐富晕粪，有些動畫只有JS動畫才能實現(xiàn)，比如曲線運動渐裸，沖擊閃爍等巫湘。
3.CSS3有兼容性問題，而JS大多時候沒有兼容性問題昏鹃。
CSS3動畫：
缺點：
1.CSS3動畫只能暫停剩膘，不能在動畫節(jié)點中添加事件操作。
2.代碼冗長盆顾。想用CSS3實現(xiàn)稍微復(fù)雜一點的動畫怠褐，最后CSS代碼都會變得特別笨重。
優(yōu)點：
1.瀏覽器可以對動畫進行優(yōu)化您宪。
3. css絕對居中
先來一段html代碼
<div class="parent">
<div class="child">
child -- 1
</div>
<div class="child center">
child -- 2
</div>
<div class="child">
child -- 3
</div>
</div>
/* 1 Flex布局 （不需明確寬高）*/
.parent {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.child.center{
background: red;
align-self: center;
}
/* 2 絕對定位+transform減去寬高50% （不需明確寬高） */
.child.center {
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 3 需要設(shè)置width和height奈懒，但不需要明確數(shù)值 */
.child.center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* 4 需要設(shè)置margin負值，數(shù)值為自身寬高的一半 */
.child.center {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -150px;
}
4. 解釋css中宪巨，塊元素磷杏、行內(nèi)元素和行內(nèi)塊元素
三者之間可以通過display轉(zhuǎn)換，對應(yīng)關(guān)系為：
行內(nèi)元素display: inline;塊元素display: block;行內(nèi)塊元素display: inline-block;
行內(nèi)元素：
1捏卓、不會自動換行极祸，多個行內(nèi)元素并列時從左到右排列；
2怠晴、無法設(shè)置寬高遥金；
3、margin只對左右有效蒜田、上下無效稿械，僅左右能撐開空間；padding上下左右有效冲粤，但僅左右能撐開空間美莫；
塊元素：
1、設(shè)置寬高有效梯捕；
2厢呵、設(shè)置margin和padding有效；
3傀顾、自動換行襟铭，多個塊元素并列時從上到下排列；
行內(nèi)塊元素：（img,）
1、設(shè)置寬高有效蝌矛；
2道批、設(shè)置margin和padding有效；
3入撒、不會自動換行隆豹，多個塊元素并列時從左到右排列；
5. css盒模型
一般情況下茅逮，完整的盒子是由 margin（外邊距）璃赡、border（邊框）、padding（內(nèi)邊距）和content（內(nèi)容）組成
寬高分別為margin + border + padding + content的寬高之和献雅。
css屬性中碉考，box-sizing 的值，常用的有3個：content-box挺身，border-box侯谁，inherit
content-box
這是由 CSS2.1 規(guī)定的寬度高度行為。
寬度和高度分別應(yīng)用到元素的內(nèi)容框章钾。
在寬度和高度之外繪制元素的內(nèi)邊距和邊框墙贱。
總結(jié)：盒子總寬度 = height + padding + margin + border
border-box
為元素設(shè)定的寬度和高度決定了元素的邊框盒。
就是說贱傀，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制惨撇。
通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
總結(jié)：盒子總寬度 = height + border 府寒；
inherit
規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值魁衙。
6. 從用戶輸入URL確認，到瀏覽器渲染頁面完成株搔，中間發(fā)生了些什么
// 主干流程
1. 從瀏覽器接收url到開啟網(wǎng)絡(luò)請求線程（這一部分可以展開瀏覽器的機制以及進程與線程之間的關(guān)系）
2. 開啟網(wǎng)絡(luò)線程到發(fā)出一個完整的http請求（這一部分涉及到dns查詢剖淀，tcp/ip請求，五層因特網(wǎng)協(xié)議棧等知識）
3. 從服務(wù)器接收到請求到對應(yīng)后臺接收到請求（這一部分可能涉及到負載均衡邪狞，安全攔截以及后臺內(nèi)部的處理等等）
4. 后臺和前臺的http交互（這一部分包括http頭部祷蝌、響應(yīng)碼、報文結(jié)構(gòu)帆卓、cookie等知識，可以提下靜態(tài)資源的cookie優(yōu)化米丘，以及編碼解碼剑令，如gzip壓縮等）
5. 單獨拎出來的緩存問題，http的緩存（這部分包括http緩存頭部拄查，etag吁津，catch-control等）
6. 瀏覽器接收到http數(shù)據(jù)包后的解析流程（解析html-詞法分析然后解析成dom樹、解析css生成css規(guī)則樹、合并成render樹碍脏，然后layout梭依、painting渲染、復(fù)合圖層的合成典尾、GPU繪制役拴、外鏈資源的處理、loaded和domcontentloaded等）
7. CSS的可視化格式模型（元素的渲染規(guī)則钾埂，如包含塊河闰，控制框，BFC褥紫，IFC等概念）
8. JS引擎解析過程（JS的解釋階段姜性，預(yù)處理階段，執(zhí)行階段生成執(zhí)行上下文髓考，VO部念，作用域鏈、回收機制等等）
9. 其它（可以拓展不同的知識模塊氨菇，如跨域印机，web安全，hybrid模式等等內(nèi)容）
參考： 從輸入url到頁面加載完成發(fā)生了什么门驾？——前端角度
參考： 從輸入URL到頁面加載的過程射赛？如何由一道題完善自己的前端知識體系！
7. 瀏覽器的重排和重繪
1奶是、重排
當(dāng)渲染樹的一部分必須更新并且節(jié)點的尺寸發(fā)生了變化楣责，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造渲染樹聂沙。
2秆麸、重繪
是在一個元素的外觀被改變所觸發(fā)的瀏覽器行為，瀏覽器會根據(jù)元素的新屬性重新繪制及汉，使元素呈現(xiàn)新的外觀沮趣。
比如改變某個元素的背景色、文字顏色坷随、邊框顏色等等
3房铭、引發(fā)重排
（1）添加、刪除可見的dom
（2）元素的位置温眉、尺寸改變
（3）頁面渲染初始化
（4）瀏覽器窗口尺寸改變
（5）獲取某些屬性缸匪。當(dāng)獲取一些屬性時，瀏覽器為取得正確的值也會觸發(fā)重排,它會導(dǎo)致隊列刷新类溢，
這些屬性包括：offsetTop凌蔬、offsetLeft、offsetWidth、offsetHeight砂心、scrollTop懈词、scrollLeft、
scrollWidth辩诞、scrollHeight坎弯、clientTop、clientLeft躁倒、clientWidth荞怒、clientHeight、
getComputedStyle() (currentStyle in IE)秧秉。所以褐桌，在多次使用這些值時應(yīng)進行緩存。
4象迎、相關(guān)優(yōu)化：
瀏覽器自己的優(yōu)化：
瀏覽器會維護1個隊列荧嵌，把所有會引起重排，重繪的操作放入這個隊列砾淌，等隊列中的操作到一定數(shù)量或者到了一定時間間隔啦撮，瀏覽器就會flush隊列，進行一批處理汪厨，這樣多次重排赃春，重繪變成一次重排重繪
減少 reflow/repaint：
（1）不要逐條條地修改 DOM 的樣式〗俾遥可以先定義好 css 的 class织中，然后修改 DOM 的 className。
（2）不要把 DOM 結(jié)點的屬性值放在一個循環(huán)里當(dāng)成循環(huán)里的變量衷戈。
（3）為動畫的 HTML 元件使用 fixed 或 absoult 的 position狭吼，那么修改他們的 CSS 是不會 reflow 的。
（4）千萬不要使用 table 布局殖妇。因為可能很小的一個小改動會造成整個 table 的重新布局刁笙。
（5）不要在布局信息改變的時候做查詢（會導(dǎo)致渲染隊列強制刷新）
9. HTTP緩存
參考： 徹底弄懂HTTP緩存機制及原理
10. http這一層有什么方法做優(yōu)化
11. http、https和http2的區(qū)別
12. 什么是js閉包
13. js內(nèi)存回收機制
現(xiàn)在各大瀏覽器通常用采用的垃圾回收有兩種方法：引用計數(shù)疲吸、標(biāo)記清除。
1蔚润、引用計數(shù)
// 創(chuàng)建一個obj對象磅氨，由變量 obj 指向這個對象的兩個屬性
var obj = {
name: 'kim',
sex: 'man'
};
// name雖然設(shè)置為了null，但obj依舊有name屬性的引用
o.name = null;
var s = o;
// 我們修改并釋放了o對于對象的引用嫡纠，但變量s依舊存在引用
o = null;
// 變量s也不再引用，對象很快會被垃圾回收器釋放
s = null;
2、標(biāo)記清除
這個算法把“對象是否不再需要”簡化定義為“對象是否可以獲得”
這個算法假定一個全局對象除盏，然后定期的垃圾回收機制從全局開始叉橱，找所有從全局開始引用的對象，然后找這些對象引用的對象者蠕。這樣就能找到所有可以獲得的對象和不能獲得的對象窃祝。
現(xiàn)代瀏覽器都使用了這個回收機制
示例圖
14. js原型鏈相關(guān)
參考： js原型和原型鏈
15. js作用域相關(guān)
參考： 詳解作用域
16. es6知識相關(guān)
參考： 前端面試題整理—ES6篇
17. webpack打包相關(guān)
其他知名公司
1. 如何發(fā)起一個POST請求
var httpRequest = new XMLHttpRequest();//第一步：創(chuàng)建需要的對象
httpRequest.open('POST', 'url', true); //第二步：打開連接
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//設(shè)置請求頭 注：post方式必須設(shè)置請求頭（在建立連接后設(shè)置請求頭）
httpRequest.send('name=teswe&ee=ef');//發(fā)送請求 將情頭體寫在send中
/**
* 獲取數(shù)據(jù)后的處理程序
*/
httpRequest.onreadystatechange = function () {//請求后的回調(diào)接口，可將請求成功后要執(zhí)行的程序?qū)懺谄渲? if (httpRequest.readyState == 4 && httpRequest.status == 200) {//驗證請求是否發(fā)送成功
var json = httpRequest.responseText;//獲取到服務(wù)端返回的數(shù)據(jù)
console.log(json);
}
};
2. 瀏覽器的緩存怎么控制（重復(fù)）
3. VUE組件通信各種方法踱侣，為什么用vuex粪小，優(yōu)缺點
4. 讓自定義組件支持v-model
5. Webpack單獨各項配置，從開發(fā)到部署發(fā)布
6. promise怎么創(chuàng)建抡句，哪些方法探膊，怎么實現(xiàn)支持鏈?zhǔn)秸{(diào)用、
7. 網(wǎng)絡(luò)優(yōu)化待榔、性能優(yōu)化
8. 重繪逞壁，重排
9. 加密請求數(shù)據(jù)
10. 后退頁面保持原來狀態(tài)
11. 網(wǎng)絡(luò)請求優(yōu)化
12. 代碼性能優(yōu)化
13. xss攻擊防御
14. 適配移動端
15. 單獨webpack配置各項作用
16. map,reduce
17. vue路由實現(xiàn)
18. 優(yōu)化～事件代理實現(xiàn)
19. 原生JS應(yīng)用
20. 原型以及原型鏈
1、如構(gòu)造函數(shù)Person和實例p1：Person的prototype指向?qū)嵗蚉erson.prototype锐锣；
p1的原型__proto__指向?qū)嵙υ蚉erson.prototype腌闯；
2、當(dāng)訪問對象的一個屬性或方法時雕憔，會先在自身尋找姿骏，若自身無該屬性，就會去原型找斤彼，若再沒有就再從原型找分瘦，直到Object對象的原型。
21. 繼承
function Person(name) {
this.name = name;
this.show = function() {
return 'my name is ' + this.name;
}
}
Person.prototype.age = 18;
//組合繼承
function p1(name) {
Person.call(this, name);
}
p1.prototype = new Person();
var person1 = new p1('hejian');
console.log(person1);
console.log(person1.age);
console.log(person1.show());
//寄生組合繼承
function p2() {};
p2.prototype = Person.prototype;
function sub(name) {
Person.call(this, name);
}
sub.prototype = new p2();
var person2 = new sub('hejian2');
console.log(person2);
console.log(person2.age);
22. 閉包
//當(dāng)函數(shù)可以記住并訪問所在的詞法作用域時畅卓，就產(chǎn)生了閉包
function bibao(){
var name = 'hejian';
function show(){
return console.log(name);
}
return show;
}
var n1 = bibao();
n1();
23. 函數(shù)作用域
//內(nèi)部環(huán)境可以訪問外部變量擅腰，但是外部變量不能訪問內(nèi)部變量。
var x = 10;
function fn(){
console.log(x);
}
function show(f){
var x = 20;
(function(){
f(); // 10
})()
}
show(fn);
24. 環(huán)境上下文
1翁潘、 單線程
2趁冈、 同步執(zhí)行，只有棧頂?shù)纳舷挛奶幱趫?zhí)行中拜马，其他上下文需要等待
3渗勘、 全局上下文只有唯一的一個，它在瀏覽器關(guān)閉時出棧
4俩莽、 函數(shù)的執(zhí)行上下文的個數(shù)沒有限制
5旺坠、 每次某個函數(shù)被調(diào)用，就會有個新的執(zhí)行上下文為其創(chuàng)建扮超，即使是調(diào)用的自身函數(shù)取刃，也是如此蹋肮。
25. 隱式轉(zhuǎn)換
// 復(fù)雜數(shù)據(jù)類型在隱式轉(zhuǎn)換時，
// 會先轉(zhuǎn)成string（先調(diào)用valueOf方法獲取原始值璧疗，再調(diào)用toString轉(zhuǎn)為字符串）坯辩，
// 再轉(zhuǎn)（Number轉(zhuǎn)成數(shù)字）成number
var a = {
i: 0,
valueOf: function() {
return ++a.i;
}
}
if(a == 1 && a == 2 && a == 3) {
console.log(1);
}
26. 函數(shù)式編程
27. vue框架和react框架對比
1、 react基于函數(shù)式編程思想開發(fā)崩侠，他的
