web前端工程師面試題及答案
web前端工程師面試題及答案
面試題在web前端工程師求職者的面試中占有重要的位置，以下是學(xué)習(xí)啦小編為大家整理的：web前端工程師面試題及答案，僅供大家參考!
web前端工程師面試題及答案
1. 常用那幾種瀏覽器測(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í)元素：各占據(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定義偽類:after和zoom。
(4)父級(jí)div定義overflow:hidden。
(5)父級(jí)div定義overflow:auto。
(6)父級(jí)div也浮動(dòng)，需要定義寬度。
(7)父級(jí)div定義display:table。
(8)結(jié)尾處加br標(biāo)簽clear:both。
總結(jié)：比較好的是第3種方式，簡(jiǎn)潔方便。
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è)文檔。DOCTYPE不存在或格式不正確會(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)行)。 而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。
7. 頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別?
(1)link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的，只能用于加載CSS;
(2)頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面
被加載完再加載;
(3)import是CSS2.1 提出的，只在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
，現(xiàn)為Blink;
內(nèi)核主要分成兩部分：
渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。 所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(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ú)立，內(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; (6)表單控件，calendar、date、time、email、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
(Q2) IE8/IE7/IE6支持通過(guò)document.createElement方法產(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情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲(chóng)也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
3. 使閱讀源代碼的人對(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:left; 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í)別的方式，從總體中逐漸排除局部。
首先，巧妙的使用“”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。 接著，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。 css .bb{ background-color:#f1ee18;/所有識(shí)別
/ .background-color:#00deff; /IE6、7、8識(shí)別
/ +background-color:#a200ff;/IE6、7識(shí)別
/ _background-color:#1e0bd1;/IE6識(shí)別/ }
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)有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 {}
12.HTML5的離線儲(chǔ)存，描述一下 cookies，
sessionStorage 和 localStorage 的區(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)、填充(padding)、邊界(margin)、 邊框 (border).
在web前端工程師求職者的面試中，回答面試題很重要，準(zhǔn)備一份優(yōu)秀的面試自我介紹也相當(dāng)重要。
web前端工程師面試自我介紹范文(一)
您好，我是20XX年畢業(yè)于東莞理工學(xué)院計(jì)算機(jī)科學(xué)技術(shù)專業(yè)的。
大學(xué)四年時(shí)間，我主要學(xué)習(xí)的是關(guān)于C語(yǔ)言、C 、JAVA等編程書(shū)籍以及軟件，熟悉JAVA的Struts框架。曾經(jīng)在某電子科技公司完成了手機(jī)刷卡器的開(kāi)發(fā)工作，主要完成了注冊(cè)、應(yīng)用等一系列流程。
隨著觸摸屏手機(jī)的普及，蘋(píng)果、三星、HTC手機(jī)越來(lái)越流行。手機(jī)應(yīng)用開(kāi)發(fā)越來(lái)越手歡迎，很多手機(jī)游戲、應(yīng)用造就了一大批軟件開(kāi)發(fā)公司的出現(xiàn)。至于為什么讀這個(gè)專業(yè)呢，就是因?yàn)檫@些手機(jī)游戲與應(yīng)用吸引了我，所以大學(xué)四年，我一直鉆研手機(jī)的軟件開(kāi)發(fā)，最自豪的是，曾經(jīng)開(kāi)發(fā)過(guò)一款手機(jī)游戲，一個(gè)月的下載量達(dá)到幾十萬(wàn)。而正是如此，因?yàn)樽约核龅臇|西，受到了別人的肯定，一直鼓勵(lì)著喔，不斷開(kāi)發(fā)新的吸引人的軟件。
web前端工程師面試自我介紹范文(二)
我叫王海艷，是一名即將于20XX年7月畢業(yè)于長(zhǎng)春大學(xué)計(jì)算科學(xué)與技術(shù)專業(yè)的學(xué)生。借此擇業(yè)之際，我懷著一顆赤誠(chéng)的心和對(duì)事業(yè)的執(zhí)著追求，真誠(chéng)地推薦自己。
我熱愛(ài)這個(gè)專業(yè)，并投入熱情和努力。在校期間，我掌握了扎實(shí)的專業(yè)基礎(chǔ)知識(shí)，學(xué)習(xí)數(shù)學(xué)和計(jì)算機(jī)的基礎(chǔ)知識(shí)，培養(yǎng)了邏輯思維能力和認(rèn)真細(xì)心的學(xué)習(xí)態(tài)度，并完成了各項(xiàng)學(xué)習(xí)任務(wù)。由于我對(duì)java編程語(yǔ)言特別感興趣，我利用課余時(shí)間參加了吉軟國(guó)際軟件工程師實(shí)訓(xùn)的培訓(xùn)班，專業(yè)的進(jìn)行java編程方面的學(xué)習(xí)。主要學(xué)習(xí)了java核心技術(shù)、oracle數(shù)據(jù)庫(kù)的相關(guān)操作和使用、jdbc連接數(shù)據(jù)庫(kù)、web編程ssh框架，還做過(guò)幾個(gè)項(xiàng)目，具備java開(kāi)發(fā)的基礎(chǔ)能力;此外，我順利通過(guò)了國(guó)家英語(yǔ)四級(jí)考試，具備良好的聽(tīng)說(shuō)讀寫(xiě)能力。
在學(xué)習(xí)上我一絲不茍，工作上我也任勞任怨，爭(zhēng)創(chuàng)佳績(jī)。我曾擔(dān)任班上團(tuán)支書(shū)，成功策劃了班上的一系列團(tuán)日活動(dòng)，獲得一致好評(píng)，我組織的團(tuán)日活動(dòng)被評(píng)為十佳團(tuán)日活動(dòng)之一，我也被評(píng)為“優(yōu)秀團(tuán)干部”，這為提高我的交際能力和培養(yǎng)我的團(tuán)隊(duì)合作精神打下了良好基礎(chǔ)。
在2014年10月到2014年2月這段期間，我曾在文思海輝技術(shù)有限公司vmware測(cè)試組實(shí)習(xí)，我負(fù)責(zé)的主要工作是根據(jù)測(cè)試的需求搭建德語(yǔ)系統(tǒng)，并在德語(yǔ)平臺(tái)上根據(jù)case對(duì)vm的產(chǎn)品做一些測(cè)試。
大學(xué)畢業(yè)，既是一個(gè)終點(diǎn)，更是一個(gè)起點(diǎn)?，F(xiàn)在，我滿懷信心地踏上了人生的新臺(tái)階，熱忱地希望有一個(gè)讓我發(fā)揮潛力和展現(xiàn)價(jià)值的舞臺(tái)。盼望貴單位給我一個(gè)機(jī)會(huì)，我將全力以赴，用滿腔的熱情和辛勤的汗水，奉獻(xiàn)自己的青春和才華!
web前端工程師面試自我介紹范文(三)
我叫，今年7月畢業(yè)于唐山師范學(xué)院計(jì)算機(jī)專業(yè)，獲計(jì)算機(jī)學(xué)士學(xué)位。從考入大學(xué)那天起我一直努力學(xué)習(xí)，在大學(xué)生活中培養(yǎng)了良好的學(xué)習(xí)習(xí)慣，所學(xué)的課程包括了從計(jì)算機(jī)的基礎(chǔ)知識(shí)到運(yùn)用等許多方面。通過(guò)對(duì)這些知識(shí)的學(xué)習(xí)，我對(duì)這個(gè)領(lǐng)域的相關(guān)知識(shí)有了一定程度的理解和掌握。并做了大量的實(shí)踐，進(jìn)一步加深了對(duì)計(jì)算機(jī)的認(rèn)識(shí)。在學(xué)好基礎(chǔ)知識(shí)的同時(shí)還注重多方面全面發(fā)展，多次參加了學(xué)校的各種活動(dòng)，在實(shí)習(xí)過(guò)程中將理論與實(shí)踐結(jié)合起來(lái)，深受學(xué)校老師和同學(xué)的歡迎。
大學(xué)生涯中，我吸取了豐富的專業(yè)知識(shí)并鍛煉了自己的能力。通過(guò)大學(xué)里的苦讀，我掌握了c語(yǔ)言，匯編語(yǔ)言，編譯原理，powerbuilder，數(shù)據(jù)庫(kù)原理， 并對(duì)c++v，c++，windows 編程等有一定了解。課外我還自學(xué)了delphi編程，asp動(dòng)態(tài)網(wǎng)頁(yè)及flash動(dòng)畫(huà)，并在大二下學(xué)期獲得“數(shù)據(jù)庫(kù)”考試證書(shū)。
隨著知識(shí)經(jīng)濟(jì)的誕臨，社會(huì)將更加需要“專業(yè)突出，素質(zhì)全面”的復(fù)合性 人才 。因此，課外我還積極投身于各種班級(jí)、學(xué)院及社交活動(dòng)。從不同層次、不同角度鍛煉自己，自己的組織、管理能力及團(tuán)隊(duì)合作精神有很大提高。
回顧大學(xué)幾年來(lái)，我學(xué)到的最有用的知識(shí)是：自信與自學(xué)!體會(huì)最深的一句話就是：天下無(wú)難事，只怕有心人!
看過(guò)“web前端工程師面試題及答案”的人還看了：