ES6
解構(gòu)賦值／ 模版字符串 ／ 箭頭函數(shù) ／ 模塊 ／ 擴(kuò)展運(yùn)算符 ／ 函數(shù)默認(rèn)參數(shù) ／ Promise／ assign
this
- 指向函數(shù)的調(diào)用者
- 沒有調(diào)用者湾盗，普通模式指向window唉堪，嚴(yán)格模式指向undefined
- 箭頭函數(shù)本身沒有自己的this贯涎，導(dǎo)致內(nèi)部的this就是外層代碼塊的this呜魄。（所以定義時(shí)就確定）
- call,apply,bind(ES5新增)綁定的,this指的是綁定的對(duì)象
原型鏈
構(gòu)造函數(shù)有一個(gè)原型對(duì)象，原型對(duì)象有一個(gè)指向構(gòu)造函數(shù)的指針窥浪，實(shí)例對(duì)象有一個(gè)指向原型對(duì)象的指針镊逝。
實(shí)現(xiàn)繼承：將子類的原型對(duì)象等于父類的實(shí)例對(duì)象。
瀏覽器工作原理
（解析HTML構(gòu)建DOM樹 && 解析CSS信息生成樣式規(guī)則） -> 構(gòu)建渲染樹 -> 布局 -> 繪制
- 解析HTML過程中遇到<img>標(biāo)簽請(qǐng)求圖片
- 構(gòu)建渲染樹會(huì)忽略display:none的元素 旺拉，此時(shí)才請(qǐng)求css中的背景圖产上，
??整個(gè)過程并不是逐步的，而是解析完一部分內(nèi)容就構(gòu)建顯示一部分內(nèi)容蛾狗。
數(shù)組方法
shift()
刪除并返回?cái)?shù)組的第一個(gè)元素unshift()
向數(shù)組的開頭添加一個(gè)或更多元素晋涣，并返回新的長度。pop():
刪除并返回?cái)?shù)組的最后一個(gè)元素push()
向數(shù)組的末尾添加一個(gè)或更多元素沉桌，并返回新的長度谢鹊。concat()
連接兩個(gè)或更多的數(shù)組，并返回結(jié)果留凭。splice()
刪除元素佃扼，并向數(shù)組添加新元素。reverse()
顛倒數(shù)組中元素的順序冰抢。sort()
對(duì)數(shù)組的元素進(jìn)行排序slice()
從某個(gè)已有的數(shù)組返回選定的元素join()
把數(shù)組的所有元素放入一個(gè)字符串松嘶。元素通過指定的分隔符進(jìn)行分隔。
null和undefined的區(qū)別挎扰？
- typeof 區(qū)別
- null是一個(gè)表示"無"的對(duì)象翠订，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示"無"的原始值遵倦，轉(zhuǎn)為數(shù)值時(shí)為NaN尽超。
- null表示"沒有對(duì)象"，即該處不應(yīng)該有值梧躺。undefined表示"缺少值"似谁，就是此處應(yīng)該有一個(gè)值傲绣，但是還沒有定義。
TCP 三次握手
客戶端發(fā)送連接請(qǐng)求SYN報(bào)文段巩踏；
服務(wù)器收到客戶端的SYN報(bào)文段秃诵，并將SYN+ACK報(bào)文段發(fā)送回客戶端
客戶端收到服務(wù)器的SYN+ACK報(bào)文段，向服務(wù)器發(fā)送ACK報(bào)文段
為什么要三次握手? 為了防止已失效的連接請(qǐng)求報(bào)文段突然又傳送到了服務(wù)端塞琼，因而產(chǎn)生錯(cuò)誤菠净。
TCP 四次揮手
主機(jī)1（可以使客戶端，也可以是服務(wù)器端）向主機(jī)2發(fā)送一個(gè)FIN報(bào)文段
主機(jī)2收到了主機(jī)1發(fā)送的FIN報(bào)文段彪杉，向主機(jī)1回一個(gè)ACK報(bào)文段毅往，
主機(jī)2向主機(jī)1發(fā)送FIN報(bào)文段，請(qǐng)求關(guān)閉連接
主機(jī)1收到主機(jī)2發(fā)送的FIN報(bào)文段派近，向主機(jī)2發(fā)送ACK報(bào)文段攀唯，主機(jī)2收到主機(jī)1的ACK報(bào)文段以后，就關(guān)閉連接
react組建生命周期
-
創(chuàng)建期
- construct( getInitState, getDefaultProps)
- componentWillMount
- render
- componentDidMount
-
存在期：
- componentWillReceiveProps
- componentShouldUpdate
- componentWillupdate
- render
- componentDidUpdate
-
銷毀期：
- componentWillUnmount
js 內(nèi)存
執(zhí)行上下文 －> (變量對(duì)象 | 作用域鏈 | this指向)
變量對(duì)象 －> (arguments ｜ function聲明 ｜ var聲明 )
閉包
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)渴丸。通過訪問外部變量侯嘀，一個(gè)閉包可以維持（keep alive）這些變量。
跨域
同源策略（協(xié)議／域名／端口號(hào)）
-
jsonp
動(dòng)態(tài)創(chuàng)建script標(biāo)簽曙强，將（回調(diào)函數(shù)）函數(shù)名通過script的src屬性傳遞給服務(wù)器－> 服務(wù)器接收到回調(diào)函數(shù)残拐，將數(shù)據(jù)同函數(shù)一起發(fā)送給客戶端－> 客戶端執(zhí)行該函數(shù)
window.name
一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個(gè)window.name的postMessage（H5）
它允許程序員跨域在兩個(gè)窗口/frames間發(fā)送數(shù)據(jù)信息，但不是瀏覽器跟服務(wù)器之間交互碟嘴，而是在兩個(gè)客戶端之間通信。
cookies, sessionStorage 和 localStorage
cookie數(shù)據(jù)保存在客戶端囊卜，session數(shù)據(jù)保存在服務(wù)器端娜扇。
- 是否在所有同源窗口中都是共享 (cookies 和 localStorage )
- 大小限制 （ sessionStorage 和 localStorage大 ）
- 是否過期 (cookies在設(shè)定時(shí)間內(nèi)一直有效，sessionStorage在瀏覽器窗口關(guān)閉失效栅组，localStorage永久有效)
- 是否自動(dòng)在請(qǐng)求中攜帶(cookies)
new 操作符
function Person(){
this.name = "jack"
}
var p = new Person();
// 等價(jià)于
var p = newAlias(Person);
function newAlias(constructor){
var obj ={}; //創(chuàng)建一個(gè)新對(duì)象
obj._proto_ = constructor.prototype; //將新對(duì)象的`_proto_`指向構(gòu)造函數(shù)的原型
Person.call(obj); //將this指向這個(gè)新對(duì)象
this = {} //或者
return obj; // 返回這個(gè)新對(duì)象
}
瀏覽器原理
- 渲染引擎
- JS引擎雀瓢。
一個(gè)頁面從輸入 URL 到頁面加載顯示完成，這個(gè)過程中都發(fā)生了什么玉掸？
- 查找瀏覽器緩存
- DNS解析刃麸、查找該域名對(duì)應(yīng)的IP地址、重定向（301）司浪、發(fā)出第二個(gè)GET請(qǐng)求
- 進(jìn)行HTTP協(xié)議會(huì)話
- 客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭)
- 服務(wù)器回饋報(bào)頭(響應(yīng)報(bào)頭)
- html文檔開始下載
- 文檔樹建立泊业，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類型的文件
- 文件顯示
單頁面應(yīng)用的路由實(shí)現(xiàn)
- ajax請(qǐng)求替換內(nèi)容
- Hash值
- h5的history
瀏覽器緩存｜http緩存
緩存狀態(tài)碼： 304
實(shí)現(xiàn)思路：
-
服務(wù)端與客戶端約定有效時(shí)間,未過期則讀緩存
-
Expires ／ Cache-Control
Expires規(guī)定了緩存失效時(shí)間（日期格式）,Cache-Control規(guī)定了緩存有效時(shí)間（秒單位的時(shí)長格式）
-
-
有效時(shí)間過期后，check服務(wù)端文件是否更新啊易，沒有更新則讀取緩存
-
Last-Modified/If-Modified-Since
要配合Cache-Control使用吁伺，If-Modified-Since的日期會(huì)和服務(wù)端該文件的最后修改日期對(duì)比，如果相同租谈，則從緩存讀數(shù)據(jù)篮奄；如果不相同，則返回新文件數(shù)據(jù)，同時(shí)通過響應(yīng)頭更新last-Modified的值（以備下次對(duì)比）窟却。
-
ETag/If-None-Match
ETag的值昼丑，是一串可以代表該文件唯一的字符串，通過在請(qǐng)求中發(fā)送If-None-Match選項(xiàng)夸赫，值即為上次請(qǐng)求后響應(yīng)頭的ETag值菩帝，該值在服務(wù)端和服務(wù)端代表該文件唯一的字符串對(duì)比（如果服務(wù)端該文件改變了，該值就會(huì)變）憔足，如果相同胁附，則直接讀取緩存，如果不相同滓彰，下載正確的數(shù)據(jù)控妻，更新ETag值。
-
http 和 HTTPs 的腳本能相互加載嗎
http能加載HTTPs的腳本
HTTPs不能加載http的腳本揭绑，會(huì)報(bào)“不安全”的錯(cuò)誤
cookie作用域
- 當(dāng)前域名或者父域名下的Cookie弓候；
- 當(dāng)前路徑或父路徑下的Cookie。
要滿足以上兩個(gè)條件的Cookie才會(huì)被提交
網(wǎng)站優(yōu)化
- CDN加速
實(shí)時(shí)地根據(jù)網(wǎng)絡(luò)流量和各節(jié)點(diǎn)的連接他匪、負(fù)載狀況以及到用戶的距離和響應(yīng)時(shí)間等綜合信息將用戶的請(qǐng)求重新導(dǎo)向離用戶最近的服務(wù)節(jié)點(diǎn)上菇存。 - HTTP緩存
- 靜態(tài)資源設(shè)置多域名
http1.0/1.1 支持同時(shí)發(fā)多個(gè)請(qǐng)求，并發(fā)請(qǐng)求多個(gè)資源當(dāng)然比一個(gè)一個(gè)的請(qǐng)求快邦蜜，可是在同一個(gè)域名下依鸥，瀏覽器并發(fā)請(qǐng)求的數(shù)量是有限制的（chrome為6個(gè)），如果先要突破限制悼沈，就只能使用不同域名來請(qǐng)求資源贱迟。 - 開啟GZip
react通信：
- 父元素到子元素
直接通過props傳遞枝誊。 - 子元素到父元素
子元素通過調(diào)用父元素傳遞過來的函數(shù)來修改父元素狀態(tài)贵白。 - 兄弟元素
上面?zhèn)z者的結(jié)合，子元素通過調(diào)用父元素傳遞過來的函數(shù)來修改父元素狀態(tài)小压，父元素狀態(tài)修改之后壤靶，另外一個(gè)子元素的this.props會(huì)發(fā)生變化缚俏。
客戶端／服務(wù)端 清除緩存
- 客戶端
- meta方法，設(shè)置不緩存
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="0"> - ajax請(qǐng)求服務(wù)器最新文件贮乳，并加上請(qǐng)求頭If-Modified-Since和Cache-Control
- 版本號(hào)
- meta方法，設(shè)置不緩存
webview與H5之間的通信
react setState后發(fā)生了什么
- React 會(huì)將傳入的參數(shù)對(duì)象與組件當(dāng)前的狀態(tài)合并忧换；
- 根據(jù)新的狀態(tài)構(gòu)建 React 元素樹，并且計(jì)算出新的樹與老樹的節(jié)點(diǎn)差異塘揣；
- 根據(jù)差異對(duì)界面進(jìn)行最小化重渲染包雀。
有贊面試總結(jié)
- 如何創(chuàng)建私有作用域，及私有變量
- 任務(wù)隊(duì)列 Event Loop
- this.xx在原型鏈中取值
- 實(shí)現(xiàn)繼承
