時(shí)間：2018.8.9 上午10:00-11:40
地點(diǎn)：北京朝陽(yáng)區(qū)
-
面試題總結(jié)
1.瀏覽器原理桐早？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML罕拂、圖像等等）睁冬、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式包吝，然后會(huì)輸出至顯示器或打印機(jī)锥余。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同像鸡，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器哈恰、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核志群。
JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果着绷。
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立锌云，內(nèi)核就傾向于只指渲染引擎荠医。
2.js是單線程還是多線程？同步異步桑涎？瀏覽器同源策略?V8?
單線程,但是瀏覽器是多線程的彬向，單線程的異步執(zhí)行看下一題。
同步是指令發(fā)送一個(gè)請(qǐng)求攻冷，只有當(dāng)請(qǐng)求完成之后才能發(fā)送下一個(gè)請(qǐng)求娃胆，需要等待時(shí)間。
而異步是指等曼，指令發(fā)送一個(gè)請(qǐng)求里烦，然后瀏覽器將這個(gè)請(qǐng)求放入到消息隊(duì)列，你就可以關(guān)閉瀏覽器禁谦，或者發(fā)送下一個(gè)請(qǐng)求了胁黑。沒(méi)有等待時(shí)間，用戶體驗(yàn)性比較好州泊。
但是并不是請(qǐng)求都是要用異步丧蘸，在需要保存數(shù)據(jù)庫(kù)操作過(guò)程的系統(tǒng)中需要用到同步，比如銀行轉(zhuǎn)賬系統(tǒng)遥皂。
3.event loop(事件循環(huán)）
https://mdn.mozillademos.org/files/4617/default.svg
左邊的棧存儲(chǔ)的是同步任務(wù)力喷，所謂同步的任務(wù)就是那些能立即執(zhí)行、不耗時(shí)的任務(wù)渴肉，如變量和函數(shù)的初始化冗懦、事件的綁定等等那些不需要回調(diào)函數(shù)的操作都可歸為這一類。右邊的堆用來(lái)存儲(chǔ)聲明的變量仇祭、對(duì)象披蕉。下面的隊(duì)列就是任務(wù)隊(duì)列，一旦某個(gè)異步任務(wù)有了響應(yīng)就會(huì)被推入隊(duì)列中。如用戶的點(diǎn)擊事件没讲、瀏覽器收到服務(wù)的響應(yīng)和后面提到的setTimeout插入的事件眯娱。每個(gè)異步任務(wù)都和一個(gè)回調(diào)函數(shù)相關(guān)聯(lián)。
一個(gè)js程序的單線程用來(lái)執(zhí)行棧中的同步任務(wù)爬凑，當(dāng)所有同步任務(wù)執(zhí)行完畢后徙缴，棧被清空，然后讀取任務(wù)隊(duì)列中的一個(gè)待處理任務(wù)嘁信，并把相關(guān)回調(diào)函數(shù)壓入棧中于样，單線程開(kāi)始執(zhí)行新的同步任務(wù)，執(zhí)行完畢潘靖。
單線程從任務(wù)隊(duì)列中讀取任務(wù)是不斷循環(huán)的穿剖，每次棧被清空后，都會(huì)在任務(wù)隊(duì)列中讀取新的任務(wù)卦溢，如果沒(méi)有新的任務(wù)糊余，就會(huì)等待，直到有新的任務(wù)单寂，這就叫任務(wù)循環(huán)贬芥。因?yàn)槊總€(gè)任務(wù)都由一個(gè)事件所觸發(fā)，所以也叫事件循環(huán)宣决。
JavaScript單線程和其異步機(jī)制就如上所述蘸劈。所謂的單線程并不孤單，它的背后有瀏覽器的其他線程為其服務(wù)尊沸，其異步也得靠其他線程來(lái)監(jiān)聽(tīng)事件的響應(yīng)昵时，并將回調(diào)函數(shù)推入到任務(wù)隊(duì)列等待執(zhí)行。單線程所做的就是執(zhí)行棧中的同步任務(wù)椒丧，執(zhí)行完畢后壹甥，再?gòu)娜蝿?wù)隊(duì)列中取出一個(gè)事件（沒(méi)有事件的話，就等待事件）壶熏，然后開(kāi)始執(zhí)行棧中相關(guān)的同步任務(wù)句柠，不斷的這樣循環(huán)。
除了放置異步任務(wù)的事件棒假，"任務(wù)隊(duì)列"還可以放置定時(shí)事件溯职，即指定某些代碼在多少時(shí)間之后執(zhí)行。這叫做"定時(shí)器"（timer）功能帽哑，也就是定時(shí)執(zhí)行的代碼谜酒。
定時(shí)器功能主要由setTimeout()和setInterval()這兩個(gè)函數(shù)來(lái)完成，它們的內(nèi)部運(yùn)行機(jī)制完全一樣妻枕，區(qū)別在于前者指定的代碼是一次性執(zhí)行僻族，后者則為反復(fù)執(zhí)行粘驰。
4.靜態(tài)資源服務(wù)器？
5.axios是什么述么？與Ajax有什么區(qū)別嗎蝌数？
6.Ajax原理？調(diào)接口怎么調(diào)度秘？callback怎么回調(diào)的顶伞？
xhr=new XMLHttpRequest();
xhr.onreadystatechange = callback;
xhr.open("Get",url,true);
xhr.send(null);
//上面代碼中的req.send方法是Ajax操作向服務(wù)器發(fā)送數(shù)據(jù)，它是一個(gè)異步任務(wù)剑梳，
//意味著只有當(dāng)前腳本的所有代碼執(zhí)行完唆貌，系統(tǒng)才會(huì)去讀取"任務(wù)隊(duì)列"。
function callback() {
//狀態(tài)標(biāo)識(shí)為已完成
if (xhr.readyState == 4) {
//已就緒
if (xhr.status <= 200 && xhr.status<300 || xhr.status == 304) {
console.log(xhr.responseText);
} else {
alert("There was a problem retrieving the XML data:" + xhr.statusText);
}
}
}
7.有一千個(gè)li垢乙，每一個(gè)都需要綁定事件挠锥，現(xiàn)在需要優(yōu)化，你怎么做侨赡？事件委托有什么好處？
事件委托粱侣，事件冒泡
8.什么時(shí)候用到跨域羊壹？有哪些跨域方法？原理是什么齐婴？
jsonp的實(shí)現(xiàn)原理油猫，跨域的其他方法
jsonp就是解決JSON跨域獲取的解決方案，原理：
1柠偶、瀏覽器的同源策略把跨域請(qǐng)求都禁止了情妖；
2、HTML的<script>標(biāo)簽是例外诱担，可以突破同源策略從其他來(lái)源獲取數(shù)據(jù)毡证；
3、由上可得蔫仙，我們可以通過(guò)<script>標(biāo)簽引入jsonp文件料睛，然后通過(guò)一系列JS操作獲取數(shù)據(jù)。
<button onclick="jsonpServer('jsonp.php')">JSONP</button>
function jsonpServer(url) {
var script = document.createElement("script");
script.setAttribute("src", url);
document.body.appendChild(script);
}
function JSON_CALLBACK(data) {
console.log(data);
}
<?php
header('Content-Type: application/javascript; charset=UTF-8');
$data = '[{"id":"1","name":"wsscat"},{"id":"2","name":"asw"}]';
$data = "JSON_CALLBACK(" . $data . ")";
echo $data;
?>
其他策略：
1.使用服務(wù)器代理實(shí)現(xiàn)跨域
2.document.domain
3.iframe
4.postMessage()
5.HTML5的websocket
6.瀏覽器在HTTP請(qǐng)求中添加Origin Header
作者：燕尾_三月
鏈接：http://www.reibang.com/p/64818f53ee83
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有摇邦，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處恤煞。
9.有用到哪些單位？新的單位有了解嗎施籍？calc(),vh,em,rem,in
em
做前端的應(yīng)該對(duì)em不陌生居扒，不是什么罕見(jiàn)的單位，是相對(duì)單位丑慎，參考物是父元素的font-size喜喂，具有繼承的特點(diǎn)瓤摧。如果字體大小是16px（瀏覽器的默認(rèn)值），那么 1em = 16px夜惭。
不過(guò)姻灶，這樣使用很復(fù)雜，很難很好的與px進(jìn)行對(duì)應(yīng)诈茧，因此产喉，前端開(kāi)發(fā)的前輩們總結(jié)了一個(gè)經(jīng)驗(yàn)
body {
font-size: 62.5%;
}
那么，這樣之后 1em = 10px 在布局等使用的時(shí)候好換算了很多敢会。
百分比
百分比相信大家更不會(huì)陌生了曾沈，百分比一般寬泛的講是相對(duì)于父元素，但是并不是十分準(zhǔn)確鸥昏。
- 1塞俱、對(duì)于普通定位元素就是我們理解的父元素
- 2、對(duì)于position: absolute;的元素是相對(duì)于已定位的父元素（offset parent）
- 3吏垮、對(duì)于position: fixed;的元素是相對(duì)于 ViewPort
viewport：可視窗口障涯，也就是瀏覽器的window那么大。
rem
rem支持IE9及以上膳汪，意思是相對(duì)于根元素html（網(wǎng)頁(yè)）唯蝶，不會(huì)像em那樣，依賴于父元素的字體大小遗嗽，而造成混亂粘我。使用起來(lái)安全了很多。
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/}
body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}
h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}
這樣整個(gè)網(wǎng)頁(yè)都會(huì)比較統(tǒng)一痹换！不會(huì)造成混亂征字！
vh 和 vw
IE10＋ 和現(xiàn)代瀏覽器都支持這兩個(gè)單位。
vw Viewport寬度娇豫， 1vw 等于viewport寬度的1%
vh Viewport高度匙姜， 1vh 等于viewport高的的1%
vw和vh會(huì)隨著viewport變化自動(dòng)變化，再也不用js控制全屏了冯痢。
甚至有些人喪心病狂的字體大小都用vw和vh控制搁料，來(lái)達(dá)到字體和viewport大小同步的效果。
ch和ex
IE9+ 和現(xiàn)代瀏覽器都已經(jīng)支持,這兩個(gè)單位時(shí)根據(jù) 當(dāng)前font-family 的相對(duì)單位系羞。
ch 字符0的寬度
ex 小寫(xiě)字符x的高度
css3的calc()
上面我們已經(jīng)提到了calc()郭计，下面我們就具體說(shuō)一說(shuō)吧！
瀏覽器支持IE9+椒振、FF4.0+昭伸、Chrome19+、Safari6+
calc()語(yǔ)法非常簡(jiǎn)單澎迎，就像我們小時(shí)候?qū)W加 （+）庐杨、減（-）选调、乘（*）、除（/）一樣灵份，使用數(shù)學(xué)表達(dá)式來(lái)表示：
.haorooms {
width: calc(expression);
}
這樣padding和margin和百分比一起用仁堪，問(wèn)題就可以解決了。
例如填渠，我們margin是20px弦聂。那么我們就可以寫(xiě)成
.haorooms{
width: calc(100% - 20px); //注：減號(hào)前后要有空格，否則很可能不生效７帐病莺葫！
}
也可以這么用：
.box {
background: #f60;
height: 50px;
padding: 10px;
border: 5px solid green;
width: 90%;/*寫(xiě)給不支持calc()的瀏覽器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
}
line-height百分比
line-height百分比在面試中可能經(jīng)常問(wèn)到。例如你知道line-height:120%和line-height:1.2的區(qū)別嗎枪眉？
現(xiàn)在就說(shuō)一下行高帶單位和不帶單位的區(qū)別捺檬，例如下面的例子：
line-height:26px; 表示行高為26個(gè)像素
line-heigth:120%;表示行高為當(dāng)前字體大小的120%
line-height:2.6; 表示行高為當(dāng)前字體大小的2.6倍
帶單位的行高都有繼承性
其子元素繼承的是計(jì)算值，如父元素的字體大小為14px贸铜，定義行高line-height:2em;則計(jì)算值為 28px堡纬，不會(huì)因其子元素改變字體尺寸而改變行高。(例如：父元素14px蒿秦，子元素12px,那么行高就是28px烤镐，子元素雖然字體是12px，行高還是父元素的行高)
不帶單位的行高是直接繼承
line-height:2.6;表示行高為當(dāng)前字體大小的2.6倍
而不是計(jì)算值渤早，如父元素字體尺寸為14px，行高line-height:2;子元素字體為12px瘫俊，不需要再定義行高鹊杖，他默認(rèn)的行高為24px。（例如：子元素12px扛芽，他的行高是24px,不會(huì)繼承父元素的28px）
10.布局定位骂蓖，自己上黑板上寫(xiě)一下。
11.如何做優(yōu)化川尖？在js代碼上的優(yōu)化方案知道哪些登下？
12.模塊化開(kāi)發(fā)？
13.有哪些請(qǐng)求方式叮喳？除了post被芳，get，兩者的區(qū)別馍悟？
14.如何判斷類型值畔濒？如何知道一個(gè)對(duì)象是什么類型？
我們都知道基本類型可以用typeof去判斷锣咒，引用類型可以用instanceof去判斷侵状，但是這些判斷的僅僅是是否的問(wèn)題赞弥，那么我們?cè)趺粗酪粋€(gè)數(shù)據(jù)到底是什么類型呢？
接下來(lái)我們就用到另外一個(gè)利器：Object.prototype.toString.call
var gettype=Object.prototype.toString
gettype.call('aaaa') // [object String]
gettype.call(2222) // [object Number]
gettype.call(true) // [object Boolean]
gettype.call(undefined) // [object Undefined]
gettype.call(null) // [object Null]
gettype.call({}) // [object Object]
gettype.call([]) // [object Array]
gettype.call(function(){}) // [object Function]
//看到這里趣兄，剛才的問(wèn)題我們解決了绽左。
判斷數(shù)據(jù)類型可以封裝的方法如下 ：
var gettype=Object.prototype.toString //toString() 方法可把一個(gè)邏輯值轉(zhuǎn)換為字符串，并返回結(jié)果艇潭。
var utility={
isObj:function(o){
return gettype.call(o)=="[object Object]";
},
isArray:function(o){
return gettype.call(o)=="[object Array]";
},
isNULL:function(o){
return gettype.call(o)=="[object Null]";
},
isDocument:function(){
return gettype.call(o)=="[object Document]"|| [object HTMLDocument];
}
........
}
瀏覽器運(yùn)行機(jī)制拼窥，還有瀏覽器內(nèi)核，還有f12
js面向?qū)ο蠓庋b暴区，繼承闯团，多態(tài)，this仙粱，原型
