前端工程師常見的面試題

一、對WEB標準以及W3C的理解和認識？

• 標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率
• 使用外鏈css和js腳本，結構行爲表現的分離
• 文件下載與頁面速度更快，內容能被更多的用戶所訪問，內容能被更普遍的設備所訪問
• 更少的代碼和組價，容易維護，改版方便，不須要變更頁面內容
• 提供打印版本而不須要複製內容、提升網站易用性。

二、xml和html有什麼區別

• HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
• 最主要的不一樣是：
• XHTML元素必須被正確地嵌套
• XHTML元素必須被關閉
• 標籤名必須用小寫
• XHTML文檔必須擁有根元素

三、doctype（文檔類型）的做用是什麼？你知道多少種文檔類型？

　　做用是：此標籤能夠告知瀏覽器文檔使用哪一種HTML或XHTML規範

　　此標籤可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML文檔

• HTML4.01規定了三種文檔類型：Strict、Transition以及Frameset
• XHTML1.0 規定了三種XML文檔類型：Strict、Transitional以及Frameset
• Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁

四、行內元素有哪些？塊級元素有哪些？CSS的盒模型

• 行內元素：span、a、Img、input、select、b
• 塊級元素：div、p、h1~h六、form、ul、li
• CSS盒模型：border、padding、margin

五、CSS引入方式有哪些？link和@import的區別

• CSS引入方式：內聯式、行內式、外鏈式
• 區別是：同時加載
  • 前者無兼容性、後者CSS2.1如下的瀏覽器不支持 
  • link支持使用JavaScript改變樣式，後者不支持

六、CSS選擇器有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和important哪一個優先級高？

• CSS選擇器：標籤選擇器、類選擇器、ID選擇器（組合選擇器、相鄰選擇器（+））僞類選擇器
• 繼承不如指定
• 優先級：標籤選擇器<類選擇器<ID選擇器
• important優先級高

七、前端頁面有哪三層構成，分別是什麼？做用是什麼？

• 結構層html、表現層css、行爲層js

八、CSS的基本語句構成是？

• 選擇器{屬性名：屬性值；屬性名：屬性值；}

九、你作的頁面在哪些瀏覽器測試過？這些瀏覽器的內核是什麼

• IE（ie內核）、谷歌（webkit內核）、火狐（Gecko）、opera（Presto）

十、寫出幾種IE6 BUG的解決方法

• float引發的雙邊距bug：使用display
• 使用float引發的3像素bug：使用display:inline
• 超連接hover點擊以後失效：使用正確的書寫順序link   visited  hover   active
• IE z-inde問題：給父級添加position:relative
• PNG透明：使用js代碼改
• min-height最小高度 !important解決
• select在ie6下遮蓋 使用iframe嵌套
• 爲何沒有辦法定義1px左右的寬度容器（IE6默認的行高形成的，使用over:hidden;zoom:0.09;line-height:1px;）
• IE6不支持!important

十一、img標籤上title與alt屬性的區別是什麼？

• alt當圖片不顯示時，用文字代替
• title當鼠標放在圖片上時，顯示文字說明

十二、描述css reset的做用和用途

• reset重置瀏覽器的css默認屬性，瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一

1三、解析css sprites，如何使用

• css精靈（又叫雪碧圖），是把一堆小圖片整合到一張大的圖片上，減小服務器對圖片的請求數量

1四、瀏覽器標準模式和怪異模式之間的區別是什麼？

• 盒子模型、渲染模式不一樣
• 使用window.top.document.compatMode可顯示爲何模式

1五、你如何對網站的文件和資源進行優化？期待的解決方案包括：

• 文件合併
• 文件最小化/文件壓縮
• 使用CDN託管
• 緩存的使用

1六、請解釋一下什麼是"語義化HTML

• 語義化HTML就是：標題h1~h6，段落p，無序列表ul li，有序列表ol li，圖片img，連接a等，對於搜索引擎的抓取有好處

　　語義化的好處：

• 去掉或樣式丟失的時候，能讓頁面呈現清晰的結構
• 屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來"讀"你的網頁
• PDA、手機登設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁（一般是由於這些設備對CSS的支持較弱）
• 搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重
• 你的頁面是否對爬蟲容易理解很是重要，由於爬蟲很大程度上會忽略用於表現的標記，而只注重語義化標記。
• 便於團隊開發和維護

1七、清除浮動的幾種方式，各自的優缺點

• 使用空標籤清除浮動clear:both（理論上能清除任何標籤，，，增長無心義的標籤）
• 使用overflow:auto（空標籤元素清除浮動而不是增長無心代碼的弊端，使用zoom:1用於兼容IE）
• 使用after僞元素清除浮動（用於非IE瀏覽器）

1八、請說出三種減小頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）

• 優化圖片
• 圖片格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
• 優化CSS（壓縮合並css，如margin-top，margin-left...）
• 網址後加斜槓（如：www.campr.com/目錄，會判斷這個"目錄是什麼文件類型，或者是目錄。"）
• 標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片，一邊計算大小，若是圖片不少，瀏覽器須要不斷的調整頁面，這不但影響速度，也影響瀏覽體驗，當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容，從而使加載時間變快，瀏覽體驗也更好）
• 減小http請求（合併文件，合併圖片使用雪碧圖）

1九、討論CSS hacks，條件引用或者其餘

• <!--[if IE6]--><![end if]-->
• _margin  IE6
• +margin  IE7
• margin:0 auto\9  全部IE
• margin:\0  IE8 

20、你用過媒體查詢，或者針對移動端的佈局/CSS嗎？

• @media  screen  and  (min-width:400px)  and  (max-width:700px){......}
• @media  handheld  and  (min-width:20em)，screen  and  (min-width:20em){......}
• 媒體查詢，就是響應式佈局，響應式佈局框架：bootstrap、PureCSS等

2一、解釋下原型繼承的原理

當查找一個對象的屬性時，JavaScript會向上遍歷原型鏈，直到找到給定名稱的屬性爲止（大多數JavaScript的實現用_proto_屬性來表示一個對象的原型鏈）

如下代碼展現了JS引擎如何查找屬性：

function  getProperty(obj,prop){

　　if(obj.hasOwnProperty(prop)){

　　　　return obj[prop];

　　}else  if(obj._proto_! == null){

　　　　return  getProperty(obj._proto_，prop)

　　}else{

　　　　return  undefined;

　　}　

}

2二、前端安全

CSRF:跨站請求僞造。攻擊者盜用了你的身份，以你的名義發送惡意請求。他能夠作到的事情包括：以你的名義發送郵件，發消息，盜取你的帳號。甚至購買商品...形成的問題包括：我的隱私泄露以及財產安全。

原理：

　　登陸受信任的網站A，而且在本地生成cookie，在不登陸A網站的狀況下，訪問危險網站B

常見類型：

• 使用get更新請求資源，容易在B使用img標籤形成攻擊
• 前端雖然改爲了post請求，可是B網站經過iframe等手段一樣形成了攻擊

防護機制：

• 驗證碼：用戶每次提交都須要在表單中填寫圖片上一個隨機字符串
• 添加一個隱藏的輸入框：包含token，服務端驗證是否匹配
• 使用HTTP refer頭部進行判斷，若是不是業務域名發起的HTTP請求，直接過濾。

XSS它的全名：Cross-sitescripting，爲了和CSS層疊樣式表區分因此取名XSS是一種網站應用程序的安全漏洞攻擊，是代碼注入的一種。它容許惡意用戶將代碼注入到網頁上，這類攻擊一般包含了HTML以及用戶端腳本語言。

2三、CMD   VS   AMD

CommonJS是服務器端模塊的規範，Node.js採用了這個規範

• 根據CommonJS規範，一個單獨的文件就是一個模塊。每個模塊都是一個單獨的做用域，也就是說，在該模塊內部定義的變量，沒法被其餘模塊讀取，除非定義爲globald對象的屬性。
• CommonJS規範加載模塊是同步的，也就是說，只要加載完成，才能執行後面的操做。

AMD規範則是非同步加載模塊，容許指定回調函數。

• 因爲Node.js主要用於服務器編程，模塊文件通常都已經存在於本地硬盤，因此加載起來比較快，不用考慮非同步加載的方式，因此CommonJS規範比較適用。
• 可是，若是是瀏覽器環境，要從服務器端加載模塊，這時就必須採用非同步模式，所以瀏覽器通常採用AMD規範。