作者: friday
http://forsomething.cn/
1 JS解釋器
解釋執(zhí)行JS代碼
JavaScript是解釋型語言楞抡，跟編譯型語言不同的是他只有在代碼執(zhí)行時(shí)才會(huì)翻譯代碼矢炼，而不會(huì)提前。每次執(zhí)行代碼時(shí)都會(huì)進(jìn)行解釋慷垮，所以性能不如編譯型語言。
js解釋器揍堕，詞法分析料身、語法分析、解釋執(zhí)行器衩茸、語句解釋器芹血、表達(dá)式規(guī)約器、與瀏覽器交互等楞慈。
2 狀態(tài)碼
2XX請(qǐng)求完成
200: 請(qǐng)求完成201已創(chuàng)建新資源create
202已接收請(qǐng)求但尚未處理Accepted 多用以異步操作
3XX重定向幔烛，客戶端需要進(jìn)一步操作才能完成請(qǐng)求
4XX bad request
401當(dāng)前請(qǐng)求需要用戶驗(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ù)器接收到無效的響應(yīng)。
503 由于臨時(shí)的服務(wù)器維護(hù)或過載聚霜，服務(wù)器當(dāng)前無法處理請(qǐng)求狡恬。這個(gè)狀況是臨時(shí)的，并在一段時(shí)間后恢復(fù)蝎宇。應(yīng)該在響應(yīng)中包含一個(gè)Retry-After頭用以標(biāo)明這個(gè)延遲時(shí)間弟劲。如果沒有給出延遲時(shí)間，那么客戶端應(yīng)以處理500的響應(yīng)方式處理它
504 Gateway Timeout未能及時(shí)從服務(wù)器收到響應(yīng)姥芥。
600 Unparseable Request Headers 沒有返回相應(yīng)頭部兔乞，只返回內(nèi)容實(shí)體
3 跨域解決
同源策略的目的是為了保護(hù)用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)凉唐。
同源必須要同時(shí)滿足三個(gè)條件庸追，既網(wǎng)絡(luò)協(xié)議相同（http、https）熊榛、域名相同锚国、端口相同玄坦。非同源的情況下血筑，Cookie绘沉、LocalStorage、和IndexDB是無法讀取的豺总，DOM也無法獲得车伞，AJAX請(qǐng)求不能發(fā)送。
Cookie和iframe
Cookie是服務(wù)器寫入瀏覽器的一小段信息喻喳，只允許同源的網(wǎng)頁共享另玖，但是兩個(gè)網(wǎng)頁一級(jí)域名相同，只是二級(jí)域名不同表伦，瀏覽器允許通過設(shè)置document.domain來共享Cookie,
網(wǎng)頁A谦去、B同時(shí)設(shè)置
document.domian="xxx.com"
//網(wǎng)頁A
document.cookie = "test1=hello";
網(wǎng)頁B
document.cookie //test1=hello
這種方式只適用于Cookie和iframe窗口。
LocalStorage和IndexDB無法通過這種方式規(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');
//子窗口通過監(jiān)聽message事件獲取數(shù)據(jù)
window.addEventListener('message', function(e) {
console.log(e.data);
},false);
其他方式
iframe可以通過監(jiān)聽window.onhashchange事件來監(jiān)聽location的hash值來共享父子窗口信息。
還可以利用window.name屬性來傳遞數(shù)據(jù)
Ajax規(guī)避同源策略的三種方式
1局劲、jsonp
利用<script>標(biāo)簽向服務(wù)器請(qǐng)求json數(shù)據(jù)勺拣，這種做法不受同源策略的限制，是一種比較常用的做法鱼填，簡單適用药有，對(duì)服務(wù)器改造小。
<script>標(biāo)簽請(qǐng)求不受同源策略限制剔氏。發(fā)送的請(qǐng)求為GET請(qǐng)求塑猖。
2、cors
在服務(wù)器端設(shè)置請(qǐng)求頭谈跛，允許來自其他域的訪問羊苟。
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)代理訪問后再將數(shù)據(jù)轉(zhuǎn)交給前臺(tái)感憾，這種方式無論訪問什么類型的資源都可以實(shí)現(xià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)求開始響應(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ù)類型判斷
typeOf("");
js的基本類型 number Boolean string object Function null undefined
8數(shù)據(jù)本地存儲(chǔ)（cookie localstorge區(qū)別）
cookie是服務(wù)器寫入瀏覽器的小段數(shù)據(jù)趟章，每次向服務(wù)器發(fā)送請(qǐng)求時(shí)都會(huì)攜帶杏糙。cookie數(shù)據(jù)不能過大慎王，最大容量限制為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加密過程,證書用途吐限、xss幾種形式,防范手段,過濾哪些字符?）
https加密過程
XSS攻擊及防御
XSS的攻擊形式主要分兩種，一種是臨時(shí)性的攻擊褂始，一種是存儲(chǔ)式攻擊毯盈。
臨時(shí)性的攻擊主要是傳播帶有惡意代碼的鏈接，訪問者會(huì)遭到代碼注入攻擊病袄。
存儲(chǔ)式的攻擊是攻擊者利用網(wǎng)站漏洞將惡意代碼存儲(chǔ)到網(wǎng)站服務(wù)器上，所有訪問該內(nèi)容的人群都會(huì)受到攻擊赘阀。
防范手段
1.不相信用戶輸入益缠，對(duì)用戶的輸入進(jìn)行合法性驗(yàn)證和過濾。
2.不能進(jìn)行嚴(yán)格過濾的情況下基公，要對(duì)特定的標(biāo)簽字符進(jìn)行轉(zhuǎn)義（html encode）
webpack工具和node了解哪些?node各個(gè)模塊的底層原理?
webpack
主要功能：模板打包
入門 Webpack幅慌，看這篇就夠了
nodeJS
defer async順序,模塊依賴(AMD,CMD差別)
javascript中的defer和async學(xué)習(xí)+javascript執(zhí)行順序
async和defer的腳本都不會(huì)阻塞頁面渲染
對(duì)于inline的script無效（不是從服務(wù)器加載的script）
有腳本的onload回調(diào)
不能使用document.write(); document.write就會(huì)重新利用document.open打開新的文檔流并寫入，此時(shí)原來的文檔流會(huì)被清空轰豆，已渲染好的頁面就會(huì)被清除胰伍，瀏覽器將重新構(gòu)建DOM并渲染新的頁面
async: 會(huì)在腳本加載完后立即執(zhí)行，并且一定會(huì)在window.onload()事件觸發(fā)之前執(zhí)行完成
defer：會(huì)在按照腳本在HTML文檔中出現(xiàn)的順序依次執(zhí)行酸休，并在dom加載完成后骂租，document的DOMContentLoaded事件觸發(fā)之前完成。
AMD規(guī)范與CMD規(guī)范的區(qū)別
AMD依賴前置
CMD依賴就近
閉包
閉包：定義在函數(shù)內(nèi)部用來訪問函數(shù)內(nèi)部變量的函數(shù)斑司。
閉包用來在函數(shù)外邊訪問函數(shù)內(nèi)部變量渗饮，使用閉包寫法會(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)行繪制。通過已知的高度和寬度減去邊框和內(nèi)邊距才能得到元素內(nèi)容的高寬磕潮。
inherit：規(guī)定應(yīng)從父元素繼承box-sizing的值
*/
- 三種隱藏方式差別:visibility:hidden,display:none,opacity:0 （1翠胰、顯示方面 2容贝、時(shí)間綁定 3、動(dòng)畫差異）
visibility: hidden| visible
/*
hidden:用于隱藏元素亡容，但是會(huì)保留元素的位置嗤疯，
visible:表示正常顯示
不會(huì)影響頁面的布局。
頁面元素隱藏時(shí)闺兢，不會(huì)再接收到已綁定的事件和其他事件茂缚，所以不能通過js再令其顯示出來。
*/
display: block| inline| none
/*
block:元素顯示為塊元素
inline:元素顯示為行內(nèi)元素
none:不顯示元素（可以恢復(fù)顯示）
將元素隱藏屋谭，其他元素會(huì)占據(jù)元素位置脚囊，會(huì)改變頁面布局，還可以監(jiān)聽到元素的事件
*/
opacity: value| inherit
/*
value: 可設(shè)置從0-1的任意值桐磁，從完全透明到完全不透明
inherit：規(guī)定從父元素繼承opacity的值
并不會(huì)改變頁面的布局悔耘，元素隱藏后可以接收到事件（如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值來達(dá)到目的衬以。
*/
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
- 居中問題
水平居中
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ù)端渲染）適用什么場景?SPA首屏空白原因?
服務(wù)端渲染適用于對(duì)用戶體驗(yàn)有較高要求的頁面，服務(wù)器端渲染可以將一些計(jì)算交給后臺(tái)完成摹芙，對(duì)客戶端計(jì)算能力要求較少灼狰，瀏覽器只需要渲染服務(wù)器端返回的html文檔。
白屏原因：因?yàn)槭状渭虞d數(shù)據(jù)過多瘫辩，瀏覽器無法快速渲染完成伏嗜。
DOCTYPE & dtd 兼容模式* 標(biāo)準(zhǔn)模式
Doctype用來聲明文檔類型，告知瀏覽器用什么文檔標(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)行。
在兼容模式中挣轨，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作军熏。
em & rem
em :根據(jù)父元素確定大小
rem：根據(jù)ROO元素確定大小
左右布局
link import
import: 只能加載css，載入時(shí)會(huì)在頁面加載完成后加載
link:是XHTML標(biāo)簽卷扮，link載入css時(shí)會(huì)在頁面載入的同時(shí)加載荡澎。
transform
-translate 移動(dòng)
-scale 縮放base
-skew 扭曲均践，按照水平線和垂直線旋轉(zhuǎn)
-rotate 旋轉(zhuǎn)，順時(shí)針給定角度摩幔，可以為負(fù)
transition: 允許CSS屬性值在一定的時(shí)間區(qū)間內(nèi)平滑的過渡彤委，
Animation 使用@keyframes定義動(dòng)畫規(guī)則來完成動(dòng)畫
前端構(gòu)建過程原理,具體流程
float 工作原理，清除浮動(dòng)的技巧
span包含12px大小英文'abc',問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
基本類型焦影，5中基本類型 bind appy call js 事件
事件流
