1，高度已知，三欄佈局，左右兩邊寬度固定，中間自適應，有幾種方案？
浮動方案
.left {
width: 400px;
height: 800px;
background-color: #000000;
float: left;
}
.center {
width: auto;
height: 800px;
background-color: white;
}
.right {
float: right;
width: 400px;
height: 900px;
background-color: red;
}
複製程式碼絕對定位方案
.left{
position: absolute;
left:0;
top:0;
width: 400px;
background-color: #000000;
}
.center{
background-color: yellow;
position:absolute;
right:400px;
left: 400;
top:0;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 400px;
background-color: red;
}
複製程式碼flex方案
.layout.flexbox .left-center-right{
display: flex;
}
.layout.flexbox .left{
width:300px;
background: red;
}
.layout.flexbox .center{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width:300px;
background: black;
}
複製程式碼表格佈局
.layout.table .left-center-right{
width: 100%;
display: table;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
width: 300px;
background: blueviolet;
}
複製程式碼網格佈局
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns:300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: gold;
}
.layout.grid .right{
background: cyan;
}
複製程式碼2，談談你對css盒模型認識？
盒模型分為： 正常盒模型 + ie盒模型正常盒模型，是指塊元素box-sizing屬性為content-box的盒模型。一般在現代瀏覽器中使用的都是正常盒模型content-box，它也是標準 w3c 盒子模型。盒模型的大小包括content，padding，border，並且先做content.。
怪異盒模型，是指塊元素box-sizing屬性為border-box的盒模型。一般在IE瀏覽器中預設為這種怪異盒模型，但是由於其自身的特殊性，手機頁面中也有使用怪異盒模型。
怪異盒模型是先做盒。然後新增border，padding，最後做content。即保證盒模型優先，先做盒再放內容，不管內容是否放得下，一般手機上用的更多。
這句話的理解，我們可以根據下圖的具體示例來看。即便是紅色方塊寬度是100px，但是對於怪異盒模型，分配給內容區域的寬度就是90px。
content-box：標準盒模型，CSS定義的寬高只包含content的寬高 border-box：IE盒模型，CSS定義的寬高包括了content，padding和border
Dom事件類
基本概念：Dom事件級別，Dom事件模型，Dom事件流，描述Dom事件捕獲的具體流程，Event物件常見應用，自定義事件Dom事件級別
Dom0：element.onClick = function(){}
Dom2: element.addEventListener('click',function(){},false)
Dom3: element.addEventListener('keyup',function(){},false)
複製程式碼事件模型：從上到下事件捕獲，再從下到上事件冒泡
事件流：事件先捕獲到目標階段再冒泡返回到事件流
描述Dom事件捕獲與冒泡的具體流程
window -> document -> html -> body -> 目標元素 反之就是冒泡
window.addEventListener('click',function(){
console.log('window captrue');
},true);
document.addEventListener('click',function(){
console.log('document captrue');
},true);
document.documentElement.addEventListener('click',function(){
console.log('html captrue');
},true);
document.body.addEventListener('click',function(){
console.log('body captrue');
},true);
ev.addEventListener('click',function(){
console.log('ev captrue');
},true);
複製程式碼Event物件應用
event.preventDefault()
event.stopPropagation()
event.stopImmediatePropagation()
event.currentTarget()
event.target()
複製程式碼自定義事件
var ev = new Event('custome');
ev.addEvenListener('custome',function(){
console.log('custome');
});
ev.dispatchEvent(ev);
複製程式碼HTTP協議類
http協議的主要特點：簡單快速，靈活，無連線，無狀態http報文的組成部分：請求報文和響應報文
請求報文：請求行，請求頭，空行，請求體
響應報文：狀態行，響應頭，空行，響應體
http方法：GET,POST,PUT,DELETE,HEAD
POST和get區別：
get在瀏覽器回退是無害的，而post會再次提交請求
get產生的url地址可以被收藏，而post不會
get沒post安全，因為引數直接暴露在url上，所以不能用來傳遞敏感資訊
get請求在url中傳送的引數是有長度限制的，而post沒有
get請求會被瀏覽器主動快取，而post不會，除非手動設定
http狀態碼
1xx：指示資訊-表示請求已接收，繼續處理
2xx：成功-表示請求已被成功接收
3xx：重定向-要完成請求必須進行更進一步的操作
4xx: 客戶端錯誤-請求有語法錯誤或請求無法實現
5xx：伺服器錯誤-伺服器未能實現合法的請求
200 ok客戶端請求成功
206：客戶傳送一個帶有range頭的請求，伺服器完成了它，視訊地址過大導致
301：所請求的頁面已經轉移至新的url
302: 所請求的頁面已經臨時轉移至新的url
304：客戶端有緩衝的文件併發出了一個條件性的請求，伺服器告訴客戶，原來的緩衝文件還可以繼續使用
400：客戶端請求有語法錯誤，不能被伺服器所理解
401：請求未經授權，這個狀態程式碼必須和www-Authenticate報頭域一起使用
403：對被請求的頁面訪問被禁止
404：請求資源不存在
500：伺服器發生不可預期的錯誤原來緩衝的文件還可以繼續使用
503：請求未完成，伺服器臨時過載或當機，一段時間後可能恢復正常
http持久連線
HTTP協議是位於傳輸層之上的應用層協議，其網路層基礎通常是TCP協議。TCP協議是面向連線和流的。
1.1版本支援持久連線的
複製程式碼原型鏈類
建立物件有幾種方法，建構函式，例項，原型鏈的關係，instanceof的原理，以及new運算子建立物件方法：
字面量 ：var o1 = {name:'o1'}； var o2 = new Object(name:'o2');
通過建構函式 ：var m = function(name){this.name = name;};var o3 = new m('o3');
Object.caeate : var p = {name: 'p'};var o4 = object.create(p);
函式才有prototype
建構函式，例項，原型鏈的關係
複製程式碼
1、建構函式是什麼
所謂的建構函式其實就是一個普通的函式前面加了new運算子，其實質也是一個函式，所以建構函式都有函式的prototype屬性
2、例項是什麼
例項就是通過建構函式建立出來的物件。
3、原型是什麼
原型指的就是原型物件，至於是誰的原型物件，需要靠函式的prototype屬性和例項的__proto__屬性來區別。
4、原型鏈是什麼
指從一個例項物件開始往上找，這個例項物件的__proto__屬性所指向的則是這個例項物件的原型物件，
如果用obj表示這個例項，則原型物件表示為obj.__proto__。同時，
這個原型物件顧名思義也是一個物件，而且它也有上一級的原型物件，相對於上一級原型物件而言，
它也是一個例項物件，那麼它也擁有__proto__屬性，它的__proto__屬性也指向它的原型物件，
後面也以此類推，一直到Object.prototype這個原型為止，Object.prototype為原型鏈的末尾點。
複製程式碼
instanceof的原理
首先，通過instanceof能做什麼呢？instanceof可以判斷例項物件的__proto__屬性是否與建構函式的prototype屬性指向同一地址，是的話返回true，否則fasle。
而原型物件上還有上一級的原型物件，上一級原型物件也有對應的建構函式，事實上，例項的__proto__屬性與在原型鏈上的所有建構函式的prototype屬性都指向同一個地址，所以有如下的結果。
複製程式碼
new運算子做了哪些事情？
第一步：先建立一個物件
第二步：設定原型鏈，傳入相應引數，執行上下文
第三步：判斷返回值型別，如果是值型別，返回obj。如果是引用型別，就返回這個引用型別的物件。
var new = function(func){
var o = object.create(func.prototype);
var k = func.call(o);
if( typeof k === 'object'){
return k
}else{
return
}
})
複製程式碼物件導向類
類與例項：
類的宣告
function Animal(){
this.name = 'name';
}
es6類的宣告
class Animal2{
constructor () {
this.name
}
}
生成例項: new Animal() , new Animal2()
複製程式碼類與繼承：
如何實現繼承
建構函式實現繼承
原型實現繼承
組合方式實現繼承
繼承的幾種方式
建構函式實現繼承
function Parent1 () {
this.name = 'parent1';
}
function Child1 () {
Parent1.call(this);
this.type = 'child';
}
優點：簡單，可以在子型別中向父型別的建構函式傳遞引數
缺點：相同方法在不同物件的建構函式中都要定義一遍，無法實現函式複用。在超型別原型中定義的方法，對子型別是不可見的，
因此所有的超型別的原型屬性都不能被繼承。
原型實現繼承
function Parent2 () {
this.name = 'parent2'
}
function Child () {
this.type = 'child2'
}
Child2.prototype = new Parent2();
組合方式實現繼承
function Parent3 () {
this.name = 'parent3'
this.play = [1,2,3];
}
function Child3() {
Parent3.call(this);
this.type = 'child3';
}
child3.prototype = Parent3.prototype;
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
可以改變例項化值不會跟著改變
複製程式碼通訊類
什麼是同源策略及限制同源策略限制從一個源載入的文件或指令碼如何與來自另一個源的資源進行互動，這是一個用於隔離潛在惡意檔案的安全機制。
複製程式碼前後端如何通訊 ajax,websocket以及cors
如何建立ajax
1.建立Ajax核心物件XMLHttpRequest
2.向伺服器傳送請求
3.伺服器響應處理
複製程式碼跨域通訊的幾種方式： jsonp,hash,postMessage,websocket,cors
jsonp原理：
首先在客戶端註冊一個callback，然後把callback的名字傳給伺服器。
此時，伺服器先生成json資料，然後以javascript語法的方式，生成function，
function名字就是傳遞上來I帶引數jsonp。最後將json資料直接以入參的方式，放置function中，
這樣就生成js語法的文件，返回給客戶端。客戶端瀏覽器，解析script變遷，並執行返回javascript文件，
此時資料作為引數，傳入了客戶端預先定義好的callback函式裡。
複製程式碼** 簡單的說，就是利用script標籤沒有跨域限制的“漏洞”來達到與第三方通訊的目的。**
hash通訊程式碼如下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
window.onhashchange = function(){
var data = window.location.hash
}
複製程式碼postMessage通訊如下
B.Window.postMessage('data','http://www.baidu.com');
window.addEventListener('message',function(event){
event.origin;
event.source;
event.data
})
複製程式碼webSocket通訊如下：
var ws = new WebSocket('www://baidu.com');
ws.onopen = function(ev){
ws.send('hello websocket')
}
ws.onmessage = function(){
ws.close()
}
ws.onclose = function(ev){
}
複製程式碼cors通訊如下：
fach('/some/url',{
method: 'get',
}).then(function(response){
}).catch(function(err){
});
複製程式碼安全類
一 CSRF是什麼？（Cross Site Request Forgery, 跨站域請求偽造）是一種網路的攻擊方式，它在 2007 年曾被列為網際網路 20 大安全隱患之一,
也被稱為“One Click Attack”或者Session Riding，通常縮寫為CSRF或者XSRF，是一種對網站的惡意利用也就是人們所知道的釣魚網站。
儘管聽起來像跨站指令碼（XSS），但它與XSS非常不同，並且攻擊方式幾乎相左。XSS利用站點內的信任使用者，
而CSRF則通過偽裝來自受信任使用者的請求來利用受信任的網站。與XSS攻擊相比，
CSRF攻擊往往不大流行（因此對其進行防範的資源也相當稀少）和難以防範，所以被認為比XSS更具危險性。
CSRF攻擊原理
一、CSRF攻擊原理
複製程式碼
二、CSRF防禦
1,通過 referer、token 或者 驗證碼 來檢測使用者提交。
2,儘量不要在頁面的連結中暴露使用者隱私資訊。
3,對於使用者修改刪除等操作最好都使用post 操作 。
4,避免全站通用的cookie，嚴格設定cookie的域。
複製程式碼XSS攻擊是什麼？
XSS攻擊是Web攻擊中最常見的攻擊方法之一，它是通過對網頁注入可執行程式碼且成功地被瀏覽器
執行，達到攻擊的目的，形成了一次有效XSS攻擊，一旦攻擊成功，它可以獲取使用者的聯絡人列
表，然後向聯絡人傳送虛假詐騙資訊，可以刪除使用者的日誌等等，有時候還和其他攻擊方式同時實
施比如SQL隱碼攻擊伺服器和資料庫、Click劫持、相對連結劫持等實施釣魚，它帶來的危害是巨
大的，是web安全的頭號大敵。
複製程式碼攻擊的條件
實施XSS攻擊需要具備兩個條件：
一、需要向web頁面注入惡意程式碼；
二、這些惡意程式碼能夠被瀏覽器成功的執行。
複製程式碼XSS（cross-site scripting跨域指令碼攻擊）攻擊是最常見的Web攻擊，其重點是“跨域”和“客戶端執行”。有人將XSS攻擊分為三種，分別是：
1. Reflected XSS（基於反射的XSS攻擊）
2. Stored XSS（基於儲存的XSS攻擊）
3. DOM-based or local XSS（基於DOM或本地的XSS攻擊）
複製程式碼XSS 攻擊的防禦
XSS防禦的總體思路是：對輸入(和URL引數)進行過濾，對輸出進行編碼。
也就是對提交的所有內容進行過濾，對url中的引數進行過濾，過濾掉會導致指令碼執行的相關內容；然後對動態輸出到頁面的內容進行html編碼，
使指令碼無法在瀏覽器中執行。雖然對輸入過濾可以被繞過，但是也還是會攔截很大一部分的XSS攻擊。
複製程式碼xss與csrf區別
xss：瀏覽器無法判斷html中程式碼的合法性，執行了可能的惡意程式碼；->原因：服務端過濾使用者提交的資料不嚴謹
csrf：伺服器無法判斷請求是否來自使用者的真實意圖，執行了惡意的操作；->原因：服務端對使用者請求合法性的驗證機制不嚴謹
複製程式碼渲染機制
什麼是Doctype及作用什麼是DTD
DTD（document type definition），文件型別定義。可定義合法的XML文件構建模組，
它使用一系列合法的元素來定義文件的結構。通過DTD，每一個xml檔案均可攜帶一個有關其自身格式的描述。
doctype的作用
doctype宣告指出閱讀程式應該用什麼規則集來解釋文件中的標記。在Web文件的情況下，
“閱讀程式”通常是瀏覽器或者校驗器這樣的一個程式，“規則”則是W3C所釋出的一個文件型別定義（DTD）中包含的規則
複製程式碼瀏覽器渲染過程
HTML解析出DOM Tree
CSS解析出Style Rules
將二者關聯生成Render Tree
Layout 根據Render Tree計算每個節點的資訊
Painting 根據計算好的資訊繪製整個頁面
複製程式碼重排
如果該次變化涉及元素佈局 (如 width), 瀏覽器則拋棄原有屬性,
重新計算並把結果傳遞給 render 以重新描繪頁面元素, 此過程稱為 reflow。
下列情況會發生重排
頁面初始渲染
新增/刪除可見DOM元素
改變元素位置
改變元素尺寸（寬、高、內外邊距、邊框等）
改變元素內容（文字或圖片等）
改變視窗尺寸
複製程式碼重繪
重繪是一個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility、outline、背景色等屬性。
瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新佈局，並不一定伴隨重排。
複製程式碼佈局
佈局是一個遞迴的過程，由根渲染物件開始，它對應html文件元素，逐級遞迴，
為每個渲染物件計算需要的幾何資訊。根渲染物件的位置是0,0，它的大小是viewport－瀏覽器視窗的可見部分。
複製程式碼頁面效能
提升頁面效能有哪些方法？資壓縮合並，減少http請求
非核心程式碼非同步載入
利用瀏覽器快取
使用CDN
預解析DNS
非同步載入的方式
1，動態載入指令碼 2，defer 3,async
非同步載入的區別
1，defer是在html解析完之後才會執行，如果是多個，按照載入的順序執行
2，async是在載入完之後立即執行，如果是多個，執行順序和載入順序無關
快取的分類
強快取和協商快取
複製程式碼強制快取
1.0的時候見到我——Expires
最早使用的是Expires欄位，該欄位表示快取到期時間，即有效時間+當時伺服器的時間，然後將這個時間設定在header中返回給伺服器。
1.1的時候我來了——Cache-Control
已知Expires的缺點之後，在HTTP/1.1中，增加了一個欄位Cache-Control，該欄位表示資源快取的最大有效時間，在該時間內，
客戶端不需要向伺服器傳送請求
複製程式碼協商快取
使用者傳送的請求，傳送到伺服器後，由伺服器判定是否從快取中獲取資源。
複製程式碼