2018年前端筆試高頻題精選（三）

今天是2018年前端高頻筆試題的最後一篇了，該系列推出後，看的同窗很是多，看來你們都提供關注這塊，後續小編還會繼續推出相似文章，以及前端筆試、面試技巧。

 

一、什麼是mvvm mvc是什麼區別 原理

 

1、MVC（Model-View-Controller）

MVC是比較直觀的架構模式，用戶操做->View（負責接收用戶的輸入操做）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。

MVC使用很是普遍，好比JavaEE中的SSH框架

3、MVVM（Model-View-ViewModel）

若是說MVP是對MVC的進一步改進，那麼MVVM則是思想的徹底變革。它是將「數據模型數據雙向綁定」的思想做爲核心，所以在View和Model之間沒有聯繫，經過ViewModel進行交互，並且Model和ViewModel之間的交互是雙向的，所以視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應view。

 

二、px和em的區別

px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會由於其餘元素的尺寸變化而變化；em表示相對於父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其餘元素尺寸來決定的相對值。

三、eval()的做用

 

把字符串參數解析成JS代碼並運行，並返回執行的結果；

eval("2+3");//執行加運算，並返回運算值。  

eval("varage=10");//聲明一個age變量  

eval的做用域

functiona(){  

eval("var x=1"); //等效於 var x=1;  

console.log(x); //輸出1  

}  

a();  

console.log(x);//錯誤 x沒有定

 

四、關於JS事件冒泡與JS事件代理（事件委託）

 

 事件做爲DOM操做重要的一環，須要你們好好理解和運用，今天特地看了一下事件冒泡和事件代理的相關資料，感觸頗深，也深感本身的無知不知道多浪費了多少內存，廢話很少說進入正題：

1.事件冒泡：

通俗易懂的來說，就是當一個子元素的事件被觸發的時候（如onclick事件），該事件會從事件源（被點擊的子元素）開始逐級向上傳播，觸發父級元素的點擊事件。

2.事件委託

事件委託，首先按字面的意思就能看你出來，是將事件交由別人來執行，再聯想到上面講的事件冒泡，是否是想到了？對，就是將子元素的事件經過冒泡的形式交由父元素來執行。下面通過詳細的例子來講明事件委託：

有可能在開發的時候會遇到這種狀況：如導航每個欄目都要加一個事件，你可能會經過遍從來給每一個欄目添加事件：

var ul = document.getElementById('parentUl');  

ul.onclick=function (event) {  

var e = event||window.event,  

source = e.target || e.srcElement;//target表示在事件冒泡中觸發事件的源元素，在IE中是srcElement  

if(source.nodeName.toLowerCase() == "li"){   //判斷只有li觸發的纔會輸出內容  

alert(source.innerHTML);  

}  

stopPropagation(e); //阻止繼續冒泡  

};  

function addElement() {  

var li = document.createElement('li');  

li.innerHTML="我是新孩子";  

ul.appendChild(li);  

}  

 

五、介紹一下box-sizing屬性

 

兼容問題 

首先，box-sizing屬性在FireFox中存在兼容問題，因此須要使用-moz-box-sizing作一下兼容。

屬性值

box-sizing：content-box

box-sizing：border-box

box-sizing：inherit

content-box

這是box-sizing的默認屬性值

是CSS2.1中規定的寬度高度的顯示行爲

在CSS中定義的寬度和高度就對應到元素的內容框

在CSS中定義的寬度和高度以外繪製元素的內邊距和邊框

border-box

在CSS中微元素設定的寬度和高度就決定了元素的邊框盒

即爲元素在設置內邊距和邊框是在已經設定好的寬度和高度以內進行繪製

CSS中設定的寬度和高度減去邊框和內間距才能獲得元素內容所佔的實際寬度和高度

 

六、請解釋JSONP的工做原理，以及它爲何不是真正的AJAX。

 

JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標籤能夠加載並執行其餘域的javascript，因而咱們能夠經過script標記來動態加載其餘域的資源。例如我要從域A的頁面pageA加載域B的數據，那麼在域B的頁面pageB中我以JavaScript的形式聲明pageA須要的數據，而後在 pageA中用script標籤把pageB加載進來，那麼pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數，pageB加載完以後會執行pageA中定義的函數，所須要的數據會以參數的形式傳遞給該函數。JSONP易於實現，可是也會存在一些安全隱患，若是第三方的腳本隨意地執行，那麼它就能夠篡改頁面內容，截獲敏感數據。可是在受信任的雙方傳遞數據，JSONP是很是合適的選擇。AJAX是不跨域的，而JSONP是一個是跨域的，還有就是兩者接收參數形式不同！

 

七、請解釋一下JavaScript的同源策略。

 

在客戶端編程語言中，如javascript和 ActionScript，同源策略是一個很重要的安全理念，它在保證數據的安全性方面有着重要的意義。同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操做另一個域的絕大部分屬性和方法。那麼什麼叫相同域，什麼叫不一樣的域呢？當兩個域具備相同的協議, 相同的端口，相同的host，那麼咱們就能夠認爲它們是相同的域。同源策略還應該對一些特殊狀況作處理，好比限制file協議下腳本的訪問權限。本地的HTML文件在瀏覽器中是經過file協議打開的，若是腳本能經過file協議訪問到硬盤上其它任意文件，就會出現安全隱患，目前IE8還有這樣的隱患。

 

八、瀏覽器的內核分別是什麼?

 

IE: trident內核

Firefox：gecko內核

Safari：webkit內核

Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核

Chrome：Blink(基於webkit，Google與Opera Software共同開發)

 

九、瀏覽器是如何渲染頁面的？

 

渲染的流程以下：

1.解析HTML文件，建立DOM樹。

自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。

2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；

3.將CSS與DOM合併，構建渲染樹（Render Tree）

4.佈局和繪製，重繪（repaint）和重排（reflow）

 

十、從輸入url到顯示頁面，都經歷了什麼

 

第一步：客戶機提出域名解析請求,並將該請求發送給本地的域名服務器。

第二步：當本地的域名服務器收到請求後,就先查詢本地的緩存,若是有該紀錄項,則本地的域名服務器就直接把查詢的結果返回。

第三步：若是本地的緩存中沒有該紀錄,則本地域名服務器就直接把請求發給根域名服務器,而後根域名服務器再返回給本地域名服務器一個所查詢域(根的子域)的主域名服務器的地址。

第四步：本地服務器再向上一步返回的域名服務器發送請求,而後接受請求的服務器查詢本身的緩存,若是沒有該紀錄,則返回相關的下級的域名服務器的地址。

第五步：重複第四步,直到找到正確的紀錄。

第2種解釋：

通常會經歷如下幾個過程：

一、首先，在瀏覽器地址欄中輸入url

二、瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存，若是緩存中有，會直接在屏幕中顯示頁面內容。若沒有，則跳到第三步操做。

三、在發送http請求前，須要域名解析(DNS解析)(DNS（域名系統，Domain Name System）是互聯網的一項核心服務，它做爲能夠將域名和IP地址相互映射的一個分佈式數據庫，可以令人更方便的訪問互聯網，而不用去記住IP地址。)，解析獲取相應的IP地址。

四、瀏覽器向服務器發起tcp鏈接，與瀏覽器創建tcp三次握手。（TCP即傳輸控制協議。TCP鏈接是互聯網鏈接協議集的一種。）

五、握手成功後，瀏覽器向服務器發送http請求，請求數據包。

六、服務器處理收到的請求，將數據返回至瀏覽器

七、瀏覽器收到HTTP響應

八、讀取頁面內容，瀏覽器渲染，解析html源碼

九、生成Dom樹、解析css樣式、js交互

十、客戶端和服務器交互

十一、ajax查詢