談一下你對(duì)瀏覽器內(nèi)核的理解？常見的瀏覽器內(nèi)核？

主要由渲染引擎和JS引擎組成。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
常見內(nèi)核：Webkit內(nèi)核（Safiri、Chrome）、Trident內(nèi)核（IE、360、搜狗）等。

html5有哪些新特性？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？

新增功能：

• 繪畫canvas
• 用于媒介回放的video和audio元素
• 本地離線存儲(chǔ)localStorage長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉不丟失數(shù)據(jù)
• sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
• 語(yǔ)義化更好的內(nèi)容元素（article、footer、header、nav等）以及表單元素（calendar、date、time、email、url、search）
• 新技術(shù)WebWorker、WebSocket

兼容性處理：

• 為了支持html5新標(biāo)簽，IE8/7/6支持通過document.createElement方法產(chǎn)生新標(biāo)簽，并添加默認(rèn)樣式
• 使用成熟框架html5shim

<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn
    /trunk/html5.js"</script>
 <![endif]-->

簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？

• 用正確的標(biāo)簽做正確的事
• html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于瀏覽器、搜索引擎解析，利于seo
• 即使在沒有CSS的情況下也以一種文檔格式顯示，并且容易閱讀
• 使閱讀源代碼的人便于對(duì)網(wǎng)站進(jìn)行閱讀理解維護(hù)

對(duì)BFC規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解？

一個(gè)頁(yè)面是由很多個(gè) Box 組成的,元素的類型和 display 屬性,決定了這個(gè) Box 的類型。不同類型的 Box,會(huì)參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會(huì)以不同的方式渲染,也就是說BFC內(nèi)部的元素和外部的元素不會(huì)互相影響。

請(qǐng)解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場(chǎng)景？

• 一個(gè)用于頁(yè)面布局的全新CSS3功能，F(xiàn)lexbox可以把列表放在同一個(gè)方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。
• 較為復(fù)雜的布局還可以通過嵌套一個(gè)伸縮容器（flex container）來實(shí)現(xiàn)。
• 采用Flex布局的元素，稱為Flex容器（flex container），簡(jiǎn)稱"容器"。
  它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"。
• 常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對(duì)不同屏幕大小自適應(yīng)。
• 在布局上有了比以前更加靈活的空間。

經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧。

1. png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8。
2. 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。
3. IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性;解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。
4. Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示，可通過加入 CSS 屬性 -webkit-text-size-adjust: none;解決。

瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢？

• 在線的情況下，瀏覽器發(fā)現(xiàn)Html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪問app，那么瀏覽器會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。
• 離線的情況下，瀏覽器會(huì)直接使用離線資源。

如何解決跨域問題?

jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁(yè)面

什么是Ajax？創(chuàng)建一個(gè)Ajax的過程是怎么樣的？

概念：
異步請(qǐng)求，向服務(wù)器發(fā)送請(qǐng)求的時(shí)候，我們不必等待結(jié)果，而是可以同時(shí)做其他的事情，等到有了結(jié)果它自己會(huì)根據(jù)設(shè)定進(jìn)行后續(xù)操作，與此同時(shí)，頁(yè)面是不會(huì)發(fā)生整頁(yè)刷新的，提高了用戶體驗(yàn)。
過程：

1. 創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象；

2. 創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息；

3. 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)；

4. 發(fā)送HTTP請(qǐng)求；

5. 獲取異步調(diào)用返回的數(shù)據(jù)；

6. 使用JavaScript和DOM實(shí)現(xiàn)局部刷新；

你有用過哪些前端性能優(yōu)化的方法？

1. 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁(yè)Gzip，CDN托管，data緩存 ，圖片服務(wù)器。

2. 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù).

3. 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。

4. 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。

5. 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。

6. 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。

7. 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳

8. 避免在頁(yè)面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來，顯示比div+css布局慢

對(duì)普通的網(wǎng)站有一個(gè)統(tǒng)一的思路，就是盡量向前端優(yōu)化、減少數(shù)據(jù)庫(kù)操作、減少磁盤IO。向前端優(yōu)化指的是，在不影響功能和體驗(yàn)的情況下，能在瀏覽器執(zhí)行的不要在服務(wù)端執(zhí)行，能在緩存服務(wù)器上直接返回的不要到應(yīng)用服務(wù)器，程序能直接取得的結(jié)果不要到外部取得，本機(jī)內(nèi)能取得的數(shù)據(jù)不要到遠(yuǎn)程取，內(nèi)存能取到的不要到磁盤取，緩存中有的不要去數(shù)據(jù)庫(kù)查詢。減少數(shù)據(jù)庫(kù)操作指減少更新次數(shù)、緩存結(jié)果減少查詢次數(shù)、將數(shù)據(jù)庫(kù)執(zhí)行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統(tǒng)作為緩存、減少讀寫文件次數(shù)等。程序優(yōu)化永遠(yuǎn)要優(yōu)化慢的部分，換語(yǔ)言是無法“優(yōu)化”的.

http狀態(tài)碼有那些？分別代表是什么意思？

• 100 Continue 繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息

• 200 OK 正常返回信息

• 201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源

• 202 Accepted 服務(wù)器已接受請(qǐng)求，但尚未處理

• 301 Moved Permanently 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。

• 302 Found 臨時(shí)性重定向。

• 303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI。

• 304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過。

• 400 Bad Request 服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。

• 401 Unauthorized 請(qǐng)求未授權(quán)。

• 403 Forbidden 禁止訪問。

• 404 Not Found 找不到如何與 URI 相匹配的資源。

• 500 Internal Server Error 最常見的服務(wù)器端錯(cuò)誤。

• 503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請(qǐng)求（可能是過載或維護(hù)）

一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成，這個(gè)過程中都發(fā)生了什么？（流程說的越詳細(xì)越好）

注：這題勝在區(qū)分度高，知識(shí)點(diǎn)覆蓋廣，再不懂的人，也能答出幾句，而高手可以根據(jù)自己擅長(zhǎng)的領(lǐng)域自由發(fā)揮，從URL規(guī)范、HTTP協(xié)議、DNS、CDN、數(shù)據(jù)庫(kù)查詢、 到瀏覽器流式解析、CSS規(guī)則構(gòu)建、layout、paint、onload/domready、JS執(zhí)行、JS API綁定等等

詳細(xì)版：

• 1、瀏覽器會(huì)開啟一個(gè)線程來處理這個(gè)請(qǐng)求，對(duì) URL 分析判斷如果是 http 協(xié)議就按照 Web 方式來處理;

• 2、調(diào)用瀏覽器內(nèi)核中的對(duì)應(yīng)方法，比如 WebView 中的 loadUrl 方法;

• 3、通過DNS解析獲取網(wǎng)址的IP地址，設(shè)置 UA 等信息發(fā)出第二個(gè)GET請(qǐng)求;

• 4、進(jìn)行HTTP協(xié)議會(huì)話，客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭);

• 5、進(jìn)入到web服務(wù)器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務(wù)器;

• 6、進(jìn)入部署好的后端應(yīng)用，如 PHP、Java、JavaScript、Python 等，找到對(duì)應(yīng)的請(qǐng)求處理;

• 7、處理結(jié)束回饋報(bào)頭，此處如果瀏覽器訪問過，緩存上有對(duì)應(yīng)資源，會(huì)與服務(wù)器最后修改時(shí)間對(duì)比，一致則返回304;

• 8、瀏覽器開始下載html文檔(響應(yīng)報(bào)頭，狀態(tài)碼200)，同時(shí)使用緩存;

• 9、文檔樹建立，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類型的文件（比如css、js）,同時(shí)設(shè)置了cookie;

• 10、頁(yè)面開始渲染DOM，JS根據(jù)DOM API操作DOM,執(zhí)行事件綁定等，頁(yè)面顯示完成。

簡(jiǎn)潔版：

• 瀏覽器根據(jù)請(qǐng)求的URL交給DNS域名解析，找到真實(shí)IP，向服務(wù)器發(fā)起請(qǐng)求；
• 服務(wù)器交給后臺(tái)處理完成后返回?cái)?shù)據(jù)，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語(yǔ)法解析，建立相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁(yè)面，完成

談?wù)勀銓?duì)瀏覽器本地緩存的理解？

概念：本地緩存是指瀏覽器請(qǐng)求資源時(shí)命中了瀏覽器本地的緩存資源，瀏覽器并不會(huì)發(fā)送真正的請(qǐng)求給服務(wù)器了。
優(yōu)點(diǎn)：

• 減少了冗余的網(wǎng)絡(luò)傳輸，省錢了
• 減少了服務(wù)器的壓力
• Web緩存能夠減少延遲和網(wǎng)絡(luò)阻塞，進(jìn)而減少顯示某個(gè)資源所用的時(shí)間
• 加快客戶端加載網(wǎng)頁(yè)的速度

執(zhí)行過程：

• 第一次瀏覽器發(fā)送請(qǐng)求給服務(wù)器，此時(shí)瀏覽器還沒有本地緩存副本，服務(wù)器返回資源給瀏覽器，響應(yīng)碼是200 OK，瀏覽器接受到資源后，把資源和對(duì)應(yīng)的響應(yīng)頭一起緩存下來。
• 第二次瀏覽器準(zhǔn)備發(fā)送請(qǐng)求給服務(wù)器時(shí)，瀏覽器會(huì)先檢查上一次服務(wù)器返回的響應(yīng)頭信息中Cache-Control，他的值是一個(gè)相對(duì)值，單位為秒，表示資源在客戶端緩存的最大有效期限，計(jì)算過期時(shí)間后對(duì)比當(dāng)前時(shí)間，如果本地緩存未過期，那么命中緩存，不再請(qǐng)求服務(wù)器。緩存是否過期判斷依據(jù)Cache-Control、Expires。
• 若沒有命中，瀏覽器就會(huì)把請(qǐng)求發(fā)送到服務(wù)器，進(jìn)入緩存協(xié)商階段。
• 瀏覽器與服務(wù)器進(jìn)行緩存協(xié)商的過程中，會(huì)詢問瀏覽器中的資源是否為最新資源，是否需要更新，此時(shí)服務(wù)器做出判斷，如果緩存和服務(wù)器端資源的最新版本一致，則不更新該資源，服務(wù)器端返回304 Not Modified 狀態(tài)碼，如果瀏覽器端資源已經(jīng)是舊版本了，服務(wù)器端則返回最新資源，狀態(tài)碼就是200 OK。判斷資源是否最新：Last-Modified/If-Modified-Since 與 ETag/If-None-Match。

簡(jiǎn)述JavaScript原型、原型鏈概念及其特點(diǎn)。

• 每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是prototype（原型），當(dāng)我們?cè)L問一個(gè)對(duì)象屬性時(shí)，如果這個(gè)對(duì)象的內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去prototype里找這個(gè)屬性，這個(gè)prototype又會(huì)有自己的prototype，就會(huì)一直找下去，這就是原型鏈。
• 關(guān)系：instance.constructor.prototype = instance.proto。
• 特點(diǎn)：JavaScript對(duì)象是通過引用來傳遞的，我們創(chuàng)建的每個(gè)新對(duì)象實(shí)體中并沒有一份屬于自己的原型副本。當(dāng)我們修改原型時(shí)，與之相關(guān)的對(duì)象也會(huì)繼承這一改變。
• 當(dāng)我們需要一個(gè)屬性時(shí)，JavaScript引擎會(huì)先看當(dāng)前對(duì)象中是否有該屬性，如果沒有的話，就會(huì)查找他的prototype對(duì)象中是否有該屬性，如此遞推，一直檢索到Object內(nèi)建對(duì)象。

Javascript如何實(shí)現(xiàn)繼承？如何判斷對(duì)象是否是繼承過來？

繼承方式：構(gòu)造繼承、原型繼承、實(shí)例繼承、拷貝繼承
常用繼承方式：構(gòu)造函數(shù)與原型混合方式

function Parent(){
    this.name = 'wang';
}
function Child(){
    this.age = 28;
}
Child.prototype = new Parent(); // 繼承了Parent，通過原型
var demo = new Child();
alert(demo.age);
alert(demo.name); // 得到被繼承的屬性

JavaScript中hasOwnProperty函數(shù)方法是返回一個(gè)布爾值，此方法無法檢查該對(duì)象的原型鏈中是否具有該屬性，該屬性必須是對(duì)象本身的一個(gè)成員。object.hasOwnProperty(proName)

new操作符具體干了什么呢?

• 創(chuàng)建一個(gè)空對(duì)象，并且this變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
• 屬性和方法都被加入到this引用的對(duì)象中了。
• 新創(chuàng)建的對(duì)象由this所引用，并且隱式的返回this。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

談?wù)剬?duì)this對(duì)象的理解。

• this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
• 如果有new關(guān)鍵字，this指向new出來的那個(gè)對(duì)象；
• 在事件中，this指向觸發(fā)這個(gè)事件的對(duì)象，特殊的是，IE中的attachEvent中的this總是指向全局對(duì)象Window。

Javascript作用鏈域？

• 全局函數(shù)無法查看局部函數(shù)的內(nèi)部細(xì)節(jié)，但局部函數(shù)可以查看其上層的函數(shù)細(xì)節(jié)，直至全局細(xì)節(jié)。
• 當(dāng)需要從局部函數(shù)查找某一屬性或方法時(shí)，如果當(dāng)前作用域沒有找到，就會(huì)上溯到上層作用域查找，直至全局函數(shù)，這種組織形式就是作用域鏈。

什么是閉包？為什么要用它？ 它的特性？

閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)，通過另一個(gè)函數(shù)訪問這個(gè)函數(shù)的局部變量,利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部。
特性：

• 函數(shù)內(nèi)再嵌套函數(shù)內(nèi)部函數(shù)
• 可以引用外層的參數(shù)和變量
• 參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

Vue是如何實(shí)現(xiàn)雙向綁定的？

Object.defineProperty（vue）：劫持?jǐn)?shù)據(jù)的 getter 和 setter。

如何理解Vue的Virtual DOM？使用Virtual DOM的必要性？

• 虛擬節(jié)點(diǎn)類，將真實(shí) DOM 節(jié)點(diǎn)用 js 對(duì)象的形式進(jìn)行展示，并提供 render 方法，將虛擬節(jié)點(diǎn)渲染成真實(shí) DOM。
• 節(jié)點(diǎn) diff 比較：對(duì)虛擬節(jié)點(diǎn)進(jìn)行 js 層面的計(jì)算，并將不同的操作都記錄到 patch 對(duì)象。
• re-render：解析 patch 對(duì)象，進(jìn)行 re-render

必要性：

• 創(chuàng)建真實(shí)DOM的代價(jià)高：真實(shí)的 DOM 節(jié)點(diǎn) node 實(shí)現(xiàn)的屬性很多，而 vnode 僅僅實(shí)現(xiàn)一些必要的屬性，相比起來，創(chuàng)建一個(gè) vnode 的成本比較低。
• 觸發(fā)多次瀏覽器重繪及回流：使用 vnode ，相當(dāng)于加了一個(gè)緩沖，讓一次數(shù)據(jù)變動(dòng)所帶來的所有 node 變化，先在 vnode 中進(jìn)行修改，然后 diff 之后對(duì)所有產(chǎn)生差異的節(jié)點(diǎn)集中一次對(duì) DOM tree 進(jìn)行修改，以減少瀏覽器的重繪及回流。