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

1、web前端開(kāi)發(fā)面試題匯總1 天前 653 瀏覽 2 評(píng)論前端面試題匯總HTML&CSS1. 常用那幾種瀏覽器測(cè)試有哪些內(nèi)核 （Layout Engine）（Q1） 瀏覽器： IE ，Chrome，F(xiàn)ireFox ，Safari ，Opera。（Q2） 內(nèi)核： Trident ，Gecko， Presto ，Webkit 。2. 說(shuō)下行內(nèi)元素和塊級(jí)元素的區(qū)別行內(nèi)塊元素的兼容 性使用（IE8 以下） 行內(nèi)元素：會(huì)在水平方向排列，不能包含塊級(jí)元素，設(shè)置 width 無(wú)效，height 無(wú)效（可以設(shè)置 line-height） ，margin 上下無(wú)效， padding 上下無(wú)效。塊級(jí)元素：各

2、占據(jù)一行，垂直方向排列。從新行開(kāi)始結(jié)束接著一個(gè)斷行。兼容性： display:inline-block;display:inline;zoom:1;3. 清除浮動(dòng)有哪些方式比較好的方式是哪一種（1）父級(jí) div 定義 height 。（2）結(jié)尾處加空 div 標(biāo)簽 clear:both 。（3）父級(jí) div 定義偽類(lèi) :after 和 zoom。（4）父級(jí) div 定義 overflow:hidden 。（6）父級(jí) div 也浮動(dòng)，需要定義寬度。（7）父級(jí) div 定義 display:table 。（8）結(jié)尾處加 br 標(biāo)簽 clear:both ?？偨Y(jié)：比較好的是第 3 種方式，簡(jiǎn)潔方便。

3、4. box-sizing 常用的屬性有哪些分別有什么作用常用的屬性： box-sizing: content-box border-box inherit;作用：content-box: 寬度和高度分別應(yīng)用到元素的內(nèi)容框 。在寬度和高度之 外繪制元素的內(nèi)邊距和邊框 （ 元素默認(rèn)效果 ）。border-box: 元素指定的 任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn) 行繪制 。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度 和高度。5. Doctype 作用標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別（Q1） 告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔 。DOCTYP不E 存在 或格式不

4、正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。（Q2） 標(biāo)準(zhǔn)模式的排版和 JS 運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。 在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示 , 模擬老式瀏覽器的行為以防 止站點(diǎn)無(wú)法工作。6. HTML5 為什么只需要寫(xiě) < Doctype html>HTML5不基于 SGML，因此不需要對(duì) DTD進(jìn)行引用 ; 但是需要 doctype 來(lái)規(guī)范 瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）。而基于 SGML所, 以需要對(duì) DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類(lèi)型。7. 頁(yè)面導(dǎo)入樣式時(shí)， 使用 link 和 import 有什么區(qū)別（1）link 屬于 XH

5、TML標(biāo)簽，除了加載 CSS外，還能用于定義 RSS, 定義 rel 連接屬性等作用；而 import是 CSS提供的，只能用于加載 CSS;（2）頁(yè)面被加載的時(shí)， link 會(huì)同時(shí)被加載，而 import 引用的 CSS會(huì)等到 頁(yè)面被加載完再加載 ;（3）import 是 提出的，只在 IE5 以上才能被識(shí)別， 而link 是 XHTML標(biāo)簽， 無(wú)兼容問(wèn)題。總之， link 要優(yōu)于 import。8. 介紹一下你對(duì)瀏覽器內(nèi)核的理解IE 瀏覽器的內(nèi)核 Trident 、Mozilla 的 Gecko、Chrome的 Blink （WebKit 的 分支）、 Opera 內(nèi)核原為 Presto，

6、現(xiàn)為 Blink ；內(nèi)核主要分成兩部分：渲染引擎 （layout engineer 或 Rendering Engine） 和 JS 引擎 渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（ HTM、L XML、圖像等等）、整理訊息（例 如加入 CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏 覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、 電子郵件客戶(hù)端以及其它需要編輯、 顯示網(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ú)立，

7、內(nèi)核就傾向于只 指渲染引擎。9. html5 有哪些新特性如何處理 HTML5新標(biāo)簽的瀏覽 器兼容問(wèn)題如何區(qū)分 HTML 和 HTML5(Q1) HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)， 多任務(wù)等功能的增加。(1) 繪畫(huà) canvas;(2) 用于媒介回放的 video 和 audio 元素 ;(3) 本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)， 瀏覽器關(guān)閉后數(shù)據(jù)不丟失 ;(4) sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除 ;(5) 語(yǔ)意化更好的內(nèi)容元素， 比如 article 、footer 、header 、nav、section;

8、(6) 表單控件， calendar 、date 、time 、email 、url 、search;(7) 新的技術(shù) webworker, websocket, Geolocation;(Q2) IE8/IE7/IE6 支持通過(guò)方法產(chǎn)生的標(biāo)簽， 可以利用這一特性讓這些瀏 覽器支持 HTML5新標(biāo)簽， 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。 也 可以直接使用成熟的框架、比如 html5shim ，10. 簡(jiǎn)述一下你對(duì) HTML語(yǔ)義化的理解用正確的標(biāo)簽做正確的事情。1. html 語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引 擎解析;2. 即使在沒(méi)有樣式 CSS情況下也以一

9、種文檔格式顯示，并且是容易閱讀的;3. 搜索引擎的爬蟲(chóng)也依賴(lài)于 HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO;4. 使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。11 # 常見(jiàn)兼容性問(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:le

10、ft; 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/IE6、7、8 識(shí)別IE6、7 識(shí)別IE6 識(shí)別background-color:#f1ee18;/ 所有識(shí)別.b

11、ackground-color:#00deff9;+background-color:#a200ff;/_background-color:#1e0bd1;/ 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)有

12、 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 的離線儲(chǔ)存，描述一下 cookies ， sessionStorage 和 loc

13、alStorage 的區(qū)別cookie 在瀏覽器和服務(wù)器間來(lái)回傳遞。 sessionStorage 和 localStorage 不會(huì)sessionStorage 和 localStorage 的存儲(chǔ)空間更大；sessionStorage 和 localStorage 有更多豐富易用的接口；sessionStorage 和 localStorage 各自獨(dú)立的存儲(chǔ)空間；CSS一、 介紹一下 CSS的盒子模型(1)有兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型； IE 的content 部分包 含了 border 和 pading;(2)盒模型： 內(nèi)容(content) 、填充 (paddin

14、g) 、邊界 (margin) 、 邊框(border).二、CSS 選擇符有哪些哪些屬性可以繼承優(yōu)先級(jí)算法 如何計(jì)算新增偽類(lèi)有 那些選擇器( # myid )2. 類(lèi)選擇器( .myclassname)3. 標(biāo)簽選擇器( div, h1, p )4. 相鄰選擇器( h1 + p )5. 子選擇器( ul > li )6. 后代選擇器( li a )7. 通配符選擇器( * )8. 屬性選擇器( arel = "external")9. 偽類(lèi)選擇器( a: hover, li: nth - child)可繼承的樣式：font-size font-family colo

15、r, UL LI DL DD DT;不可繼承的樣式：border padding margin width height 優(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 新增偽類(lèi)舉例p:first-of-type 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。 p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。 p:on

16、ly-of-type 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。 p:only-child 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。 p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。 :enabled :disabled 控制表單控件的禁用狀態(tài)。:checked 單選框或復(fù)選框被選中。四、如何居中 div 如何居中一個(gè)浮動(dòng)元素水平居中：給 div 設(shè)置一個(gè)寬度，然后添加 margin:0 auto 屬性divwidth:200px; margin:0 auto; 垂直居中：確定容器的寬高

17、 ：如寬 500 高 300 的層設(shè)置層的外邊距.div Width:500px height:300px;lass1 / 權(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)十三、 解釋下浮動(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)頻率是

18、60Hz，即 1 秒刷新 60 次，所以理論上最小間隔為： 1/60 1000ms 十七、 display:inline-block 什么時(shí)候會(huì)顯示間隙， 如何解決移除空格、使用 margin 負(fù)值、使用 font-size:0 、letter-spacing 、 word-spacingJavaScript介紹 js 的數(shù)據(jù)類(lèi)型ECMAScript 有 5 種原始類(lèi)型（ primitive type ），即 Undefined 、Null 、 Boolean 、 Number 和String 。js 有哪些內(nèi)置對(duì)象數(shù)據(jù)封裝類(lèi)對(duì)象（五種）： Object 、Array 、Boolean 、Nu

19、mber 和 String ； 其他對(duì)象： Function 、Arguments、Math、Date 、RegExp、 Error this 對(duì)象的理解this 總是指向函數(shù)的直接調(diào)用者（所謂當(dāng)前對(duì)象，而非間接調(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)

20、換為 JSON對(duì)象的時(shí)候可以用 eval ，var obj =eval( ( + str +')')。DOM怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找 節(jié)點(diǎn)創(chuàng)建新節(jié)點(diǎn) 創(chuàng)建一個(gè) DOM片段 createDocumentFragment() 創(chuàng)建一個(gè)具體的元素 createElement() 創(chuàng)建一個(gè)文本節(jié)點(diǎn) createTextNode() 添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore()在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)：查找 通過(guò)標(biāo)簽名稱(chēng) ： getElementsByTagName()

21、. 通過(guò)元素的 Name屬性的值 (IE 容錯(cuò)能力較強(qiáng)， 會(huì)得到一個(gè)數(shù)組， 其中包括 id 等于 name值的 ) ： getElementsByName(). 通過(guò)元素 Id ，唯一性： getElementById()null 和 undefined 的區(qū)別null 是一個(gè)表示”無(wú)”的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為 0； undefined 是一個(gè)表示”無(wú)”的原始值，轉(zhuǎn)為數(shù)值時(shí)為 NaN。undefined ：（ 1）變量被聲明了，但沒(méi)有賦值時(shí)，就等于 undefined 。（ 2） 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒(méi)有提供，該參數(shù)等于 undefined 。（ 3）對(duì)象沒(méi)有賦值的屬性，該屬性的值為 und

22、efined 。（ 4）函數(shù)沒(méi)有返回值時(shí)，默認(rèn)返回 undefined 。null ：（ 1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。（ 2） 作為對(duì)象原型鏈的終點(diǎn)。new操作符具體干了什么呢（1）創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù) 的原型。（2）屬性和方法被加入到 this 引用的對(duì)象中。（3）新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。JSON 的了解JSON（JavaScript Object Notation） 是一種輕量級(jí)的數(shù)據(jù)交換格式。它是基于 JavaScript 的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單 , 易于讀寫(xiě) , 占用帶寬 小。

23、 格式：采用鍵值對(duì)，例如： age': '12', name': 'back'call（） 和 apply（） 的區(qū)別和作用apply（） 函數(shù)有兩個(gè)參數(shù)：第一個(gè)參數(shù)是上下文，第二個(gè)參數(shù)是參數(shù)組成的 數(shù)組。如果上下文是 null ，則使用全局對(duì)象代替。 如： （this,1,2,3）;call（） 的第一個(gè)參數(shù)是上下文，后續(xù)是實(shí)例傳入的參數(shù)序列。 如：(this,1,2,3);如何獲取 UA什么是 uafunction whatBrowser() 其他1.HTTP狀態(tài)碼知道哪些100 Continue 繼續(xù)，一般在發(fā)送 post 請(qǐng)求時(shí)，已發(fā)送了

24、 http header 之后 服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息 200 OK 正常返回信息 201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源 202 Accepted 服務(wù)器已接受 請(qǐng)求，但尚未處理 301 Moved Permanently 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。302 Found 臨時(shí)性重定向。 303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng) 求新的 URI 。 304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)。 400 Bad Request 服務(wù)器無(wú)法理解請(qǐng)求的格式， 客戶(hù)端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi) 容發(fā)起請(qǐng)求

25、。 401 Unauthorized 請(qǐng)求未授權(quán)。 403 Forbidden 禁止訪問(wèn)。 404 Not Found 找不到如何與 URI 相匹配的資源。 500 Internal Server Error最常見(jiàn)的服務(wù)器端錯(cuò)誤。 503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求 （可能是過(guò)載或維護(hù)）。1. 你有哪些性能優(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操作， 減少 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 propertie