【面試】764高頻前端開發(fā)面試問題及答案整理
說說你對閉包的理解
使用閉包主要是為了設(shè)計私有的方法和變量。閉包的優(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ī)制回收
請你談?wù)凜ookie的弊端
cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔(dān)了服務(wù)器存儲的負(fù)擔(dān)，但還是有很多局限性的。
第一：每個特定的域名下最多生成20個cookie
1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最后可以有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有做硬性限制
IE和Opera?會清理近期最少使用的cookie，Firefox會隨機(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中存放不敏感數(shù)據(jù)，即使被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠(yuǎn)有效。偷盜者很可能拿到一個過期的cookie。
缺點(diǎn)：
1.`Cookie`數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補(bǔ)，因為攔截者并不需要知道cookie的意義，他只要原樣轉(zhuǎn)發(fā)cookie就可以達(dá)到目的了。
3.有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端，那么它起不到任何作用。
瀏覽器本地存儲
在較高版本的瀏覽器中，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ù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的。
web storage和cookie的區(qū)別
Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的。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ī)范的一部分而存在 ，而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等
cookie 和session 的區(qū)別：
?1、cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務(wù)器上。
?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)問題
display:none和visibility:hidden的區(qū)別？
display:none??隱藏對應(yīng)的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏，
就當(dāng)他從來不存在。
visibility:hidden ?隱藏對應(yīng)的元素，但是在文檔布局中仍保留原來的空間。
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`和`absolute`屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。
B：不同點(diǎn)：
float仍會占據(jù)位置，position會覆蓋文檔流中的其他元素。
介紹一下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ī)范對盒模型解析，一旦修改了元素的邊框或內(nèi)距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的布局。
CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？CSS3新增偽類有那些？
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, text-indent;
不可繼承的樣式：border padding margin width height ;
優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級為:
!important?>??id?>?class?>?tag??
important?比?內(nèi)聯(lián)優(yōu)先級高,但內(nèi)聯(lián)比?id?要高
CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個??元素的每個?
?元素。
p:last-of-type ?選擇屬于其父元素的最后?
?元素的每個?
?元素。
p:only-of-type ?選擇屬于其父元素唯一的?
?元素的每個?
?元素。
p:only-child ???選擇屬于其父元素的唯一子元素的每個?
?元素。
p:nth-child(2)??選擇屬于其父元素的第二個子元素的每個?
?元素。
:enabled ?:disabled 控制表單控件的禁用狀態(tài)。
:checked ???????單選框或復(fù)選框被選中。
position的值， relative和absolute分別是相對于誰進(jìn)行定位的？
absolute?
????????生成絕對定位的元素，?相對于最近一級的?定位不是 static 的父元素來進(jìn)行定位。
fixed?（老IE不支持）
????生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。?
relative?
????生成相對定位的元素，相對于其在普通流中的位置進(jìn)行定位。?
static ?默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中
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.
媒體查詢，多欄布局
border-image
XML和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。
對BFC規(guī)范的理解？
????? BFC，塊級格式化上下文，一個創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關(guān)系）的margin會發(fā)生折疊。
????（W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用。）
解釋下 CSS sprites，以及你要如何在頁面或網(wǎng)站中使用它。
CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷，因為請求耗時比較長；請求雖然可以并發(fā)，但是也有限制，一般瀏覽器都是6個。對于未來而言，就不需要這樣做了，因為有了`http2`。
html部分
說說你對語義化的理解？
1，去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
2，有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；
3，方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
4，便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。
Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?
（1）、?聲明位于文檔中的最前面，處于??標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。?
（2）、嚴(yán)格模式的排版和 JS 運(yùn)作模式是??以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
（4）、DOCTYPE不存在或格式不正確會導(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è)計的網(wǎng)頁。
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.圖片必須有說明文字
常見兼容性問題？
*?png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.也可以引用一段腳本處理.
*?瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個全局的*{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會識別)
*??漸進(jìn)識別的方式，從總體中逐漸排除局部。?
??首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。?
??接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。
??css
??????.bb{
???????background-color:#f1ee18;/*所有識別*/
??????.background-color:#00deff\9;?/*IE6、7、8識別*/
??????+background-color:#a200ff;/*IE6、7識別*/
??????_background-color:#1e0bd1;/*IE6識別*/?
??????}?
*??IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
???也可以使用getAttribute()獲取自定義屬性;
???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樣式就不出現(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í)慣?，F(xiàn)在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：``
*?上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發(fā)生重合。
解決方法，養(yǎng)成良好的代碼編寫習(xí)慣，同時采用margin-top或者同時采用margin-bottom。
*?ie6對png圖片格式支持不好(引用一段腳本處理)
解釋下浮動和它的工作原理？清除浮動的技巧
浮動元素脫離文檔流，不占據(jù)空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
1.使用空標(biāo)簽清除浮動。
???這種方法是在所有浮動標(biāo)簽后面添加一個空標(biāo)簽?定義css clear:both. 弊端就是增加了無意義標(biāo)簽。
2.使用overflow。
???給包含浮動元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after偽對象清除浮動。
???該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動元素的偽對象中設(shè)置 height:0，否則該元素會比實(shí)際高出若干像素；
浮動元素引起的問題和解決辦法？
浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對于問題1，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content:?".";display:?block;height:?0;clear:?both;visibility:?hidden;}
.clearfix{display:?inline-block;}?/*?for?IE/Mac?*/
清除浮動的幾種方法：
1，額外標(biāo)簽法，"clear:both;"> 2，使用after偽類
#parent:after{
????content:".";
????height:0;
????visibility:hidden;
????display:block;
????clear:both;
????}
3,浮動外部元素
4,設(shè)置`overflow`為`hidden`或者auto
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()?//在已有的子節(jié)點(diǎn)前插入一個新的子節(jié)點(diǎn)
（3）查找
??????getElementsByTagName()????//通過標(biāo)簽名稱
??????getElementsByName()????//通過元素的Name屬性的值(IE容錯能力較強(qiáng)，會得到一個數(shù)組，其中包括id等于name值的)
??????getElementById()????//通過元素Id，唯一性
html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
*?拖拽釋放(Drag?and?drop)?API?
??語義化更好的內(nèi)容標(biāo)簽（header,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；
對可用性產(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框架
????
如何區(qū)分：DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
iframe的優(yōu)缺點(diǎn)？
1.`