Web前端開發——BAT面試題彙總及答案01（持續更新中）

一、前言

1. 做這個的初心是希望鞏固自己的基礎知識，當然也希望能夠幫助更多的開發者！
2. 有些題目有多種答案，本文只給出了其中的一種，哪裏有問題的話歡迎指出~
3. 這個欄目將持續更新，前端的小夥伴歡迎關注噢~

二、HTML&CSS篇：

1、你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?

IE: trident 內核
Firefox：gecko 內核
Safari:webkit 內核
Opera:以前是 presto 內核，Opera 現已改用 Google Chrome 的 Blink 內核
Chrome:Blink (基於 webkit，Google 與 Opera Software 共同開發)

2、每個 HTML 文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？

聲明位於文檔中的最前面的位置，處於 < htm l> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁)

3、div+css 的佈局較 table 佈局有什麼優點？

改版的時候更方便 只要改 css 文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易於優化（seo）搜索引擎更友好，排名更容易靠前。

4、 img 的 alt 與 title 有何異同？ strong 與 em 的異同？

ali:指的是網頁上的圖片因爲某種原因不能被顯示時應該出現的替代文字（alternative text)。替換文字的語言由 lang 屬性指定。(在 IE 瀏覽器下會在沒有 title 時把 alt當成 tool tip(title ) 顯示)。，

5、爲什麼利用多個域名來存儲網站資源會更有效？

CDN 緩存更方便
突破瀏覽器併發限制
節約 cookie 帶寬
節約主域名的連接數，優化頁面響應速度
防止不必要的安全問題

6、請談一下你對網頁標準和標準制定機構重要性的理解。

網頁標準和標準制定機構都是爲了能讓 web 發展的更‘健康’，開發者遵循統一的標準，降
低開發難度，開發成本，SEO 也會更好做，也不會因爲濫用代碼導致各種 BUG、安全問題，
最終提高網站易用性。

7、簡述一下 src 與 href 的區別。

src 用於替換當前元素，href 用於在當前文檔和引用資源之間確立聯繫。
src 是 source 的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在
位置；在請求 src 資源時會將其指向的資源下載並應用到文檔內，例如 js 腳本，img 圖片
和 frame 等元素。
< script src =”js.js”>< /script >
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行
完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是爲什麼將
js 腳本放在底部而不是頭部。
href 是 Hypertext Reference 的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）
或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
< link href=”common.css” rel=”stylesheet”/>
那麼瀏覽器會識別該文檔爲 css 文件，就會並行下載資源並且不會停止對當前文檔的處理。
這也是爲什麼建議使用 link 方式來加載 css，而不是使用@import 方式。

8、知道的網頁製作會用到的圖片格式有哪些？

png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面試官想要的最後答案。面試官希望聽到是 Webp。（是否有關注新
技術，新鮮事物）
科普一下 Webp：WebP 格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。
圖片壓縮體積大約只有 JPEG 的 2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook
Ebay 等知名網站已經開始測試並使用 WebP 格式。
在質量相同的情況下，WebP 格式圖像的體積要比 JPEG 格式圖像小 40%

9、在 css/js 代碼上線之後開發人員經常會優化性能，從用戶刷新網頁開始，一次 js 請求一般情況下有哪些地方會有緩存處理？

cdn緩存，dns緩存,瀏覽器緩存,服務器緩存。

10、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端
的距離與頁面的距離，如果前者小於後者，優先加載。
如果爲幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和後一張優先
下載。
如果圖片爲 css 圖片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技術。
如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，
以提高用戶體驗。

11、你如何理解 HTML 結構的語義化？

去掉或樣式丟失的時候能讓頁面呈現清晰的結構：
html 本身是沒有表現的，我們看到例如< h1 >是粗體，字體大小 2em，加粗；< strong >是加粗
的，不要認爲這是 html 的表現，這些其實 html 默認的 css 樣式在起作用，所以去掉或樣式
丟失的時候能讓頁面呈現清晰的結構不是語義化的 HTML 結構的優點，但是瀏覽器都有有默
認樣式，默認樣式的目的也是爲了更好的表達 html 的語義，可以說瀏覽器的默認樣式和語
義化的 HTML 結構是不可分割的。

12、談談以前端角度出發做好 SEO 需要考慮什麼？

瞭解搜索引擎如何抓取網頁和如何索引網頁
你需要知道一些搜索引擎的基本工作原理，各個搜索引擎之間的區別，搜索機器人
（SE robot 或叫 web crawler）如何進行工作，搜索引擎如何對搜索結果進行排序等
等。

Meta 標籤優化
主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它
的隱藏文字比如 Author（作者），Category（目錄），Language（編碼語種）等。
如何選取關鍵詞並在網頁中放置關鍵詞
搜索就得用關鍵詞。關鍵詞分析和選擇是 SEO 最重要的工作之一。首先要給網站確定主關鍵
詞（一般在 5 個上下），然後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相
關度（Relavancy），突出性（Prominency）等等。

瞭解主要的搜索引擎
雖然搜索引擎有很多，但是對網站流量起決定作用的就那麼幾個。比如英文的主要有
Google，Yahoo，Bing 等；中文的有百度，搜狗，有道等。不同的搜索引擎對頁面的抓取和
索引、排序的規則都不一樣。還要了解各搜索門戶和搜索引擎之間的關係，比如 AOL 網頁搜
索用的是 Google 的搜索技術，MSN 用的是 Bing 的技術。

主要的互聯網目錄
Open Directory 自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別
是網站內容的收集方式不同。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集
的，除了主頁外還抓取大量的內容頁面。

按點擊付費的搜索引擎
搜索引擎也需要生存，隨着互聯網商務的越來越成熟，收費的搜索引擎也開始大行其道。最
典型的有 Overture 和百度，當然也包括 Google 的廣告項目 Google Adwords。越來越多的
人通過搜索引擎的點擊廣告來定位商業網站，這裏面也大有優化和排名的學問，你得學會用
最少的廣告投入獲得最多的點擊。

搜索引擎登錄
網站做完了以後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網
站提交（submit）到搜索引擎。如果你的是商業網站，主要的搜索引擎和目錄都會要求你付
費來獲得收錄（比如 Yahoo 要 299 美元），但是好消息是（至少到目前爲止）最大的搜索引
擎 Google 目前還是免費，而且它主宰着 60％以上的搜索市場。

鏈接交換和鏈接廣泛度（Link Popularity）
網頁內容都是以超文本（Hypertext）的方式來互相鏈接的，網站之間也是如此。除了搜索
引擎以外，人們也每天通過不同網站之間的鏈接來 Surfing（“衝浪”）。其它網站到你的
網站的鏈接越多，你也就會獲得更多的訪問量。更重要的是，你的網站的外部鏈接數越多，
會被搜索引擎認爲它的重要性越大，從而給你更高的排名。

合理的標籤使用

13、有哪項方式可以對一個DOM設置它的CSS樣式？

外部樣式表，引入一個外部 css 文件
內部樣式表，將 css 代碼放在 < style > 標籤內部
內聯樣式，將 css 樣式直接定義在 HTML 元素內部

14、CSS 都有哪些選擇器？

派生選擇器（用 HTML 標籤申明）
id 選擇器（用 DOM 的 ID 申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用 DOM 的屬性申明，屬於 CSS2，IE6 不支持，不常用，不知道就算了）
除了前 3 種基本選擇器，還有一些擴展選擇器，包括
後代選擇器（利用空格間隔，比如 div .a{ }）
羣組選擇器（利用逗號間隔，比如 p,div,#a{ }）
那麼問題來了，CSS 選擇器的優先級是怎麼樣定義的？
基本原則：
一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越
高。
複雜的計算方法：
用 1 表示派生選擇器的優先級
用 10 表示類選擇器的優先級
用 100 標示 ID 選擇器的優先級
div.test1 .span var 優先級 1+10 +10 +1
span#xxx .songs li 優先級 1+100 + 10 + 1
#xxx li 優先級 100 +1
那麼問題來了，看下列代碼，< p>標籤內的文字是什麼顏色的？
< style>
.classA{ color:blue;}
.classB{ color:red;}
< /style>
< body>
< p class=‘classB classA’> 123 < /p>
< /body>
答案：red。與樣式定義在文件中的先後順序有關，即是後面的覆蓋前面的，與在<p class=’
classB classA’>中的先後關係無關。

15、CSS 中可以通過哪些屬性定義，使得一個 DOM 元素不顯示在瀏覽器可視範圍內？

最基本的：
設置 display 屬性爲 none，或者設置 visibility 屬性爲 hidden
技巧性：
設置寬高爲 0，設置透明度爲 0，設置 z-index 位置在-1000

16、超鏈接訪問過後 hover 樣式就不出現的問題是什麼？如何解決？

答案：被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了,解決方法是改變 CSS 屬性的
排列順序: L-V-H-A（link,visited,hover,active）

17、什麼是 Css Hack？ie6,7,8 的 hack 分別是什麼？

答案：針對不同的瀏覽器寫不同的 CSS code 的過程，就是 CSS hack。
示例如下：

#test {
		width:300px;
		height:300px;
		background-color:blue; /*firefox*/
		background-color:red\9; /*all ie*/
		background-color:yellow; /*ie8*/
		+background-color:pink; /*ie7*/
		_background-color:orange; /*ie6*/ }
		:root #test { background-color:purple\9; } /*ie9*/
		@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
		@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/

18、行內元素和塊級元素的具體區別是什麼？行內元素的 padding 和 margin 可設置嗎？

塊級元素(block)特性：
總是獨佔一行，表現爲另起一行開始，而且其後的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的 top/bottom(padding-top/padding-bottom)和外邊
距的 top/bottom(margin-top/margin-bottom)都不可改變（也就是 padding 和 margin 的
left 和 right 是可以設置的），就是裏面文字或圖片的大小，行內元素的高度由元素內容撐開。
那麼問題來了，瀏覽器還有默認的天生 inline-block 元素（擁有內在尺寸，可設置高寬，
但不會自動換行），有哪些？
答案：< input> 、< img> 、< button> 、< texterea> 、< label>。

19、什麼是外邊距重疊？重疊的結果是什麼？

外邊距重疊就是 margin-collapse。
在 CSS 當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一
個單獨的外邊距。這種合併外邊距的方式被稱爲摺疊，並且因而所結合成的外邊距稱爲摺疊
外邊距。
摺疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，摺疊結果是兩者的相加的和。
詳細見：CSS 外邊距合併問題

20、rgba()和 opacity 的透明效果有什麼不同？

rgba()和 opacity 都能實現透明效果，但最大的不同是 opacity 作用於元素，以及元素內的
所有內容的透明度(包括文字)。
而 rgba()只作用於元素的顏色或其背景色。（設置 rgba 透明的元素的子元素不會繼承透明
效果！）

---

前端面試題系列將會持續更新，歡迎關注該博客~