web前端開發(fā)面試題匯總

1、Web 前端開發(fā)面試題匯總1天前653瀏覽前端面試題匯總HTML&CSS1. 常用那幾種瀏覽器測試有哪些內(nèi)核（LayOutEngine）（Q1）瀏覽器：IE，ChrOme，F(xiàn)ireFOX，Safari， OPera。（Q2）內(nèi)核：Trident，Gecko，PreStO，Webkit。2. 說下行內(nèi)元素和塊級元素的區(qū)別行內(nèi)塊元素的兼容性使用（IE8以下）行內(nèi)元素：會在水平方向排列，不能包含塊級元素，設(shè)置Width無效，height無效（可以設(shè)置Iine-height），margin 上下無效，Padding 上下無效。塊級元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接著一個斷行。兼容性：di

2、splay:inline-block;display:inline;ZOOm:1;3. 清除浮動有哪些方式比較好的方式是哪一種（1）父級 div 定義 height。（2）結(jié)尾處加空div標(biāo)簽clear:both。（3）父級div定義偽類:after和zoom。（4）父級 div 定義 Overflowhdden 。（5）父級 div 定義 OVerflow:auto 。（6）父級div也浮動，需要定義寬度。（7）父級 div 定義 display:table 。（8）結(jié)尾處加br標(biāo)簽clear:both?？偨Y(jié)：比較好的是第3種方式，簡潔方便。常用的屬性有哪些分別有什么作用常用的屬性： box

3、-siz in g:C onten t-boxborder-box in herit;作用：content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和 邊框（元素默認(rèn)效果）。border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定 的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。作用標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別（Q1）告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔 。DoCTYPE不存在或格式不正確會 導(dǎo)致文檔以兼容模式呈現(xiàn)。（Q2）標(biāo)準(zhǔn)模式的排版和JS運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。在兼容模式中，頁

4、面以 寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。為什么只需要寫VDOCtyPehtmlHTML5不基于SGML ,因此不需要對DTD進(jìn)行引用；但是需要doctype來規(guī)范瀏覽器的行為 （讓瀏覽器按照它們應(yīng)該的方式來運行）。而基于SGML,所以需要對DTD進(jìn)行引用，才能告知瀏 覽器文檔所使用的文檔類型。7. 頁面導(dǎo)入樣式時，使用link和import有什么區(qū)別（1）link屬于XHTML標(biāo)簽，除了加載CSS夕卜，還能用于定義RSS,定義rel連接屬性等作用； 而import是CSS提供的，只能用于加載 CSS;（2） 頁面被加載的時，Iink會同時被加載，而import引

5、用的CSS會等到頁面被加載完再加載；（3） import是提出的，只在IE5以上才能被識別，而Iink是XHTML標(biāo)簽，無兼容問題?？傊?，Iink要優(yōu)于import。8. 介紹一下你對瀏覽器內(nèi)核的理解IE 瀏覽器的內(nèi)核 Trident、Mozilla 的 Gecko、ChrOme 的 Blink （WebKit 的分支）、OPera 內(nèi) 核原為PreStO,現(xiàn)為 Blink ；內(nèi)核主要分成兩部分：渲染弓 I擎（layoutengineer 或 RenderingEngine） 和 JS 弓 I擎渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等）， 以及計算

6、網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解 釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和JS引擎并沒有區(qū)分 的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。有哪些新特性如何處理 HTML5新標(biāo)簽的瀏覽器兼容問題如何區(qū)分HTML 和 HTML5(QI)HTML5現(xiàn)在已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增 加。(1) 繪畫 Canvas;(2) 用于媒介回放的VideO

7、和audio元素；(3) 本地離線存儲IOCalStOrage長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；(4)SeSSiOnStorage的數(shù)據(jù) 在瀏覽器關(guān)閉后自動刪除；(5)語意化更好的內(nèi)容元素，比如 article、footer、header、nav、SeCtiOn;(6)表單控件，calendar、 date、time、email、url、search;(7)新的技術(shù) WebWOrker,websocket,Geolocation;(Q2)IE8IE7IE6支持通過方法產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持 HTML5新標(biāo)簽, 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。也可以直接使

8、用成熟的框架、比如html5shim，10.簡述一下你對 HTML語義化的理解用正確的標(biāo)簽做正確的事情。1. html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析 ；2. 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的；搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;3. 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。11#常見兼容性問題Png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成 PNG8. ？瀏覽器默認(rèn)的margin和Padding不同。解決方案是加一個全局的margin:0;Padding:O;

9、來統(tǒng)一。IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。浮動 ie 產(chǎn)生的雙倍距離 #boxfloat:left;Width:10px;margin:000100px;？這種情況之下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)獨立識別。css.bb ？backg

10、round-color:#f1ee18;/ 所有識別 /.background-color:#00deff9;/ IE6、7、8 識別/+background-color:#a200ff;/ IE6、7 識別 /_background-color:#1e0bd1;/ IE6 識別 / ？IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性;FirefOX下,只能使用getAttribute()獲取自定義屬性.解決方法：統(tǒng)一通過getAttribute()獲取自定義 屬性E下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Fir

11、efOX下,event對象有 pageX,pageY屬性,但是沒有x,y屬性.？解決方法：(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。？ChrOme中文界面下默認(rèn)會將小于12px的文本強(qiáng)制按照12px顯示,可通過加入CSS屬性-Webkit-text-size-adjust:none; 解決.？超鏈接訪問過后hover樣式就不出現(xiàn)了被點擊訪問過的超鏈接樣式不在具有hover和active 了解決方法是改變 CSS 屬性的排列順序:L-V-H-A:a:linka:ViSiteda:hovera:active的離線儲存，描述一下 cookies ，SeSSionStorage和

12、 localStorage的區(qū)別cookie在瀏覽器和服務(wù)器間來回傳遞。SeSSiOnStorage和localStorage不會SeSSionStOrage 和 localStorage 的存儲空間更大；SeSSiOnStorage和localStorage有更多豐富易用的接口；SeSSiOnStorage和localStorage各自獨立的存儲空間；CSS 一、介紹一下CSS的盒子模型(1)有兩種，IE盒子模型、標(biāo)準(zhǔn) W3C盒子模型；IE的content部分包含了 border和Pading;(2)盒模型：內(nèi)容(content)、填充(Padding)、邊界(margin)、邊框(bord

13、er).二、CSS選擇符有哪些哪些屬性可以繼承優(yōu)先級算法如何計算新增偽類有那些？選擇器(#myid)2. 類選擇器(.myclassname)3. 標(biāo)簽選擇器(div,h1,p)4. 相鄰選擇器(h1+p)5. 子選擇器（ulli）6. 后代選擇器（Iia）7. 通配符選擇器（*）8. 屬性選擇器（arel=externa門）9. 偽類選擇器（a:hover,li:nth-child ）可繼承的樣式：fon t-sizefo nt-familycolor,ULLIDLDDDT;不可繼承的樣式：borderpaddi ngmargi nwidthheight優(yōu)先級就近原則，同權(quán)重情況下樣式定義最

14、近者為準(zhǔn)；載入樣式以最后載入的定位為準(zhǔn)；優(yōu)先級為：!importantidclasstag,important比內(nèi)聯(lián)優(yōu)先級高三、CSS3新增偽類舉例p:first-of-type 選擇屬于其父元素的首個 p元素的每個p元素。 p:IaSt-Of-type 選擇屬于其父元素的最后 p元素的每個p元素。 p:only-of-type選擇屬于其父元素唯一的p元素的每個p元素。P:only-child選擇屬于其父元素的唯一子元素的每個 p元素。 p:nth-child（2）選擇屬于其父元素的第二個子元素的每個p元素。:enabled:disabled控制表單控件的禁用狀態(tài)。:CheCked單選框或復(fù)選

15、框被選中。四、 如何居中div如何居中一個浮動元素水平居中：給div設(shè)置一個寬度，然后添加 margin:Oauto屬性divwidth:200px;margi n:0auto;垂直居中：確定容器的寬高：如寬500高300的層設(shè)置層的外邊距.divWidth:500PXheight:300px;lass1/ 權(quán)重為id1權(quán)重為100+仁101 /id1div/權(quán)重為10+1=11 /.class1div/ 權(quán)重為10+10+仁21 /.如果權(quán)重相同，則最后定義的樣式會起作用，但是應(yīng)該避免這種情況出現(xiàn)十三、解釋下浮動和它的工作原理清除浮動的技巧十四、用過媒體查詢，針對移動端的布局嗎十五、使用CS

16、S預(yù)處理器嗎喜歡那個SASS十六、如果需要手動寫動畫，你認(rèn)為最小時間間隔是多久，為什么多數(shù)顯示器默認(rèn)頻率是60Hz ,即1秒刷新60次，所以理論上最小間隔為：1/60 * 1000ms =十七、display:inline-block什么時候會顯示間隙，如何解決移除空格、使用 margin 負(fù)值、使用 font-size:0、Ietter-SPaCing、WOrd-SPaCingJaVaSCriPt介紹js的數(shù)據(jù)類型ECMASCriPt 有 5 種原始類型（PrimitiVetyPe ） ，即P Undefined、Null、Boolean、NUmber 和 String。js有哪些內(nèi)置對象數(shù)

17、據(jù)圭寸裝類對象（五種）：Object、Array、Boolean、NUmber 和 String ；其他對象：FUnction、ArgUments、Math、Date、RegEXP、Errorthis對象的理解this總是指向函數(shù)的直接調(diào)用者（所謂當(dāng)前對象，而非間接調(diào)用者）如果有new關(guān)鍵字，this指向new出來的那個對象;在事件中，this指向觸發(fā)這個事件的對象，特殊的是IE中的attachEvent中的this總是指 向全局對象WindOW。eval ()是做什么的把對應(yīng)的字符串解析成JS代碼并運行；應(yīng)該避免使用eval不安全，非常耗性能(2次，一次解析成js語句，一次執(zhí)行)。由JSoN

18、字符串轉(zhuǎn)換為JSoN對象的時候可以用eval，VarObj=eval( ( +str+ )。DoM怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點創(chuàng)建新節(jié)點創(chuàng)建一個 DOM 片段 CreateDOCUmentFragment()創(chuàng)建一個具體的元素CreateEIement()創(chuàng)建一個文本節(jié)點CreateTeXtNOdeo添加、移除、替換、插入 appe ndChild()removeChild()replaceChild()i nsertBefore()在已有的子節(jié)點前插入一個新的子節(jié)點：查找通過標(biāo)簽名稱：getEleme ntsByTagName().通過元素的Name屬性的值(IE容錯能力較強(qiáng)，

19、會得到一個數(shù)組，其中包括id等于name值的):getEleme ntsByName().通過元素Id ,唯一性:null 和 Undefined 的區(qū)別null是一個表示”無”的對象，轉(zhuǎn)為數(shù)值時為0；Undefined是一個表示”無”的原始值，轉(zhuǎn)為數(shù)值時為NaN。Undefined :(1) 變量被聲明了，但沒有賦值時，就等于 Undefined。(2) 調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于Un defi ned(3) 對象沒有賦值的屬性，該屬性的值為Undefined。(4) 函數(shù)沒有返回值時，默認(rèn)返回 Undefined。null:(1) 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對

20、象。(2) 作為對象原型鏈的終點。new操作符具休干了什么呢(1)創(chuàng)建一個空對象，并且this變量引用該對象，同時還繼承了該函數(shù)的原型。(2) 屬性和方法被加入到this引用的對象中。(3) 新創(chuàng)建的對象由this所引用，并且最后隱式的返回this。JSoN的了解JSON(JaVaSCriPtObjeCtNotatio n)是一種輕量級的數(shù)據(jù)交換格式。它是基于JaVaSCriPt的一個子集。數(shù)據(jù)格式簡單,易于讀寫，占用帶寬小。格式：采用鍵值對，例如： age : 12 , n ame : backcall()和apply()的區(qū)別和作用apply()函數(shù)有兩個參數(shù)：第一個參數(shù)是上下文，第二個參

21、數(shù)是參數(shù)組成的數(shù)組。如果上下文是null ,則使用全局對象代替。如：(this,1,2,3);call()的第一個參數(shù)是上下文，后續(xù)是實例傳入的參數(shù)序列。如：(this,1,2,3);如何獲取UA什么是Ua ？fun ctio nwhatBrowser()其他1.HTTP狀態(tài)碼知道哪些100Continue繼續(xù)，一般在發(fā)送post請求時，已發(fā)送了 httpheader之后服務(wù)端將返回此信息， 表示確認(rèn)，之后發(fā)送具體參數(shù)信息200OK正常返回信息201Created請求成功并且服務(wù)器創(chuàng)建了新的資源202ACCePted服務(wù)器已接受請求，但尚未處理 301MOVedPermanently 請求的網(wǎng)

22、頁已永 久移動到新位置。302Found臨時性重定向。303SeeOther臨時性重定向，且總是使用 GET請求 新的URI。304NotModified自從上次請求后，請求的網(wǎng)頁未修改過。400BadReqUeSt服務(wù)器無法理解請求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求。401Unauthorized請求未授權(quán)。 403Forbidden 禁止訪問。404NOtFOund 找不到如何與 URI 相匹配的資源。500InternalServerError 最常見的服務(wù)器端錯誤。503SerViCeUnavailable服務(wù)器端暫時無法處理請求(可能是過載或維護(hù))。1.你有哪些性能優(yōu)

23、化的方法（1）減少http請求次數(shù)：CSSSPrites,JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁 GZiP ,CDN托管，data緩存，圖片服務(wù)器。（2）前端模板JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬 浪費，前端用變量保存 AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)（3）用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。（4）當(dāng)需要設(shè)置的樣 式很多時設(shè)置CIaSSName而不是直接操作style。（ 5）少用全局變量、緩存 DOM節(jié)點查找的結(jié) 果。減少IO讀取操作。（6）避免使用 CSSEXPreSSiOn （CSS表達(dá)式）又稱Dynamicproperties（動 態(tài)屬性）。（7）圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部