1.一些開放性題目
1.自我介紹：除了基本個(gè)人信息以外，面試官更想聽的是你與眾不同的地方和你的優(yōu)勢。
2.項(xiàng)目介紹
3.如何看待前端開發(fā)？
4.平時(shí)是如何學(xué)習(xí)前端開發(fā)的？
5.未來三到五年的規(guī)劃是怎樣的？
position的值， relative和absolute分別是相對(duì)于誰進(jìn)行定位的？
§ absolute :生成絕對(duì)定位的元素， 相對(duì)于最近一級(jí)的 定位不是 static 的父元素來進(jìn)行定位。
§ fixed （老IE不支持）生成絕對(duì)定位的元素，通常相對(duì)于瀏覽器窗口或 frame 進(jìn)行定位。
§ relative 生成相對(duì)定位的元素，相對(duì)于其在普通流中的位置進(jìn)行定位。
§ static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中
§ sticky 生成粘性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出
如何解決跨域問題
JSONP：
原理是：動(dòng)態(tài)插入script標(biāo)簽，通過script標(biāo)簽引入一個(gè)js文件，這個(gè)js文件載入成功后會(huì)執(zhí)行我們?cè)趗rl參數(shù)中指定的函數(shù)，并且會(huì)把我們需要的json數(shù)據(jù)作為參數(shù)傳入。
由于同源策略的限制，XmlHttpRequest只允許請(qǐng)求當(dāng)前源（域名、協(xié)議、端口）的資源，為了實(shí)現(xiàn)跨域請(qǐng)求，可以通過script標(biāo)簽實(shí)現(xiàn)跨域請(qǐng)求，然后在服務(wù)端輸出JSON數(shù)據(jù)并執(zhí)行回調(diào)函數(shù)，從而解決了跨域的數(shù)據(jù)請(qǐng)求。
優(yōu)點(diǎn)是兼容性好，簡單易用，支持瀏覽器與服務(wù)器雙向通信。缺點(diǎn)是只支持GET請(qǐng)求。
JSONP：json+padding（內(nèi)填充），顧名思義，就是把JSON填充到一個(gè)盒子里
<script>
functioncreateJs(sUrl){
var oScript =document.createElement('script');
oScript.type = 'text/javascript';
oScript.src= sUrl;
document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');
box({
'name': 'test'
});
functionbox(json){
alert(json.name);
}
</script>
CORS：
服務(wù)器端對(duì)于CORS的支持，主要就是通過設(shè)置Access-Control-Allow-Origin來進(jìn)行的。如果瀏覽器檢測到相應(yīng)的設(shè)置，就可以允許Ajax進(jìn)行跨域的訪問。
通過修改document.domain來跨子域
將子域和主域的document.domain設(shè)為同一個(gè)主域.前提條件：這兩個(gè)域名必須屬于同一個(gè)基礎(chǔ)域名!而且所用的協(xié)議，端口都要一致，否則無法利用document.domain進(jìn)行跨域
主域相同的使用document.domain
使用window.name來進(jìn)行跨域
window對(duì)象有個(gè)name屬性，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個(gè)window.name的，每個(gè)頁面對(duì)window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過的所有頁面中的
使用HTML5中新引進(jìn)的window.postMessage方法來跨域傳送數(shù)據(jù)
還有flash、在服務(wù)器上設(shè)置代理頁面等跨域方式。個(gè)人認(rèn)為window.name的方法既不復(fù)雜，也能兼容到幾乎所有瀏覽器，這真是極好的一種跨域方法。
XML和JSON的區(qū)別？
(1).數(shù)據(jù)體積方面。
JSON相對(duì)于XML來講，數(shù)據(jù)的體積小，傳遞的速度更快些。
(2).數(shù)據(jù)交互方面。
JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互。
(3).數(shù)據(jù)描述方面。
JSON對(duì)數(shù)據(jù)的描述性比XML較差。
(4).傳輸速度方面。
JSON的速度要遠(yuǎn)遠(yuǎn)快于XML。
談?wù)勀銓?duì)webpack的看法
WebPack 是一個(gè)模塊打包工具，你可以使用WebPack管理你的模塊依賴，并編繹輸出模塊們所需的靜態(tài)文件。它能夠很好地管理、打包Web開發(fā)中所用到的HTML、JavaScript、CSS以及各種靜態(tài)文件（圖片、字體等），讓開發(fā)過程更加高效。對(duì)于不同類型的資源，webpack有對(duì)應(yīng)的模塊加載器。webpack模塊打包器會(huì)分析模塊間的依賴關(guān)系，最后 生成了優(yōu)化且合并后的靜態(tài)資源。
webpack的兩大特色：
1.code splitting（可以自動(dòng)完成）
2.loader 可以處理各種類型的靜態(tài)文件，并且支持串聯(lián)操作
webpack 是以commonJS的形式來書寫腳本滴，但對(duì) AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。
webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：
對(duì) CommonJS 、 AMD、ES6的語法做了兼容
對(duì)js、css、圖片等資源文件都支持打包
串聯(lián)式模塊加載器以及插件機(jī)制，讓其具有更好的靈活性和擴(kuò)展性，例如提供對(duì)CoffeeScript、ES6的支持
有獨(dú)立的配置文件webpack.config.js
可以將代碼切割成不同的chunk，實(shí)現(xiàn)按需加載，降低了初始化時(shí)間
支持 SourceUrls 和SourceMaps，易于調(diào)試
具有強(qiáng)大的Plugin接口，大多是內(nèi)部插件，使用起來比較靈活
8.webpack 使用異步 IO 并具有多級(jí)緩存。這使得 webpack 很快且在增量編譯上更加快
說說TCP傳輸?shù)娜挝帐炙拇螕]手策略
為了準(zhǔn)確無誤地把數(shù)據(jù)送達(dá)目標(biāo)處，TCP協(xié)議采用了三次握手策略。用TCP協(xié)議把數(shù)據(jù)包送出去后，TCP不會(huì)對(duì)傳送 后的情況置之不理，它一定會(huì)向?qū)Ψ酱_認(rèn)是否成功送達(dá)。握手過程中使用了TCP的標(biāo)志：SYN和ACK。
發(fā)送端首先發(fā)送一個(gè)帶SYN標(biāo)志的數(shù)據(jù)包給對(duì)方。接收端收到后，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息。
最后，發(fā)送端再回傳一個(gè)帶ACK標(biāo)志的數(shù)據(jù)包，代表“握手”結(jié)束。
若在握手過程中某個(gè)階段莫名中斷，TCP協(xié)議會(huì)再次以相同的順序發(fā)送相同的數(shù)據(jù)包。
斷開一個(gè)TCP連接則需要“四次握手”：
§ 第一次揮手：主動(dòng)關(guān)閉方發(fā)送一個(gè)FIN，用來關(guān)閉主動(dòng)方到被動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也就是主動(dòng)關(guān)閉方告訴被動(dòng)關(guān)閉方：我已經(jīng)不 會(huì)再給你發(fā)數(shù)據(jù)了(當(dāng)然，在fin包之前發(fā)送出去的數(shù)據(jù)，如果沒有收到對(duì)應(yīng)的ack確認(rèn)報(bào)文，主動(dòng)關(guān)閉方依然會(huì)重發(fā)這些數(shù)據(jù))，但是，此時(shí)主動(dòng)關(guān)閉方還可 以接受數(shù)據(jù)。
§ 第二次揮手：被動(dòng)關(guān)閉方收到FIN包后，發(fā)送一個(gè)ACK給對(duì)方，確認(rèn)序號(hào)為收到序號(hào)+1（與SYN相同，一個(gè)FIN占用一個(gè)序號(hào)）。
§ 第三次揮手：被動(dòng)關(guān)閉方發(fā)送一個(gè)FIN，用來關(guān)閉被動(dòng)關(guān)閉方到主動(dòng)關(guān)閉方的數(shù)據(jù)傳送，也就是告訴主動(dòng)關(guān)閉方，我的數(shù)據(jù)也發(fā)送完了，不會(huì)再給你發(fā)數(shù)據(jù)了。
§ 第四次揮手：主動(dòng)關(guān)閉方收到FIN后，發(fā)送一個(gè)ACK給被動(dòng)關(guān)閉方，確認(rèn)序號(hào)為收到序號(hào)+1，至此，完成四次揮手。
TCP和UDP的區(qū)別
TCP（Transmission Control Protocol，傳輸控制協(xié)議）是基于連接的協(xié)議，也就是說，在正式收發(fā)數(shù)據(jù)前，必須和對(duì)方建立可靠的連接。一個(gè)TCP連接必須要經(jīng)過三次“對(duì)話”才能建立起來
UDP（User Data Protocol，用戶數(shù)據(jù)報(bào)協(xié)議）是與TCP相對(duì)應(yīng)的協(xié)議。它是面向非連接的協(xié)議，它不與對(duì)方建立連接，而是直接就把數(shù)據(jù)包發(fā)送過去！
UDP適用于一次只傳送少量數(shù)據(jù)、對(duì)可靠性要求不高的應(yīng)用環(huán)境。
說說你對(duì)作用域鏈的理解
作用域鏈的作用是保證執(zhí)行環(huán)境里有權(quán)訪問的變量和函數(shù)是有序的，作用域鏈的變量只能向上訪問，變量訪問到window對(duì)象即被終止，作用域鏈向下訪問變量是不被允許的。
創(chuàng)建ajax過程
(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)局部刷新.
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)
漸進(jìn)增強(qiáng) ：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí) ：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
常見web安全及防護(hù)原理
sql注入原理
就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請(qǐng)求的查詢字符串，最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的SQL命令。
總的來說有以下幾點(diǎn)：
1.永遠(yuǎn)不要信任用戶的輸入，要對(duì)用戶的輸入進(jìn)行校驗(yàn)，可以通過正則表達(dá)式，或限制長度，對(duì)單引號(hào)和雙"-"進(jìn)行轉(zhuǎn)換等。
2.永遠(yuǎn)不要使用動(dòng)態(tài)拼裝SQL，可以使用參數(shù)化的SQL或者直接使用存儲(chǔ)過程進(jìn)行數(shù)據(jù)查詢存取。
3.永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫連接，為每個(gè)應(yīng)用使用單獨(dú)的權(quán)限有限的數(shù)據(jù)庫連接。
4.不要把機(jī)密信息明文存放，請(qǐng)加密或者h(yuǎn)ash掉密碼和敏感的信息。
XSS原理及防范
Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意 html標(biāo)簽或者javascript代碼。比如：攻擊者在論壇中放一個(gè)
看似安全的鏈接，騙取用戶點(diǎn)擊后，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個(gè)惡意表單，
當(dāng)用戶提交表單的時(shí)候，卻把信息傳送到攻擊者的服務(wù)器中，而不是用戶原本以為的信任站點(diǎn)。
XSS防范方法
首先代碼里對(duì)用戶輸入的地方和變量都需要仔細(xì)檢查長度和對(duì)”<”,”>”,”;”,”’”等字符做過濾；其次任何內(nèi)容寫到頁面之前都必須加以encode，避免不小心把html tag 弄出來。這一個(gè)層面做好，至少可以堵住超過一半的XSS 攻擊。
首先，避免直接在cookie 中泄露用戶隱私，例如email、密碼等等。
其次，通過使cookie 和系統(tǒng)ip 綁定來降低cookie 泄露后的危險(xiǎn)。這樣攻擊者得到的cookie 沒有實(shí)際價(jià)值，不可能拿來重放。
如果網(wǎng)站不需要再瀏覽器端對(duì)cookie 進(jìn)行操作，可以在Set-Cookie 末尾加上HttpOnly 來防止javascript 代碼直接獲取cookie 。
盡量采用POST 而非GET 提交表單
XSS與CSRF有什么區(qū)別嗎？
XSS是獲取信息，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包。CSRF是代替用戶完成指定的動(dòng)作，需要知道其他用戶頁面的代碼和數(shù)據(jù)包。
要完成一次CSRF攻擊，受害者必須依次完成兩個(gè)步驟：
登錄受信任網(wǎng)站A，并在本地生成Cookie。
在不登出A的情況下，訪問危險(xiǎn)網(wǎng)站B。
CSRF的防御
§ 服務(wù)端的CSRF方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機(jī)數(shù)。
§ 通過驗(yàn)證碼的方法
Web Worker 和webSocket
worker主線程:
1.通過 worker = new Worker( url ) 加載一個(gè)JS文件來創(chuàng)建一個(gè)worker，同時(shí)返回一個(gè)worker實(shí)例。
2.通過worker.postMessage( data) 方法來向worker發(fā)送數(shù)據(jù)。
3.綁定worker.onmessage方法來接收worker發(fā)送過來的數(shù)據(jù)。
4.可以使用 worker.terminate() 來終止一個(gè)worker的執(zhí)行。
WebSocket是Web應(yīng)用程序的傳輸協(xié)議，它提供了雙向的，按序到達(dá)的數(shù)據(jù)流。他是一個(gè)Html5協(xié)議，WebSocket的連接是持久的，他通過在客戶端和服務(wù)器之間保持雙工連接，服務(wù)器的更新可以被及時(shí)推送給客戶端，而不需要客戶端以一定時(shí)間間隔去輪詢。
HTTP和HTTPS
HTTP協(xié)議通常承載于TCP協(xié)議之上，在HTTP和TCP之間添加一個(gè)安全協(xié)議層（SSL或TSL），這個(gè)時(shí)候，就成了我們常說的HTTPS。
默認(rèn)HTTP的端口號(hào)為80，HTTPS的端口號(hào)為443。
為什么HTTPS安全
因?yàn)榫W(wǎng)絡(luò)請(qǐng)求需要中間有很多的服務(wù)器路由器的轉(zhuǎn)發(fā)。中間的節(jié)點(diǎn)都可能篡改信息，而如果使用HTTPS，密鑰在你和終點(diǎn)站才有。https之所以比http安全，是因?yàn)樗胹sl/tls協(xié)議傳輸。它包含證書，卸載，流量轉(zhuǎn)發(fā)，負(fù)載均衡，頁面適配，瀏覽器適配，refer傳遞等。保障了傳輸過程的安全性
對(duì)前端模塊化的認(rèn)識(shí)
AMD 是 RequireJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
CMD 是 SeaJS 在推廣過程中對(duì)模塊定義的規(guī)范化產(chǎn)出。
AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。
AMD推薦的風(fēng)格通過返回一個(gè)對(duì)象做為模塊對(duì)象，CommonJS的風(fēng)格通過對(duì)module.exports或exports的屬性賦值來達(dá)到暴露模塊對(duì)象的目的。
CMD模塊方式
define(function(require, exports,module) {
// 模塊代碼
});
Javascript垃圾回收方法
標(biāo)記清除（mark and sweep）
這是JavaScript最常見的垃圾回收方式，當(dāng)變量進(jìn)入執(zhí)行環(huán)境的時(shí)候，比如函數(shù)中聲明一個(gè)變量，垃圾回收器將其標(biāo)記為“進(jìn)入環(huán)境”，當(dāng)變量離開環(huán)境的時(shí)候（函數(shù)執(zhí)行結(jié)束）將其標(biāo)記為“離開環(huán)境”。
垃圾回收器會(huì)在運(yùn)行的時(shí)候給存儲(chǔ)在內(nèi)存中的所有變量加上標(biāo)記，然后去掉環(huán)境中的變量以及被環(huán)境中變量所引用的變量（閉包），在這些完成之后仍存在標(biāo)記的就是要?jiǎng)h除的變量了
引用計(jì)數(shù)(reference counting)
在低版本IE中經(jīng)常會(huì)出現(xiàn)內(nèi)存泄露，很多時(shí)候就是因?yàn)槠洳捎靡糜?jì)數(shù)方式進(jìn)行垃圾回收。引用計(jì)數(shù)的策略是跟蹤記錄每個(gè)值被使用的次數(shù)，當(dāng)聲明了一個(gè)變量并將一個(gè)引用類型賦值給該變量的時(shí)候這個(gè)值的引用次數(shù)就加1，如果該變量的值變成了另外一個(gè)，則這個(gè)值得引用次數(shù)減1，當(dāng)這個(gè)值的引用次數(shù)變?yōu)?的時(shí) 候，說明沒有變量在使用，這個(gè)值沒法被訪問了，因此可以將其占用的空間回收，這樣垃圾回收器會(huì)在運(yùn)行的時(shí)候清理掉引用次數(shù)為0的值占用的空間。
在IE中雖然JavaScript對(duì)象通過標(biāo)記清除的方式進(jìn)行垃圾回收，但BOM與DOM對(duì)象卻是通過引用計(jì)數(shù)回收垃圾的，
也就是說只要涉及BOM及DOM就會(huì)出現(xiàn)循環(huán)引用問題。
你覺得前端工程的價(jià)值體現(xiàn)在哪
為簡化用戶使用提供技術(shù)支持（交互部分）
為多個(gè)瀏覽器兼容性提供支持
為提高用戶瀏覽速度（瀏覽器性能）提供支持
為跨平臺(tái)或者其他基于webkit或其他渲染引擎的應(yīng)用提供支持
為展示數(shù)據(jù)提供支持（數(shù)據(jù)接口）
談?wù)勑阅軆?yōu)化問題
代碼層面：避免使用css表達(dá)式，避免使用高級(jí)選擇器，通配選擇器。
緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務(wù)端配置Etag，減少DNS查找等
請(qǐng)求數(shù)量：合并樣式和腳本，使用css圖片精靈，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載。
請(qǐng)求帶寬：壓縮文件，開啟GZIP，
代碼層面的優(yōu)化
用hash-table來優(yōu)化查找
少用全局變量
用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能
用setTimeout來避免頁面失去響應(yīng)
緩存DOM節(jié)點(diǎn)查找的結(jié)果
避免使用CSS Expression
避免全局查詢
避免使用with(with會(huì)創(chuàng)建自己的作用域，會(huì)增加作用域鏈長度)
多個(gè)變量聲明合并
避免圖片和iFrame等的空Src?？誗rc會(huì)重新加載當(dāng)前頁面，影響速度和效率
盡量避免寫在HTML標(biāo)簽中寫Style屬性
移動(dòng)端性能優(yōu)化
盡量使用css3動(dòng)畫，開啟硬件加速。
適當(dāng)使用touch事件代替click事件。
避免使用css3漸變陰影效果。
可以用transform: translateZ(0)來開啟硬件加速。
不濫用Float。Float在渲染時(shí)計(jì)算量比較大，盡量減少使用
不濫用Web字體。Web字體需要下載，解析，重繪當(dāng)前頁面，盡量減少使用。
合理使用requestAnimationFrame動(dòng)畫代替setTimeout
CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會(huì)觸發(fā)GPU渲染，請(qǐng)合理使用。過渡使用會(huì)引發(fā)手機(jī)過耗電增加
PC端的在移動(dòng)端同樣適用
相關(guān)閱讀：如何做到一秒渲染一個(gè)移動(dòng)頁面
什么是Etag？
當(dāng)發(fā)送一個(gè)服務(wù)器請(qǐng)求時(shí)，瀏覽器首先會(huì)進(jìn)行緩存過期判斷。瀏覽器根據(jù)緩存過期時(shí)間判斷緩存文件是否過期。
情景一：若沒有過期，則不向服務(wù)器發(fā)送請(qǐng)求，直接使用緩存中的結(jié)果，此時(shí)我們?cè)跒g覽器控制臺(tái)中可以看到 200 OK(from cache) ，此時(shí)的情況就是完全使用緩存，瀏覽器和服務(wù)器沒有任何交互的。
情景二：若已過期，則向服務(wù)器發(fā)送請(qǐng)求，此時(shí)請(qǐng)求中會(huì)帶上①中設(shè)置的文件修改時(shí)間，和Etag
然后，進(jìn)行資源更新判斷。服務(wù)器根據(jù)瀏覽器傳過來的文件修改時(shí)間，判斷自瀏覽器上一次請(qǐng)求之后，文件是不是沒有被修改過；根據(jù)Etag，判斷文件內(nèi)容自上一次請(qǐng)求之后，有沒有發(fā)生變化
情形一：若兩種判斷的結(jié)論都是文件沒有被修改過，則服務(wù)器就不給瀏覽器發(fā)index.html的內(nèi)容了，直接告訴它，文件沒有被修改過，你用你那邊的緩存吧—— 304 Not Modified，此時(shí)瀏覽器就會(huì)從本地緩存中獲取index.html的內(nèi)容。此時(shí)的情況叫協(xié)議緩存，瀏覽器和服務(wù)器之間有一次請(qǐng)求交互。
情形二：若修改時(shí)間和文件內(nèi)容判斷有任意一個(gè)沒有通過，則服務(wù)器會(huì)受理此次請(qǐng)求，之后的操作同①
① 只有g(shù)et請(qǐng)求會(huì)被緩存，post請(qǐng)求不會(huì)
Expires和Cache-Control
Expires要求客戶端和服務(wù)端的時(shí)鐘嚴(yán)格同步。HTTP1.1引入Cache-Control來克服Expires頭的限制。如果max-age和Expires同時(shí)出現(xiàn)，則max-age有更高的優(yōu)先級(jí)。
Cache-Control:no-cache, private, max-age=0
ETag: abcde
Expires: Thu, 15 Apr 201420:00:00 GMT
Pragma: private
Last-Modified:$now //RFC1123 format
ETag應(yīng)用:
Etag由服務(wù)器端生成，客戶端通過If-Match或者說If-None-Match這個(gè)條件判斷請(qǐng)求來驗(yàn)證資源是否修改。常見的是使用If-None-Match。請(qǐng)求一個(gè)文件的流程可能如下：
====第一次請(qǐng)求===
1.客戶端發(fā)起 HTTP GET 請(qǐng)求一個(gè)文件；
2.服務(wù)器處理請(qǐng)求，返回文件內(nèi)容和一堆Header，當(dāng)然包括Etag(例如"2e681a-6-5d044840")(假設(shè)服務(wù)器支持Etag生成和已經(jīng)開啟了Etag).狀態(tài)碼200
====第二次請(qǐng)求===
客戶端發(fā)起 HTTP GET 請(qǐng)求一個(gè)文件，注意這個(gè)時(shí)候客戶端同時(shí)發(fā)送一個(gè)If-None-Match頭，這個(gè)頭的內(nèi)容就是第一次請(qǐng)求時(shí)服務(wù)器返回的Etag：2e681a-6-5d0448402.服務(wù)器判斷發(fā)送過來的Etag和計(jì)算出來的Etag匹配，因此If-None-Match為False，不返回200，返回304，客戶端繼續(xù)使用本地緩存；流程很簡單，問題是，如果服務(wù)器又設(shè)置了Cache-Control:max-age和Expires呢，怎么辦
答案是同時(shí)使用，也就是說在完全匹配If-Modified-Since和If-None-Match即檢查完修改時(shí)間和Etag之后，
服務(wù)器才能返回304.(不要陷入到底使用誰的問題怪圈)
為什么使用Etag請(qǐng)求頭?
Etag 主要為了解決 Last-Modified 無法解決的一些問題。
棧和隊(duì)列的區(qū)別?
棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。
隊(duì)列先進(jìn)先出，棧先進(jìn)后出。
棧只允許在表尾一端進(jìn)行插入和刪除，而隊(duì)列只允許在表尾一端進(jìn)行插入，在表頭一端進(jìn)行刪除
棧和堆的區(qū)別？
棧區(qū)（stack）— 由編譯器自動(dòng)分配釋放 ，存放函數(shù)的參數(shù)值，局部變量的值等。
堆區(qū)（heap） — 一般由程序員分配釋放， 若程序員不釋放，程序結(jié)束時(shí)可能由OS回收。
堆（數(shù)據(jù)結(jié)構(gòu)）：堆可以被看成是一棵樹，如：堆排序；
棧（數(shù)據(jù)結(jié)構(gòu)）：一種先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)。
快速 排序的思想并實(shí)現(xiàn)一個(gè)快排？
“快速排序”的思想很簡單，整個(gè)排序過程只需要三步：
（1）在數(shù)據(jù)集之中，找一個(gè)基準(zhǔn)點(diǎn)
（2）建立兩個(gè)數(shù)組，分別存儲(chǔ)左邊和右邊的數(shù)組
（3）利用遞歸進(jìn)行下次比較
<script type="text/javascript">
functionquickSort(arr){
if(arr.length<=1){
return arr;//如果數(shù)組只有一個(gè)數(shù)，就直接返回；
}
var num = Math.floor(arr.length/2);//找到中間數(shù)的索引值，如果是浮點(diǎn)數(shù)，則向下取整
var numValue =arr.splice(num,1);//找到中間數(shù)的值
var left = [];
var right = [];
for(var i=0;i<arr.length;i++){
if(arr[i]<numValue){
left.push(arr[i]);//基準(zhǔn)點(diǎn)的左邊的數(shù)傳到左邊數(shù)組
}
else{
right.push(arr[i]);//基準(zhǔn)點(diǎn)的右邊的數(shù)傳到右邊數(shù)組
}
}
returnquickSort(left).concat([numValue],quickSort(right));//遞歸不斷重復(fù)比較
}
alert(quickSort([32,45,37,16,2,87]));//彈出“2,16,32,37,45,87”
</script>
你覺得jQuery或zepto源碼有哪些寫的好的地方
(答案僅供參考)
jQuery源碼封裝在一個(gè)匿名函數(shù)的自執(zhí)行環(huán)境中，有助于防止變量的全局污染，然后通過傳入window對(duì)象參數(shù)，可以使window對(duì)象作為局部變量使用，好處是當(dāng)jquery中訪問window對(duì)象的時(shí)候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window對(duì)象。同樣，傳入undefined參數(shù)，可以縮短查找undefined時(shí)的作用域鏈。
(function( window, undefined ) {
//用一個(gè)函數(shù)域包起來，就是所謂的沙箱
//在這里邊var定義的變量，屬于這個(gè)函數(shù)域內(nèi)的局部變量，避免污染全局
//把當(dāng)前沙箱需要的外部變量通過函數(shù)參數(shù)引入進(jìn)來
//只要保證參數(shù)對(duì)內(nèi)提供的接口的一致性，你還可以隨意替換傳進(jìn)來的這個(gè)參數(shù)
window.jQuery = window.$ = jQuery;
})( window );
jquery將一些原型屬性和方法封裝在了jquery.prototype中，為了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法。
有一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到，jQuery將其保存為局部變量以提高訪問速度。
jquery實(shí)現(xiàn)的鏈?zhǔn)秸{(diào)用可以節(jié)約代碼，所返回的都是同一個(gè)對(duì)象，可以提高代碼效率。
ES6的了解
新增模板字符串（為JavaScript提供了簡單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值Inputs=>outputs。）、for-of（用來遍歷數(shù)據(jù)—例如數(shù)組中的值。）arguments對(duì)象可被不定參數(shù)和默認(rèn)參數(shù)完美代替。ES6將promise對(duì)象納入規(guī)范，提供了原生的Promise對(duì)象。增加了let和const命令，用來聲明變量。增加了塊級(jí)作用域。let命令實(shí)際上就增加了塊級(jí)作用域。ES6規(guī)定，var命令和function命令聲明的全局變量，屬于全局對(duì)象的屬性；let命令、const命令、class命令聲明的全局變量，不屬于全局對(duì)象的屬性。。還有就是引入module模塊的概念
js繼承方式及其優(yōu)缺點(diǎn)
原型鏈繼承的缺點(diǎn)
一是字面量重寫原型會(huì)中斷關(guān)系，使用引用類型的原型，并且子類型還無法給超類型傳遞參數(shù)。
借用構(gòu)造函數(shù)（類式繼承）
借用構(gòu)造函數(shù)雖然解決了剛才兩種問題，但沒有原型，則復(fù)用無從談起。所以我們需要原型鏈+借用構(gòu)造函數(shù)的模式，這種模式稱為組合繼承
組合式繼承
組合式繼承是比較常用的一種繼承方法，其背后的思路是 使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過借用構(gòu)造函數(shù)來實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣，既通過在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又保證每個(gè)實(shí)例都有它自己的屬性。
關(guān)于Http 2.0 你知道多少？
HTTP/2引入了“服務(wù)端推（server push）”的概念，它允許服務(wù)端在客戶端需要數(shù)據(jù)之前就主動(dòng)地將數(shù)據(jù)發(fā)送到客戶端緩存中，從而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技術(shù)，允許多個(gè)消息在一個(gè)連接上同時(shí)交差。
它增加了頭壓縮（header compression），因此即使非常小的請(qǐng)求，其請(qǐng)求和響應(yīng)的header都只會(huì)占用很小比例的帶寬。
defer和async
defer并行加載js文件，會(huì)按照頁面上script標(biāo)簽的順序執(zhí)行
async并行加載js文件，下載完成立即執(zhí)行，不會(huì)按照頁面上script標(biāo)簽的順序執(zhí)行
談?wù)劯?dòng)和清除浮動(dòng)
浮動(dòng)的框可以向左或向右移動(dòng)，直到他的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。浮動(dòng)的塊框會(huì)漂浮在文檔普通流的塊框上。
如何評(píng)價(jià)AngularJS和BackboneJS
backbone具有依賴性，依賴underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一個(gè)AngularJS 多出了2 次HTTP請(qǐng)求.
Backbone的Model沒有與UI視圖數(shù)據(jù)綁定，而是需要在View中自行操作DOM來更新或讀取UI數(shù)據(jù)。AngularJS與此相反，Model直接與UI視圖綁定，Model與UI視圖的關(guān)系，通過directive封裝，AngularJS內(nèi)置的通用directive，就能實(shí)現(xiàn)大部分操作了，也就是說，基本不必關(guān)心Model與UI視圖的關(guān)系，直接操作Model就行了，UI視圖自動(dòng)更新。
AngularJS的directive，你輸入特定數(shù)據(jù)，他就能輸出相應(yīng)UI視圖。是一個(gè)比較完善的前端MVW框架，包含模板，數(shù)據(jù)雙向綁定，路由，模塊化，服務(wù)，依賴注入等所有功能，模板功能強(qiáng)大豐富，并且是聲明式的，自帶了豐富的 Angular 指令。
用過哪些設(shè)計(jì)模式？
工廠模式：
主要好處就是可以消除對(duì)象間的耦合，通過使用工程方法而不是new關(guān)鍵字。將所有實(shí)例化的代碼集中在一個(gè)位置防止代碼重復(fù)。
工廠模式解決了重復(fù)實(shí)例化的問題 ，但還有一個(gè)問題,那就是識(shí)別問題，因?yàn)楦緹o法搞清楚他們到底是哪個(gè)對(duì)象的實(shí)例。
function createObject(name,age,profession){//集中實(shí)例化的函數(shù)var obj = newObject();
obj.name =name;
obj.age = age;
obj.profession= profession;
obj.move =function () {
returnthis.name + ' at ' + this.age + ' engaged in ' + this.profession;
};
return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一個(gè)實(shí)例var test2 =createObject('mike',25,'engineer');//第二個(gè)實(shí)例
構(gòu)造函數(shù)模式
使用構(gòu)造函數(shù)的方法 ，即解決了重復(fù)實(shí)例化的問題 ，又解決了對(duì)象識(shí)別的問題，該模式與工廠模式的不同之處在于：
1.構(gòu)造函數(shù)方法沒有顯示的創(chuàng)建對(duì)象 (new Object());
2.直接將屬性和方法賦值給 this 對(duì)象;
3.沒有 renturn 語句。
說說你對(duì)閉包的理解
使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染，缺點(diǎn)是閉包會(huì)常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。在js中，函數(shù)即閉包，只有函數(shù)才會(huì)產(chǎn)生作用域的概念
閉包有三個(gè)特性：
1.函數(shù)嵌套函數(shù)
2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收
請(qǐng)你談?wù)凜ookie的弊端
cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔(dān)了服務(wù)器存儲(chǔ)的負(fù)擔(dān)，但還是有很多局限性的。
第一：每個(gè)特定的域名下最多生成20個(gè)cookie
1.IE6或更低版本最多20個(gè)cookie
2.IE7和之后的版本最后可以有50個(gè)cookie。
3.Firefox最多50個(gè)cookie
4.chrome和Safari沒有做硬性限制
IE和Opera 會(huì)清理近期最少使用的cookie，F(xiàn)irefox會(huì)隨機(jī)清理cookie。
cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)。
IE 提供了一種存儲(chǔ)可以持久化用戶數(shù)據(jù)，叫做userdata，從IE5.0就開始支持。每個(gè)數(shù)據(jù)最多128K，每個(gè)域名下最多1M。這個(gè)持久化數(shù)據(jù)放在緩存中，如果緩存沒有清理，那么會(huì)一直存在。
優(yōu)點(diǎn)：極高的擴(kuò)展性和可用性
1.通過良好的編程，控制保存在cookie中的session對(duì)象的大小。
2.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù)，即使被盜也不會(huì)有重大損失。
4.控制cookie的生命期，使之不會(huì)永遠(yuǎn)有效。偷盜者很可能拿到一個(gè)過期的cookie。
缺點(diǎn)：
1.Cookie數(shù)量和長度的限制。每個(gè)domain最多只能有20條cookie，每個(gè)cookie長度不能超過4KB，否則會(huì)被截掉.
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補(bǔ)，因?yàn)閿r截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了。
3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果我們把這個(gè)計(jì)數(shù)器保存在客戶端，那么它起不到任何作用。
瀏覽器本地存儲(chǔ)
在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。
html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。
而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。
web storage和cookie的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。
但是cookie也是不可以或缺的：cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生
瀏覽器的支持除了IE７及以下不支持外，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運(yùn)行)，值得一提的是IE總是辦好事，例如IE7、IE6中的userData其實(shí)就是javascript本地存儲(chǔ)的解決方案。通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
cookie 和session 的區(qū)別：
1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙
考慮到安全應(yīng)當(dāng)使用session。
3、session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會(huì)比較占用你服務(wù)器的性能
考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。
4、單個(gè)cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie。
5、所以個(gè)人建議：
將登陸信息等重要信息存放為SESSION
其他信息如果需要保留，可以放在COOKIE中
display:none和visibility:hidden的區(qū)別？
display:none 隱藏對(duì)應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會(huì)合攏，就當(dāng)他從來不存在。
visibility:hidden 隱藏對(duì)應(yīng)的元素，但是在文檔布局中仍保留原來的空間。
CSS中l(wèi)ink 和@import的區(qū)別是？
(1) link屬于HTML標(biāo)簽，而@import是CSS提供的;
(2) 頁面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import被引用的CSS會(huì)等到引用它的CSS文件被加載完再加載;
(3) import只在IE5以上才能識(shí)別，而link是HTML標(biāo)簽，無兼容問題;
(4) link方式的樣式的權(quán)重 高于@import的權(quán)重.
position:absolute和float屬性的異同
§ 共同點(diǎn)：對(duì)內(nèi)聯(lián)元素設(shè)置float和absolute屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。
§ 不同點(diǎn)：float仍會(huì)占據(jù)位置，absolute會(huì)覆蓋文檔流中的其他元素。
介紹一下box-sizing屬性？
box-sizing屬性主要用來控制元素的盒模型的解析模式。默認(rèn)值是content-box。
§ content-box：讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設(shè)置width/height屬性指的是content部分的寬/高
§ border-box：讓元素維持IE傳統(tǒng)盒模型（IE6以下版本和IE6~7的怪異模式）。設(shè)置width/height屬性指的是border + padding + content
標(biāo)準(zhǔn)瀏覽器下，按照W3C規(guī)范對(duì)盒模型解析，一旦修改了元素的邊框或內(nèi)距，就會(huì)影響元素的盒子尺寸，就不得不重新計(jì)算元素的盒子尺寸，從而影響整個(gè)頁面的布局。
CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級(jí)算法如何計(jì)算？ CSS3新增偽類有那些？
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（lia）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li:nth-child）
優(yōu)先級(jí)為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高,但內(nèi)聯(lián)比 id 要高
CSS3新增偽類舉例：
p:first-of-type選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。
p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。
:enabled :disabled控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
CSS3有哪些新特性？
CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），
對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90)translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba
在CSS3中唯一引入的偽元素是::selection.
媒體查詢，多欄布局
border-image
CSS3中新增了一種盒模型計(jì)算方式：box-sizing。盒模型默認(rèn)的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計(jì)算元素寬高的區(qū)別如下：
content-box（默認(rèn)）
布局所占寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
對(duì)BFC規(guī)范的理解？
BFC，塊級(jí)格式化上下文，一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子里面的子元素的樣式不會(huì)影響到外面的元素。在同一個(gè)BFC中的兩個(gè)毗鄰的塊級(jí)盒在垂直方向（和布局方向有關(guān)系）的margin會(huì)發(fā)生折疊。
（W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用。
說說你對(duì)語義化的理解？
1，去掉或者丟失樣式的時(shí)候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；
3，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁；
4，便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。
Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
1）、<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。
2）、嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
4）、DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。
你知道多少種Doctype文檔類型？
該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，而 Quirks
（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。
HTML與XHTML——二者有什么區(qū)別
區(qū)別：
1.所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫
3.所有的XML標(biāo)記都必須合理嵌套
4.所有的屬性必須用引號(hào)""括起來
5.把所有<和&特殊符號(hào)用編碼表示
6.給所有屬性賦一個(gè)值
7.不要在注釋內(nèi)容中使“--”
8.圖片必須有說明文字
常見兼容性問題？
png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理.
瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。
IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。
浮動(dòng)ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了margin-left或margin-right，margin值會(huì)加倍。）
box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入
display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。
css
.bb{
/*所有識(shí)別*/
. /*IE6、7、8識(shí)別*/
+/*IE6、7識(shí)別*/
_/*IE6識(shí)別*/
}
怪異模式問題：漏寫DTD聲明，F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在IE中會(huì)觸發(fā)
怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。現(xiàn)在
可以使用html5推薦的寫法：<doctype html>
上下margin重合問題
ie和ff都存在，相鄰的兩個(gè)div的margin-left和margin-right不會(huì)重合，但是margin-top和margin-bottom卻會(huì)發(fā)生重合。
解決方法，養(yǎng)成良好的代碼編寫習(xí)慣，同時(shí)采用margin-top或者同時(shí)采用margin-bottom。
解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧
浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。
1.使用空標(biāo)簽清除浮動(dòng)。
這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義cssclear:both. 弊端就是增加了無意義標(biāo)簽。
2.使用overflow。
給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after偽對(duì)象清除浮動(dòng)。
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動(dòng)元素的偽對(duì)象中設(shè)置 height:0，否則該元素會(huì)比實(shí)際高出若干像素；
浮動(dòng)元素引起的問題和解決辦法？
浮動(dòng)元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級(jí)的元素
（2）與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后
（3）若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動(dòng)可解決2、3問題，對(duì)于問題1，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content:".";display: block;height:0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
清除浮動(dòng)的幾種方法：
1，額外標(biāo)簽法，<divstyle="clear:both;"></div>（缺點(diǎn)：不過這個(gè)辦法會(huì)增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。）
2，使用after偽類
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3,浮動(dòng)外部元素
4,設(shè)置overflow為hidden或者auto
DOM操作——怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)。
1）創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //并沒有insertAfter()
3）查找
getElementsByTagName() //通過標(biāo)簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)，
會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)
getElementById() //通過元素Id，唯一性
html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
拖拽釋放(Drag and drop) API
語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）
音頻、視頻API(audio,video)
畫布(Canvas) API
地理(Geolocation) API
本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
表單控件，calendar、date、time、email、url、search
新的技術(shù)webworker, websocket,Geolocation
移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
支持HTML5新標(biāo)簽：
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?
調(diào)用localstorge、cookies等本地存儲(chǔ)方式
什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？
FOUC - FlashOf Unstyled Content 文檔樣式閃爍
<styletype="text/css"media="all">@import"../fouc.css";</style>
而引用CSS文件的@import就是造成這個(gè)問題的罪魁禍?zhǔn)住E會(huì)先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會(huì)有一段時(shí)間頁面上的內(nèi)容是沒有樣式的，這段時(shí)間的長短跟網(wǎng)速，電腦速度都有關(guān)系。
解決方法簡單的出奇，只要在<head>之間加入一個(gè)<link>或者<script>元素就可以了。
null和undefined的區(qū)別？
null是一個(gè)表示”無”的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示”無”的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。
當(dāng)聲明的變量還未被初始化時(shí)，變量的默認(rèn)值為undefined。
null用來表示尚未存在的對(duì)象，常用來表示函數(shù)企圖返回一個(gè)不存在的對(duì)象。
undefined表示”缺少值”，就是此處應(yīng)該有一個(gè)值，但是還沒有定義。典型用法是：
（1）變量被聲明了，但沒有賦值時(shí)，就等于undefined。
（2) 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
（3）對(duì)象沒有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined。
null表示”沒有對(duì)象”，即該處不應(yīng)該有值。典型用法是：
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。
（2） 作為對(duì)象原型鏈的終點(diǎn)。
new操作符具體干了什么呢?
1、創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
2、屬性和方法被加入到 this 引用的對(duì)象中。
3、新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。
var obj = {};
obj.proto = Base.prototype;
Base.call(obj);
js延遲加載的方式有哪些？
defer和async、動(dòng)態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中，加載完畢后callBack）、按需異步載入js
call() 和 apply() 的區(qū)別和作用？
改變this指向，區(qū)別就是傳參列表不同。
哪些操作會(huì)造成內(nèi)存泄漏？
內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒有其他對(duì)象引用過該對(duì)象），或?qū)υ搶?duì)象的惟一引用是循環(huán)的，那么該對(duì)象的內(nèi)存即可回收。
setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏。
閉包、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）
詳見：[詳解js變量、作用域及內(nèi)存][4]
列舉IE 與其他瀏覽器不一樣的特性？
§ IE支持currentStyle，F(xiàn)Irefox使用getComputStyle
§ IE 使用innerText，F(xiàn)irefox使用textContent
§ 濾鏡方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
§ 事件方面：IE：attachEvent：火狐是addEventListener
§ 鼠標(biāo)位置：IE是event.clientX；火狐是event.pageX
§ IE使用event.srcElement；Firefox使用event.target
§ IE中消除list的原點(diǎn)僅需margin:0即可達(dá)到最終效果；FIrefox需要設(shè)置margin:0;padding:0以及l(fā)ist-style:none
§ CSS圓角：ie7以下不支持圓角
WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式？
Javascript數(shù)據(jù)推送
§ Commet：基于HTTP長連接的服務(wù)器推送技術(shù)
§ 基于WebSocket的推送方案
§ SSE（Server-Send Event）：服務(wù)器推送數(shù)據(jù)新方式
對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？
前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫、產(chǎn)品經(jīng)理、運(yùn)營、安全都近。
1、實(shí)現(xiàn)界面交互
2、提升用戶體驗(yàn)
3、有了Node.js，前端可以實(shí)現(xiàn)服務(wù)端的一些事情
前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分，甚至更好，
參與項(xiàng)目，快速高質(zhì)量完成實(shí)現(xiàn)效果圖，精確到1px；
與團(tuán)隊(duì)成員，UI設(shè)計(jì)，產(chǎn)品經(jīng)理的溝通；
做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗(yàn)；
處理hack，兼容、寫出優(yōu)美的代碼格式；
針對(duì)服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。
一個(gè)頁面從輸入 URL 到頁面加載顯示完成，這個(gè)過程中都發(fā)生了什么？
分為4個(gè)步驟：
（1），當(dāng)發(fā)送一個(gè)URL請(qǐng)求時(shí)，不管這個(gè)URL是Web頁面的URL還是Web頁面上每個(gè)資源的URL，瀏覽器都會(huì)開啟一個(gè)線程來處理這個(gè)請(qǐng)求，同時(shí)在遠(yuǎn)程DNS服務(wù)器上啟動(dòng)一個(gè)DNS查詢。這能使瀏覽器獲得請(qǐng)求對(duì)應(yīng)的IP地址。
（2）， 瀏覽器與遠(yuǎn)程`Web`服務(wù)器通過`TCP`三次握手協(xié)商來建立一個(gè)`TCP/IP`連接。該握手包括一個(gè)同步報(bào)文，一個(gè)同步-應(yīng)答報(bào)文和一個(gè)應(yīng)答報(bào)文，這三個(gè)報(bào)文在瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務(wù)器應(yīng)答并接受客戶端的請(qǐng)求，最后由客戶端發(fā)出該請(qǐng)求已經(jīng)被接受的報(bào)文。
（3），一旦`TCP/IP`連接建立，瀏覽器會(huì)通過該連接向遠(yuǎn)程服務(wù)器發(fā)送`HTTP`的`GET`請(qǐng)求。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源，值為200的HTTP響應(yīng)狀態(tài)表示一個(gè)正確的響應(yīng)。
（4），此時(shí)，`Web`服務(wù)器提供資源服務(wù)，客戶端開始下載資源。
請(qǐng)求返回后，便進(jìn)入了我們關(guān)注的前端模塊
簡單來說，瀏覽器會(huì)解析HTML生成DOM Tree，其次會(huì)根據(jù)CSS生成CSS Rule Tree，而javascript又可以根據(jù)DOM API操作DOM
詳情：[從輸入 URL 到瀏覽器接收的過程中發(fā)生了什么事情？][8]
javascript對(duì)象的幾種創(chuàng)建方式
1，工廠模式
2，構(gòu)造函數(shù)模式
3，原型模式
4，混合構(gòu)造函數(shù)和原型模式
5，動(dòng)態(tài)原型模式
6，寄生構(gòu)造函數(shù)模式
7，穩(wěn)妥構(gòu)造函數(shù)模式
javascript繼承的6種方法
1，原型鏈繼承
2，借用構(gòu)造函數(shù)繼承
3，組合繼承(原型+借用構(gòu)造)
4，原型式繼承
5，寄生式繼承
6，寄生組合式繼承
詳情：[JavaScript繼承方式詳解][9]
創(chuàng)建ajax的過程
(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)局部刷新.
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status=== 200){
}
}
詳情：[JavaScript學(xué)習(xí)總結(jié)（七）Ajax和Http狀態(tài)字][10]
異步加載和延遲加載
1.異步加載的方案： 動(dòng)態(tài)插入script標(biāo)簽
2.通過ajax去獲取js代碼，然后通過eval執(zhí)行
3.script標(biāo)簽上添加defer或者async屬性
4.創(chuàng)建并插入iframe，讓它異步執(zhí)行js
5.延遲加載：有些 js 代碼并不是頁面初始化的時(shí)候就立刻需要的，而稍后的某些情況才需要的。
ie各版本和chrome可以并行下載多少個(gè)資源
IE6 兩個(gè)并發(fā)，iE7升級(jí)之后的6個(gè)并發(fā)，之后版本也是6個(gè)
Firefox，chrome也是6個(gè)
Flash、Ajax各自的優(yōu)缺點(diǎn)，在使用中如何取舍？
§ Flash適合處理多媒體、矢量圖形、訪問機(jī)器；對(duì)CSS、處理文本上不足，不容易被搜索。
-Ajax對(duì)CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機(jī)器訪問不足。
§ 共同點(diǎn)：與服務(wù)器的無刷新傳遞消息、用戶離線和在線狀態(tài)、操作DOM
請(qǐng)解釋一下 JavaScript 的同源策略。
概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator2.0，其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。
這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
為什么要有同源限制？
我們舉例說明：比如一個(gè)黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實(shí)的用戶名，密碼登錄時(shí)，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。
缺點(diǎn)：
現(xiàn)在網(wǎng)站的JS 都會(huì)進(jìn)行壓縮，一些文件用了嚴(yán)格模式，而另一些沒有。這時(shí)這些本來是嚴(yán)格模式的文件，被 merge 后，這個(gè)串就到了文件的中間，不僅沒有指示嚴(yán)格模式，反而在壓縮后浪費(fèi)了字節(jié)。
GET和POST的區(qū)別，何時(shí)使用POST？
GET：一般用于信息獲取，使用URL傳遞參數(shù)，對(duì)所發(fā)送信息的數(shù)量也有限制，一般在2000個(gè)字符
POST：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，
也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）
向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠
事件、IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？
我們?cè)诰W(wǎng)頁中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測到的行為。
事件處理機(jī)制：IE是事件冒泡、firefox同時(shí)支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；
3.ev.stopPropagation();注意舊ie的方法ev.cancelBubble = true;
ajax的缺點(diǎn)和在IE下的問題？
詳情請(qǐng)見：[JavaScript學(xué)習(xí)總結(jié)（七）Ajax和Http狀態(tài)字][14]
ajax的缺點(diǎn)
1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
3、對(duì)搜索引擎的支持比較弱。
4、破壞了程序的異常機(jī)制。
5、不容易調(diào)試。
IE緩存問題
在IE瀏覽器下，如果請(qǐng)求的方法是GET，并且請(qǐng)求的URL不變，那么這個(gè)請(qǐng)求的結(jié)果就會(huì)被緩存。解決這個(gè)問題的辦法可以通過實(shí)時(shí)改變請(qǐng)求的URL，只要URL改變，就不會(huì)被緩存，可以通過在URL末尾添加上隨機(jī)的時(shí)間戳參數(shù)('t'= + newDate().getTime())
或者：
open('GET','demo.php?rand=+Math.random()',true);//
· 1
Ajax請(qǐng)求的頁面歷史記錄狀態(tài)問題
可以通過錨點(diǎn)來記錄狀態(tài)，location.hash。讓瀏覽器記錄Ajax請(qǐng)求時(shí)頁面狀態(tài)的變化。
還可以通過HTML5的history.pushState，來實(shí)現(xiàn)瀏覽器地址欄的無刷新改變
談?wù)勀銓?duì)重構(gòu)的理解
網(wǎng)站重構(gòu)：在不改變外部行為的前提下，簡化結(jié)構(gòu)、添加可讀性，而在網(wǎng)站前端保持一致的行為。也就是說是在不改變UI的情況下，對(duì)網(wǎng)站進(jìn)行優(yōu)化，
在擴(kuò)展的同時(shí)保持一致的UI。
對(duì)于傳統(tǒng)的網(wǎng)站來說重構(gòu)通常是：
表格(table)布局改為DIV+CSS
使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS、如對(duì)IE6有效的)
對(duì)于移動(dòng)平臺(tái)的優(yōu)化
針對(duì)于SEO進(jìn)行優(yōu)化
深層次的網(wǎng)站重構(gòu)應(yīng)該考慮的方面
減少代碼間的耦合
讓代碼保持彈性
嚴(yán)格按規(guī)范編寫代碼
設(shè)計(jì)可擴(kuò)展的API
代替舊有的框架、語言(如VB)
增強(qiáng)用戶體驗(yàn)
通常來說對(duì)于速度的優(yōu)化也包含在重構(gòu)中
壓縮JS、CSS、image等前端資源(通常是由服務(wù)器來解決)
程序的性能優(yōu)化(如數(shù)據(jù)讀寫)
采用CDN來加速資源加載
對(duì)于JS DOM的優(yōu)化
HTTP服務(wù)器的文件緩存
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)頁已永久移動(dòng)到新位置。
302 Found 臨時(shí)性重定向。
303 SeeOther 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI。
304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁未修改過。
400 BadRequest 服務(wù)器無法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。
401 Unauthorized 請(qǐng)求未授權(quán)。
403Forbidden 禁止訪問。
404 NotFound 找不到如何與 URI 相匹配的資源。
500 InternalServer Error 最常見的服務(wù)器端錯(cuò)誤。
503 ServiceUnavailable 服務(wù)器端暫時(shí)無法處理請(qǐng)求（可能是過載或維護(hù)）。
說說你對(duì)Promise的理解
依照 Promise/A+ 的定義，Promise 有四種狀態(tài)：
pending: 初始狀態(tài), 非fulfilled 或 rejected.
fulfilled: 成功的操作.
rejected: 失敗的操作.
settled: Promise已被fulfilled或rejected，且不是pending
另外， fulfilled 與 rejected 一起合稱 settled。
Promise 對(duì)象用來進(jìn)行延遲(deferred) 和異步(asynchronous ) 計(jì)算。
Promise 的構(gòu)造函數(shù)
構(gòu)造一個(gè) Promise，最基本的用法如下：
var promise = new Promise(function(resolve, reject) {
if (...) { // succeed
resolve(result);
} else { // fails
reject(Error(errMessage));
}
});
Promise 實(shí)例擁有 then 方法（具有 then 方法的對(duì)象，通常被稱為 thenable）。它的使用方法如下：
promise.then(onFulfilled, onRejected)
接收兩個(gè)函數(shù)作為參數(shù)，一個(gè)在 fulfilled 的時(shí)候被調(diào)用，一個(gè)在 rejected 的時(shí)候被調(diào)用，接收參數(shù)就是 future，onFulfilled對(duì)應(yīng) resolve, onRejected 對(duì)應(yīng) reject。
說說你對(duì)前端架構(gòu)師的理解
負(fù)責(zé)前端團(tuán)隊(duì)的管理及與其他團(tuán)隊(duì)的協(xié)調(diào)工作，提升團(tuán)隊(duì)成員能力和整體效率；
帶領(lǐng)團(tuán)隊(duì)完成研發(fā)工具及平臺(tái)前端部分的設(shè)計(jì)、研發(fā)和維護(hù)；
帶領(lǐng)團(tuán)隊(duì)進(jìn)行前端領(lǐng)域前沿技術(shù)研究及新技術(shù)調(diào)研，保證團(tuán)隊(duì)的技術(shù)領(lǐng)先
負(fù)責(zé)前端開發(fā)規(guī)范制定、功能模塊化設(shè)計(jì)、公共組件搭建等工作，并組織培訓(xùn)。
實(shí)現(xiàn)一個(gè)函數(shù)clone，可以對(duì)JavaScript中的5種主要的數(shù)據(jù)類型（包括Number、String、Object、Array、Boolean）進(jìn)行值復(fù)制
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e inthis){
o[e] = typeofthis[e] === "object" ? this[e].clone() : this[e];
}
return o;
}
說說嚴(yán)格模式的限制
嚴(yán)格模式主要有以下限制：
變量必須聲明后再使用
函數(shù)的參數(shù)不能有同名屬性，否則報(bào)錯(cuò)
不能使用with語句
不能對(duì)只讀屬性賦值，否則報(bào)錯(cuò)
不能使用前綴0表示八進(jìn)制數(shù)，否則報(bào)錯(cuò)
不能刪除不可刪除的屬性，否則報(bào)錯(cuò)
不能刪除變量delete prop，會(huì)報(bào)錯(cuò)，只能刪除屬性delete global[prop]
eval不會(huì)在它的外層作用域引入變量
eval和arguments不能被重新賦值
arguments不會(huì)自動(dòng)反映函數(shù)參數(shù)的變化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局對(duì)象
不能使用fn.caller和fn.arguments獲取函數(shù)調(diào)用的堆棧
增加了保留字（比如protected、static和interface）
設(shè)立”嚴(yán)格模式”的目的，主要有以下幾個(gè)：
§ 消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
§ 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
§ 提高編譯器效率，增加運(yùn)行速度；
§ 為未來新版本的Javascript做好鋪墊。
注：經(jīng)過測試IE6,7,8,9均不支持嚴(yán)格模式。
如何刪除一個(gè)cookie
1.將時(shí)間設(shè)為當(dāng)前時(shí)間往前一點(diǎn)。
var date = newDate();
date.setDate(date.getDate() - 1);//真正的刪除
setDate()方法用于設(shè)置一個(gè)月的某一天。
2.expires的設(shè)置
document.cookie= 'user='+ encodeURIComponent('name') + ';expires = ' + newDate(0)
<strong>，<em>和<b>，<i>標(biāo)簽
<strong>標(biāo)簽和 <em>標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些。
em 是 斜體強(qiáng)調(diào)標(biāo)簽，更強(qiáng)烈強(qiáng)調(diào)，表示內(nèi)容的強(qiáng)調(diào)點(diǎn)。相當(dāng)于html元素中的<i>...</i>;
< b >< i >是視覺要素，分別表示無意義的加粗，無意義的斜體。
em 和 strong 是表達(dá)要素(phraseelements)。
說說你對(duì)AMD和Commonjs的理解
CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個(gè)規(guī)范。CommonJS規(guī)范加載模塊是同步的，也就是說，只有加載完成，才能執(zhí)行后面的操作。AMD規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)。
AMD推薦的風(fēng)格通過返回一個(gè)對(duì)象做為模塊對(duì)象，CommonJS的風(fēng)格通過對(duì)module.exports或exports的屬性賦值來達(dá)到暴露模塊對(duì)象的目的。
document.write()的用法
document.write()方法可以用在兩個(gè)方面：頁面載入過程中用實(shí)時(shí)腳本創(chuàng)建頁面內(nèi)容，以及用延時(shí)腳本創(chuàng)建本窗口或新窗口的內(nèi)容。
document.write只能重繪整個(gè)頁面。innerHTML可以重繪頁面的一部分
編寫一個(gè)方法求一個(gè)字符串的字節(jié)長度
假設(shè)：一個(gè)英文字符占用一個(gè)字節(jié)，一個(gè)中文字符占用兩個(gè)字節(jié)
functionGetBytes(str){
var len = str.length;
var bytes = len;
for(var i=0; i<len; i++){
if (str.charCodeAt(i) >255) bytes++;
}
return bytes;
}
alert(GetBytes("你好,as"));
git fetch和git pull的區(qū)別
git pull：相當(dāng)于是從遠(yuǎn)程獲取最新版本并merge到本地
git fetch：相當(dāng)于是從遠(yuǎn)程獲取最新版本到本地，不會(huì)自動(dòng)merge
說說你對(duì)MVC和MVVM的理解
MVC
View 傳送指令到 Controller
Controller 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)
Model 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋
所有通信都是單向的。
Angular它采用雙向綁定（data-binding）：View的變動(dòng)，自動(dòng)反映在 ViewModel，反之亦然。
組成部分Model、View、ViewModel
View：UI界面
ViewModel：它是View的抽象，負(fù)責(zé)View與Model之間信息轉(zhuǎn)換，將View的Command傳送到Model；
Model：數(shù)據(jù)訪問層
請(qǐng)解釋什么是事件代理
事件代理（Event Delegation），又稱之為事件委托。是 JavaScript 中常用綁定事件的常用技巧。顧名思義，“事件代理”即是把原本需要綁定的事件委托給父元素，讓父元素?fù)?dān)當(dāng)事件監(jiān)聽的職務(wù)。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高性能。
attribute和property的區(qū)別是什么？
attribute是dom元素在文檔中作為html標(biāo)簽擁有的屬性；
property就是dom元素在js中作為對(duì)象擁有的屬性。
所以：
對(duì)于html的標(biāo)準(zhǔn)屬性來說，attribute和property是同步的，是會(huì)自動(dòng)更新的，
但是對(duì)于自定義的屬性來說，他們是不同步的，
說說網(wǎng)絡(luò)分層里七層模型是哪七層
§ 應(yīng)用層：應(yīng)用層、表示層、會(huì)話層（從上往下）（HTTP、FTP、SMTP、DNS）
§ 傳輸層（TCP和UDP）
§ 網(wǎng)絡(luò)層（IP）
§ 物理和數(shù)據(jù)鏈路層（以太網(wǎng)）
每一層的作用如下：
物理層：通過媒介傳輸比特,確定機(jī)械及電氣規(guī)范（比特Bit）
數(shù)據(jù)鏈路層：將比特組裝成幀和點(diǎn)到點(diǎn)的傳遞（幀F(xiàn)rame）
網(wǎng)絡(luò)層：負(fù)責(zé)數(shù)據(jù)包從源到宿的傳遞和網(wǎng)際互連（包PackeT）
傳輸層：提供端到端的可靠報(bào)文傳遞和錯(cuò)誤恢復(fù)（段Segment）
會(huì)話層：建立、管理和終止會(huì)話（會(huì)話協(xié)議數(shù)據(jù)單元SPDU）
表示層：對(duì)數(shù)據(jù)進(jìn)行翻譯、加密和壓縮（表示協(xié)議數(shù)據(jù)單元PPDU）
應(yīng)用層：允許訪問OSI環(huán)境的手段（應(yīng)用協(xié)議數(shù)據(jù)單元APDU）
各種協(xié)議
ICMP協(xié)議： 因特網(wǎng)控制報(bào)文協(xié)議。它是TCP/IP協(xié)議族的一個(gè)子協(xié)議，用于在IP主機(jī)、路由器之間傳遞控制消息。
TFTP協(xié)議： 是TCP/IP協(xié)議族中的一個(gè)用來在客戶機(jī)與服務(wù)器之間進(jìn)行簡單文件傳輸?shù)膮f(xié)議，提供不復(fù)雜、開銷不大的文件傳輸服務(wù)。
HTTP協(xié)議： 超文本傳輸協(xié)議，是一個(gè)屬于應(yīng)用層的面向?qū)ο蟮膮f(xié)議，由于其簡捷、快速的方式，適用于分布式超媒體信息系統(tǒng)。
DHCP協(xié)議： 動(dòng)態(tài)主機(jī)配置協(xié)議，是一種讓系統(tǒng)得以連接到網(wǎng)絡(luò)上，并獲取所需要的配置參數(shù)手段。
說說mongoDB和MySQL的區(qū)別
MySQL是傳統(tǒng)的關(guān)系型數(shù)據(jù)庫，MongoDB則是非關(guān)系型數(shù)據(jù)庫
mongodb以BSON結(jié)構(gòu)（二進(jìn)制）進(jìn)行存儲(chǔ)，對(duì)海量數(shù)據(jù)存儲(chǔ)有著很明顯的優(yōu)勢。
對(duì)比傳統(tǒng)關(guān)系型數(shù)據(jù)庫,NoSQL有著非常顯著的性能和擴(kuò)展性優(yōu)勢，與關(guān)系型數(shù)據(jù)庫相比，MongoDB的優(yōu)點(diǎn)有：
①弱一致性（最終一致），更能保證用戶的訪問速度：
②文檔結(jié)構(gòu)的存儲(chǔ)方式，能夠更便捷的獲取數(shù)據(jù)。
講講304緩存的原理
服務(wù)器首先產(chǎn)生ETag，服務(wù)器可在稍后使用它來判斷頁面是否已經(jīng)被修改。本質(zhì)上，客戶端通過將該記號(hào)傳回服務(wù)器要求服務(wù)器驗(yàn)證其（客戶端）緩存。
304是HTTP狀態(tài)碼，服務(wù)器用來標(biāo)識(shí)這個(gè)文件沒修改，不返回內(nèi)容，瀏覽器在接收到個(gè)狀態(tài)碼后，會(huì)使用瀏覽器已緩存的文件
客戶端請(qǐng)求一個(gè)頁面（A）。 服務(wù)器返回頁面A，并在給A加上一個(gè)ETag。 客戶端展現(xiàn)該頁面，并將頁面連同ETag一起緩存。 客戶再次請(qǐng)求頁面A，并將上次請(qǐng)求時(shí)服務(wù)器返回的ETag一起傳遞給服務(wù)器。 服務(wù)器檢查該ETag，并判斷出該頁面自上次客戶端請(qǐng)求之后還未被修改，直接返回響應(yīng)304（未修改——Not Modified）和一個(gè)空的響應(yīng)體。
什么樣的前端代碼是好的
高復(fù)用低耦合，這樣文件小，好維護(hù)，而且好擴(kuò)展。
