2014年最新web前端開(kāi)發(fā)面試題解析

1、6、盒模型外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8 以下版本的瀏覽器中的盒模型本文是一份非常不錯(cuò)的 2014 年 web 前端開(kāi)發(fā)工程師的面試題集錦，并附有參考答案，推 薦大家參考下。試題目錄：1.HTML 部分2.CSS 部分3.JavaScript 部分4.其他問(wèn)題 面試注意點(diǎn)：面試題目： 根據(jù)你的等級(jí)和職位變化，入門(mén)級(jí)到專(zhuān)家級(jí)：范圍f、深度f(wàn)、方向To題目類(lèi)型： 技術(shù)視野、項(xiàng)目細(xì)節(jié)、理論知識(shí)題，算法題，開(kāi)放性題，案例題。進(jìn)行追問(wèn)： 可以確保問(wèn)到你開(kāi)始不懂或面試官開(kāi)始不懂為止，這樣可以大大延展題目的區(qū)分度和深度，知道你的實(shí)際能力。因?yàn)檫@種關(guān)聯(lián)知識(shí)是長(zhǎng)時(shí)期的學(xué)習(xí)，絕對(duì)不是臨時(shí)記得住的?；卮饐?wèn)

2、題再棒，面試官（可能是你的直接領(lǐng)導(dǎo)面試），會(huì)考慮我要不要這個(gè)人做我的同事？ 所以態(tài)度很重要。（感覺(jué)更像是相親）資深的工程師能把 absolute 和 relative 弄混，這樣的人不要也罷，因?yàn)閳F(tuán)隊(duì)需要的你這個(gè)人 具有可以依靠的才能（靠譜）。試題大綱：HTML&CSS :對(duì) Web 標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS 基本功：布局、盒子模型、選擇器優(yōu)先級(jí)及使用、HTML5、CSS3、移動(dòng)端適應(yīng)JavaScript :數(shù)據(jù)類(lèi)型、面向?qū)ο?、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內(nèi)存泄漏、事件機(jī)制、異步裝載回調(diào)、模板引擎、Nodejs、JSON、aj

3、ax 等。其他：HTTP、安全、正則、優(yōu)化、重構(gòu)、響應(yīng)式、移動(dòng)端、團(tuán)隊(duì)協(xié)作、可維護(hù)、SEO、UED、架構(gòu)、職業(yè)生涯web 前端工程師知識(shí)點(diǎ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ū)分它們有何意義。7、塊級(jí)元素與行內(nèi)元素 一一怎么用 CSS 控制它們、以及如何合理的使用它們&am

4、p;浮動(dòng)元素一一怎么使用它們、它們有什么問(wèn)題以及怎么解決這些問(wèn)題。9、 HTML 與 XHTML 二者有什么區(qū)別，你覺(jué)得應(yīng)該使用哪一個(gè)并說(shuō)出理由。10、JSON 作用、用途、設(shè)計(jì)結(jié)構(gòu)。HTMLDoctype 作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義？（1）、聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知 瀏覽器的解析器，用什么文檔類(lèi)型規(guī)范來(lái)解析這個(gè)文檔。（2） 、嚴(yán)格模式的排版和 JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。（3）、在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的 行為以防止站點(diǎn)無(wú)法工作。（4）、DOCTYP 不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。行內(nèi)

5、元素有哪些？塊級(jí)元素有哪些？空（void）元素有那些？（1）CSS 規(guī)范規(guī)定，每個(gè)元素都有 display 屬性，確定該元素的類(lèi)型，每個(gè)元 素都有默認(rèn)的 display 值，比如 div 默認(rèn) display 屬性值為“ block ，成為 塊級(jí)”元素；span 默認(rèn) display 屬性值為“ inline ，是 行內(nèi)”元素。（2） 行內(nèi)元素有：a b spa n img in put select strong（強(qiáng)調(diào)的語(yǔ)氣）塊級(jí)元素有：div ul ol li dl dt ddh1 h2 h3 h4 p（3）知名的空元素： 鮮為人知的是： vcomma nd vkeyge n vparam

6、 link 和import 的區(qū)別是？（1）link 屬于 XHTML 標(biāo)簽，而import 是 CSS 提供的；（2） 頁(yè)面被加載的時(shí)，link 會(huì)同時(shí)被加載，而import 引用的 CSS 會(huì)等到頁(yè) 面被加載完再加載；（3）import 只在 IE5 以上才能識(shí)別，而 link 是 XHTML 標(biāo)簽，無(wú)兼容問(wèn)題；（4）link 方式的樣式的權(quán)重高于import 的權(quán)重.瀏覽器的內(nèi)核分別是什么？* IE 瀏覽器的內(nèi)核 Tride nt 、Mozilla 的 Gecko、Chrome 的 Bli nk （ WebKi t 的分支）、Opera 內(nèi)核原為 Presto，現(xiàn)為 Blink ；常見(jiàn)兼

7、容性問(wèn)題?* 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:inlin

8、e;將其轉(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.bbbackgro und-color:#f1ee18;/*所有識(shí)別*/.backgrou nd-color:#00deff9; /*IE6、7、8 識(shí)別*/+background-color:#a200ff;/*IE6、7 識(shí)別*/_backgrou nd-color:#1e0bd1;/*IE6識(shí)別*/* IE 下，可以使用獲取常規(guī)屬

9、性的方法來(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 屬性-we

10、bkit-text-size-adjust: none;解決.超鏈接訪問(wèn)過(guò)后 hover 樣式就不出現(xiàn)了被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover 和 active 了解決方法是改變 CSS 屬性的排列順序：L-V-H-A : a:li nk a:visited a:hover a:active html5 有哪些新特性、移除了那些元素？如何處理HTML5 新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5 ？* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù) 等功能的增加。* 繪畫(huà) canvas用于媒介回放的 video 和 audio 元素本地離線存

11、儲(chǔ) localstorage長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessio nStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除語(yǔ)意化更好的內(nèi)容元素，比女口 article 、footer 、header、nav、section表單控件，calendar、date、time、email、url、search新的技術(shù) webworker, websockt, Geolocation*移除的元素純表現(xiàn)的元素： basefont ， big，center ，font, s ，strike ，tt ，u； 對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset ， no frames ；支持 HTML5

12、 新標(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 框架 src=http:/ vn/trun k/html5.jsv/script請(qǐng)描述一下 cookies ，sessi on Storage 禾口 localStorage 的區(qū)另 U?如何區(qū)分：DOCTYPE 聲明新增的結(jié)構(gòu)元素功能元素語(yǔ)義化的理解？用正確的標(biāo)簽做正確的事情！html 語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化， 便于

13、對(duì)瀏覽器、 搜索引擎解析；在沒(méi)有樣式 CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO。使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。HTML5 的離線儲(chǔ)存？localStorage長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessio nStorage數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。（寫(xiě)）描述一段語(yǔ)義的 html 代碼吧。（HTML5 中新增加的很多標(biāo)簽（如： 、 和等）就是基于語(yǔ)義化設(shè)計(jì)原則） 標(biāo)題 專(zhuān)注 Web 前端技術(shù)iframe 有那些缺點(diǎn)？*iframe 會(huì)阻塞主頁(yè)面的 On load 事件；*iframe

14、和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè) 面的并行加載。使用 iframe 之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用 iframe，最好是通過(guò) ja請(qǐng)描述一下 cookies ，sessi on Storage 禾口 localStorage 的區(qū)另 U?vascript動(dòng)態(tài)給 iframe 添加 src 屬性值，這樣可以可以繞開(kāi)以上兩個(gè)問(wèn)題。cookie 在瀏覽器和服務(wù)器間來(lái)回傳遞。sessionStorage 和 localstorage不會(huì)如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?（阿里）調(diào)用 localstorge、cookies 等本地存儲(chǔ)方式webSocket 如何兼

15、容低瀏覽器？（阿里）Adobe Flash Socket 、ActiveX HTMLFile (IE) 、 基于 multipart 編 碼發(fā)送 XHR、基于長(zhǎng)輪詢(xún)的 XHRCSS介紹一下 CSS 的盒子模型？（1） 有兩種，IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE 的 content 部分包含了 border和 pad ing;（2） 盒模型：內(nèi)容（content）、填充（padding）、邊界（margin）、邊框（border）.CSS選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？CSS3 新增偽類(lèi)有那1.id 選擇器（# myid ）2.類(lèi)選擇器（.myclassname ）

16、3.標(biāo)簽選擇器（div, h1, p）4.相鄰選擇器（h1 + p ）5.子選擇器（ul id class tagimportant比內(nèi)聯(lián)優(yōu)先級(jí)高CSS3 新增偽類(lèi)舉例：p:first-of-type選擇屬于其父元素的首個(gè) 元素的每個(gè)元素。p:last-of-type選擇屬于其父元素的最后 元素的每個(gè)元素。p:only-of-type選擇屬于其父元素唯一的 元素的每個(gè)元素。p:only-child選擇屬于其父元素的唯一子元素的每個(gè) 元素。p:nth-child(2)選擇屬于其父元素的第二個(gè)子元素的每個(gè)元素。:en abled :disabled控制表單控件的禁用狀態(tài)。:checked單選框或復(fù)

17、選框被選中。如何居中 div ?如何居中一個(gè)浮動(dòng)元素？給 div 設(shè)置一個(gè)寬度，然后添加margin:0 auto 屬性divwidth:200px;margi n:0 auto;居中一個(gè)浮動(dòng)元素確定容器的寬高 寬 500 高 300 的層設(shè)置層的外邊距.div Width:500px ; height:300px;高度可以不設(shè)Margi n: -150px 0 0 -250px;positi on:relative;相對(duì)定位backgro un d-color:p ink;/方便看效果left:50%;top:50%;列出 display 的值，說(shuō)明他們的作用。position 的值，rel

18、ative 和 absolute 定位原點(diǎn)是？1.block象塊類(lèi)型元素一樣顯示。none 缺省值。象行內(nèi)元素類(lèi)型一樣顯示。inlin e-block象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類(lèi)型元素一樣顯示。list-item象塊類(lèi)型元素一樣顯示，并添加樣式列表標(biāo)記。2.*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,

19、right z-i ndex聲明)。* inherit規(guī)定從父元素繼承 position屬性的值。CSS3 有哪些新特性？CSS3 實(shí)現(xiàn)圓角(border-radius:8px )，陰影(box-shadow:10px )，對(duì)文字加特效(text-shadow 、)，線性漸變(gradient )，旋轉(zhuǎn)(transf orm)tran sform:rotate(9deg) scale(0.85,0.90) tran slate(0px,-30px) skew(-9deg,0deg);旋轉(zhuǎn)，縮放，定位，傾斜增加了更多的 CSS 選擇器多背景 rgba一個(gè)滿屏品字布局如何設(shè)計(jì)？經(jīng)常遇到的CSS的兼

20、容性有哪些？原因，解決方法是什么？為什么要初始化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)單的初始化方法就是：* paddi ng: 0; margi n: 0;（不建議）淘寶的樣式初始化：body, hi, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul,ol, li, pre, form, fieldset, lege nd, butt o

21、n, in put, textarea,th, td margin:0; padding:0; body, butt on, in put, select, textarea fon t:12px/1.5tahoma, arial, 5b8b4f53; hi, h2, h3, h4, h5, h6 fon t-size:100%; address, cite, dfn, em, var fon t-style:no rmal; code, kbd, pre, samp fon t-family:courier new, courier, mono space; small fon t-size

22、:12px; ul, ol list-style: non e; a text-decorati on:non e; a:hover text-decoratio n:u nderli ne; sup vertical-alig n:text-top; sub vertical-alig n:text-bottom; lege nd color:#000; fieldset, img border:0; butt on, in put, select, textarea fon t-size:100%; table border-collapse:collapse; border-spac i

23、n g:0; absolute 的 containing block 計(jì)算方式跟正常流有什么不同？position 跟 display、margin collapse 、overflow、float 這些特性相互疊加后會(huì)怎么樣？對(duì) BFC 規(guī)范的理解？（W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及 與其他元素的關(guān)系和相互作用。）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)重

24、為 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)解釋下浮動(dòng)和它的工作原理？清除浮動(dòng)的技巧用過(guò)媒體查詢(xún)，針對(duì)移動(dòng)端的布局嗎？使用 CSS 預(yù)處理器嗎？喜歡那個(gè)？SASS如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）多數(shù)顯示器默認(rèn)頻率是 60Hz,即 1 秒刷新 60 次，所以理論上最小間隔為 1/60* 1000ms = 16.7msdisplay:i nlin e-block 什么時(shí)候會(huì)顯示間

25、隙？（攜程）移除空格、使用 margin 負(fù)值、使用 font-size:0、letter-spacing 、wordspaci ngJavaScriptJavaScript 原型，原型鏈？有什么特點(diǎn)?eval 是做什么的？它的功能是把對(duì)應(yīng)的字符串解析成 JS 代碼并運(yùn)行;應(yīng)該避免使用 eval，不安全，非常耗性能(2 次，一次解析成 js 語(yǔ)句，一次執(zhí) 行)。null， undefined 的區(qū)別？寫(xiě)一個(gè)通用的事件偵聽(tīng)器函數(shù)。/ event( 事件)工具集，來(lái)源： .Eve nt = /頁(yè)面加載完成后readyEve nt : function(fn) if (fn=null) fn=doc

26、ume nt;var old onl oad = win dow. onl oad;if (typeof win dow. onl oad != function) window.onl oad = fn; else window.onl oad = fun cti on() old onl oad();fn();,/ 視能力分別使用 domO|dom2|IE 方式來(lái)綁定事件/ 參數(shù)：操作的元素，事件名稱(chēng)，事件處理程序addEve nt : fun cti on( eleme nt, type, han dler) if (eleme nt.addEve ntListe ner) /事件類(lèi)型、

27、需要執(zhí)行的函數(shù)、是否捕捉element.addEventListener(type, handler, false); else if (eleme nt.attachEve nt) eleme nt.attachEve nt(o n + type, function。han dler.call(eleme nt);)； else eleme nto n + type = han dler;，/移除事件removeEve nt : fun ctio n(eleme nt, type, han dler) if (eleme nt.removeE nen tListe ner) element.

28、removeEnentListener(type, handler, false); else if (eleme nt.datachEve nt) eleme nt.detachEve nt( on + type, han dler); else eleme nto n + type = nu II;,/阻止事件(主要是事件冒泡，因?yàn)?IE 不支持事件捕獲)stopPropagati on : function( ev) if (ev.stopPropagation) ev.stopPropagati on(); else ev.ca ncelBubble = true;,/取消事件的默認(rèn)行

29、為preve ntDefault : fun cti on( eve nt) if (event.preventDefault) eve nt.preve ntDefault(); else eve nt.retur nV alue = false;，/獲取事件目標(biāo)getTarget : function( eve nt) retur n eve nt.target | eve nt.srcEleme nt;，/ 獲取 eve nt 對(duì)象的引用，取到事件的所有信息，確保隨時(shí)能使用event ；getEve nt : function(e) var ev = e | win dow.eve nt

30、;if (!ev) var c = this.getEve nt.caller;while (c) ev = c.argume ntsO;if (ev & Eve nt = ev.c on structor) break;c = c.caller;return ev;Node.js 的適用場(chǎng)景？高并發(fā)、聊天、實(shí)時(shí)消息推送介紹 js 的基本數(shù)據(jù)類(lèi)型。nu mber,stri ng,boolea n,o bject ,un defi nedJavascript 如何實(shí)現(xiàn)繼承?通過(guò)原型和構(gòu)造器1, 2, 3.map(parse Int)答案是多少?1, NaN, NaN 因?yàn)?parseln

31、t需要兩個(gè)參數(shù)(val, radix) 但 map 傳了 3 個(gè) (element, index, array)如何創(chuàng)建一個(gè)對(duì)象？(畫(huà)出此對(duì)象的內(nèi)存圖)function Person(name, age) this. name = n ame;this.age = age;this.sing = function() alert() 談?wù)?This 對(duì)象的理解。this 是 js 的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this 的值會(huì)發(fā)生變化。但是有一個(gè)總原則，那就是 this 指的是調(diào)用函數(shù)的那個(gè)對(duì)象。this 一般情況下：是全局對(duì)象 Global。作為方法調(diào)用，那么 thi

32、s 就是指這 個(gè)對(duì)象事件是？ 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 是事件冒泡、火狐是 事件捕獲；3. ev.stopPropagati on();什么是閉包(closure )，為什么要用它?執(zhí)行 say667()后,say667()閉包內(nèi)部變量會(huì)存在，而閉包內(nèi)部函數(shù)的內(nèi)部變量 不會(huì)存在.使得 Javascript的垃圾回收機(jī)制 GC 不會(huì)收回 say667()所占用的資源，因?yàn)?say667()的內(nèi)部函數(shù)的執(zhí)行需要依賴(lài)

33、say667()中的變量。這是對(duì)閉 包作用的非常直白的描述.function say667() / Local variable that ends up with in closurevar num = 666;var sayAlert = fun cti on() alert (nu m); nu m+;return sayAlert;var sayAlert = say667();sayAlert()執(zhí)行結(jié)果應(yīng)該彈出的 667use strict;是什么意思？使用它的好處和壞處分別是什么？如何判斷一個(gè)對(duì)象是否屬于某個(gè)類(lèi)？使用 instanceof(待完善)if(a in sta nceo

34、f Pers on)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_ = Btotype;Base.call(obj);Javascript 中，有一個(gè)函數(shù)，執(zhí)行時(shí)對(duì)象查找時(shí)，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是?hasOw nPropertyJSON 的了解？JSON(JavaScript Object Notatio n)是一種輕量級(jí)的數(shù)據(jù)交換格

35、式。它是基于 JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單,易于讀寫(xiě),占用帶寬小age:12, name:backjs 延遲加載的方式有哪些？defer 和 async、動(dòng)態(tài)創(chuàng)建 DOM 方式(用得最多)、按需異步載入 jsajax 是什么？同步和異步的區(qū)別？如何解決跨域問(wèn)題？jsonp、iframe 、、window.postMessage 、服務(wù)器上設(shè)置代理 頁(yè)面模塊化怎么做？立即執(zhí)行函數(shù)，不暴露私有成員var module1 = (fun ctio n()var _count = 0;var m1 =fun cti on()var m2 =fun cti on();

36、return m1 :m1,m2 :m2;)();AMD (Modules/As yn chro nous-Defi ni tion )、CMD (Com mon Module Defini tion)規(guī)范區(qū)別？異步加載的方式有哪些？(1) defer ，只支持 IE(2) async(3)創(chuàng)建 script，插入到 DOM 中，加載完畢后 callBackdocumen.write 和 innerHTML 的區(qū)別docume nt.write 只能重繪整個(gè)頁(yè)面innerHTML 可以重繪頁(yè)面的一部分.call()和.apply()的區(qū)別？例子中用 add 來(lái)替換 sub，add.call(s

37、ub,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);Jquery 與 jQuery UI 有啥區(qū)別？*jQuery 是一個(gè) js 庫(kù)，主要提供的功能是選擇器，屬性修改和事件綁定等等。*jQuery UI 則是在 jQuery 的基礎(chǔ)上，利用 jQuery 的擴(kuò)展性，設(shè)計(jì)的插件。提供了一些常用的界面元素，諸如對(duì)話框、拖動(dòng)行為、改變大小行為等等JQuery 的

38、源碼看過(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.stri ngifyArray = fun ctio n(array) return JSON.stri ngify(array)$.fn.parseArray = fun ctio n(array) return JSON.parse(array)然后調(diào)用：$().stri ngifyArray(array)針對(duì) jQuery 的優(yōu)化方法？*基于 Class 的選擇性的性能相對(duì)于 Id 選擇器開(kāi)銷(xiāo)很

39、大，因?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, le ngth = arr.le ngth; i len gth; i+) JavaScript 中的作用域與變量聲明提升?如何編寫(xiě)高性能的 Javascript ?那些操作會(huì)造成內(nèi)存泄漏？?jī)?nèi)存泄漏指任何對(duì)

40、象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對(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)的？如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node 環(huán)境中？（阿里）通過(guò)判斷 Global 對(duì)象是否為 window，如果不為 window，當(dāng)前腳本沒(méi)有運(yùn)行在 瀏覽器中其他問(wèn)題你

41、遇到過(guò)比較難的技術(shù)問(wèn)題是？你是如何解決的？常使用的庫(kù)有哪些？常用的前端開(kāi)發(fā)工具？開(kāi)發(fā)過(guò)什么應(yīng)用或組件？頁(yè)面重構(gòu)怎么操作？列舉 IE 與其他瀏覽器不一樣的特性？99%的網(wǎng)站都需要被重構(gòu)是那本書(shū)上寫(xiě)的？什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？WEB 應(yīng)用從服務(wù)器主動(dòng)推送 Data 到客戶(hù)端有那些方式？對(duì) Node 的優(yōu)點(diǎn)和缺點(diǎn)提出了自己的看法？* （優(yōu)點(diǎn)）因?yàn)?Node 是基于事件驅(qū)動(dòng)和無(wú)阻塞的，所以非常適合處理并發(fā)請(qǐng)求，因此構(gòu)建在 Node 上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)（如 Ruby）的服務(wù)器表 現(xiàn)要好得多。此外，與 Node 代理服務(wù)器交互的客戶(hù)端代碼是由 javascript 語(yǔ)言編寫(xiě)的,因此客戶(hù)端和服

42、務(wù)器端都用同一種語(yǔ)言編寫(xiě)，這是非常美妙的事情。（缺點(diǎn)）Node 是一個(gè)相對(duì)新的開(kāi)源項(xiàng)目，所以不太穩(wěn)定，它總是一直在變， 而且缺少足夠多的第三方庫(kù)支持?？雌饋?lái)，就像是Ruby/Rails 當(dāng)年的樣子你有哪些性能優(yōu)化的方法?（看雅虎 14 條性能優(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

43、 操作，減少 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á)式）又稱(chēng) Dynamic properties （動(dòng)態(tài)屬性）。（7）圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部加上時(shí)間戳（8）避免在頁(yè)面的主體布局中使用 table ，table 要等其中的內(nèi)容完全下載 之后才會(huì)顯示出來(lái)，顯示比 div+css 布局慢。http 狀態(tài)碼有那些？分別代表是什么意思？100-199 用于指定

44、客戶(hù)端應(yīng)相應(yīng)的某些動(dòng)作。200-299 用于表示請(qǐng)求成功。300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信 息。400-499 用于指出客戶(hù)端的錯(cuò)誤。4001 、語(yǔ)義有誤，當(dāng)前請(qǐng)求無(wú)法被服務(wù)器理解。401 當(dāng)前請(qǐng)求需要用戶(hù)驗(yàn)證 403 服務(wù)器已經(jīng)理解請(qǐng)求，但是拒絕 執(zhí)行它。500-599 用于支持服務(wù)器錯(cuò)誤。503 -服務(wù)不可用一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成，這個(gè)過(guò)程中都發(fā)生了什么？（流程說(shuō)的越詳細(xì)越好）查找瀏覽器緩存DNS 解析、查找該域名對(duì)應(yīng)的 IP 地址、重定向（301）、發(fā)出第二個(gè) GET 請(qǐng)求進(jìn)行 HTTP 協(xié)議會(huì)話客戶(hù)端發(fā)送報(bào)頭（請(qǐng)求報(bào)頭）服務(wù)

45、器回饋報(bào)頭（響應(yīng)報(bào)頭）html文檔開(kāi)始下載文檔樹(shù)建立，根據(jù)標(biāo)記請(qǐng)求所需指定 MIME 類(lèi)型的文件文件顯示瀏覽器這邊做的工作大致分為以下幾步：加載：根據(jù)請(qǐng)求的 URL 進(jìn)行域名解析，向服務(wù)器發(fā)起請(qǐng)求，接收文件（HTM L、JS、CSS 圖象等）。解析：對(duì)加載到的資源（HTML JS、CSS 等）進(jìn)行語(yǔ)法解析，建議相應(yīng)的 內(nèi)部數(shù)據(jù)結(jié)構(gòu)（比如 HTML 的 DOM 樹(shù)，JS 的（對(duì)象）屬性表，CSS 的樣式規(guī)則等 等）除了前端以外還了解什么其它技術(shù)么？你最最厲害的技能是什么？你常用的開(kāi)發(fā)工具是什么，為什么？對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？前端是最貼近用戶(hù)的程序員，比后端、數(shù)

46、據(jù)庫(kù)、產(chǎn)品經(jīng)理、運(yùn)營(yíng)、安全都 近。1、實(shí)現(xiàn)界面交互2、提升用戶(hù)體驗(yàn)3、有了 Node.js，前端可以實(shí)現(xiàn)服務(wù)端的一些事情前端是最貼近用戶(hù)的程序員， 前端的能力就是能讓產(chǎn)品從 90 分進(jìn)化到 100 分, 甚至更好，參與項(xiàng)目，快速高質(zhì)量完成實(shí)現(xiàn)效果圖，精確到1px ；與團(tuán)隊(duì)成員，UI 設(shè)計(jì)，產(chǎn)品經(jīng)理的溝通；做好的頁(yè)面結(jié)構(gòu)，頁(yè)面重構(gòu)和用戶(hù)體驗(yàn)；處理 hack，兼容、寫(xiě)出優(yōu)美的代碼格式；針對(duì)服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。加班的看法？加班就像借錢(qián)，原則應(yīng)當(dāng)是-救急不救窮平時(shí)如何管理你的項(xiàng)目？先期團(tuán)隊(duì)必須確定好全局樣式（globe.css ），編碼模式（utf-8） 等; 編寫(xiě)習(xí)慣必須一致（例如都是采

47、用繼承式的寫(xiě)法，單樣式都寫(xiě)成一行）； 標(biāo)注樣式編寫(xiě)人，各模塊都及時(shí)標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）； 頁(yè)面進(jìn)行標(biāo)注（例如頁(yè)面模塊開(kāi)始和結(jié)束）；CSS跟 HTML 分文件夾并行存放，命名都得統(tǒng)一（例如 style.css ）；JS 分文件夾存放命名以該 JS 功能為準(zhǔn)的英文翻譯。圖片采用整合的 images.png png8格式文件使用盡量整合在一起使用方便將來(lái)的管理如何設(shè)計(jì)突發(fā)大規(guī)模并發(fā)架構(gòu)？說(shuō)說(shuō)最近最流行的一些東西吧？常去哪些網(wǎng)站？Node.js 、Mongodb、npm MVVM MEAN three.js移動(dòng)端(An droid IOS )怎么做好用戶(hù)體驗(yàn)？清晰的視覺(jué)縱線、信息的分組、極致

48、的減法、 利用選擇代替輸入、標(biāo)簽及文字的排布方式、 依靠明文確認(rèn)密碼、合理的鍵盤(pán)利用、你在現(xiàn)在的團(tuán)隊(duì)處于什么樣的角色，起到了什么明顯的作用？你認(rèn)為怎樣才是全端工程師(Full Stack developer )？介紹一個(gè)你最得意的作品吧？你的優(yōu)點(diǎn)是什么？缺點(diǎn)是什么？如何管理前端團(tuán)隊(duì)？最近在學(xué)什么？能談?wù)勀阄磥?lái)3，5 年給自己的規(guī)劃嗎？想問(wèn)公司的問(wèn)題？問(wèn)公司問(wèn)題：目前關(guān)注哪些最新的 Web 前端技術(shù)(未來(lái)的發(fā)展方向)？前端團(tuán)隊(duì)如何工作的(實(shí)現(xiàn)一個(gè)產(chǎn)品的流程)？公司的薪資結(jié)構(gòu)是什么樣子的？面試題：你還有什么問(wèn)題要問(wèn)嗎？回答提示：企業(yè)的這個(gè)問(wèn)題看上去可有可無(wú)，其實(shí)很關(guān)鍵，企業(yè)不喜歡說(shuō)沒(méi)問(wèn)題”的人，因

49、為其很注重員工的個(gè)性和創(chuàng)新能力。企業(yè)不喜歡求職者問(wèn)個(gè)人福利之類(lèi)的問(wèn)題，如果有人這樣問(wèn)： 貴公司對(duì)新入公司的員工有沒(méi)有什么培訓(xùn)項(xiàng)目，我可以參加嗎？或者說(shuō)貴公司的晉升機(jī)制是什么樣的？企業(yè)將很歡迎，因?yàn)轶w現(xiàn)出你對(duì)學(xué)習(xí)的熱情和對(duì)公司的忠以及你的上進(jìn)心。前端開(kāi)發(fā)面試知識(shí)點(diǎn)大綱:HTML&CSS :對(duì) Web 標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS 基本功：布局、 盒子模型、選擇器優(yōu)先級(jí)及使用、HTML5、CSS3、移動(dòng)端適應(yīng)JavaScript :數(shù)據(jù)類(lèi)型、面向?qū)ο?、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、 自定義事件、內(nèi)存泄漏、事件機(jī)制、異步裝載回調(diào)、模板引擎、Nodej

50、s、JSON、ajax 等。其他：HTTP、安全、正則、優(yōu)化、重構(gòu)、響應(yīng)式、移動(dòng)端、團(tuán)隊(duì)協(xié)作、可維護(hù)、SEO、UED、架構(gòu)、職業(yè)生涯作為一名前端工程師，無(wú)論工作年頭長(zhǎng)短都應(yīng)該必須掌握的知識(shí)點(diǎ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 控制它們、以及如何合理的 使用它們*&浮動(dòng)元素一一怎么使用它們、它們有什么問(wèn)題以及怎么解決這些問(wèn)題。*9、HTML 與 XHTML 二者有什么區(qū)別，你覺(jué)得應(yīng)該使用哪一個(gè)并說(shuō) 出理由。*10、JSON 作用、用途、設(shè)計(jì)結(jié)構(gòu)。HTML*Doctype 作用？嚴(yán)格模式與混雜模式如何區(qū)分？