前端面試題集錦

HTML/CSS:

1,什麼是漸進加強（progressive enhancement）、優雅降級（graceful degradation）？

漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
二者的區別：
優雅降級是從最複雜的現狀開始，並試圖減小用戶體驗的供給；而漸進加強是從最基礎的、可以起做用的版本開始，而且不斷擴充，以適應將來環境的需求。
更合適的說話是，漸進加強是保證基本效果的狀況下加強效果，優雅降級是保證最惡劣狀況下的基本效果。

2.語義化HTML的好處？

在HTML 5出來以前，咱們用div來表示頁面章節，可是這些div都沒有實際意義。（即便咱們用css樣式的id和class形容這塊內容的意義）
a.在沒有css的狀況下，頁面呈現清晰的結構
b.屏幕閱讀器可以根據根據你的「標記」讀網頁，例如一些有視障的訪客。
c.網絡搜索引擎爬蟲更容易找到對應查找的內容
d.便於團隊的開發維護，語義化更具備可讀性。
例如：
header元素、hgroup元素裏面通常放<hgroup><h1>~</h6></hgroup>
article元素 表明的是在網站中自成一體的內容，譬如帖子、文章等。
footer元素 放在頁腳部分，相關文檔的連接，標籤、版權資料等
nav元素用於導航部分
address表明區塊容器，做爲聯繫信息，郵編地址，郵件等內容的載體

3.設計中使用了非標準的字體，該如何處理？

a.用圖片代替。
b.使用一些在線字體庫，例如Typekit，Google Webfonts等。
c.使用@font-face

4.如何隱藏網頁內容，只讓它們在屏幕閱讀器上使用？

a.display：none;
b.visibility:hidden;
c.overflow:hidden;
d.position：absolute;top:-999px;
e.opacity:0;

5.CSS引入的方式有哪些？

a.使用<link>元素連接外部的樣式文件
b.在head中使用<style></style>標籤裏面書寫。
c.在css中使用@import標記來導入樣式表單
d.在DOM中插入style屬性。

6.link和@import的區別?

a.link屬於HTML標籤的，而@import只是css提供的一種引入方式。
b.link標籤還能幹其它不少的事，例如定義RSS，rel鏈接屬性。@import只能加載css
c.兼容性的差異：@import是CSS2.1提出的，IE5以上的才能識別，link標籤無此問題
d.link屬於html文檔中的標籤，Dom可以控制，但不能對@import進行Dom操做

7.css屬性position的屬性值有哪些，描述它們的做用。

a.position:static css中全部的position默認屬性都是static.例如兩個頁面中都有同一個div，一個須要決定定位，另外一個不須要。那麼能夠設置爲static
b.relative相對定位，設置relative以後，就能夠設置TRBL("left", "top", "right" 以及 "bottom" ),相對於本身自己的位置進行定位。
   設置relative，沒有TRBL設置，則不會進行任何位置改變。移動以後所佔的物理空間仍是存在的，相對定位後並不會影響相鄰的元素。
c.絕對定位absolute
給定absolute以後，會飄出文檔流，自己的物理空間也消失了。找最近的設置了relative的元素位置進行參照，沒有設置則以祖先元素html爲參照。
d.fixed絕對定位，相對於瀏覽器窗口進行絕對定位，一樣能夠經過TRBL設置位置。
e.inherit從父元素中繼承position屬性。

8.Web標準以及W3c標準的理解

不是由某一條標準構成，而是由一系列標準構成。將網頁分紅3個部分：結構、表現、行爲，各自都有各自的標準：
a.Web標準規範要求，書寫標籤必須閉合、標籤小寫、不亂嵌套，能夠提升機器人對網頁的搜索概率。
b.建議使用外鏈css和js腳本，達到結構和行爲、表現層的分離。
c.延遲腳本的加載，將腳本放在頁面底部。

9.css權重？

CSS文檔是如何肯定給不一樣的樣式分配不一樣的權重的，越日後權重越大。
用戶代理聲明（譯註：如瀏覽器默認樣式）
用戶聲明（譯註：如用戶瀏覽器選項設置或經過開發人員調試工具修改）
開發者聲明（譯註：如頁面中引用的CSS）
帶有!important的開發者聲明
帶有!important的用戶聲明

10.html5的新特徵有哪些？

     a.DOCTYPE(DOCTYPE !html便可)
     b.正則表達式使用pattern屬性，很方便地對瀏覽器端輸入的數據進行驗證。
     c.數據列表元素 datalist >option>option
     d.下載屬性，download="ssss.pdf"
     e.連接網頁的預先加載處理
     rel="prefetch"或者prerender屬性能夠幫助你提早加載整個頁面
     f.語義化標籤
     d.Drag和Drop
      新增用於拖拽的屬性draggable,決定了元素是否能被拖拽。
     .........

11.清除浮動的幾種方法？

    a.使用空標籤清除浮動。
    這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
    b.使用overflow。
    給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
   c.使用after僞對象清除浮動。
    該方法只適用於非IE瀏覽器。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；2、content屬性是必須的，但其值能夠爲空，可設置content屬性的值設爲」.」。

12.使用 CSS 預處理器的優缺點有哪些？

優勢:
    a.css的語法不夠強大，須要重複書寫不少重複的選擇器.css預處理器恰好解決了這一問題。
    b.提供變量和邏輯控制
    c.合理的樣式複用機制 減小代碼的冗餘
    d.提升代碼的可維護性
    e.mixin 混入
缺點：
   a.學習成本有點高。
   b.使用這個預處理團隊的難度加大
   c.我的感受是css原本就是很簡單的東西，這樣搞的更復雜

13.倘若你有5個不一樣的 CSS 文件, 加載進頁面的最好方式是?

1.用一個大的css文件代替這5個css文件

14.xhtml的侷限性

     a.語法上更嚴格，放棄了一些語義很差的標籤
     b.必需要有head，body.標籤必須閉合
     c.一些老的瀏覽器並不兼容

15.若是把HTML5看作一個開放的平臺，那麼它構建的模塊有哪些？

    a.基於位置服務的LBS
    b.Web Storage API
    c.無插件播放音頻和視頻
   d.調用相機和GPU圖像處理單元等硬件設備
   e.拖拽和Form AP

Javascript

1.什麼是事件代理？

JavaScript事件代理則是一種簡單的技巧，經過它你能夠把事件處理器添加到一個父級元素上，這樣就避免了把事件處理器添加到多個子級元素上。
當咱們須要對不少元素添加事件的時候，能夠經過將事件添加到它們的父節點而將事件委託給父節點來觸發處理函數。這主要得益於瀏覽器的事件冒泡機制。

2.javascript的typeof返回哪些數據類型

typeof 返回值有六種可能： "number," "string," "boolean," "object," "function," 和 "undefined"

3.js中的split、slice、splice函數區別？

a . string.split(separator,limit)
該方法是將string分割成片斷來建立一個字符串數組，可選參數limit能夠限制被分割的片斷數量
separator參數能夠是字符串,或者正則表達式,separator是一個空字符，會返回一個單字符的數組。
  limit是返回的數量限制
  //"hello world".split('',1);//["h"]
// "hello world".split('',5);//["h", "e", "l", "l", "o"]
//"hello world".split('',-1);//["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
// "hello world".split(' ',2);//["hello", "world"]
//"hello world".split(' ',3);//["hello", "world"]
b .string.slice(start,end)
解釋：slice方法複製string的一部分來構造一個新的字符串
// "hello world".slice(0,5);//"hello"
//"hello world".slice(0,-1);//"hello worl"
c.數組的splice
    array.splice(start,deleteCount,item...)
   splice方法從array中移除一個或多個數組，並用新的item替換它們。
  參數start是從數組array中移除元素的開始位置,默認從0開始，參數deleteCount是要移除的元素的個數。
  //var a=['a','b','c'];//var b=a.splice(1,1,'e','f');  //a=['a','e','f','c'],b=['b']

Jquery/Bootstrap/React等框架類庫

其它

1,主要的瀏覽器及內核？主要區別？

IE：Trident內核
Mozilla FireFox： Gecko內核
Chrome 、Safari：Webkit內核
Opera:Presto內核

2.常見瀏覽器端存儲技術有哪些？

cookie
cookie會隨着每次HTTP請求頭信息一塊兒發送，無形中增長了網絡流量，另外，cookie能存儲的數據容量有限，根據瀏覽器類型不一樣而不一樣，IE6大約只能存儲2K。
Flash ShareObject
這種方式能能解決上面提到的cookie存儲的兩個弊端，並且可以跨瀏覽器，應該說是目前最好的本地存儲方案。不過，須要在頁面中插入一個Flash，當瀏覽器沒有安裝Flash控件時就不能用了。所幸的是，沒有安裝Flash的用戶極少。
缺點：須要安裝Flash插件。
Google Gear
Google開發出的一種本地存儲技術。
缺點：須要安裝Gear組件。
userData
IE瀏覽器可使用userData來存儲數據，容量可達到640K，這種方案是很可靠的，不須要安裝額外的插件。缺點：它僅在IE下有效。
sessionStorage
使用於Firefox2+的火狐瀏覽器，用這種方式存儲的數據僅窗口級別有效，同一個窗口（或者Tab）頁面刷新或者跳轉，都能獲取到本地存儲的數據，當新開窗口或者頁面時，原來的數據就失效了。
缺點：IE不支持、不能實現數據的持久保存。
globalStorage
使用於Firefox2+的火狐瀏覽器，相似於IE的userData。
1//賦值2 globalStorage[location.hostname]['name'] = 'tugai'; 3//讀取4 globalStorage[location.hostname]['name']; 5//刪除6 globalStorage[location.hostname].removeItem('name');
缺點：IE不支持。
localStorage
localStorage是Web Storage互聯網存儲規範中的一部分，如今在Firefox 3.五、Safari 4和IE8中獲得支持。
缺點：低版本瀏覽器不支持。
結論：
Flash shareobject是不錯的選擇，若是你不想在頁面上嵌入Flash，能夠結合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)實現跨瀏覽器。

3.製做一個網站的流程有哪些？

1.諮詢
網站的一個目的，服務宗旨，整體的色調，主體內容...包括網站的上線時間，預算。
2.計劃，項目的一個建議書，這裏羅列出前期諮詢溝通的全部細節，包括一些不確認因素
3.準備一個合同
沒有合同決不搞任何交易。有合同那基本上能夠保證您和客戶都不會再隨意更改了。
4.作一些研究
這種網站同行是如何作的，競爭對手是如何作的，例若有沒有必要作一些seo優化等
5.製做一個網站地圖
網站的框架圖，骨架。網站的組織架構，易於分工操做，
6.準備網站所需的材料
圖像，視頻，音頻材料等
7.開始網站的設計、coding階段
8.創建測試站點
9.啓動網站

4.嚴格模式與混雜模式

當瀏覽器廠商開始建立與標準兼容的瀏覽器時，他們但願確保向後兼容性。爲了實現這一點，他們建立了兩種呈現模式：標準模式和混雜模式 在標準模式中，瀏覽器以其支持的最高標準呈現頁面，； 在混雜模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。混雜模式一般模擬老式瀏覽器的行爲以防止老站點沒法工做。