前端面試題（部分）

前端面試題

css盒模型

1. css模型

   利用width和height賦值時，指的是content的寬和高，盒子真實的寬高還要加上padding和border部分

2. ie模型

   利用width和height賦值時，就是盒子的寬和高

怎麼設置盒模型： 默認box-sizing:content-box(標準)，box-sizing:border-box(ie)

BFC:

哪些元素會建立bfc?

• float的值不爲none
• postion的值不是static或relative
• display的值是inline-block,table-cell,flex,table-caption,inline-flex
• overflow的值不是visible

上述使用bfc的反作用：

• float:left,元素移到左側，並被其餘元素環繞
• display:table 會形成響應性問題
• overflow:scroll 可能會產生多餘的滾動條
• overflow:hidden 將裁減溢出元素

爲何要建立bfc?

外邊距摺疊 包含浮動

js獲取盒模型的寬高有哪些方式？

• dom.style.width/height(只適用獲取內聯元素的寬和高)
• dom.currentStyle.width/height(獲取渲染後的寬和高，可是隻適用於ie)
• window.getComputedStyle(dom).width/height(獲取渲染後的寬和高，適用於firefox,chrome)
• dom.getBoundingClientRect().width/height(計算元素的絕對位置，獲取left,top,width,height)

html中標籤能夠被分爲哪幾類？各自有什麼特色？

• 塊標籤：默認獨佔一行，寬度爲100%，能夠設置寬高，支持上下左右margin和padding
• 行內標籤：與其餘元素並排一行，不支持設置寬高，寬度隨內容撐開，支持左右方向的margin 和padding
• 行內塊標籤：與其餘元素並排一行，支持設置寬高，支持上下左右的margin,padding值

css中哪些屬性能夠被繼承？

• 無繼承性的屬性？ display ,文本屬性（vertical-align,text-decoration,text-shadow,white-space,unicode-bidi）,盒子模型屬性，背景屬性，定位屬性，生成內容的屬性（content等），輪廓樣式屬性（outline-style,outline-width）,頁面樣式屬性（size）,聲音樣式屬性

• 有繼承性的屬性？ 字體系列屬性（font等），文本系列屬性（text-indent,text-align,line-height,word-spacing,letter-spacing,text-transform,direction,color）等

• 內聯元素能夠繼承的屬性？ 字體系列屬性，文本系列除開text-indent,text-align屬性

• 塊級元素能夠繼承的屬性？ text-indent,text-align

DOM事件

dom事件的級別

• dom0 : ele.onclick = function(){},兼容全部瀏覽器，可是隻能註冊一次，屢次註冊時後面會覆蓋前面的
• dom2: ele.addEventListener('click',function(){},false) (ie不支持),能夠添加多個事件，按照順序依次處理 ie：ele.attachEvent('onclick',function(){})
• dom3:與dom2同樣，增長了許多事件類型，包括鼠標事件，鍵盤事件

dom事件模型

冒泡：從目標元素到window

捕獲：從window到目標元素

event對象的常見應用

• event.preventDefault() :阻止默認事件，例如阻止a元素的跳轉事件
• event.stopPropagation() :阻止冒泡事件
• event.stopImmediatePropagation():當前元素以後的監聽事件不會被執行
• event.currentTarget:被綁定事件的元素
• event.target:當前被點擊元素

http協議

• 無鏈接（只有一次鏈接）無狀態（對事務處理沒有記憶）
• 常見的http方法：get ,post ,put,head,delete

一次完整的http請求所經歷的7個步驟

1. 創建tcp鏈接
2. web瀏覽器向web服務器發送請求行
3. web瀏覽器發送請求頭（以空白行結束該頭信息的發送）
4. web服務器應答
5. web服務器發送應答頭
6. web服務器發送應答數據
7. web服務器關閉tcp鏈接

http1.1 新特性

• 默認持久鏈接節省流量
• 管線化，客戶端能夠同時發出多個請求，而不用一個個等待相應
• 斷點續傳：利用http消息頭分塊傳輸 

https的工做原理

1. 請求服務端生成證書，客戶端對證書進行校驗
2. 根據證書的公鑰有效，生成隨機數，利用rsa加密
3. 消息體產生後，對摘要進行md5加密
4. 發送給服務端，只有服務端(rsa私鑰)能解密
5. 解密獲得的隨機數，再用aes加密

原型鏈

建立對象的方法

1. 字面量
2. 構造函數
3. Object.create()

原型鏈

 

new操做符原理

建立一個新對象，將該對象的proto屬性指向構造函數的prototype對象,將構造函數的做用域賦給新的對象，若是構造函數返回對象，則返回構造函數對象，不然返回建立的新對象

function new1(fn){ let obj = {}; obj.__proto__ = fn.prototype; return function(){ let o = fn.apply(obj,arguments); return o?o:obj; } }

var new2 = function(Func){ var o = Object.create(Func.prototype); var k = Func.call(this,o); if(typeof k === 'object'){ return k; }else{ return o; } }

實現繼承的幾種方式

1.藉助構造函數 2.藉助原型鏈 3.組合方式 4.es6中的類繼承

js哪些方法會引發異步操做？

setTimeout,setInterval,ajax請求，動態加載，Promise

js淺拷貝和深拷貝的區別？

淺拷貝只是複製了對象的引用地址，兩個對象指向同一個內存地址，因此修改其中任意的值，另外一個值都會隨之變化，這就是淺拷貝（例：assign()）

深拷貝是將對象及值複製過來，兩個對象修改其中任意的值另外一個值不會改變，這就是深拷貝（例：JSON.parse()和JSON.stringify()，可是此方法沒法複製函數類型）