[TOC] # 1、什么是mvvm mvc是什么區別 原理 ## 一、MVC（Model-View-Controller） MVC是比較直觀的架構模式，用戶操作->View（負責接收用戶的輸入操作）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。 MVC使用非常廣泛，比如JavaEE中的SSH框架 ## 三、MVVM（Model-View-ViewModel） 如果說MVP是對MVC的進一步改進，那么MVVM則是思想的完全變革。它是將“數據模型數據雙向綁定”的思想作為核心，因此在View和Model之間沒有聯系，通過ViewModel進行交互，而且Model和ViewModel之間的交互是雙向的，因此視圖的數據的變化會同時修改數據源，而數據源數據的變化也會立即反應view。 # 2、px和em的區別 > px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化；em表示相對于父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其他元素尺寸來決定的相對值。 > # 3、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沒有定 ``` # 4、關于JS事件冒泡與JS事件代理（事件委托） 事件作為DOM操作重要的一環，需要大家好好理解和運用，今天特意看了一下事件冒泡和事件代理的相關資料，感觸頗深，也深感自己的無知不知道多浪費了多少內存，廢話不多說進入正題： ## 4.1.事件冒泡： 通俗易懂的來講，就是當一個子元素的事件被觸發的時候（如onclick事件），該事件會從事件源（被點擊的子元素）開始逐級向上傳播，觸發父級元素的點擊事件。 ## 4.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); } ``` # 5、介紹一下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中設定的寬度和高度減去邊框和內間距才能得到元素內容所占的實際寬度和高度 ``` # 6、請解釋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是一個是跨域的，還有就是二者接收參數形式不一樣！ # 7、請解釋一下JavaScript的同源策略。 在客戶端編程語言中，如javascript和 ActionScript，同源策略是一個很重要的安全理念，它在保證數據的安全性方面有著重要的意義。同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。那么什么叫相同域，什么叫不同的域呢？當兩個域具有相同的協議, 相同的端口，相同的host，那么我們就可以認為它們是相同的域。同源策略還應該對一些特殊情況做處理，比如限制file協議下腳本的訪問權限。本地的HTML文件在瀏覽器中是通過file協議打開的，如果腳本能通過file協議訪問到硬盤上其它任意文件，就會出現安全隱患，目前IE8還有這樣的隱患。 # 8、瀏覽器的內核分別是什么? ``` IE: trident內核 Firefox：gecko內核 Safari：webkit內核 Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核 Chrome：Blink(基于webkit，Google與Opera Software共同開發) ``` # 9、瀏覽器是如何渲染頁面的？ ## 渲染的流程如下： 1. 解析HTML文件，創建DOM樹。 自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續外部腳本的加載）。 2. 解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式； 3. 將CSS與DOM合并，構建渲染樹（Render Tree） 4. 布局和繪制，重繪（repaint）和重排（reflow） # 10、從輸入url到顯示頁面，都經歷了什么 ## 第一種解釋： * 第一步：客戶機提出域名解析請求,并將該請求發送給本地的域名服務器。 * 第二步：當本地的域名服務器收到請求后,就先查詢本地的緩存,如果有該紀錄項,則本地的域名服務器就直接把查詢的結果返回。 * 第三步：如果本地的緩存中沒有該紀錄,則本地域名服務器就直接把請求發給根域名服務器,然后根域名服務器再返回給本地域名服務器一個所查詢域(根的子域)的主域名服務器的地址。 * 第四步：本地服務器再向上一步返回的域名服務器發送請求,然后接受請求的服務器查詢自己的緩存,如果沒有該紀錄,則返回相關的下級的域名服務器的地址。 * 第五步：重復第四步,直到找到正確的紀錄。 ## 第2種解釋： 一般會經歷以下幾個過程： 1. 首先，在瀏覽器地址欄中輸入url 2. 瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存，如果緩存中有，會直接在屏幕中顯示頁面內容。若沒有，則跳到第三步操作。 3. 在發送http請求前，需要域名解析(DNS解析)(DNS（域名系統，Domain Name System）是互聯網的一項核心服務，它作為可以將域名和IP地址相互映射的一個分布式數據庫，能夠使人更方便的訪問互聯網，而不用去記住IP地址。)，解析獲取相應的IP地址。 4. 瀏覽器向服務器發起tcp連接，與瀏覽器建立tcp三次握手。（TCP即傳輸控制協議。TCP連接是互聯網連接協議集的一種。） 5. 握手成功后，瀏覽器向服務器發送http請求，請求數據包。 6. 服務器處理收到的請求，將數據返回至瀏覽器 7. 瀏覽器收到HTTP響應 8. 讀取頁面內容，瀏覽器渲染，解析html源碼 9. 生成Dom樹、解析css樣式、js交互 10. 客戶端和服務器交互 11. ajax查詢