前端開(kāi)發(fā)面試題
<a name='preface'>前言</a>
本文由我收集總結(jié)了一些前端面試題，初學(xué)者閱后也要用心鉆研其中的原理殖蚕，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈磅叛。萬(wàn)不可投機(jī)取巧，臨時(shí)抱佛腳只求面試僥幸混過(guò)關(guān)是錯(cuò)誤的萨赁！也是不可能的弊琴！不可能的！不可能的杖爽！
前端還是一個(gè)年輕的行業(yè)敲董，新的行業(yè)標(biāo)準(zhǔn)， 框架慰安， 庫(kù)都不斷在更新和新增腋寨，正如赫門(mén)在2015深JS大會(huì)上的《前端服務(wù)化之路》主題演講中說(shuō)的一句話：“每18至24個(gè)月，前端都會(huì)難一倍”化焕，這些變化使前端的能力更加豐富萄窜、創(chuàng)造的應(yīng)用也會(huì)更加完美。所以關(guān)注各種前端技術(shù)，跟上快速變化的節(jié)奏查刻，也是身為一個(gè)前端程序員必備的技能之一番宁。
最近也收到許多微博私信的鼓勵(lì)和更正題目信息，后面會(huì)經(jīng)常更新題目和答案到github博客赖阻。希望前端er達(dá)到既能使用也會(huì)表達(dá)蝶押，對(duì)理論知識(shí)有自己的理解』鹋罚可根據(jù)下面的知識(shí)點(diǎn)一個(gè)一個(gè)去進(jìn)階學(xué)習(xí)棋电，形成自己的職業(yè)技能鏈。
面試有幾點(diǎn)需注意：(來(lái)源寒冬winter 老師苇侵，github:@wintercn)
面試題目： 根據(jù)你的等級(jí)和職位的變化赶盔，入門(mén)級(jí)到專家級(jí)，廣度和深度都會(huì)有所增加榆浓。
題目類型： 理論知識(shí)于未、算法、項(xiàng)目細(xì)節(jié)陡鹃、技術(shù)視野烘浦、開(kāi)放性題、工作案例萍鲸。
細(xì)節(jié)追問(wèn)： 可以確保問(wèn)到你開(kāi)始不懂或面試官開(kāi)始不懂為止闷叉，這樣可以大大延展題目的區(qū)分度和深度，知道你的實(shí)際能力脊阴。因?yàn)檫@種知識(shí)關(guān)聯(lián)是長(zhǎng)時(shí)期的學(xué)習(xí)握侧，臨時(shí)抱佛腳絕對(duì)是記不住的。
回答問(wèn)題再棒嘿期，面試官（可能是你面試職位的直接領(lǐng)導(dǎo)）品擎，會(huì)考慮我要不要這個(gè)人做我的同事？所以態(tài)度很重要备徐、除了能做事萄传，還要會(huì)做人。（感覺(jué)更像是相親( ????????????????? )）
資深的前端開(kāi)發(fā)能把a(bǔ)bsolute和relative弄混坦喘，這樣的人不要也罷逆皮，因?yàn)閳F(tuán)隊(duì)需要的是：你這個(gè)人具有可以依靠的才能（靠譜）绰精。
前端開(kāi)發(fā)知識(shí)點(diǎn)：
HTML&CSS：
對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異碗旅、兼容性贷揽、hack棠笑、CSS基本功：布局、盒子模型禽绪、選擇器優(yōu)先級(jí)蓖救、
HTML5洪规、CSS3、Flexbox
JavaScript：
數(shù)據(jù)類型循捺、運(yùn)算斩例、對(duì)象、Function从橘、繼承念赶、閉包、作用域恰力、原型鏈叉谜、事件、RegExp踩萎、JSON停局、Ajax、
DOM香府、BOM董栽、內(nèi)存泄漏、跨域企孩、異步裝載裆泳、模板引擎、前端MVC柠硕、路由工禾、模塊化、Canvas蝗柔、ECMAScript 6闻葵、Nodejs
其他：
移動(dòng)端、響應(yīng)式癣丧、自動(dòng)化構(gòu)建槽畔、HTTP、離線存儲(chǔ)胁编、WEB安全厢钧、優(yōu)化、重構(gòu)嬉橙、團(tuán)隊(duì)協(xié)作早直、可維護(hù)、易用性市框、SEO霞扬、UED、架構(gòu)、職業(yè)生涯喻圃、快速學(xué)習(xí)能力
作為一名前端工程師萤彩，無(wú)論工作年頭長(zhǎng)短都應(yīng)該掌握的知識(shí)點(diǎn)：
此條由 王子墨 發(fā)表在 攻城師的實(shí)驗(yàn)室
1、DOM結(jié)構(gòu) —— 兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)斧拍。
2雀扶、DOM操作 —— 如何添加、移除肆汹、移動(dòng)愚墓、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)等县踢。
3转绷、事件 —— 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別硼啤。
4议经、XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請(qǐng)求谴返、怎樣檢測(cè)錯(cuò)誤煞肾。
5、嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式嗓袱，區(qū)分它們有何意義籍救。
6、盒模型 —— 外邊距渠抹、內(nèi)邊距和邊框之間的關(guān)系蝙昙，及IE8以下版本的瀏覽器中的盒模型
7、塊級(jí)元素與行內(nèi)元素 —— 怎么用CSS控制它們梧却、以及如何合理的使用它們
8奇颠、浮動(dòng)元素 —— 怎么使用它們、它們有什么問(wèn)題以及怎么解決這些問(wèn)題放航。
9烈拒、HTML與XHTML —— 二者有什么區(qū)別，你覺(jué)得應(yīng)該使用哪一個(gè)并說(shuō)出理由广鳍。
10荆几、JSON —— 作用、用途赊时、設(shè)計(jì)結(jié)構(gòu)吨铸。
備注：
根據(jù)自己需要選擇性閱讀，面試題是對(duì)理論知識(shí)的總結(jié)蛋叼，讓自己學(xué)會(huì)應(yīng)該如何表達(dá)焊傅。
資料答案不夠正確和全面剂陡，歡迎歡迎Star和提交issues狈涮。
格式不斷修改更新中狐胎。
更新記錄：
2016年3月25日：新增ECMAScript6 相關(guān)問(wèn)題
更新時(shí)間: 2016-3-25
<a name='html'>HTML</a>
-
Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
（1）歌馍、<!DOCTYPE>聲明位于位于HTML文檔中的第一行握巢，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔松却。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)暴浦。 （2）、標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行晓锻。在兼容模式中歌焦，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。 -
HTML5 為什么只需要寫(xiě) <!DOCTYPE HTML>砚哆？
HTML5 不基于 SGML独撇，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）躁锁； 而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用纷铣，才能告知瀏覽器文檔所使用的文檔類型。 -
行內(nèi)元素有哪些战转？塊級(jí)元素有哪些搜立？ 空(void)元素有那些？
首先：CSS規(guī)范規(guī)定槐秧，每個(gè)元素都有display屬性啄踊，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值刁标，如div的display默認(rèn)值為“block”颠通，則為“塊級(jí)”元素；span默認(rèn)display屬性值為“inline”命雀，是“行內(nèi)”元素蒜哀。 （1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語(yǔ)氣） （2）塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）常見(jiàn)的空元素： <br> <hr> <img> <input> <link> <meta> 鮮為人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別吏砂？
（1）link屬于XHTML標(biāo)簽撵儿，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用狐血；而@import是CSS提供的淀歇，只能用于加載CSS;
（2）頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載匈织，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
（3）import是CSS2.1 提出的浪默，只在IE5以上才能被識(shí)別牡直，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題;
-
介紹一下你對(duì)瀏覽器內(nèi)核的理解纳决？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和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來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果讲竿。 最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立择浊，內(nèi)核就傾向于只指渲染引擎戴卜。 -
常見(jiàn)的瀏覽器內(nèi)核有哪些？
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等琢岩。[又稱MSHTML] Gecko內(nèi)核：Netscape6及以上版本投剥，F(xiàn)F,MozillaSuite/SeaMonkey等 Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto担孔，現(xiàn)為：Blink;] Webkit內(nèi)核：Safari,Chrome等江锨。 [ Chrome的：Blink（WebKit的分支）] 詳細(xì)文章：[瀏覽器內(nèi)核的解析和對(duì)比](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html) html5有哪些新特性、移除了那些元素糕篇？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題啄育？如何區(qū)分 HTML 和
HTML5？
* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集拌消，主要是關(guān)于圖像挑豌，位置，存儲(chǔ)墩崩，多任務(wù)等功能的增加氓英。
繪畫(huà) 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徘键、section;
表單控件练对，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支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽宪赶，
瀏覽器支持新標(biāo)簽后宗弯，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
當(dāng)然也可以直接使用成熟的框架搂妻、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
* 如何區(qū)分HTML5： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
-
簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解蒙保？
用正確的標(biāo)簽做正確的事情。 html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化欲主，結(jié)構(gòu)更清晰邓厕，便于對(duì)瀏覽器、搜索引擎解析; 即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示扁瓢，并且是容易閱讀的; 搜索引擎的爬蟲(chóng)也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重详恼，利于SEO; 使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解引几。 -
HTML5的離線儲(chǔ)存怎么使用昧互，工作原理能不能解釋一下？
在用戶沒(méi)有與因特網(wǎng)連接時(shí)伟桅，可以正常訪問(wèn)站點(diǎn)或應(yīng)用敞掘，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件贿讹。 原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))渐逃，通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)民褂。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)茄菊，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示疯潭。 如何使用： 1、頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性面殖； 2竖哩、在cache.manifest文件的編寫(xiě)離線存儲(chǔ)的資源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 3脊僚、在離線狀態(tài)時(shí)相叁，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。詳細(xì)的使用請(qǐng)參考：有趣的HTML5：離線存儲(chǔ)
-
瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢辽幌？
在線的情況下增淹，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件乌企，如果是第一次訪問(wèn)app虑润，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)app并且資源已經(jīng)離線存儲(chǔ)了加酵，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面拳喻，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒(méi)有發(fā)生改變猪腕，就不做任何操作冗澈，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)陋葡。 離線的情況下亚亲，瀏覽器就直接使用離線存儲(chǔ)的資源。詳細(xì)的使用請(qǐng)參考：有趣的HTML5：離線存儲(chǔ)
-
請(qǐng)描述一下 cookies脖岛，sessionStorage 和 localStorage 的區(qū)別朵栖？
cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過(guò)加密）。 cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）柴梆，記會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞陨溅。 sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存绍在。 存儲(chǔ)大忻派取： cookie數(shù)據(jù)大小不能超過(guò)4k。 sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制偿渡，但比cookie大得多臼寄，可以達(dá)到5M或更大。 有期時(shí)間： localStorage 存儲(chǔ)持久數(shù)據(jù)溜宽，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)吉拳； sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。 cookie 設(shè)置的cookie過(guò)期時(shí)間之前一直有效适揉，即使窗口或?yàn)g覽器關(guān)閉 -
iframe有那些缺點(diǎn)留攒？
*iframe會(huì)阻塞主頁(yè)面的Onload事件煤惩； *搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面，不利于SEO; *iframe和主頁(yè)面共享連接池炼邀，而瀏覽器對(duì)相同域的連接有限制魄揉，所以會(huì)影響頁(yè)面的并行加載。 使用iframe之前需要考慮這兩個(gè)缺點(diǎn)拭宁。如果需要使用iframe洛退，最好是通過(guò)javascript 動(dòng)態(tài)給iframe添加src屬性值，這樣可以繞開(kāi)以上兩個(gè)問(wèn)題兵怯。 -
Label的作用是什么？是怎么用的在旱？
label標(biāo)簽來(lái)定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)摇零，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。 <label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label> -
HTML5的form如何關(guān)閉自動(dòng)完成功能桶蝎？
給不想要提示的 form 或某個(gè) input 設(shè)置為 autocomplete=off。 -
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信? (阿里)
WebSocket谅畅、SharedWorker登渣； 也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式毡泻； localstorge另一個(gè)瀏覽上下文里被添加胜茧、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè)事件仇味， 我們通過(guò)監(jiān)聽(tīng)事件呻顽，控制它的值來(lái)進(jìn)行頁(yè)面信息通信； 注意quirks：Safari 在無(wú)痕模式下設(shè)置localstorge值時(shí)會(huì)拋出 QuotaExceededError 的異常丹墨； -
webSocket如何兼容低瀏覽器廊遍？(阿里)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 贩挣、 基于 multipart 編碼發(fā)送 XHR 喉前、 基于長(zhǎng)輪詢的 XHR -
頁(yè)面可見(jiàn)性（Page Visibility API） 可以有哪些用途？
通過(guò) visibilityState 的值檢測(cè)頁(yè)面當(dāng)前是否可見(jiàn)王财，以及打開(kāi)網(wǎng)頁(yè)的時(shí)間等; 在頁(yè)面被切換到其他后臺(tái)進(jìn)程的時(shí)候卵迂，自動(dòng)暫停音樂(lè)或視頻的播放； -
如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域绒净？
1见咒、map+area或者svg 2、border-radius 3挂疆、純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法改览、獲取鼠標(biāo)坐標(biāo)等等 -
實(shí)現(xiàn)不使用 border 畫(huà)出1px高的線哎垦，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div> -
網(wǎng)頁(yè)驗(yàn)證碼是干嘛的恃疯，是為了解決什么安全問(wèn)題漏设。
區(qū)分用戶是計(jì)算機(jī)還是人的公共全自動(dòng)程序〗裢可以防止惡意破解密碼郑口、刷票、論壇灌水盾鳞； 有效防止黑客對(duì)某一個(gè)特定注冊(cè)用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試犬性。 -
title與h1的區(qū)別、b與strong的區(qū)別腾仅、i與em的區(qū)別乒裆？
title屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題推励，對(duì)頁(yè)面信息的抓取也有很大的影響鹤耍； strong是標(biāo)明重點(diǎn)內(nèi)容，有語(yǔ)氣加強(qiáng)的含義验辞，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：<strong>會(huì)重讀稿黄，而<B>是展示強(qiáng)調(diào)內(nèi)容。 i內(nèi)容展示為斜體跌造，em表示強(qiáng)調(diào)的文本杆怕； Physical Style Elements -- 自然樣式標(biāo)簽 b, i, u, s, pre Semantic Style Elements -- 語(yǔ)義樣式標(biāo)簽 strong, em, ins, del, code 應(yīng)該準(zhǔn)確使用語(yǔ)義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽。
<a name='css'>CSS</a>
-
介紹一下標(biāo)準(zhǔn)的CSS的盒子模型壳贪？低版本IE的盒子模型有什么不同的陵珍？
（1）有兩種， IE 盒子模型违施、W3C 盒子模型互纯； （2）盒模型： 內(nèi)容(content)、填充(padding)醉拓、邊界(margin)伟姐、 邊框(border)； （3）區(qū) 別： IE的content部分把 border 和 padding計(jì)算了進(jìn)去; -
CSS選擇符有哪些亿卤？哪些屬性可以繼承愤兵？
* 1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標(biāo)簽選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul > li） 6.后代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（a[rel = "external"]） 9.偽類選擇器（a:hover, li:nth-child） * 可繼承的樣式： font-size font-family color, UL LI DL DD DT; * 不可繼承的樣式：border padding margin width height ; -
CSS優(yōu)先級(jí)算法如何計(jì)算？
* 優(yōu)先級(jí)就近原則排吴，同權(quán)重情況下樣式定義最近者為準(zhǔn); * 載入樣式以最后載入的定位為準(zhǔn); 優(yōu)先級(jí)為: !important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級(jí)高 -
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> 元素。 :after 在元素之前添加內(nèi)容,也可以用來(lái)做清除浮動(dòng)扯键。 :before 在元素之后添加內(nèi)容 :enabled :disabled 控制表單控件的禁用狀態(tài)睦袖。 :checked 單選框或復(fù)選框被選中。 如何居中div荣刑？如何居中一個(gè)浮動(dòng)元素馅笙？如何讓絕對(duì)定位的div居中？
* 給div設(shè)置一個(gè)寬度厉亏，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
* 居中一個(gè)浮動(dòng)元素
確定容器的寬高 寬500 高 300 的層
設(shè)置層的外邊距
.div {
width:500px ; height:300px;//高度可以不設(shè)
margin: -150px 0 0 -250px;
position:relative; //相對(duì)定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
* 讓絕對(duì)定位的div居中
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
-
display有哪些值董习？說(shuō)明他們的作用。
block 象塊類型元素一樣顯示爱只。 none 缺省值皿淋。象行內(nèi)元素類型一樣顯示。 inline-block 象行內(nèi)元素一樣顯示恬试，但其內(nèi)容象塊類型元素一樣顯示蛹批。 list-item 象塊類型元素一樣顯示螟够，并添加樣式列表標(biāo)記矫夯。 table 此元素會(huì)作為塊級(jí)表格來(lái)顯示 inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值 -
position的值relative和absolute定位原點(diǎn)是决帖？
absolute 生成絕對(duì)定位的元素砸烦，相對(duì)于值不為 static的第一個(gè)父元素進(jìn)行定位频祝。 fixed （老IE不支持） 生成絕對(duì)定位的元素绍填，相對(duì)于瀏覽器窗口進(jìn)行定位喉镰。 relative 生成相對(duì)定位的元素乖阵，相對(duì)于其正常位置進(jìn)行定位宣赔。 static 默認(rèn)值。沒(méi)有定位瞪浸，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）儒将。 inherit 規(guī)定從父元素繼承 position 屬性的值。 -
CSS3有哪些新特性对蒲？
新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點(diǎn)） 圓角 （border-radius:8px） 多列布局 （multi-column layout） 陰影和反射 （Shadow\Reflect） 文字特效 （text-shadow钩蚊、） 文字渲染 （Text-decoration） 線性漸變 （gradient） 旋轉(zhuǎn) （transform） 增加了旋轉(zhuǎn),縮放,定位,傾斜,動(dòng)畫(huà)，多背景 transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation: -
請(qǐng)解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場(chǎng)景蹈矮？
. -
用純CSS創(chuàng)建一個(gè)三角形的原理是什么砰逻？
把上、左泛鸟、右三條邊隱藏掉（顏色設(shè)為 transparent） #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } -
一個(gè)滿屏 品 字布局 如何設(shè)計(jì)?
簡(jiǎn)單的方式： 上面的div寬100%蝠咆， 下面的兩個(gè)div分別寬50%， 然后用float或者inline使其不換行即可 -
經(jīng)常遇到的瀏覽器的兼容性有哪些？原因刚操，解決方法是什么闸翅，常用hack的技巧 ？
* png24位的圖片在iE6瀏覽器上出現(xiàn)背景菊霜，解決方案是做成PNG8. * 瀏覽器默認(rèn)的margin和padding不同坚冀。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。 * IE6雙邊距bug:塊屬性標(biāo)簽float后鉴逞，又有橫行的margin情況下记某，在ie6顯示margin比設(shè)置的大。 浮動(dòng)ie產(chǎn)生的雙倍距離 #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游覽器從所有情況中分離出來(lái)捂蕴。 接著譬涡，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)啥辨，這樣IE8已經(jīng)獨(dú)立識(shí)別涡匀。 css .bb{ background-color:#f1ee18;/*所有識(shí)別*/ .background-color:#00deff\9; /*IE6、7溉知、8識(shí)別*/ +background-color:#a200ff;/*IE6陨瘩、7識(shí)別*/ _background-color:#1e0bd1;/*IE6識(shí)別*/ } * IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性。 解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性级乍。 * IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性; Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性舌劳。 * 解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。 * Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決玫荣。 超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} -
li與li之間有看不見(jiàn)的空白間隔是什么原因引起的甚淡？有什么解決辦法？
行框的排列會(huì)受到中間空白（回車\空格）等的影響捅厂，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式贯卦，占據(jù)空間，所以會(huì)有間隔焙贷，把字符大小設(shè)為0撵割，就沒(méi)有空格了。 -
為什么要初始化CSS樣式盈厘。
- 因?yàn)闉g覽器的兼容問(wèn)題睁枕，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。 - 當(dāng)然外遇，初始化樣式會(huì)對(duì)SEO有一定的影響注簿，但魚(yú)和熊掌不可兼得，但力求影響最小的情況下初始化跳仿。 最簡(jiǎn)單的初始化方法： * {padding: 0; margin: 0;} （強(qiáng)烈不建議） 淘寶的樣式初始化代碼： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } -
absolute的containing block(容器塊)計(jì)算方式跟正常流有什么不同诡渴？
無(wú)論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素菲语，然后再判斷： 1妄辩、若此元素為 inline 元素，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形山上； 2眼耀、否則,則由這個(gè)祖先元素的 padding box 構(gòu)成。 如果都找不到佩憾，則為 initial containing block哮伟。 補(bǔ)充： 1. static(默認(rèn)的)/relative：簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框（即去掉padding的部分） 2. absolute: 向上找最近的定位為absolute/relative的元素 3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block CSS里的visibility屬性有個(gè)collapse屬性值是干嘛用的妄帘？在不同瀏覽器下以后什么區(qū)別楞黄？
position跟display、margin collapse抡驼、overflow鬼廓、float這些特性相互疊加后會(huì)怎么樣？
-
對(duì)BFC規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解致盟？
（W3C CSS 2.1 規(guī)范中的一個(gè)概念,它是一個(gè)獨(dú)立容器碎税，決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用。） 一個(gè)頁(yè)面是由很多個(gè) Box 組成的,元素的類型和 display 屬性,決定了這個(gè) Box 的類型馏锡。 不同類型的 Box,會(huì)參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會(huì)以不同的方式渲染,也就是說(shuō)BFC內(nèi)部的元素和外部的元素不會(huì)互相影響蚣录。 -
css定義的權(quán)重
以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10眷篇，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值： /*權(quán)重為1*/ div{ } /*權(quán)重為10*/ .class1{ } /*權(quán)重為100*/ #id1{ } /*權(quán)重為100+1=101*/ #id1 div{ } /*權(quán)重為10+1=11*/ .class1 div{ } /*權(quán)重為10+10+1=21*/ .class1 .class2 div{ } 如果權(quán)重相同荔泳，則最后定義的樣式會(huì)起作用蕉饼，但是應(yīng)該避免這種情況出現(xiàn) 請(qǐng)解釋一下為什么會(huì)出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)的方式
- 移動(dòng)端的布局用過(guò)媒體查詢嗎玛歌？
-
使用 CSS 預(yù)處理器嗎昧港？喜歡那個(gè)？
SASS (SASS支子、LESS沒(méi)有本質(zhì)區(qū)別创肥，只因?yàn)閳F(tuán)隊(duì)前端都是用的SASS) CSS優(yōu)化、提高性能的方法有哪些？
瀏覽器是怎樣解析CSS選擇器的叹侄？
在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體巩搏？為什么呢？
margin和padding分別適合什么場(chǎng)景使用趾代？
抽離樣式模塊怎么寫(xiě)贯底，說(shuō)出思路，有無(wú)實(shí)踐經(jīng)驗(yàn)撒强？[阿里航旅的面試題]
元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎禽捆？
全屏滾動(dòng)的原理是什么？用到了CSS的那些屬性飘哨？
什么是響應(yīng)式設(shè)計(jì)胚想？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE芽隆？
視差滾動(dòng)效果浊服，如何給每頁(yè)做不同的動(dòng)畫(huà)？（回到頂部摆马，向下滑動(dòng)要再次出現(xiàn)臼闻，和只出現(xiàn)一次分別怎么做？）
::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別囤采？解釋一下這2個(gè)偽元素的作用述呐。
如何修改chrome記住密碼后自動(dòng)填充表單的黃色背景 ？
你對(duì)line-height是如何理解的蕉毯？
設(shè)置元素浮動(dòng)后乓搬，該元素的display值是多少？（自動(dòng)變成display:block）
怎么讓Chrome支持小于12px 的文字代虾？
讓頁(yè)面里的字體變清晰进肯，變細(xì)用CSS怎么做？（-webkit-font-smoothing: antialiased;）
font-style屬性可以讓它賦值為“oblique” oblique是什么意思棉磨？
position:fixed;在android下無(wú)效怎么處理江掩？
-
如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久乘瓤，為什么环形？（阿里）
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次衙傀，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms -
display:inline-block 什么時(shí)候會(huì)顯示間隙抬吟？(攜程)
移除空格、使用margin負(fù)值统抬、使用font-size:0危队、letter-spacing叔锐、word-spacing overflow: scroll時(shí)不能平滑滾動(dòng)的問(wèn)題怎么處理？
有一個(gè)高度自適應(yīng)的div秉扑，里面有兩個(gè)div踱承，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度泌豆。
png俱病、jpg袱结、gif 這些圖片格式解釋一下亮隙，分別什么時(shí)候用。有沒(méi)有了解過(guò)webp垢夹？
-
什么是Cookie 隔離溢吻？（或者說(shuō)：請(qǐng)求資源的時(shí)候不要讓它帶cookie怎么做）
如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請(qǐng)求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的棚饵，非常浪費(fèi)流量煤裙， 所以不如隔離開(kāi)。 因?yàn)閏ookie有域的限制噪漾，因此不能跨域提交請(qǐng)求硼砰，故使用非主要域名的時(shí)候，請(qǐng)求頭中就不會(huì)帶有cookie數(shù)據(jù)欣硼， 這樣可以降低請(qǐng)求頭的大小题翰，降低請(qǐng)求時(shí)間，從而達(dá)到降低整體請(qǐng)求延時(shí)的目的诈胜。 同時(shí)這種方式不會(huì)將cookie傳入Web Server豹障，也減少了Web Server對(duì)cookie的處理分析環(huán)節(jié)， 提高了webserver的http請(qǐng)求的解析速度焦匈。 style標(biāo)簽寫(xiě)在body后與body前有什么區(qū)別血公？
-
什么是CSS 預(yù)處理器 / 后處理器？
- 預(yù)處理器例如：LESS缓熟、Sass累魔、Stylus摔笤，用來(lái)預(yù)編譯Sass或less，增強(qiáng)了css代碼的復(fù)用性垦写， 還有層級(jí)吕世、mixin、變量梯投、循環(huán)命辖、函數(shù)等，具有很方便的UI組件模塊化開(kāi)發(fā)能力分蓖，極大的提高工作效率尔艇。 - 后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS咆疗，讓其更有效漓帚；目前最常做的 是給CSS屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問(wèn)題午磁。
<a name='js'>JavaScript</a>
-
介紹js的基本數(shù)據(jù)類型尝抖。
Undefined、Null迅皇、Boolean昧辽、Number、String -
介紹js有哪些內(nèi)置對(duì)象登颓？
Object 是 JavaScript 中所有對(duì)象的父對(duì)象 數(shù)據(jù)封裝類對(duì)象：Object搅荞、Array、Boolean框咙、Number 和 String 其他對(duì)象：Function咕痛、Arguments、Math喇嘱、Date茉贡、RegExp、Error -
說(shuō)幾條寫(xiě)JavaScript的基本規(guī)范者铜？
1.不要在同一行聲明多個(gè)變量腔丧。 2.請(qǐng)使用 ===/!==來(lái)比較true/false或者數(shù)值 3.使用對(duì)象字面量替代new Array這種形式 4.不要使用全局函數(shù)。 5.Switch語(yǔ)句必須帶有default分支 6.函數(shù)不應(yīng)該有時(shí)候有返回值作烟，有時(shí)候沒(méi)有返回值愉粤。 7.For循環(huán)必須使用大括號(hào) 8.If語(yǔ)句必須使用大括號(hào) 9.for-in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域，從而避免作用域污染拿撩。 -
JavaScript原型衣厘，原型鏈 ? 有什么特點(diǎn)？
每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性压恒，就是prototype(原型)头滔，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性時(shí)怖亭， 如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去prototype里找這個(gè)屬性坤检，這個(gè)prototype又會(huì)有自己的prototype， 于是就這樣一直找下去期吓，也就是我們平時(shí)所說(shuō)的原型鏈的概念早歇。 關(guān)系：instance.constructor.prototype = instance.__proto__ 特點(diǎn)： JavaScript對(duì)象是通過(guò)引用來(lái)傳遞的，我們創(chuàng)建的每個(gè)新對(duì)象實(shí)體中并沒(méi)有一份屬于自己的原型副本讨勤。當(dāng)我們修改原型時(shí)箭跳，與之相關(guān)的對(duì)象也會(huì)繼承這一改變。 當(dāng)我們需要一個(gè)屬性的時(shí)潭千，Javascript引擎會(huì)先看當(dāng)前對(duì)象中是否有這個(gè)屬性谱姓， 如果沒(méi)有的話， 就會(huì)查找他的Prototype對(duì)象是否有這個(gè)屬性刨晴，如此遞推下去屉来，一直檢索到 Object 內(nèi)建對(duì)象。 function Func(){} Func.prototype.name = "Sean"; Func.prototype.getInfo = function() { return this.name; } var person = new Func();//現(xiàn)在可以參考var person = Object.create(oldObject); console.log(person.getInfo());//它擁有了Func的屬性和方法 //"Sean" console.log(Func.prototype); // Func { name="Sean", getInfo=function()} -
JavaScript有幾種類型的值狈癞？茄靠，你能畫(huà)一下他們的內(nèi)存圖嗎？
棧：原始數(shù)據(jù)類型（Undefined蝶桶，Null慨绳，Boolean，Number真竖、String） 堆：引用數(shù)據(jù)類型（對(duì)象脐雪、數(shù)組和函數(shù)） 兩種類型的區(qū)別是：存儲(chǔ)位置不同； 原始數(shù)據(jù)類型直接存儲(chǔ)在棧(stack)中的簡(jiǎn)單數(shù)據(jù)段恢共，占據(jù)空間小战秋、大小固定，屬于被頻繁使用數(shù)據(jù)旁振，所以放入棧中存儲(chǔ)获询； 引用數(shù)據(jù)類型存儲(chǔ)在堆(heap)中的對(duì)象,占據(jù)空間大、大小不固定,如果存儲(chǔ)在棧中拐袜，將會(huì)影響程序運(yùn)行的性能吉嚣；引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針，該指針指向堆中該實(shí)體的起始地址蹬铺。當(dāng)解釋器尋找引用值時(shí)尝哆，會(huì)首先檢索其 在棧中的地址，取得地址后從堆中獲得實(shí)體Stated Clearly Image
-
Javascript如何實(shí)現(xiàn)繼承甜攀？
1秋泄、構(gòu)造繼承 2琐馆、原型繼承 3、實(shí)例繼承 4恒序、拷貝繼承 原型prototype機(jī)制或apply和call方法去實(shí)現(xiàn)較簡(jiǎn)單瘦麸，建議使用構(gòu)造函數(shù)與原型混合方式。 function Parent(){ this.name = 'wang'; } function Child(){ this.age = 28; } Child.prototype = new Parent();//繼承了Parent歧胁，通過(guò)原型 var demo = new Child(); alert(demo.age); alert(demo.name);//得到被繼承的屬性 } -
JavaScript繼承的幾種實(shí)現(xiàn)方式滋饲？
-
javascript創(chuàng)建對(duì)象的幾種方式屠缭？
javascript創(chuàng)建對(duì)象簡(jiǎn)單的說(shuō),無(wú)非就是使用內(nèi)置對(duì)象或各種自定義對(duì)象，當(dāng)然還可以用JSON崭参；但寫(xiě)法有很多種呵曹，也能混合使用。 1何暮、對(duì)象字面量的方式 person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"}; 2奄喂、用function來(lái)模擬無(wú)參的構(gòu)造函數(shù) function Person(){} var person=new Person();//定義一個(gè)function，如果使用new"實(shí)例化",該function可以看作是一個(gè)Class person.name="Mark"; person.age="25"; person.work=function(){ alert(person.name+" hello..."); } person.work(); 3郭卫、用function來(lái)模擬參構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)（用this關(guān)鍵字定義構(gòu)造的上下文屬性） function Pet(name,age,hobby){ this.name=name;//this作用域：當(dāng)前對(duì)象 this.age=age; this.hobby=hobby; this.eat=function(){ alert("我叫"+this.name+",我喜歡"+this.hobby+",是個(gè)程序員"); } } var maidou =new Pet("麥兜",25,"coding");//實(shí)例化砍聊、創(chuàng)建對(duì)象 maidou.eat();//調(diào)用eat方法 4、用工廠方式來(lái)創(chuàng)建（內(nèi)置對(duì)象） var wcDog =new Object(); wcDog.name="旺財(cái)"; wcDog.age=3; wcDog.work=function(){ alert("我是"+wcDog.name+",汪汪汪......"); } wcDog.work(); 5贰军、用原型方式來(lái)創(chuàng)建 function Dog(){ } Dog.prototype.name="旺財(cái)"; Dog.prototype.eat=function(){ alert(this.name+"是個(gè)吃貨"); } var wangcai =new Dog(); wangcai.eat(); 5玻蝌、用混合方式來(lái)創(chuàng)建 function Car(name,price){ this.name=name; this.price=price; } Car.prototype.sell=function(){ alert("我是"+this.name+"，我現(xiàn)在賣"+this.price+"萬(wàn)元"); } var camry =new Car("凱美瑞",27); camry.sell(); -
Javascript作用鏈域?
全局函數(shù)無(wú)法查看局部函數(shù)的內(nèi)部細(xì)節(jié)词疼，但局部函數(shù)可以查看其上層的函數(shù)細(xì)節(jié)俯树，直至全局細(xì)節(jié)。 當(dāng)需要從局部函數(shù)查找某一屬性或方法時(shí)贰盗，如果當(dāng)前作用域沒(méi)有找到许饿，就會(huì)上溯到上層作用域查找， 直至全局函數(shù)舵盈，這種組織形式就是作用域鏈陋率。 談?wù)凾his對(duì)象的理解。
this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）秽晚；
如果有new關(guān)鍵字瓦糟，this指向new出來(lái)的那個(gè)對(duì)象；
在事件中赴蝇，this指向觸發(fā)這個(gè)事件的對(duì)象菩浙，特殊的是，IE中的attachEvent中的this總是指向全局對(duì)象Window；
-
eval是做什么的劲蜻？
它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行陆淀； 應(yīng)該避免使用eval，不安全先嬉，非常耗性能（2次轧苫，一次解析成js語(yǔ)句，一次執(zhí)行）疫蔓。 由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval浸剩，var obj =eval('('+ str +')'); 什么是window對(duì)象? 什么是document對(duì)象?
-
null，undefined 的區(qū)別鳄袍？
null 表示一個(gè)對(duì)象被定義了，值為“空值”吏恭； undefined 表示不存在這個(gè)值拗小。 typeof undefined //"undefined" undefined :是一個(gè)表示"無(wú)"的原始值或者說(shuō)表示"缺少值"，就是此處應(yīng)該有一個(gè)值樱哼，但是還沒(méi)有定義哀九。當(dāng)嘗試讀取時(shí)會(huì)返回 undefined； 例如變量被聲明了搅幅，但沒(méi)有賦值時(shí)阅束，就等于undefined typeof null //"object" null : 是一個(gè)對(duì)象(空對(duì)象, 沒(méi)有任何屬性和方法)； 例如作為函數(shù)的參數(shù)茄唐，表示該函數(shù)的參數(shù)不是對(duì)象息裸； 注意： 在驗(yàn)證null時(shí)，一定要使用 === 沪编，因?yàn)?== 無(wú)法分別 null 和 undefined 再來(lái)一個(gè)例子： null Q：有張三這個(gè)人么呼盆？ A：有！ Q：張三有房子么蚁廓？ A：沒(méi)有访圃！ undefined Q：有張三這個(gè)人么？ A：沒(méi)有相嵌！
-
寫(xiě)一個(gè)通用的事件偵聽(tīng)器函數(shù)腿时。
// event(事件)工具集，來(lái)源：github.com/markyun markyun.Event = { // 頁(yè)面加載完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = function() { oldonload(); fn(); }; } }, // 視能力分別使用dom0||dom2||IE方式 來(lái)綁定事件 // 參數(shù)： 操作的元素,事件名稱 ,事件處理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件類型饭宾、需要執(zhí)行的函數(shù)批糟、是否捕捉 element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + type, function() { handler.call(element); }); } else { element['on' + type] = handler; } }, // 移除事件 removeEvent : function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.datachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } }, // 阻止事件 (主要是事件冒泡，因?yàn)镮E不支持事件捕獲) stopPropagation : function(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, // 取消事件的默認(rèn)行為 preventDefault : function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 獲取事件目標(biāo) getTarget : function(event) { return event.target || event.srcElement; }, // 獲取event對(duì)象的引用捏雌，取到事件的所有信息跃赚，確保隨時(shí)能使用event； getEvent : function(e) { var ev = e || window.event; if (!ev) { var c = this.getEvent.caller; while (c) { ev = c.arguments[0]; if (ev && Event == ev.constructor) { break; } c = c.caller; } } return ev; } }; -
["1", "2", "3"].map(parseInt) 答案是多少？
[1, NaN, NaN] 因?yàn)?parseInt 需要兩個(gè)參數(shù) (val, radix)纬傲， 其中 radix 表示解析時(shí)用的基數(shù)满败。 map 傳了 3 個(gè) (element, index, array)，對(duì)應(yīng)的 radix 不合法導(dǎo)致解析失敗叹括。 -
事件是算墨？IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡汁雷？
1. 我們?cè)诰W(wǎng)頁(yè)中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）净嘀。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為侠讯。 2. 事件處理機(jī)制：IE是事件冒泡挖藏、Firefox同時(shí)支持兩種事件模型，也就是：捕獲型事件和冒泡型事件厢漩； 3. ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;） -
什么是閉包（closure）膜眠，為什么要用它？
閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中變量的函數(shù)溜嗜，創(chuàng)建閉包的最常見(jiàn)的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)宵膨，通過(guò)另一個(gè)函數(shù)訪問(wèn)這個(gè)函數(shù)的局部變量,利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部炸宵。 閉包的特性： 1.函數(shù)內(nèi)再嵌套函數(shù) 2.內(nèi)部函數(shù)可以引用外層的參數(shù)和變量 3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收 //li節(jié)點(diǎn)的onclick事件都能正確的彈出當(dāng)前被點(diǎn)擊的li索引 <ul id="testUL"> <li> index = 0</li> <li> index = 1</li> <li> index = 2</li> <li> index = 3</li> </ul> <script type="text/javascript"> var nodes = document.getElementsByTagName("li"); for(i = 0;i<nodes.length;i+= 1){ nodes[i].onclick = function(){ console.log(i+1);//不用閉包的話辟躏，值每次都是4 }(i); } </script> 執(zhí)行say667()后,say667()閉包內(nèi)部變量會(huì)存在,而閉包內(nèi)部函數(shù)的內(nèi)部變量不會(huì)存在 使得Javascript的垃圾回收機(jī)制GC不會(huì)收回say667()所占用的資源 因?yàn)閟ay667()的內(nèi)部函數(shù)的執(zhí)行需要依賴say667()中的變量 這是對(duì)閉包作用的非常直白的描述 function say667() { // Local variable that ends up within closure var num = 666; var sayAlert = function() { alert(num); } num++; return sayAlert; } var sayAlert = say667(); sayAlert()//執(zhí)行結(jié)果應(yīng)該彈出的667 -
javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么？
use strict是一種ECMAscript 5 添加的（嚴(yán)格）運(yùn)行模式,這種模式使得 Javascript 在更嚴(yán)格的條件下運(yùn)行, 使JS編碼更加規(guī)范化的模式,消除Javascript語(yǔ)法的一些不合理土全、不嚴(yán)謹(jǐn)之處捎琐，減少一些怪異行為。 默認(rèn)支持的糟糕特性都會(huì)被禁用涯曲，比如不能用with野哭，也不能在意外的情況下給全局變量賦值; 全局變量的顯示聲明,函數(shù)必須聲明在頂層，不允許在非函數(shù)代碼塊內(nèi)聲明函數(shù),arguments.callee也不允許使用幻件； 消除代碼運(yùn)行的一些不安全之處拨黔，保證代碼運(yùn)行的安全,限制函數(shù)中的arguments修改，嚴(yán)格模式下的eval函數(shù)的行為和非嚴(yán)格模式的也不相同; 提高編譯器效率绰沥，增加運(yùn)行速度篱蝇； 為未來(lái)新版本的Javascript標(biāo)準(zhǔn)化做鋪墊。 -
如何判斷一個(gè)對(duì)象是否屬于某個(gè)類徽曲？
使用instanceof （待完善） if(a instanceof Person){ alert('yes'); } -
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); 用原生JavaScript的實(shí)現(xiàn)過(guò)什么功能嗎撤嫩？
-
Javascript中偎捎，有一個(gè)函數(shù)，執(zhí)行時(shí)對(duì)象查找時(shí)序攘，永遠(yuǎn)不會(huì)去查找原型茴她，這個(gè)函數(shù)是？
hasOwnProperty javaScript中hasOwnProperty函數(shù)方法是返回一個(gè)布爾值程奠，指出一個(gè)對(duì)象是否具有指定名稱的屬性丈牢。此方法無(wú)法檢查該對(duì)象的原型鏈中是否具有該屬性；該屬性必須是對(duì)象本身的一個(gè)成員瞄沙。 使用方法： object.hasOwnProperty(proName) 其中參數(shù)object是必選項(xiàng)赡麦。一個(gè)對(duì)象的實(shí)例。 proName是必選項(xiàng)。一個(gè)屬性名稱的字符串值。 如果 object 具有指定名稱的屬性卡睦，那么JavaScript中hasOwnProperty函數(shù)方法返回 true爬泥，反之則返回 false。 -
JSON 的了解扒接？
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式伪货。 它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫(xiě), 占用帶寬小 如：{"age":"12", "name":"back"} JSON字符串轉(zhuǎn)換為JSON對(duì)象: var obj =eval('('+ str +')'); var obj = str.parseJSON(); var obj = JSON.parse(str); JSON對(duì)象轉(zhuǎn)換為JSON字符串： var last=obj.toJSONString(); var last=JSON.stringify(obj); [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})能解釋一下這段代碼的意思嗎钾怔？
-
js延遲加載的方式有哪些碱呼？
defer和async、動(dòng)態(tài)創(chuàng)建DOM方式（用得最多）宗侦、按需異步載入js -
Ajax 是什么? 如何創(chuàng)建一個(gè)Ajax愚臀？
ajax的全稱：Asynchronous Javascript And XML。 異步傳輸+js+xml矾利。 所謂異步姑裂，在這里簡(jiǎn)單地解釋就是：向服務(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)局部刷新 -
同步和異步的區(qū)別?
同步的概念應(yīng)該是來(lái)自于OS中關(guān)于同步的概念:不同進(jìn)程為協(xié)同完成某項(xiàng)工作而在先后次序上調(diào)整(通過(guò)阻塞,喚醒等方式).同步強(qiáng)調(diào)的是順序性.誰(shuí)先誰(shuí)后.異步則不存在這種順序性.
同步：瀏覽器訪問(wèn)服務(wù)器請(qǐng)求矾缓，用戶看得到頁(yè)面刷新怀酷，重新發(fā)請(qǐng)求,等請(qǐng)求完，頁(yè)面刷新而账，新內(nèi)容出現(xiàn)胰坟，用戶看到新內(nèi)容,進(jìn)行下一步操作。
異步：瀏覽器訪問(wèn)服務(wù)器請(qǐng)求泞辐，用戶正常操作笔横，瀏覽器后端進(jìn)行請(qǐng)求。等請(qǐng)求完咐吼，頁(yè)面不刷新吹缔，新內(nèi)容也會(huì)出現(xiàn)，用戶看到新內(nèi)容锯茄。
（待完善）
-
如何解決跨域問(wèn)題?
jsonp厢塘、 iframe、window.name肌幽、window.postMessage晚碾、服務(wù)器上設(shè)置代理頁(yè)面 頁(yè)面編碼和被請(qǐng)求的資源編碼如果不一致如何處理？
-
模塊化開(kāi)發(fā)怎么做喂急？
立即執(zhí)行函數(shù),不暴露私有成員
var module1 = (function(){ var _count = 0; var m1 = function(){ //... }; var m2 = function(){ //... }; return { m1 : m1, m2 : m2 }; })();（待完善）
-
AMD（Modules/Asynchronous-Definition）格嘁、CMD（Common Module Definition）規(guī)范區(qū)別？
AMD 規(guī)范在這里：https://github.com/amdjs/amdjs-api/wiki/AMD
CMD 規(guī)范在這里：https://github.com/seajs/seajs/issues/242
Asynchronous Module Definition廊移，異步模塊定義糕簿，所有的模塊將被異步加載，模塊加載不影響后面語(yǔ)句運(yùn)行狡孔。所有依賴某些模塊的語(yǔ)句均放置在回調(diào)函數(shù)中懂诗。 區(qū)別： 1. 對(duì)于依賴的模塊，AMD 是提前執(zhí)行苗膝，CMD 是延遲執(zhí)行殃恒。不過(guò) RequireJS 從 2.0 開(kāi)始，也改成可以延遲執(zhí)行（根據(jù)寫(xiě)法不同辱揭，處理方式不同）芋类。CMD 推崇 as lazy as possible. 2. CMD 推崇依賴就近，AMD 推崇依賴前置界阁『罘保看代碼： // CMD define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此處略去 100 行 var b = require('./b') // 依賴可以就近書(shū)寫(xiě) b.doSomething() // ... }) // AMD 默認(rèn)推薦 define(['./a', './b'], function(a, b) { // 依賴必須一開(kāi)始就寫(xiě)好 a.doSomething() // 此處略去 100 行 b.doSomething() // ... }) requireJS的核心原理是什么？（如何動(dòng)態(tài)加載的泡躯？如何避免多次加載的贮竟？如何
緩存的丽焊？）談一談你對(duì)ECMAScript6的了解？
ECMAScript6 怎么寫(xiě)class么咕别，為什么會(huì)出現(xiàn)class這種東西?
-
異步加載JS的方式有哪些技健？
(1) defer，只支持IE (2) async： (3) 創(chuàng)建script惰拱，插入到DOM中雌贱，加載完畢后callBack -
documen.write和 innerHTML的區(qū)別
document.write只能重繪整個(gè)頁(yè)面 innerHTML可以重繪頁(yè)面的一部分 -
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() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn) （3）查找 getElementsByTagName() //通過(guò)標(biāo)簽名稱 getElementsByName() //通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)勾怒，會(huì)得到一個(gè)數(shù)組婆排，其中包括id等于name值的) getElementById() //通過(guò)元素Id，唯一性 .call() 和 .apply() 的區(qū)別笔链？
例子中用 add 來(lái)替換 sub段只，add.call(sub,3,1) == add(3,1) ，所以運(yùn)行結(jié)果為：alert(4);
注意：js 中的函數(shù)其實(shí)是對(duì)象鉴扫，函數(shù)名是對(duì) Function 對(duì)象的引用翼悴。
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
數(shù)組和對(duì)象有哪些原生方法，列舉一下幔妨？
JS 怎么實(shí)現(xiàn)一個(gè)類。怎么實(shí)例化這個(gè)類
JavaScript中的作用域與變量聲明提升谍椅？
如何編寫(xiě)高性能的Javascript误堡？
那些操作會(huì)造成內(nèi)存泄漏？
JQuery的源碼看過(guò)嗎雏吭？能不能簡(jiǎn)單概況一下它的實(shí)現(xiàn)原理锁施？
jQuery.fn的init方法返回的this指的是什么對(duì)象？為什么要返回this杖们？
jquery中如何將數(shù)組轉(zhuǎn)化為json字符串悉抵，然后再轉(zhuǎn)化回來(lái)？
jQuery 的屬性拷貝(extend)的實(shí)現(xiàn)原理是什么摘完，如何實(shí)現(xiàn)深拷貝姥饰？
jquery.extend 與 jquery.fn.extend的區(qū)別？
jQuery 的隊(duì)列是如何實(shí)現(xiàn)的孝治？隊(duì)列可以用在哪些地方列粪？
談一下Jquery中的bind(),live(),delegate(),on()的區(qū)別审磁？
JQuery一個(gè)對(duì)象可以同時(shí)綁定多個(gè)事件，這是如何實(shí)現(xiàn)的岂座？
是否知道自定義事件态蒂。jQuery里的fire函數(shù)是什么意思，什么時(shí)候用费什？
jQuery 是通過(guò)哪個(gè)方法和 Sizzle 選擇器結(jié)合的钾恢？（jQuery.fn.find()進(jìn)入Sizzle）
針對(duì) jQuery性能的優(yōu)化方法？
Jquery與jQuery UI 有啥區(qū)別鸳址？
*jQuery是一個(gè)js庫(kù)瘩蚪，主要提供的功能是選擇器，屬性修改和事件綁定等等氯质。
*jQuery UI則是在jQuery的基礎(chǔ)上募舟，利用jQuery的擴(kuò)展性，設(shè)計(jì)的插件闻察。
提供了一些常用的界面元素拱礁，諸如對(duì)話框、拖動(dòng)行為辕漂、改變大小行為等等
JQuery的源碼看過(guò)嗎呢灶？能不能簡(jiǎn)單說(shuō)一下它的實(shí)現(xiàn)原理？
jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串钉嘹，然后再轉(zhuǎn)化回來(lái)鸯乃？
jQuery中沒(méi)有提供這個(gè)功能，所以你需要先編寫(xiě)兩個(gè)jQuery的擴(kuò)展：
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}
然后調(diào)用：
$("").stringifyArray(array)
jQuery和Zepto的區(qū)別跋涣？各自的使用場(chǎng)景缨睡？
-
針對(duì) jQuery 的優(yōu)化方法？
*基于Class的選擇性的性能相對(duì)于Id選擇器開(kāi)銷很大陈辱，因?yàn)樾璞闅v所有DOM元素奖年。 *頻繁操作的DOM，先緩存起來(lái)再操作沛贪。用Jquery的鏈?zhǔn)秸{(diào)用更好陋守。 比如：var str=$("a").attr("href"); *for (var i = size; i < arr.length; i++) {} for 循環(huán)每一次循環(huán)都查找了數(shù)組 (arr) 的.length 屬性，在開(kāi)始循環(huán)的時(shí)候設(shè)置一個(gè)變量來(lái)存儲(chǔ)這個(gè)數(shù)字利赋，可以讓循環(huán)跑得更快： for (var i = size, length = arr.length; i < length; i++) {} Zepto的點(diǎn)透問(wèn)題如何解決水评？
jQueryUI如何自定義組件?
需求：實(shí)現(xiàn)一個(gè)頁(yè)面操作不會(huì)整頁(yè)刷新的網(wǎng)站，并且能在瀏覽器前進(jìn)媚送、后退時(shí)正確響應(yīng)中燥。給出你的技術(shù)實(shí)現(xiàn)方案？
-
如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中塘偎？（阿里）
通過(guò)判斷Global對(duì)象是否為window褪那，如果不為window幽纷，當(dāng)前腳本沒(méi)有運(yùn)行在瀏覽器中 移動(dòng)端最小觸控區(qū)域是多大？
jQuery 的 slideUp動(dòng)畫(huà) 博敬，如果目標(biāo)元素是被外部事件驅(qū)動(dòng), 當(dāng)鼠標(biāo)快速地連續(xù)觸發(fā)外部元素事件, 動(dòng)畫(huà)會(huì)滯后的反復(fù)執(zhí)行友浸，該如何處理呢?
把 Script 標(biāo)簽 放在頁(yè)面的最底部的body封閉之前 和封閉之后有什么區(qū)別？瀏覽器會(huì)如何解析它們偏窝？
移動(dòng)端的點(diǎn)擊事件的有延遲收恢，時(shí)間是多久，為什么會(huì)有祭往？ 怎么解決這個(gè)延時(shí)伦意？（click 有 300ms 延遲,為了實(shí)現(xiàn)safari的雙擊事件的設(shè)計(jì)，瀏覽器要知道你是不是要雙擊操作硼补。）
知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能講出他們各自的優(yōu)點(diǎn)和缺點(diǎn)么?
Underscore 對(duì)哪些 JS 原生對(duì)象進(jìn)行了擴(kuò)展以及提供了哪些好用的函數(shù)方法驮肉？
解釋JavaScript中的作用域與變量聲明提升？
-
那些操作會(huì)造成內(nèi)存泄漏已骇？
內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在离钝。 垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量褪储。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒(méi)有其他對(duì)象引用過(guò)該對(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)） JQuery一個(gè)對(duì)象可以同時(shí)綁定多個(gè)事件吱肌，這是如何實(shí)現(xiàn)的痘拆？
Node.js的適用場(chǎng)景？
(如果會(huì)用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
解釋一下 Backbone 的 MVC 實(shí)現(xiàn)方式岩榆？
什么是“前端路由”?什么時(shí)候適合使用“前端路由”? “前端路由”有哪些優(yōu)點(diǎn)和缺點(diǎn)?
知道什么是webkit么? 知道怎么用瀏覽器的各種工具來(lái)調(diào)試和debug代碼么?
如何測(cè)試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎么測(cè)試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
簡(jiǎn)述一下 Handlebars 的基本用法？
簡(jiǎn)述一下 Handlerbars 的對(duì)模板的基本處理流程坟瓢， 如何編譯的勇边？如何緩存的？
-
用js實(shí)現(xiàn)千位分隔符?(來(lái)源：前端農(nóng)民工折联，提示：正則+replace)
function commafy(num) { num = num + ''; var reg = /(-?d+)(d{3})/; if(reg.test(num)){ num = num.replace(reg, '$1,$2'); } return num; } -
檢測(cè)瀏覽器版本版本有哪些方式粒褒？
功能檢測(cè)、userAgent特征檢測(cè) 比如：navigator.userAgent //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36" -
What is a Polyfill?
polyfill 是“在舊版瀏覽器上復(fù)制標(biāo)準(zhǔn) API 的 JavaScript 補(bǔ)充”,可以動(dòng)態(tài)地加載 JavaScript 代碼或庫(kù)诚镰，在不支持這些標(biāo)準(zhǔn) API 的瀏覽器中模擬它們奕坟。 例如祥款，geolocation（地理位置）polyfill 可以在 navigator 對(duì)象上添加全局的 geolocation 對(duì)象，還能添加 getCurrentPosition 函數(shù)以及“坐標(biāo)”回調(diào)對(duì)象月杉， 所有這些都是 W3C 地理位置 API 定義的對(duì)象和函數(shù)刃跛。因?yàn)?polyfill 模擬標(biāo)準(zhǔn) API，所以能夠以一種面向所有瀏覽器未來(lái)的方式針對(duì)這些 API 進(jìn)行開(kāi)發(fā)苛萎， 一旦對(duì)這些 API 的支持變成絕對(duì)大多數(shù)桨昙，則可以方便地去掉 polyfill，無(wú)需做任何額外工作腌歉。 -
做的項(xiàng)目中蛙酪，有沒(méi)有用過(guò)或自己實(shí)現(xiàn)一些 polyfill 方案（兼容性處理方案）？
比如： html5shiv翘盖、Geolocation桂塞、Placeholder 我們給一個(gè)dom同時(shí)綁定兩個(gè)點(diǎn)擊事件，一個(gè)用捕獲馍驯，一個(gè)用冒泡阁危。會(huì)執(zhí)行幾次事件，會(huì)先執(zhí)行冒泡還是捕獲泥彤？
<a name='other'>ECMAScript6 相關(guān)</a>
-
Object.is() 與原來(lái)的比較操作符“ ===”、“ ==”的區(qū)別吟吝？
兩等號(hào)判等俗或，會(huì)在比較時(shí)進(jìn)行類型轉(zhuǎn)換臣镣； 三等號(hào)判等(判斷嚴(yán)格)，比較時(shí)不進(jìn)行隱式類型轉(zhuǎn)換,（類型不同則會(huì)返回false）智亮； Object.is 在三等號(hào)判等的基礎(chǔ)上特別處理了 NaN 忆某、-0 和 +0 ，保證 -0 和 +0 不再相同阔蛉， 但 Object.is(NaN, NaN) 會(huì)返回 true. Object.is 應(yīng)被認(rèn)為有其特殊的用途弃舒，而不能用它認(rèn)為它比其它的相等對(duì)比更寬松或嚴(yán)格。
<a name='other'>前端框架相關(guān)</a>
react-router 路由系統(tǒng)的實(shí)現(xiàn)原理状原？
React中如何解決第三方類庫(kù)的問(wèn)題?
<a name='other'>其他問(wèn)題</a>
原來(lái)公司工作流程是怎么樣的聋呢，如何與其他人協(xié)作的？如何夸部門(mén)合作的颠区？
你遇到過(guò)比較難的技術(shù)問(wèn)題是削锰？你是如何解決的？
設(shè)計(jì)模式 知道什么是singleton, factory, strategy, decrator么?
常使用的庫(kù)有哪些毕莱？常用的前端開(kāi)發(fā)工具器贩？開(kāi)發(fā)過(guò)什么應(yīng)用或組件？
-
頁(yè)面重構(gòu)怎么操作朋截？
網(wǎng)站重構(gòu)：在不改變外部行為的前提下蛹稍，簡(jiǎn)化結(jié)構(gòu)、添加可讀性部服，而在網(wǎng)站前端保持一致的行為唆姐。 也就是說(shuō)是在不改變UI的情況下，對(duì)網(wǎng)站進(jìn)行優(yōu)化廓八，在擴(kuò)展的同時(shí)保持一致的UI奉芦。 對(duì)于傳統(tǒng)的網(wǎng)站來(lái)說(shuō)重構(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ī)范編寫(xiě)代碼 設(shè)計(jì)可擴(kuò)展的API 代替舊有的框架剧蹂、語(yǔ)言(如VB) 增強(qiáng)用戶體驗(yàn) 通常來(lái)說(shuō)對(duì)于速度的優(yōu)化也包含在重構(gòu)中 壓縮JS声功、CSS、image等前端資源(通常是由服務(wù)器來(lái)解決) 程序的性能優(yōu)化(如數(shù)據(jù)讀寫(xiě)) 采用CDN來(lái)加速資源加載 對(duì)于JS DOM的優(yōu)化 HTTP服務(wù)器的文件緩存 列舉IE與其他瀏覽器不一樣的特性国夜？
1减噪、事件不同之處：
觸發(fā)事件的元素被認(rèn)為是目標(biāo)（target）短绸。而在 IE 中车吹，目標(biāo)包含在 event 對(duì)象的 srcElement 屬性筹裕；
獲取字符代碼、如果按鍵代表一個(gè)字符（shift窄驹、ctrl朝卒、alt除外），IE 的 keyCode 會(huì)返回字符代碼（Unicode）乐埠，DOM 中按鍵的代碼和字符是分離的抗斤，要獲取字符代碼，需要使用 charCode 屬性丈咐；
阻止某個(gè)事件的默認(rèn)行為瑞眼，IE 中阻止某個(gè)事件的默認(rèn)行為，必須將 returnValue 屬性設(shè)置為 false棵逊，Mozilla 中伤疙，需要調(diào)用 preventDefault() 方法；
停止事件冒泡辆影，IE 中阻止事件進(jìn)一步冒泡徒像，需要設(shè)置 cancelBubble 為 true，Mozzilla 中蛙讥，需要調(diào)用 stopPropagation()锯蛀；
