【面試篇】金九銀十面試季，這些面試題你都會(huì)了嗎?

你做的頁面在哪些流覽器測試過？這些瀏覽器的內(nèi)核分別是什么?

IE: trident內(nèi)核

Firefox：gecko內(nèi)核

Safari:webkit內(nèi)核

Opera:以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

Chrome:Blink(基于webkit，Google與Opera Software共同開發(fā))
每個(gè)HTML文件里開頭都有個(gè)很重要的東西，Doctype，知道這是干什么的嗎？
聲明位于文檔中的最前面的位置，處于 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。（重點(diǎn)：告訴瀏覽器按照何種規(guī)范解析頁面）
Quirks模式是什么？它和Standards模式有什么區(qū)別

從IE6開始，引入了Standards模式，標(biāo)準(zhǔn)模式中，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。

在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差， IE6將對CSS提供更好的支持，然而這時(shí)的問題就來了，因?yàn)橛泻芏囗撁媸腔谂f的布局方式寫的，而如果IE6 支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現(xiàn)有頁面，又提供新的渲染機(jī)制呢？

在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。遇到這種問題時(shí)的一個(gè)常見做法是增加參數(shù)和分支，即當(dāng)某個(gè)參數(shù)為真時(shí)，我們就使用新功能，而如果這個(gè)參數(shù) 不為真時(shí)，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當(dāng)成了這個(gè)“參數(shù)”，因?yàn)橐郧暗捻撁娲蠹叶疾粫?huì)去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個(gè)頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區(qū)別：

總體會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別。

盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個(gè)元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

 














設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效，而在quirks模式下，則會(huì)生效。

設(shè)置百分比的高度：在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個(gè)百分比的高度是無效的用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會(huì)失效。

（還有很多，答出什么不重要，關(guān)鍵是看他答出的這些是不是自己經(jīng)驗(yàn)遇到的，還是說都是看文章看的，甚至完全不知道。）
div+css的布局較table布局有什么優(yōu)點(diǎn)？

改版的時(shí)候更方便 只要改css文件。
頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡潔。
表現(xiàn)與結(jié)構(gòu)相分離。
易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。
img的alt與title有何異同？ strong與em的異同？

a:alt(alt text):為不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會(huì)在沒有title時(shí)把a(bǔ)lt當(dāng)成 tool tip顯示)

title(tool tip):該屬性為設(shè)置該屬性的元素提供建議性的信息。

strong:粗體強(qiáng)調(diào)標(biāo)簽，強(qiáng)調(diào)，表示內(nèi)容的重要性

em:斜體強(qiáng)調(diào)標(biāo)簽，更強(qiáng)烈強(qiáng)調(diào)，表示內(nèi)容的強(qiáng)調(diào)點(diǎn)
語義化的理解？

    用正確的標(biāo)簽做正確的事情！
    html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；
    在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。
    搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。
    使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

垂直水平居中的方法有幾種？

    絕對定位，left0，top 0 bottom0 marg auto
    絕對定位 left50%，top50%；給負(fù)margin
    絕對定位 left50%，top50%；給transform：translate（-50%。-50%）
    父：display：table-cell，text-aline：center，vetiral-align：middle
    子：display：inline-block
    display：flex；justify-content：center；align-item：center

你有哪些性能優(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í)設(shè)置className而不是直接操作style。

（5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。

（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。

（7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部，加上時(shí)間戳……
為什么利用多個(gè)域名來存儲(chǔ)網(wǎng)站資源會(huì)更有效？

    CDN緩存更方便
    突破瀏覽器并發(fā)限制
    節(jié)約cookie帶寬
    節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應(yīng)速度
    防止不必要的安全問題

什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)？

優(yōu)雅降級：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效.






漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。
懶加載的實(shí)現(xiàn)原理

意義：懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請求數(shù)或延遲請求數(shù)

實(shí)現(xiàn)原理：先加載一部分?jǐn)?shù)據(jù)，當(dāng)觸發(fā)某個(gè)條件的時(shí)候利用異步加載剩余的數(shù)據(jù)，新的到的數(shù)據(jù)不會(huì)影響原有數(shù)據(jù)的顯示，同時(shí)最大程度的減少了服務(wù)器端的資源耗用。

實(shí)現(xiàn)方式：

    第一種是純粹的延遲加載，使用setTimeout或setInterval進(jìn)行加載延遲
    第二種是條件加載，符合某些條件，或觸發(fā)了某些事件才開始異步加載
    第三種是可視區(qū)加載，即僅加載用戶可以看到的區(qū)域，這個(gè)主要由監(jiān)控滾動(dòng)條來實(shí)現(xiàn)，一般會(huì)在用戶看到某圖片前一定距離便開始加載，這樣能保證用戶拉下時(shí)剛好能看到圖片。

請談一下你對網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。

網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓web發(fā)展的更‘健康’，開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)，降低開發(fā)難度，開發(fā)成本，SEO也會(huì)更好做，也不會(huì)因?yàn)闉E用代碼導(dǎo)致各種BUG、安全問題，最終提高網(wǎng)站易用性。
請描述一下cookies，sessionStorage和localStorage的區(qū)別？

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級別的存儲(chǔ)。而localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。

web storage和cookie的區(qū)別

Web Storage的概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(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僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。
簡述一下src與href的區(qū)別

src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。

src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。

當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接。

如果我們在文檔中添加
那么瀏覽器會(huì)識別該文檔為css文件，就會(huì)并行下載資源并且不會(huì)停止對當(dāng)前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
知道的網(wǎng)頁制作會(huì)用到的圖片格式有哪些？

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面試官想要的最后答案。面試官希望聽到是Webp。（是否有關(guān)注新技術(shù)，新鮮事物）

科普一下Webp：WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式。

在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%
知道什么是微格式嗎？談?wù)劺斫?。在前端?gòu)建中應(yīng)該考慮微格式嗎？

微格式（Microformats）是一種讓機(jī)器可讀的語義化XHTML詞匯的集合，是結(jié)構(gòu)化數(shù)據(jù)的開放標(biāo)準(zhǔn)。是為特殊應(yīng)用而制定的特殊格式。

優(yōu)點(diǎn)：將智能數(shù)據(jù)添加到網(wǎng)頁上，讓網(wǎng)站內(nèi)容在搜索引擎結(jié)果界面可以顯示額外的提示。（應(yīng)用范例：豆瓣，有興趣自行g(shù)oogle）
CSS中可以通過哪些屬性定義，使得一個(gè)DOM元素不顯示在瀏覽器可視范圍內(nèi)？
最基本的：

設(shè)置display屬性為none，或者設(shè)置visibility屬性為hidden
技巧性：

設(shè)置寬高為0，設(shè)置透明度為0，設(shè)置z-index位置在-1000
超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么？如何解決？

被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）
行內(nèi)元素和塊級元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)置嗎？

塊級元素(block)特性：

總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;

內(nèi)聯(lián)元素(inline)特性：

和相鄰的內(nèi)聯(lián)元素在同一行;

寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認(rèn)的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會(huì)自動(dòng)換行），有哪些？

  答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

 

什么是外邊距重疊？重疊的結(jié)果是什么？

外邊距重疊就是margin-collapse。

在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。

折疊結(jié)果遵循下列計(jì)算規(guī)則：

    兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
    兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對值的較大值。
    兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能實(shí)現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，

而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果！）
px和em的區(qū)別？

px和em都是長度單位，區(qū)別是，px的值是固定的，指定是多少就是多少，計(jì)算比較容易。em得值不是固定的，并且em會(huì)繼承父級元素的字體大小。

瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
Sass、LESS是什么？大家為什么要使用他們？

他們是CSS預(yù)處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

例如Less是一種動(dòng)態(tài)樣式語言. 將CSS賦予了動(dòng)態(tài)語言的特性，如變量，繼承，運(yùn)算， 函數(shù). LESS 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可一在服務(wù)端運(yùn)行 (借助 Node.js)。

為什么要使用它們？

結(jié)構(gòu)清晰，便于擴(kuò)展。

可以方便地屏蔽瀏覽器私有語法差異。這個(gè)不用多說，封裝對瀏覽器語法差異的重復(fù)處理，減少無意義的機(jī)械勞動(dòng)。

可以輕松實(shí)現(xiàn)多重繼承。

完全兼容 CSS 代碼，可以方便地應(yīng)用到老項(xiàng)目中。LESS 只是在 CSS 語法上做了擴(kuò)展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
display:none與visibility:hidden的區(qū)別是什么？

display : 隱藏對應(yīng)的元素但不擠占該元素原來的空間。

visibility: 隱藏對應(yīng)的元素并且擠占該元素原來的空間。

即是，使用CSS display:none屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在。
CSS中l(wèi)ink和@import的區(qū)別是？

Link屬于html標(biāo)簽，而@import是CSS中提供的

在頁面加載的時(shí)候，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)在頁面加載完成后才會(huì)加載引用的CSS

@import只有在ie5以上才可以被識別，而link是html標(biāo)簽，不存在瀏覽器兼容性問題

Link引入樣式的權(quán)重大于@import的引用（@import是將引用的樣式導(dǎo)入到當(dāng)前的頁面中）
為什么要初始化樣式？

由于瀏覽器兼容的問題，不同的瀏覽器對標(biāo)簽的默認(rèn)樣式值不同，若不初始化會(huì)造成不同瀏覽器之間的顯示差異

但是初始化CSS會(huì)對搜索引擎優(yōu)化造成小影響
BFC是什么?

BFC（塊級格式化上下文），一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子內(nèi)元素的布局不會(huì)影響盒子外面的元素。在同一個(gè)BFC中的兩個(gè)相鄰的盒子在垂直方向發(fā)生margin重疊的問題
BFC是指瀏覽器中創(chuàng)建了一個(gè)獨(dú)立的渲染區(qū)域，該區(qū)域內(nèi)所有元素的布局不會(huì)影響到區(qū)域外元素的布局，這個(gè)渲染區(qū)域只對塊級元素起作用
HTML與XHTML——二者有什么區(qū)別？

    所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
    所有標(biāo)簽的元素和屬性的名字都必須使用小寫
    所有的 XML 標(biāo)記都必須合理嵌套
    所有的屬性必須用引號 “” 括起來
    把所有 < 和 & 特殊符號用編碼表示
    給所有屬性賦一個(gè)值
    不要在注釋內(nèi)容中使用 “–”
    圖片必須有說明文字

html常見兼容性問題？

1.雙邊距BUG float引起的 使用display

2.3像素問題 使用float引起的 使用dislpay:inline -3px

3.超鏈接hover 點(diǎn)擊后失效 使用正確的書寫順序 link visited hover active

4.ie z-index問題 給父級添加position:relative

5.Png 透明 使用js代碼 改

6.min-height 最小高度 !Important 解決

7.select 在ie6下遮蓋 使用iframe嵌套

8.為什么沒有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

9.IE5-8不支持opacity，解決辦法：

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

 

    IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片

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.屬性選擇器（a[rel = “external”]）

9.偽類選擇器（a: hover, li: nth - child）
可繼承

font-size font-family color, ul li dl dd dt;
不可繼承

border padding margin width height
優(yōu)先級

優(yōu)先級就近原則，樣式定義最近者為準(zhǔn)，載入樣式以最后載入的定位為準(zhǔn)

優(yōu)先級為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高
CSS3新增偽類舉例：

    dom:first-of-type 選擇屬于其父元素的首個(gè) 元素的每個(gè) 元素。
    dom:last-of-type 選擇屬于其父元素的最后 元素的每個(gè) 元素。
    dom:only-of-type 選擇屬于其父元素唯一的 元素的每個(gè) 元素。
    dom:only-child 選擇屬于其父元素的唯一子元素的每個(gè) 元素。
    dom:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè) 元素。
    :enabled、:disabled 控制表單控件的禁用狀態(tài)。
    :checked，單選框或復(fù)選框被選中。
 


歡迎關(guān)注微信公眾號:猴哥說前端