Magic-beans筆試題及答案分享

下面XX公司的筆試題，以及我個人的答案和分析，如有理解錯誤，或者欠缺的地方還望大家指出來，一起學(xué)習(xí)進(jìn)步

1 標(biāo)準(zhǔn)CSS盒子模型？與低版本IE盒子模型有什么不同
  • 標(biāo)準(zhǔn)：margin-border-padding-content （width = content）
  • IE: margin-border-padding-content（width = border+padding+contetn）

2 position有那些值？各相對于什么定位？

position
TBLR：top bottom left right
  • static
不脫離標(biāo)準(zhǔn)流，無TBLR屬性
  • relative
脫離標(biāo)準(zhǔn)流，但是仍占據(jù)位置，以父元素content左上角定位，padding會影響TBLR，border不會影響
  • absolute
脫離標(biāo)準(zhǔn)流，不占據(jù)位置，以第一個非stati的position定位，原點(diǎn)為padding左上角位置，如無position，則以瀏覽器窗口左上角
  • fixed
固定定位，以瀏覽器左上角為原點(diǎn)

3 不考慮兼容性,如何上下居中一個大小不定的元素（HTML+CSS）

  • 定位
top:50%
transform:translatedY(-50%)
  • Flex布局
display:flex
align-items:center//單行
align-content:center//多行

4-7程序題

  • 4
var a = 10?
function print() {
   console.log(a)?
   var a = 100?
   console.log(a)?
} 
print()? // undefined 100
//變量提升 局部作用域覆蓋全局作用域
  • 5
var a =1;
function addA(a){//因?yàn)檫@里傳入的參數(shù)為a,相當(dāng)于局部聲明了var a
    a++;//var a = a++
}
 addA(a);//函數(shù)調(diào)用后，局部變量被銷毀
 console.log(a)//1,調(diào)用全局的a

var b = {b:1};
function addB(b){
   b.b++;//全局中的b={b:2}
   b={};//新建一個對象，這里的b指向堆內(nèi)存中的一塊新的區(qū)域
   b.b=3;//給其賦值
}
 addB(b);//調(diào)用
console.log(b.b);/2這里輸出的是全局中所指向的那個堆內(nèi)存中的b.b
  • 6
var o = {
    a:1,
    get:function(){
     console.log(this.a)
    }
};
o.get();//1 這里的this指向o
 var get = o.get;
get();//這里相當(dāng)于Window.get(),全局中無a屬于所以undefined
  • 7
var arr = [1,2,3,4,5]
var arr1 = arr.forEach(function(a){
   setTimeout(function(){
     console.log(a);
   },1000);
 });
// console.log(arr1)//1,2,3,4,5--因?yàn)?，setTimeout會將其放入事件隊(duì)列來執(zhí)行，遍歷的值不會改變

for(var i = 0; i<arr.length;i++){
    setTimeout(function(){
    console.log(arr[i])//5個undefined ,主線程運(yùn)行完,再執(zhí)行異步(即事件隊(duì)列），此時i=5,arr[5]為undefined
    },1000)
}
 console.log(i)//5
console.log(i)//5
console.log(i)//5
console.log(i)//5
console.log(i)//5
8 編寫一個函數(shù)count 每執(zhí)行一次返回比上一次+1的數(shù)，如：1，2，3，4，5（除count外，不可有全局變量）

function count(){
var num = 0;
//運(yùn)用閉包
return function test(){
num += 1;
console.log(num)
}
}
var obj = new count()//調(diào)用count返回一個函數(shù)，所以得實(shí)例化
obj()//1
obj()//2
obj()//3
obj()//4


#### 9 實(shí)現(xiàn)深度拷貝
>```
function deepCopy(data){
   if(data instanceof Array){
      var newArr = data.concat();
      return newArr
   }else if(data instanceof Object){
      var newObj = {};
      for(var key in data){
        newObj[key] = typeof data[key] === 'object'?deepCopy(data[key]):data[key];
        return newObj;
      }
   }else{
       return newData = data;
    }
 }

10 New操作符具體干了些什么

  • 1、創(chuàng)建了一個新的實(shí)例對象，并將this指向他
  • 2、實(shí)例對象的proto指向他的構(gòu)造函數(shù)的原型，因此繼承了構(gòu)造函數(shù)的屬性方法等
11 綁定DOM事件有幾種方式？各自優(yōu)缺點(diǎn)？解釋事件代理及其好處？

function say(){
console.log('hi')

* 內(nèi)聯(lián)式

<button id='btn' onclick="say()">Hello</button>

* 屬性式

<button id='btn'>Hello</button>
var btn = document.getElementById('btn')
btn.onclick = say()

* 監(jiān)聽事件（事件代理）

<button id='btn'>Hello</button>
var btn = document.getElementById('btn')
btn.addEventListener('clcik',say,false)

***
###### 優(yōu)缺點(diǎn)分析
> * 內(nèi)聯(lián)式：DOM中綁定兩個‘onclick’事件只會執(zhí)行第一個；
* 屬性式：！匿名函數(shù)！綁定時只會執(zhí)行最后一個事件
* 事件監(jiān)聽：可以減少DOM操作（效率低，解析滿，內(nèi)存占用量過高），提高性能

#### 12 解決跨域問題？
> * 服務(wù)器添加請求頭
* iframe
* window.postMessage
* AJAX解決跨域問題方法
* jsop--動態(tài)插入一個《script》
* websocket
* cors

####13 減少頁面加載時間
> * AJAX請求時用get代替post(發(fā)送兩次請求）
* 壓縮代碼,空格，換行不利于傳輸
* 減少DOM操作（如事件代理，div代理冗余的table）
* JS腳本執(zhí)行效率低，文件末尾放置JS文件
* CSS、js文件較大時，從外部引用，因?yàn)闉g覽器本身會對其緩存
* 減少HTTP請求

#### 14 一個頁面從輸入URL到頁面加載顯示完成，這個過程都發(fā)生了什么？
>此題解析來自知乎： https://zhuanlan.zhihu.com/p/23155051
還有史上最詳細(xì)解釋：http://fex.baidu.com/blog/2014/05/what-happen/
***
#### 簡述
* 根據(jù)域名找出對應(yīng)IP地址
* 根據(jù)IP地址與服務(wù)器建立起socket鏈接
* 連接好了：瀏覽器發(fā)送請求，服務(wù)器響應(yīng)請求
* 瀏覽器與服務(wù)器斷開連接
***
**概念解釋**
* **IP 地址**： IP 協(xié)議為互聯(lián)網(wǎng)上的每一個網(wǎng)絡(luò)和每一臺主機(jī)分配的一個邏輯地址。IP 地址如同門牌號碼，通過 IP 地址才能確定一臺主機(jī)位置。服務(wù)器本質(zhì)也是一臺主機(jī)，想要訪問某個服務(wù)器，必須先知道它的 IP 地址；
* **域名（ DN ）**：IP 地址由四個數(shù)字組成，中間用點(diǎn)號連接，在使用過程中難記憶且易輸入錯誤，所以用我們熟悉的字母和數(shù)字組合來代替純數(shù)字的 IP 地址，比如我們只會記住 [www.baidu.com**](http://link.zhihu.com/?target=http%3A//www.baidu.com/)（百度域名） 而不是 220.181.112.244（百度的其中一個 IP 地址）；
* **DNS**： 每個域名都對應(yīng)一個或多個提供相同服務(wù)服務(wù)器的 IP 地址，只有知道服務(wù)器 IP 地址才能建立連接，所以需要通過 DNS 把域名解析成一個 IP 地址。
知道了上面的概念，大概就知道了想要獲得服務(wù)器的門牌號碼，需要先將域名轉(zhuǎn)換成 IP 地址。轉(zhuǎn)換過程如下（以查詢 [www.baidu.com**](http://link.zhihu.com/?target=http%3A//www.baidu.com/) 的 IP 地址為例，其中2、3、4步均在上一步未查詢成功的情況下進(jìn)行）：
查找過程
瀏覽器搜索自己的 DNS 緩存（維護(hù)一張域名與 IP 地址的對應(yīng)表）；
搜索操作系統(tǒng)中的 DNS 緩存（維護(hù)一張域名與 IP 地址的對應(yīng)表）；
搜索操作系統(tǒng)的 hosts 文件（ Windows 環(huán)境下，維護(hù)一張域名與 IP 地址的對應(yīng)表）；
操作系統(tǒng)將域名發(fā)送至 LDNS（本地區(qū)域名服務(wù)器，如果你在學(xué)校接入互聯(lián)網(wǎng)，則 LDNS 服務(wù)器就在學(xué)校，如果通過電信接入互聯(lián)網(wǎng)，則 LDNS 服務(wù)器就在你當(dāng)?shù)氐碾娦拍抢?。）LDNS 查詢自己的 DNS 緩存（一般查找成功率在 80% 左右），查找成功則返回結(jié)果，失敗則發(fā)起一個迭代 DNS 解析請求；
LDNS 向 Root Name Server （根域名服務(wù)器，其雖然沒有每個域名的的具體信息，但存儲了負(fù)責(zé)每個域，如 com、net、org等的解析的頂級域名服務(wù)器的地址）發(fā)起請求，此處，Root Name Server 返回 com 域的頂級域名服務(wù)器的地址；
LDNS 向 com 域的頂級域名服務(wù)器發(fā)起請求，返回 [baidu.com**](http://link.zhihu.com/?target=https%3A//www.baidu.com) 域名服務(wù)器地址；
LDNS 向 [baidu.com**](http://link.zhihu.com/?target=https%3A//www.baidu.com) 域名服務(wù)器發(fā)起請求，得到 [www.baidu.com**](http://link.zhihu.com/?target=http%3A//www.baidu.com/) 的 IP 地址；
LDNS 將得到的 IP 地址返回給操作系統(tǒng)，同時自己也將 IP 地址緩存起來；
操作系統(tǒng)將 IP 地址返回給瀏覽器，同時自己也將 IP 地址緩存起來；
至此，瀏覽器已經(jīng)得到了域名對應(yīng)的 IP 地址。
***
**補(bǔ)充說明1**
域名與 URL 是兩個概念：域名是一臺或一組服務(wù)器的名稱，用來確定服務(wù)器在 Internet 上的位置；URL 是統(tǒng)一資源定位符，用來確定某一個文件的具體位置，例如，[zhihu.com](https://www.zhihu.com/) 是 知乎的域名，根據(jù)這個域名可以找到知乎的服務(wù)器，[zhihu.com/people/CompileYouth](https://www.zhihu.com/people/CompileYouth) 是 URL ，可以根據(jù)這個 URL 定位我的知乎主頁；
IP 地址與域名不是一一對應(yīng)的關(guān)系：可以把多個提供相同服務(wù)的服務(wù)器 IP 設(shè)置為同一個域名，但在同一時刻一個域名只能解析出一個 IP地址；同時，一個 IP 地址可以綁定多個域名，數(shù)量不限；
#####建立連接--三次握手
知道了服務(wù)器的 IP 地址，下面便開始與服務(wù)器建立連接了。
通俗地講，通信連接的建立需要經(jīng)歷以下三個過程：
主機(jī)向服務(wù)器發(fā)送一個建立連接的請求（您好，我想認(rèn)識您）；
服務(wù)器接到請求后發(fā)送同意連接的信號（好的，很高興認(rèn)識您）；
主機(jī)接到同意連接的信號后，再次向服務(wù)器發(fā)送了確認(rèn)信號（我也很高興認(rèn)識您），自此，主機(jī)與服務(wù)器兩者建立了連接。
**補(bǔ)充說明2**
TCP 協(xié)議：三次握手的過程采用 TCP 協(xié)議，其可以保證信息傳輸?shù)目煽啃裕挝帐诌^程中，若一方收不到確認(rèn)信號，協(xié)議會要求重新發(fā)送信號。
網(wǎng)頁請求與顯示
當(dāng)服務(wù)器與主機(jī)建立了連接之后，下面主機(jī)便與服務(wù)器進(jìn)行通信。網(wǎng)頁請求是一個單向請求的過程，即是一個主機(jī)向服務(wù)器請求數(shù)據(jù)，服務(wù)器返回相應(yīng)的數(shù)據(jù)的過程。
瀏覽器根據(jù) URL 內(nèi)容生成 HTTP 請求，請求中包含請求文件的位置、請求文件的方式等等；
服務(wù)器接到請求后，會根據(jù) HTTP 請求中的內(nèi)容來決定如何獲取相應(yīng)的 HTML 文件；
服務(wù)器將得到的 HTML 文件發(fā)送給瀏覽器；
在瀏覽器還沒有完全接收 HTML 文件時便開始渲染、顯示網(wǎng)頁；
在執(zhí)行 HTML 中代碼時，根據(jù)需要，瀏覽器會繼續(xù)請求圖片、CSS、JavsScript等文件，過程同請求 HTML ；
####斷開連接--四次揮手
主機(jī)向服務(wù)器發(fā)送一個斷開連接的請求（不早了，我該走了）；
服務(wù)器接到請求后發(fā)送確認(rèn)收到請求的信號（知道了）；
服務(wù)器向主機(jī)發(fā)送斷開通知（我也該走了）；
主機(jī)接到斷開通知后斷開連接并反饋一個確認(rèn)信號（嗯，好的），服務(wù)器收到確認(rèn)信號后斷開連接；
**補(bǔ)充說明**
為什么服務(wù)器在接到斷開請求時不立即同意斷開：當(dāng)服務(wù)器收到斷開連接的請求時，可能仍然有數(shù)據(jù)未發(fā)送完畢，所以服務(wù)器先發(fā)送確認(rèn)信號，等所有數(shù)據(jù)發(fā)送完畢后再同意斷開。
第四次握手后，主機(jī)發(fā)送確認(rèn)信號后并沒有立即斷開連接，而是等待了 2 個報文傳送周期，原因是：如果第四次握手的確認(rèn)信息丟失，服務(wù)器將會重新發(fā)送第三次握手的斷開連接的信號，而服務(wù)器發(fā)覺丟包與重新發(fā)送的斷開連接到達(dá)主機(jī)的時間正好為 2 個報文傳輸周期。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容