作者: friday
http://forsomething.cn/
1 JS解釋器
解釋執(zhí)行JS代碼
JavaScript是解釋型語(yǔ)言，跟編譯型語(yǔ)言不同的是他只有在代碼執(zhí)行時(shí)才會(huì)翻譯代碼，而不會(huì)提前。每次執(zhí)行代碼時(shí)都會(huì)進(jìn)行解釋?zhuān)孕阅懿蝗缇幾g型語(yǔ)言。
js解釋器，詞法分析、語(yǔ)法分析、解釋執(zhí)行器、語(yǔ)句解釋器、表達(dá)式規(guī)約器、與瀏覽器交互等。
2 狀態(tài)碼
2XX請(qǐng)求完成
200: 請(qǐng)求完成201已創(chuàng)建新資源create
202已接收請(qǐng)求但尚未處理Accepted 多用以異步操作
3XX重定向，客戶(hù)端需要進(jìn)一步操作才能完成請(qǐng)求
4XX bad request
401當(dāng)前請(qǐng)求需要用戶(hù)驗(yàn)證
402預(yù)留狀態(tài)嗎
403已收到請(qǐng)求，服務(wù)器拒絕執(zhí)行
404 Not Found
405 method not allowed
414 request-uri Too Long
5XX | 6XX 服務(wù)器錯(cuò)誤
500 Internal Server Error 服務(wù)器內(nèi)部錯(cuò)誤，
502 Bad Gateway 作為網(wǎng)關(guān)或代理工作的服務(wù)器嘗試請(qǐng)求時(shí)，從上游服務(wù)器接收到無(wú)效的響應(yīng)。
503 由于臨時(shí)的服務(wù)器維護(hù)或過(guò)載，服務(wù)器當(dāng)前無(wú)法處理請(qǐng)求。這個(gè)狀況是臨時(shí)的，并在一段時(shí)間后恢復(fù)。應(yīng)該在響應(yīng)中包含一個(gè)Retry-After頭用以標(biāo)明這個(gè)延遲時(shí)間。如果沒(méi)有給出延遲時(shí)間，那么客戶(hù)端應(yīng)以處理500的響應(yīng)方式處理它
504 Gateway Timeout未能及時(shí)從服務(wù)器收到響應(yīng)。
600 Unparseable Request Headers 沒(méi)有返回相應(yīng)頭部，只返回內(nèi)容實(shí)體
3 跨域解決
同源策略的目的是為了保護(hù)用戶(hù)信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。
同源必須要同時(shí)滿(mǎn)足三個(gè)條件，既網(wǎng)絡(luò)協(xié)議相同（http、https）、域名相同、端口相同。非同源的情況下，Cookie、LocalStorage、和IndexDB是無(wú)法讀取的，DOM也無(wú)法獲得，AJAX請(qǐng)求不能發(fā)送。
Cookie和iframe
Cookie是服務(wù)器寫(xiě)入瀏覽器的一小段信息，只允許同源的網(wǎng)頁(yè)共享，但是兩個(gè)網(wǎng)頁(yè)一級(jí)域名相同，只是二級(jí)域名不同，瀏覽器允許通過(guò)設(shè)置document.domain來(lái)共享Cookie,
網(wǎng)頁(yè)A、B同時(shí)設(shè)置
document.domian="xxx.com"
//網(wǎng)頁(yè)A
document.cookie = "test1=hello";
網(wǎng)頁(yè)B
document.cookie //test1=hello
這種方式只適用于Cookie和iframe窗口。
LocalStorage和IndexDB無(wú)法通過(guò)這種方式規(guī)避同源策略，規(guī)避它們的同源策略可以使用PostMessage API。
PostMessage API
跨文檔通訊API是HTML5引入的全新API
該API為window對(duì)象新加了一個(gè)postMessage方法，允許跨窗口通訊，不論這兩個(gè)窗口是否同源。
//父窗口aaa.com 向子窗口bbb.com發(fā)送消息
//父窗口發(fā)送消息
var popup = window.open("http://bbb.com",'title');
popup.postMessage("hellow world",'http://bbb.com');
//子窗口通過(guò)監(jiān)聽(tīng)message事件獲取數(shù)據(jù)
window.addEventListener('message', function(e) {
console.log(e.data);
},false);
其他方式
iframe可以通過(guò)監(jiān)聽(tīng)window.onhashchange事件來(lái)監(jiān)聽(tīng)location的hash值來(lái)共享父子窗口信息。
還可以利用window.name屬性來(lái)傳遞數(shù)據(jù)
Ajax規(guī)避同源策略的三種方式
1、jsonp
利用<script>標(biāo)簽向服務(wù)器請(qǐng)求json數(shù)據(jù)，這種做法不受同源策略的限制，是一種比較常用的做法，簡(jiǎn)單適用，對(duì)服務(wù)器改造小。
<script>標(biāo)簽請(qǐng)求不受同源策略限制。發(fā)送的請(qǐng)求為GET請(qǐng)求。
2、cors
在服務(wù)器端設(shè)置請(qǐng)求頭，允許來(lái)自其他域的訪問(wèn)。
res.addHeader("Access-Control-Allow-Origin", 'https://www.google.com');
res.addHeader('Access-Control-Allow-Methods', 'POST, GET');
res.addHeader('Access-Control-Allow-Headers', 'X-Requested-With');
res.addHeader('Access-Control-Allow-Headers', 'Content-Type');
3、代理
每次的跨域請(qǐng)求都有本域的后臺(tái)代理訪問(wèn)后再將數(shù)據(jù)轉(zhuǎn)交給前臺(tái)，這種方式無(wú)論訪問(wèn)什么類(lèi)型的資源都可以實(shí)現(xiàn)跨域訪問(wèn)。
4、WebSocket
瀏覽器同源政策及其規(guī)避方法
4 ajax原理 步驟
ajax的核心只有javascript，xmlhttprequest，dom
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
//IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open("get","http://www.cnblogs.com/xdotnet/",true);
//xmlHttp.setRequestHeader("header","value"); //設(shè)置頭信息
xmlHttp.onreadystatechage = function(){
alert(1);
switch(xmlHttp.readyState){
case 0 :
console.log("請(qǐng)求尚未初始化");
break;
case 1 :
console.log("請(qǐng)求待發(fā)送");
break;
case 2 :
console.log("請(qǐng)求已發(fā)送，尚未得到響應(yīng)");
break;
case 3 :
console.log("請(qǐng)求開(kāi)始響應(yīng)，收到部分?jǐn)?shù)據(jù)");
break;
case 4 :
console.log("請(qǐng)求響應(yīng)完成，得到全部響應(yīng)數(shù)據(jù)");
if(xmlHttp.readyState == 4 && xmlHttp.status ==200){
console.log("請(qǐng)求成功，已完成 狀態(tài)碼200");
}
break;
}
}
xmlHttp.send();
5對(duì)象繼承（幾種方式的優(yōu)缺點(diǎn)）
原型鏈繼承
實(shí)例間的繼承
call和apply
6事件模型
事件冒泡（最早由IE實(shí)現(xiàn)）
事件捕獲
event.stopPropagation();阻止事件冒泡
event.preventDefault();阻止冒泡是默認(rèn)行為
7數(shù)據(jù)類(lèi)型判斷
typeOf("");
js的基本類(lèi)型 number Boolean string object Function null undefined
8數(shù)據(jù)本地存儲(chǔ)（cookie localstorge區(qū)別）
cookie是服務(wù)器寫(xiě)入瀏覽器的小段數(shù)據(jù)，每次向服務(wù)器發(fā)送請(qǐng)求時(shí)都會(huì)攜帶。cookie數(shù)據(jù)不能過(guò)大，最大容量限制為4k,可以給數(shù)據(jù)設(shè)置有效時(shí)間，默認(rèn)在瀏覽器關(guān)閉時(shí)失效。原生的Cookie接口并不友好，需要程序員自己封裝
//設(shè)置cookie
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
//讀取cookie
function getCookie(c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1){
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1){
c_end=document.cookie.length
}
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
localStorage
存儲(chǔ)的數(shù)據(jù)更多，可以最多存儲(chǔ)5M數(shù)據(jù)，數(shù)據(jù)保存后除非被清除否則一直存在。接口使用方便，程序員也可以進(jìn)一步封裝。
10web安全（https加密過(guò)程,證書(shū)用途、xss幾種形式,防范手段,過(guò)濾哪些字符?）
https加密過(guò)程
XSS攻擊及防御
XSS的攻擊形式主要分兩種，一種是臨時(shí)性的攻擊，一種是存儲(chǔ)式攻擊。
臨時(shí)性的攻擊主要是傳播帶有惡意代碼的鏈接，訪問(wèn)者會(huì)遭到代碼注入攻擊。
存儲(chǔ)式的攻擊是攻擊者利用網(wǎng)站漏洞將惡意代碼存儲(chǔ)到網(wǎng)站服務(wù)器上，所有訪問(wèn)該內(nèi)容的人群都會(huì)受到攻擊。
防范手段
1.不相信用戶(hù)輸入，對(duì)用戶(hù)的輸入進(jìn)行合法性驗(yàn)證和過(guò)濾。
2.不能進(jìn)行嚴(yán)格過(guò)濾的情況下，要對(duì)特定的標(biāo)簽字符進(jìn)行轉(zhuǎn)義（html encode）
webpack工具和node了解哪些?node各個(gè)模塊的底層原理?
webpack
主要功能：模板打包
入門(mén) Webpack，看這篇就夠了
nodeJS
defer async順序,模塊依賴(lài)(AMD,CMD差別)
javascript中的defer和async學(xué)習(xí)+javascript執(zhí)行順序
async和defer的腳本都不會(huì)阻塞頁(yè)面渲染
對(duì)于inline的script無(wú)效（不是從服務(wù)器加載的script）
有腳本的onload回調(diào)
不能使用document.write(); document.write就會(huì)重新利用document.open打開(kāi)新的文檔流并寫(xiě)入，此時(shí)原來(lái)的文檔流會(huì)被清空，已渲染好的頁(yè)面就會(huì)被清除，瀏覽器將重新構(gòu)建DOM并渲染新的頁(yè)面
async: 會(huì)在腳本加載完后立即執(zhí)行，并且一定會(huì)在window.onload()事件觸發(fā)之前執(zhí)行完成
defer：會(huì)在按照腳本在HTML文檔中出現(xiàn)的順序依次執(zhí)行，并在dom加載完成后，document的DOMContentLoaded事件觸發(fā)之前完成。
AMD規(guī)范與CMD規(guī)范的區(qū)別
AMD依賴(lài)前置
CMD依賴(lài)就近
閉包
閉包：定義在函數(shù)內(nèi)部用來(lái)訪問(wèn)函數(shù)內(nèi)部變量的函數(shù)。
閉包用來(lái)在函數(shù)外邊訪問(wèn)函數(shù)內(nèi)部變量，使用閉包寫(xiě)法會(huì)使閉包的父函數(shù)不會(huì)被垃圾回收期回收，應(yīng)該謹(jǐn)慎使用，否則容易造成內(nèi)存泄露，影響腳本執(zhí)行效率。
- 盒模型 box-sizing
/* CSS3的box元素屬性之一 */
box-sizing: content-box|border-box|inherit;
/*
content-box: 元素所設(shè)定的高度和寬度應(yīng)用到元素的內(nèi)容框，在元素的高度和寬度之外繪制元素的padding和border
border-box|:為元素所設(shè)定的高度寬度決定了元素的邊框盒，元素的邊框和內(nèi)邊距是在元素已知的高寬下進(jìn)行繪制。通過(guò)已知的高度和寬度減去邊框和內(nèi)邊距才能得到元素內(nèi)容的高寬。
inherit：規(guī)定應(yīng)從父元素繼承box-sizing的值
*/
- 三種隱藏方式差別:visibility:hidden,display:none,opacity:0 （1、顯示方面 2、時(shí)間綁定 3、動(dòng)畫(huà)差異）
visibility: hidden| visible
/*
hidden:用于隱藏元素，但是會(huì)保留元素的位置，
visible:表示正常顯示
不會(huì)影響頁(yè)面的布局。
頁(yè)面元素隱藏時(shí)，不會(huì)再接收到已綁定的事件和其他事件，所以不能通過(guò)js再令其顯示出來(lái)。
*/
display: block| inline| none
/*
block:元素顯示為塊元素
inline:元素顯示為行內(nèi)元素
none:不顯示元素（可以恢復(fù)顯示）
將元素隱藏，其他元素會(huì)占據(jù)元素位置，會(huì)改變頁(yè)面布局，還可以監(jiān)聽(tīng)到元素的事件
*/
opacity: value| inherit
/*
value: 可設(shè)置從0-1的任意值，從完全透明到完全不透明
inherit：規(guī)定從父元素繼承opacity的值
并不會(huì)改變頁(yè)面的布局，元素隱藏后可以接收到事件（如click事件）
*/
- css實(shí)現(xiàn)自適應(yīng)正方形
.box{
width: 50%;
padding-top: 50%;
background-color: black;
}
.box{
width: 50%;
height:50vw;
background-color: blue;
}
<div class="box"></div>
- 左邊固定 右邊自適應(yīng)布局
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
overflow: hidden; /*觸發(fā)元素的bfc布局，*/
height: 200px;
background: #fcc;
}
/*
當(dāng)左邊欄有已知的固定寬度時(shí)，可以直接設(shè)置右邊元素的margin值來(lái)達(dá)到目的。
*/
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
- 居中問(wèn)題
水平居中
text-align: center /*設(shè)置在父元素上，會(huì)對(duì)子元素起作用,table和浮動(dòng)的元素不會(huì)生效*/
width:100px;margin:0 auto; /*塊狀元素設(shè)置水平居中*/
垂直居中
line-height: 10px; /*內(nèi)容文本垂直居中，當(dāng)line-height和父元素高度一致時(shí)內(nèi)容的顯示效果為垂直居中*/
水平垂直居中
/*在不知元素高寬的情況下，可以使用translate進(jìn)行水平垂直居中*/
.absoluteCenter{
position:absolute;
background-color:yellow;
width:200px;
height:200px;
top:50%;
left:50%;
transform: translate(-50%,-50%) /*百分比為元素自身高寬的百分比，所以可以在不知自身高寬的情況下實(shí)現(xiàn)居中*/
-ms-transform: translate(-50%,-50%); /* IE9 */
-webkit-transform: translate(-50%,-50%); /* webkit */
-moz-transform: translate(-50%,-50%); /*火狐*/
}
/*已知元素高寬，絕對(duì)定位的方式*/
.parent{
position: relative;
width:100%;
height:600px;
}
.absoluteCenter{
position:absolute;
background-color:yellow;
width:200px;
height:200px;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}
<div class='parent'>
<div class='absoluteCenter'></div>
</div>
BFC
/*
根元素、
float屬性不為none的元素、
position為absolute或fixed的元素、
display為inline-block | table-cell | table-caption | flex | inline-flex的元素、
overflow不為visible的元素都會(huì)生成BFC
BFC的用途
1實(shí)現(xiàn)自適應(yīng)的兩欄布局
2清除內(nèi)部浮動(dòng)（防止內(nèi)部浮動(dòng)元素造成的父容器高度塌陷）
3防止margin重疊
*/
- SSR（服務(wù)端渲染）適用什么場(chǎng)景?SPA首屏空白原因?
服務(wù)端渲染適用于對(duì)用戶(hù)體驗(yàn)有較高要求的頁(yè)面，服務(wù)器端渲染可以將一些計(jì)算交給后臺(tái)完成，對(duì)客戶(hù)端計(jì)算能力要求較少，瀏覽器只需要渲染服務(wù)器端返回的html文檔。
白屏原因：因?yàn)槭状渭虞d數(shù)據(jù)過(guò)多，瀏覽器無(wú)法快速渲染完成。
DOCTYPE & dtd 兼容模式* 標(biāo)準(zhǔn)模式
Doctype用來(lái)聲明文檔類(lèi)型，告知瀏覽器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔，Doctype不存在或者錯(cuò)誤會(huì)導(dǎo)致瀏覽器以兼容模式呈現(xiàn)文檔。
標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
em & rem
em :根據(jù)父元素確定大小
rem：根據(jù)ROO元素確定大小
左右布局
link import
import: 只能加載css，載入時(shí)會(huì)在頁(yè)面加載完成后加載
link:是XHTML標(biāo)簽，link載入css時(shí)會(huì)在頁(yè)面載入的同時(shí)加載。
transform
-translate 移動(dòng)
-scale 縮放base
-skew 扭曲，按照水平線和垂直線旋轉(zhuǎn)
-rotate 旋轉(zhuǎn)，順時(shí)針給定角度，可以為負(fù)
transition: 允許CSS屬性值在一定的時(shí)間區(qū)間內(nèi)平滑的過(guò)渡，
Animation 使用@keyframes定義動(dòng)畫(huà)規(guī)則來(lái)完成動(dòng)畫(huà)
前端構(gòu)建過(guò)程原理,具體流程
float 工作原理，清除浮動(dòng)的技巧
span包含12px大小英文'abc',問(wèn)span高度? baseline怎么理解?
如何做前后端分離
函數(shù)不定參（重點(diǎn)考察call apply bind）
數(shù)據(jù)雙向綁定
ES6 class原理
重繪和回流的理解
querySelectAll和ByClassName所獲取元素的區(qū)別?如何綁定事件?
vue2css方面
9點(diǎn)透（Tap事件,Touch）
使用touch事件
如果有就阻止被遮蓋元素的默認(rèn)事件
vue 全家桶 css3 MongoDB優(yōu)缺點(diǎn) http2.0
左右布局 4種方式 bfc 2定位 3flex 閃爍，background-face
基本類(lèi)型，5中基本類(lèi)型 bind appy call js 事件
事件流
