前端面試技巧匯總

1、前端常見面試技巧1，說說你對閉包的理解使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染，缺點(diǎn)是閉包會常駐內(nèi)存，會增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。閉包有三個特性:1).函數(shù)嵌套函數(shù)2).函數(shù)內(nèi)部可以引用外部的參數(shù)和變量 3).參數(shù)和變量不會被垃圾回收機(jī)制回收2,請你談?wù)凜ookie的弊端cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔(dān)了服務(wù)器存儲的負(fù)擔(dān)，但還是有很多局限性的。第一：每個特定的域名下最多生成20個cookie1).IE6或更低版本最多20個cookie2).IE7和之后的版本最后可以有50個cookie。3).Firefox最多50個coo

2、kie4.chrome和Safari沒有做硬性限制IE和Opera 會清理近期最少使用的cookie，F(xiàn)irefox會隨機(jī)清理cookie。第二，cookie的最大大約為4096字節(jié)，為了兼容性，一般不能超過4095字節(jié)。IE 提供了一種存儲可以持久化用戶數(shù)據(jù)，叫做userdata，從IE5.0就開始支持。每個數(shù)據(jù)最多128K，每個域名下最多1M。這個持久化數(shù)據(jù)放在緩存中，如果緩存沒有清理，那么會一直存在。優(yōu)點(diǎn)：極高的擴(kuò)展性和可用性1.通過良好的編程，控制保存在cookie中的session對象的大小。2.通過加密和安全傳輸技術(shù)（SSL），減少cookie被破解的可能性。3.只在cookie中

3、存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。4.控制cookie的生命期，使之不會永遠(yuǎn)有效。偷盜者很可能拿到一個過期的cookie。缺點(diǎn)：1.Cookie數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補(bǔ)，因?yàn)閿r截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了。3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計(jì)數(shù)器。如果我們把這個計(jì)數(shù)器保存在客戶端，那么它起不到任何

4、作用。3，瀏覽器本地存儲在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。 在HTML5中提供了localStorage來取代globalStorage。html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。 而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)

5、，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。4，web storage和cookie的區(qū)別Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。但是cookie也是不可以或缺的：cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而

6、存在 ，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生。瀏覽器的支持除了IE及以下不支持外，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運(yùn)行)，值得一提的是IE總是辦好事，例如IE7、IE6中的userData其實(shí)就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統(tǒng)一到所有的瀏覽器都支持web storage。localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等5，cookie 和session 的區(qū)別：1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。

7、2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進(jìn)行COOKIE欺騙 考慮到安全應(yīng)當(dāng)使用session。3、session會在一定時間內(nèi)保存在服務(wù)器上。當(dāng)訪問增多，會比較占用你服務(wù)器的性能 考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用COOKIE。4、單個cookie保存的數(shù)據(jù)不能超過4K，很多瀏覽器都限制一個站點(diǎn)最多保存20個cookie。5、所以個人建議： 將登陸信息等重要信息存放為SESSION 其他信息如果需要保留，可以放在COOKIE中CSS 相關(guān)問題6，display:none和visibility:hidden的區(qū)別？display:none 隱藏對應(yīng)的元素，在文檔布局中

8、不再給它分配空間，它各邊的元素會合攏，就當(dāng)他從來不存在。visibility:hidden 隱藏對應(yīng)的元素，但是在文檔布局中仍保留原來的空間。7，CSS中 link 和import 的區(qū)別是？(1) link屬于HTML標(biāo)簽，而import是CSS提供的;(2) 頁面被加載的時，link會同時被加載，而import引用的CSS會等到頁面被加載完再加載;(3) import只在IE5以上才能識別，而link是HTML標(biāo)簽，無兼容問題;(4) link方式的樣式的權(quán)重 高于import的權(quán)重.position:absolute和float屬性的異同A：共同點(diǎn)：對內(nèi)聯(lián)元素設(shè)置float和absolu

9、te屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。B：不同點(diǎn)：float仍會占據(jù)位置，position會覆蓋文檔流中的其他元素。8，介紹一下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以下版本和IE67的怪異模式）。設(shè)置width/height屬性指的是borde

10、r + padding + content標(biāo)準(zhǔn)瀏覽器下，按照W3C規(guī)范對盒模型解析，一旦修改了元素的邊框或內(nèi)距，就會影響元素的盒子尺寸，就不得不重新計(jì)算元素的盒子尺寸，從而影響整個頁面的布局。9，CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計(jì)算？ CSS3新增偽類有那些？1.id選擇器（ # myid）2.類選擇器（.myclassname）3.標(biāo)簽選擇器（div, h1, p）4.相鄰選擇器（h1 + p）5.子選擇器（ul li）6.后代選擇器（li a）7.通配符選擇器（ * ）8.屬性選擇器（arel = external）9.偽類選擇器（a: hover, li:nth-c

11、hild）可繼承的樣式： font-size font-family color, text-indent;不可繼承的樣式：border padding margin width height ;優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);載入樣式以最后載入的定位為準(zhǔn);優(yōu)先級為:!important id class tagimportant 比 內(nèi)聯(lián)優(yōu)先級高,但內(nèi)聯(lián)比 id 要高10，CSS3新增偽類舉例：p:first-of-type 選擇屬于其父元素的首個 元素的每個 元素。p:last-of-type 選擇屬于其父元素的最后 元素的每個 元素。p:only-of-type 選擇屬于

12、其父元素唯一的 元素的每個 元素。p:only-child 選擇屬于其父元素的唯一子元素的每個 元素。p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 元素。:enabled :disabled 控制表單控件的禁用狀態(tài)。:checked 單選框或復(fù)選框被選中。10，position的值， relative和absolute分別是相對于誰進(jìn)行定位的？absolute 生成絕對定位的元素， 相對于最近一級的 定位不是 static 的父元素來進(jìn)行定位。fixed （老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。relative 生成相對定位的元素，相對于其在普通流

13、中的位置進(jìn)行定位。static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中11，CSS3有哪些新特性？CSS3實(shí)現(xiàn)圓角（border-radius），陰影（box-shadow），對文字加特效（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.媒體查詢，多欄布局12，border-imageX

14、ML和JSON的區(qū)別？(1).數(shù)據(jù)體積方面。JSON相對于XML來講，數(shù)據(jù)的體積小，傳遞的速度更快些。(2).數(shù)據(jù)交互方面。JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互。(3).數(shù)據(jù)描述方面。JSON對數(shù)據(jù)的描述性比XML較差。(4).傳輸速度方面。JSON的速度要遠(yuǎn)遠(yuǎn)快于XML。13，對BFC規(guī)范的理解？BFC，塊級格式化上下文，一個創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關(guān)系）的margin會發(fā)生折疊。 （W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如

15、何對其內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用。）14，解釋下 CSS sprites，以及你要如何在頁面或網(wǎng)站中使用它。CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因?yàn)檎埱蠛臅r比較長；請求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個。對于未來而言，就不需要這樣做了，因?yàn)橛辛薶ttp2。html部分

16、15，說說你對語義化的理解？1，去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；3，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；4，便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個標(biāo)準(zhǔn)，可以減少差異化。16，Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?（1）、 聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。（2）、嚴(yán)格模式的排版和 JS 運(yùn)作模式是 以該

17、瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。（4）、DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。17，你知道多少種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)遵

18、循最新標(biāo)準(zhǔn)的網(wǎng)頁，而 Quirks （包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。18，HTML與XHTML二者有什么區(qū)別區(qū)別：1.所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫3.所有的XML標(biāo)記都必須合理嵌套4.所有的屬性必須用引號括起來5.把所有和&特殊符號用編碼表示6.給所有屬性賦一個值7.不要在注釋內(nèi)容中使“-”8.圖片必須有說明文字19，常見兼容性問題？*png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理.* 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全

19、局的*margin:0;padding:0;來統(tǒng)一。* IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。* 浮動ie產(chǎn)生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設(shè)置了浮動，同時又設(shè)置了margin-left或margin-right，margin值會加倍。） #box float:left; width:10px; margin:0 0 0 100px; 這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 _display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)*

20、漸進(jìn)識別的方式，從總體中逐漸排除局部。 首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。 css .bb background-color:#f1ee18;/*所有識別*/ .background-color:#00deff9; /*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ * IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性, 也可以使用getAttribute()

21、獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.* IE下,event對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.* 解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。* Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.* 超鏈接訪問過后hover

22、樣式就不出現(xiàn)了*被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link a:visited a:hover a:active * 怪異模式問題：漏寫DTD聲明，F(xiàn)irefox仍然會按照標(biāo)準(zhǔn)模式來解析網(wǎng)頁，但在IE中會觸發(fā)怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習(xí)慣。現(xiàn)在可以使用html5(/TR/html5/single-page.html)推薦的寫法：* 上下margin重合問題ie和ff都存在，相鄰的兩個div的margin-left和margin-ri

23、ght不會重合，但是margin-top和margin-bottom卻會發(fā)生重合。解決方法，養(yǎng)成良好的代碼編寫習(xí)慣，同時采用margin-top或者同時采用margin-bottom。* ie6對png圖片格式支持不好(引用一段腳本處理)20，解釋下浮動和它的工作原理？清除浮動的技巧 浮動元素脫離文檔流，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。 1.使用空標(biāo)簽清除浮動。 這種方法是在所有浮動標(biāo)簽后面添加一個空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。 2.使用overflow。 給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; z

24、oom:1; zoom:1用于兼容IE6。 3.使用after偽對象清除浮動。 該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置 height:0，否則該元素會比實(shí)際高出若干像素；21，浮動元素引起的問題和解決辦法？浮動元素引起的問題： （1）父元素的高度無法被撐開，影響與父元素同級的元素 （2）與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后 （3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu) 解決方法： 使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對于問題1

25、，添加如下樣式，給父元素添加clearfix樣式：.clearfix:aftercontent: .;display: block;height: 0;clear: both;visibility: hidden;.clearfixdisplay: inline-block; /* for IE/Mac */22，清除浮動的幾種方法： 1，額外標(biāo)簽法，（缺點(diǎn)：不過這個辦法會增加額外的標(biāo)簽使HTML結(jié)構(gòu)看起來不夠簡潔。） 2,使用after偽類#parent:after content:.; height:0; visibility:hidden; display:block; clear:bo

26、th; 3, 浮動外部元素 4,設(shè)置overflow為hidden或者auto23，IE 8以下版本的瀏覽器中的盒模型有什么不同 IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內(nèi)邊距和邊框DOM操作怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)。 （1）創(chuàng)建新節(jié)點(diǎn) createDocumentFragment() /創(chuàng)建一個DOM片段 createElement() /創(chuàng)建一個具體的元素 createTextNode() /創(chuàng)建一個文本節(jié)點(diǎn) （2）添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore() /在已有的

27、子節(jié)點(diǎn)前插入一個新的子節(jié)點(diǎn) （3）查找 getElementsByTagName() /通過標(biāo)簽名稱 getElementsByName() /通過元素的Name屬性的值(IE容錯能力較強(qiáng)，會得到一個數(shù)組，其中包括id等于name值的) getElementById() /通過元素Id，24，唯一性html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？ * HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。 * 拖拽釋放(Drag and drop) API 語義化更好的內(nèi)容標(biāo)簽（head

28、er,nav,footer,aside,article,section） 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失； sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除 表單控件，calendar、date、time、email、url、search 新的技術(shù)webworker, websocket, Geolocation * 移除的元素純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；對可用

29、性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；支持HTML5新標(biāo)簽： * IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽， 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式： * 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 src= 如何區(qū)分： DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素25，iframe的優(yōu)缺點(diǎn)？ 1.優(yōu)點(diǎn)： 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題 Security sandbox 并行加載腳本 2.的缺點(diǎn)： *iframe會阻

30、塞主頁面的Onload事件； *即時內(nèi)容為空，加載也需要時間 *沒有語意 26，如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信? 調(diào)用localstorge、cookies等本地存儲方式27，線程與進(jìn)程的區(qū)別 一個程序至少有一個進(jìn)程,一個進(jìn)程至少有一個線程. 線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高。 另外，進(jìn)程在執(zhí)行過程中擁有獨(dú)立的內(nèi)存單元，而多個線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率。 線程在執(zhí)行過程中與進(jìn)程還是有區(qū)別的。每個獨(dú)立的線程有一個程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個線程執(zhí)行控制。 從邏輯角度來看，多線程的

31、意義在于一個應(yīng)用程序中，有多個執(zhí)行部分可以同時執(zhí)行。但操作系統(tǒng)并沒有將多個線程看做多個獨(dú)立的應(yīng)用，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別。28，你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化？ 期待的解決方案包括： 文件合并 文件最小化/文件壓縮 使用 CDN 托管 緩存的使用（多個域名來提供緩存） 29，其他請說出三種減少頁面加載時間的方法。 1.優(yōu)化圖片 2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方） 3.優(yōu)化CSS（壓縮合并css，如margin-top,margin-left.) 4.網(wǎng)址后加斜杠（如 5.標(biāo)明高度和寬度（如果瀏覽器沒有找到這兩個

32、參數(shù)，它需要一邊下載圖片一邊計(jì)算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁面。這不但影響速度，也影響瀏覽體驗(yàn)。 當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時間快了，瀏覽體驗(yàn)也更好了。） 6.減少http請求（合并文件，合并圖片）。30，你都使用哪些工具來測試代碼的性能？Profiler, DromaeoJSPef（31，什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？ FOUC - Flash Of Unstyled Content 文檔樣式閃爍 import ./fouc.css; 而引用CSS文件的impor

33、t就是造成這個問題的罪魁禍?zhǔn)住?IE會先加載整個HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會有一段時間頁面上的內(nèi)容是沒有樣式的，這段時間的長短跟網(wǎng)速，電腦速度都有關(guān)系。 解決方法簡單的出奇，只要在之間加入一個或者元素就可以了。32，null和undefined的區(qū)別？ null是一個表示無的對象，轉(zhuǎn)為數(shù)值時為0；undefined是一個表示無的原始值，轉(zhuǎn)為數(shù)值時為NaN。 當(dāng)聲明的變量還未被初始化時，變量的默認(rèn)值為undefined。 null用來表示尚未存在的對象，常用來表示函數(shù)企圖返回一個不存在的對象。 undefined表示缺少值，

34、就是此處應(yīng)該有一個值，但是還沒有定義。典型用法是： （1）變量被聲明了，但沒有賦值時，就等于undefined。 （2) 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。 （3）對象沒有賦值的屬性，該屬性的值為undefined。 （4）函數(shù)沒有返回值時，默認(rèn)返回undefined。 null表示沒有對象，即該處不應(yīng)該有值。典型用法是： （1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。 （2） 作為對象原型鏈的終點(diǎn)。33，new操作符具體干了什么呢? 1、創(chuàng)建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數(shù)的原型。 2、屬性和方法被加入到 this 引用的對象

35、中。 3、新創(chuàng)建的對象由 this 所引用，并且最后隱式的返回 this 。 var obj = ;obj._proto_ = Btotype;Base.call(obj); 34，js延遲加載的方式有哪些？ defer和async、動態(tài)創(chuàng)建DOM方式（創(chuàng)建script，插入到DOM中，加載完畢callBack）、按需異步載入35，js如何解決跨域問題? jsonp、 document.domain+iframe、、window.postMessage、服務(wù)器上設(shè)置代理頁面jsonp的原理是動態(tài)插入script標(biāo)簽 具體參見：詳解js跨域問題36，docum

36、en.write和 innerHTML的區(qū)別 document.write只能重繪整個頁面,innerHTML可以重繪頁面的一部分37，.call() 和 .apply() 的區(qū)別和作用？ 作用：動態(tài)改變某個類的某個方法的運(yùn)行環(huán)境。 區(qū)別參見：JavaScript學(xué)習(xí)總結(jié)（四）function函數(shù)部分38，哪些操作會造成內(nèi)存泄漏？ 內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。 垃圾回收器定期掃描對象，并計(jì)算引用了每個對象的其他對象的數(shù)量。如果一個對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。 setTimeout 的第一個參數(shù)

37、使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏。閉包、控制臺日志、循環(huán)（在兩個對象彼此引用且彼此保留時，就會產(chǎn)生一個循環(huán)）詳見：詳解js變量、作用域及內(nèi)存39，JavaScript中的作用域與變量聲明提升？ 詳見：詳解JavaScript函數(shù)模式40，如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中？ 通過判斷Global對象是否為window，如果不為window，當(dāng)前腳本沒有運(yùn)行在瀏覽器中41，主觀問題，自己要有一定的想法！ 1，你遇到過比較難的技術(shù)問題是？你是如何解決的？ 我（最近的一個時間）在做（怎樣的一個產(chǎn)品程序），這個產(chǎn)品程序的目的是（幫助用戶完成什么事），其中有一個（什么模塊），為了實(shí)現(xiàn)（

38、什么功能），用到了（什么技術(shù)），但是（遇到了什么挑戰(zhàn)難點(diǎn)bug），我通過（怎樣的手段）定位問題所在，問題出現(xiàn)的原因是（簡要的點(diǎn)到技術(shù)點(diǎn)的描述），我在（至少兩個資料來源）上找到了參考，最后基于（怎樣的決策標(biāo)準(zhǔn)）決定采用（何種解決方法），運(yùn)用了（哪種技術(shù)），最后成功解決了問題實(shí)現(xiàn)了功能，結(jié)果是這個產(chǎn)品程序（對用戶，系統(tǒng)，性能，可用性，資源等產(chǎn)生了何種正面的影響）。下一步，我認(rèn)為我應(yīng)該研究（何種更先進(jìn)的方式），進(jìn)一步（怎樣讓產(chǎn)品程序做得更好）2，列舉IE 與其他瀏覽器不一樣的特性？ 3，什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？ 優(yōu)雅降級：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼

39、會檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效. 漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。 詳見：css學(xué)習(xí)歸納總結(jié)（一） 4，WEB應(yīng)用從服務(wù)器主動推送Data到客戶端有那些方式？ Javascript數(shù)據(jù)推送 Commet：基于HTTP長連接的服務(wù)器推送技術(shù)基于WebSocket的推送方案SSE（Se

40、rver-Send Event）：服務(wù)器推送數(shù)據(jù)新方式 5，對前端界面工程師這個職位是怎么樣理解的？它的前景會怎么樣？ 前端是最貼近用戶的程序員，比后端、數(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)美的代碼格式； 6，針對服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。你有哪些性能優(yōu)化的方

41、法？ （詳情請看雅虎14條性能優(yōu)化原則）。 （1） 減少http請求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。 （2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù) （3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。 （4） 當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。 （5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。 （6） 避免使用CS

42、S （css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)。 （7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時間戳。詳情： 7，一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發(fā)生了什么？ 分為4個步驟： （1），當(dāng)發(fā)送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啟一個線程來處理這個請求，同時在遠(yuǎn)程DNS服務(wù)器上啟動一個DNS查詢。這能使瀏覽器獲得請求對應(yīng)的IP地址。 （2）， 瀏覽器與遠(yuǎn)程Web服務(wù)器通過TCP三次握手協(xié)商來建立一個TCP/IP連接。該握手包括一個同步報(bào)文，一個同步-應(yīng)答報(bào)文和一個應(yīng)答報(bào)文

43、，這三個報(bào)文在 瀏覽器和服務(wù)器之間傳遞。該握手首先由客戶端嘗試建立起通信，而后服務(wù)器應(yīng)答并接受客戶端的請求，最后由客戶端發(fā)出該請求已經(jīng)被接受的報(bào)文。 （3），一旦TCP/IP連接建立，瀏覽器會通過該連接向遠(yuǎn)程服務(wù)器發(fā)送HTTP的GET請求。遠(yuǎn)程服務(wù)器找到資源并使用HTTP響應(yīng)返回該資源，值為200的HTTP響應(yīng)狀態(tài)表示一個正確的響應(yīng)。 （4），此時，Web服務(wù)器提供資源服務(wù)，客戶端開始下載資源。請求返回后，便進(jìn)入了我們關(guān)注的前端模塊簡單來說，瀏覽器會解析HTML生成DOM Tree，其次會根據(jù)CSS生成CSS Rule Tree，而javascript又可以根據(jù)DOM API操作DOM詳情：從

44、輸入 URL 到瀏覽器接收的過程中發(fā)生了什么事情？ 8，平時如何管理你的項(xiàng)目？ 1，先期團(tuán)隊(duì)必須確定好全局樣式（globe.css），編碼模式(utf-8) 等； 2，編寫習(xí)慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）； 3，標(biāo)注樣式編寫人，各模塊都及時標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）； 4，頁面進(jìn)行標(biāo)注（例如 頁面 模塊 開始和結(jié)束）； 5，CSS跟HTML 分文件夾并行存放，命名都得統(tǒng)一（例如style.css）； 6，JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。 7，圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理 9，說說

45、最近最流行的一些東西吧？常去哪些網(wǎng)站？ Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。 網(wǎng)站：w3cfuns,sf,hacknews,CSDN,慕課，博客園，InfoQ,w3cplus等10，javascript對象的幾種創(chuàng)建方式 1，工廠模式 2，構(gòu)造函數(shù)模式 3，原型模式 4，混合構(gòu)造函數(shù)和原型模式 5，動態(tài)原型模式 6，寄生構(gòu)造函數(shù)模式 7，穩(wěn)妥構(gòu)造函數(shù)模式 11，javascript繼承的6種方法 1，原型鏈繼承 2，借用構(gòu)造函數(shù)繼承 3，組合繼承(原型+借用構(gòu)造) 4，原型式繼承 5，寄生式繼承 6，寄生組合式繼承 詳情：JavaScri

46、pt繼承方式詳解 12，ajax過程 (1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象. (2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗(yàn)證信息. （3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù). (4)發(fā)送HTTP請求. (5)獲取異步調(diào)用返回的數(shù)據(jù). (6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新.詳情：JavaScript學(xué)習(xí)總結(jié)（七） 13，Ajax和Http狀態(tài)字 異步加載和延遲加載 1.異步加載的方案： 動態(tài)插入script標(biāo)簽 2.通過ajax去獲取js代碼，然后通過eval執(zhí)行 3.script標(biāo)簽上添加defer或者async屬性 4

47、.創(chuàng)建并插入iframe，讓它異步執(zhí)行js 5.延遲加載：有些 js 代碼并不是頁面初始化的時候就立刻需要的，而稍后的某些情況才需要的。 14，前端安全問題？ sql注入原理：就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達(dá)到欺騙服務(wù)器執(zhí)行惡意的SQL命令。 總的來說有以下幾點(diǎn)： 1.永遠(yuǎn)不要信任用戶的輸入，要對用戶的輸入進(jìn)行校驗(yàn)，可以通過正則表達(dá)式，或限制長度，對單引號和雙-進(jìn)行轉(zhuǎn)換等。 2.永遠(yuǎn)不要使用動態(tài)拼裝SQL，可以使用參數(shù)化的SQL或者直接使用存儲過程進(jìn)行數(shù)據(jù)查詢存取。 3.永遠(yuǎn)不要使用管理員權(quán)限的數(shù)據(jù)庫連接，為每個應(yīng)用使用單獨(dú)的權(quán)限有限的數(shù)據(jù)庫連接

48、。 4.不要把機(jī)密信息明文存放，請加密或者h(yuǎn)ash掉密碼和敏感的信息。 15，XSS原理及防范 Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面里插入惡意html標(biāo)簽或者javascript代碼。比如：攻擊者在論壇中放一個 看似安全的鏈接，騙取用戶點(diǎn)擊后，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單， 當(dāng)用戶提交表單的時候，卻把信息傳送到攻擊者的服務(wù)器中，而不是用戶原本以為的信任站點(diǎn)。 XSS防范方法 1.代碼里對用戶輸入的地方和變量都需要仔細(xì)檢查長度和對”,”;”,”等字符做過濾；其次任何內(nèi)容寫到頁面之前都必須加以encode，避免不小心把

49、html tag 弄出來。這一個層面做好，至少可以堵住超過一半的XSS 攻擊。 2.避免直接在cookie 中泄露用戶隱私，例如email、密碼等等。 3.通過使cookie 和系統(tǒng)ip 綁定來降低cookie 泄露后的危險(xiǎn)。這樣攻擊者得到的cookie 沒有實(shí)際價值，不可能拿來重放。 4.盡量采用POST 而非GET 提交表單 16，XSS與CSRF有什么區(qū)別嗎？ XSS是獲取信息，不需要提前知道其他用戶頁面的代碼和數(shù)據(jù)包。CSRF是代替用戶完成指定的動作，需要知道其他用戶頁面的代碼和數(shù)據(jù)包。 要完成一次CSRF攻擊，受害者必須依次完成兩個步驟： 1.登錄受信任網(wǎng)站A，并在本地生成Cooki

50、e。 2.在不登出A的情況下，訪問危險(xiǎn)網(wǎng)站B。 CSRF的防御： 1.服務(wù)端的CSRF方式方法很多樣，但總的思想都是一致的，就是在客戶端頁面增加偽隨機(jī)數(shù)。 2.使用驗(yàn)證碼 17，ie各版本和chrome可以并行下載多少個資源 IE6 兩個并發(fā)，iE7升級之后的6個并發(fā)，之后版本也是6個Firefox，chrome也是6個 18，javascript里面的繼承怎么實(shí)現(xiàn)，如何避免原型鏈上面的對象共享 用構(gòu)造函數(shù)和原型鏈的混合模式去實(shí)現(xiàn)繼承，避免對象共享可以參考經(jīng)典的extend()函數(shù)，很多前端框架都有封裝的，就是用一個空函數(shù)當(dāng)做中間變量grunt， YUI compressor 和 google

51、 clojure用來進(jìn)行代碼壓縮的用法。 YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，采用Java開發(fā)。使用方法：/壓縮JSjava -jar yuicompressor-2.4.2.jar -type js -charset utf-8 -v src.js packed.js/壓縮CSSjava -jar yuicompressor-2.4.2.jar -type css -charset utf-8 -v src.css packed.css 詳情請見：你需要掌握的前端代碼性能優(yōu)化工具 19，F(xiàn)lash、Ajax各自的優(yōu)缺點(diǎn)，在使用中如何取舍？ 1、Flas

52、h ajax對比Flash適合處理多媒體、矢量圖形、訪問機(jī)器；對CSS、處理文本上不足，不容易被搜索。 2、Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機(jī)器訪問不足。共同點(diǎn)：與服務(wù)器的無刷新傳遞消息、用戶離線和在線狀態(tài)、操作DOM 20，請解釋一下 JavaScript 的同源策略。 概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。 這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。 指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

53、 為什么要有同源限制？我們舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實(shí)的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。 21，什么是 use strict; ? 使用它的好處和壞處分別是什么？ ECMAscript 5添加了第二種運(yùn)行模式：嚴(yán)格模式（strict mode）。顧名思義，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行。設(shè)立嚴(yán)格模式的目的，主要有以下幾個： - 消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為; - 消除代碼運(yùn)行

54、的一些不安全之處，保證代碼運(yùn)行的安全； - 提高編譯器效率，增加運(yùn)行速度； - 為未來新版本的Javascript做好鋪墊。 注：經(jīng)過測試IE6,7,8,9均不支持嚴(yán)格模式。 缺點(diǎn)： 現(xiàn)在網(wǎng)站的JS 都會進(jìn)行壓縮，一些文件用了嚴(yán)格模式，而另一些沒有。這時這些本來是嚴(yán)格模式的文件，被 merge 后，這個串就到了文件的中間，不僅沒有指示嚴(yán)格模式，反而在壓縮后浪費(fèi)了字節(jié)。 22，GET和POST的區(qū)別，何時使用POST？ GET：一般用于信息獲取，使用URL傳遞參數(shù)，對所發(fā)送信息的數(shù)量也有限制，一般在2000個字符 POST：一般用于修改服務(wù)器上的資源，對所發(fā)送的信息沒有限制。 GET方式需要使用Request.QueryString來取得變量的值，而POST方