整理總結的一些前端面試題

HTML面試題

1.XHTML和HTML有什麼區別

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

2.前端頁面有哪三層構成，分別是什麼?作用是什麼?

• 結構層 Html 表示層 CSS 行為層 js;
  3.你做的頁面在哪些流覽器測試過?這些瀏覽器的核心分別是什麼?
• Ie(Ie核心) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)

4.什麼是語義化的HTML?

• 直觀的認識標籤 對於搜尋引擎的抓取有好處，用正確的標籤做正確的事情！
• html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
  在沒有樣式CCS情況下也以一種文件格式顯示，並且是容易閱讀的。搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
• 使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

5.HTML5 為什麼只需要寫 !DOCTYPE HTML？

• HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）；而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。

6.Doctype作用？標準模式與相容模式各有什麼區別?

• !DOCTYPE宣告位於位於HTML文件中的第一行，處於html 標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
• 標準模式的排版 和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和
HTML5？

• HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
• 繪畫 canvas
• 用於媒介回放的 video 和 audio 元素
• 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
• sessionStorage 的資料在瀏覽器關閉後自動刪除
• 語意化更好的內容元素，比如 article、footer、header、nav、section
• 表單控制元件，calendar、date、time、email、url、search
• 新的技術webworker, websockt, Geolocation
  移除的元素
• 純表現的元素：basefont，big，center，font, s，strike，tt，u；
• 對可用性產生負面影響的元素：frame，frameset，noframes；
  支援HTML5新標籤：
• IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
• 可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
• 瀏覽器支援新標籤後，還需要新增標籤預設的樣式：

8.請描述一下 cookies，sessionStorage 和 localStorage 的區別？

• cookie在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會
• sessionStorage和localStorage的儲存空間更大；
• sessionStorage和localStorage有更多豐富易用的介面；
• sessionStorage和localStorage各自獨立的儲存空間；

9.如何實現瀏覽器內多個標籤頁之間的通訊?

• 呼叫localstorge、cookies等本地儲存方式

CSS面試題

1.簡要說一下CSS的元素分類

• 塊級元素：div,p,h1,form,ul,li;
• 行內元素 : span>,a,label,input,img,strong,em;

2.CSS隱藏元素的幾種方法（至少說出三種）

• Opacity:元素本身依然佔據它自己的位置並對網頁的佈局起作用。它也將響應使用者互動;
• Visibility:與 opacity 唯一不同的是它不會響應任何使用者互動。此外，元素在讀屏軟體中也會被隱藏;
• Display:display 設為 none 任何對該元素直接打使用者互動操作都不可能生效。此外，讀屏軟體也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;
• Position:不會影響佈局，能讓元素保持可以操作;
• Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支援。如果要在你的 clip-path 中使用外部的 SVG 檔案，瀏覽器支援度還要低;

3.CSS清除浮動的幾種方法（至少兩種）

• 使用帶clear屬性的空元素
• 使用CSS的overflow屬性；
• 使用CSS的:after偽元素；
• 使用鄰接元素處理；

4.CSS居中（包括水平居中和垂直居中）

內聯元素居中方案

水平居中設定：
1.行內元素

• 設定 text-align:center；

2.Flex佈局

• 設定display:flex;justify-content:center;(靈活運用,支援Chroime，Firefox，IE9+)

垂直居中設定：
1.父元素高度確定的單行文字（內聯元素）

• 設定 height = line-height；

2.父元素高度確定的多行文字（內聯元素）

• a:插入 table （插入方法和水平居中一樣），然後設定 vertical-align:middle；
• b:先設定 display:table-cell 再設定 vertical-align:middle；
  

  塊級元素居中方案

  水平居中設定：
  1.定寬塊狀元素

• 設定 左右 margin 值為 auto；

2.不定寬塊狀元素

• a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，然後設定 margin 的值為 auto；
• b:給該元素設定 displa:inine 方法；
• c:父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:50%；

垂直居中設定：

• 使用position:absolute（fixed）,設定left、top、margin-left、margin-top的屬性;
• 利用position:fixed（absolute）屬性，margin:auto這個必須不要忘記了;
• 利用display:table-cell屬性使內容垂直居中;
• 使用css3的新屬性transform:translate(x,y)屬性;
• 使用:before元素;

5.寫出幾種IE6 BUG的解決方法

• 雙邊距BUG float引起的 使用display
• 3畫素問題 使用float引起的 使用dislpay:inline -3px
• 超連結hover 點選後失效 使用正確的書寫順序 link visited hover active
• Ie z-index問題 給父級新增position:relative
• Png 透明 使用js程式碼 改
• Min-height 最小高度 ！Important 解決’
• select 在ie6下遮蓋 使用iframe巢狀
• 為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

6.對於SASS或是Less的瞭解程度？喜歡那個？

• 語法介紹

7.Bootstrap瞭解程度

• 特點，排版，外掛的使用;

8.頁面匯入樣式時，使用link和@import有什麼區別？

• link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;
• 頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
• import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

9.介紹一下CSS的盒子模型？

• 有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
• 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

10.CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？

• id選擇器（ # myid）
• 類選擇器（.myclassname）
• 標籤選擇器（div, h1, p）
• 相鄰選擇器（h1 + p）
• 子選擇器（ul > li）
• 後代選擇器（li a）
• 萬用字元選擇器（ * ）
• 屬性選擇器（a[rel = “external”]）
• 偽類選擇器（a: hover, li: nth – child）
• 可繼承的樣式： font-size font-family color, UL LI DL DD DT;
• 不可繼承的樣式：border padding margin width height ;
• 優先順序就近原則，同權重情況下樣式定義最近者為準;
• 優先順序為:
  
  JavaScript

  !important > id > class > tag important 比 內聯優先順序高

  1 2	!important >  id > class > tag important 比 內聯優先順序高

11.CSS3有哪些新特性？

• CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
  對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
• transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
  增加了更多的CSS選擇器 多背景 rgba

JavaScript面試題

1.javascript的typeof返回哪些資料型別

• Ｏbject number function boolean underfind;

2.例舉3種強制型別轉換和2種隱式型別轉換?

• 強制（parseInt,parseFloat,number）隱式（== – ===）；

3.陣列方法pop() push() unshift() shift()

• Push()尾部新增 pop()尾部刪除
• Unshift()頭部新增 shift()頭部刪除

4.ajax請求的時候get 和post方式的區別?

• 一個在url後面 一個放在虛擬載體裡面
  有大小限制
• 安全問題
  應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的;

5.call和apply的區別

• Object.call(this,obj1,obj2,obj3)
• Object.apply(this,arguments)

6.ajax請求時，如何解釋json資料

• 使用eval parse,鑑於安全性考慮 使用parse更靠譜;

7.事件委託是什麼

• 讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！

8.閉包是什麼，有什麼特性，對頁面有什麼影響?簡要介紹你理解的閉包

• 閉包就是能夠讀取其他函式內部變數的函式。

9.新增 刪除 替換 插入到某個接點的方法

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
10.說一下什麼是javascript的同源策略？

• 一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，這裡的同一來源指的是主機名、協議和埠號的組合

11.編寫一個b繼承a的方法;

12.如何阻止事件冒泡和預設事件

13.下面程式執行後彈出什麼樣的結果?

14.談談This物件的理解。

this是js的一個關鍵字，隨著函式使用場合不同，this的值會發生變化。
但是有一個總原則，那就是this指的是呼叫函式的那個物件。
this一般情況下：是全域性物件Global。 作為方法呼叫，那麼this就是指這個物件

15.下面程式的結果

//答案：

//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1

16.下面程式的輸出結果

17.瞭解Node麼？Node的使用場景都有哪些？

• 高併發、聊天、實時訊息推送

18.介紹下你最常用的一款框架

• jquery,rn,angular等;

19.對於前端自動化構建工具有了解嗎？簡單介紹一下

• Gulp,Grunt等；

20.介紹一下你瞭解的後端語言以及掌握程度

其它

1.對Node的優點和缺點提出了自己的看法？

(優點）
因為Node是基於事件驅動和無阻塞的，所以非常適合處理併發請求，
因此構建在Node上的代理伺服器相比其他技術實現（如Ruby）的伺服器表現要好得多。
此外，與Node代理伺服器互動的客戶端程式碼是由javascript語言編寫的，
因此客戶端和伺服器端都用同一種語言編寫，這是非常美妙的事情。
（缺點）
Node是一個相對新的開源專案，所以不太穩定，它總是一直在變，
而且缺少足夠多的第三方庫支援。看起來，就像是Ruby/Rails當年的樣子。

2.你有哪些效能優化的方法？

（1） 減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data快取 ，圖片伺服器。
（2）前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數
（3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。
（4） 當需要設定的樣式很多時設定className而不是直接操作style。
（5） 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。
（6） 避免使用CSS Expression（css表示式)又稱Dynamic properties(動態屬性)。
（7） 圖片預載入，將樣式表放在頂部，將指令碼放在底部 加上時間戳。
（8） 避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後才會顯示出來，顯示div+css佈局慢。對普通的網站有一個統一的思路，就是儘量向前端優化、減少資料庫操作、減少磁碟IO。向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在快取伺服器上直接返回的不要到應用伺服器，程式能直接取得的結果不要到外部取得，本機內能取得的資料不要到遠端取，記憶體能取到的不要到磁碟取，快取中有的不要去資料庫查詢。減少資料庫操作指減少更新次數、快取結果減少查詢次數、將資料庫執行的操作儘可能的讓你的程式完成（例如join查詢），減少磁碟IO指儘量不使用檔案系統作為快取、減少讀寫檔案次數等。程式優化永遠要優化慢的部分，換語言是無法“優化”的。

3.http狀態碼有那些？分別代表是什麼意思？
100-199 用於指定客戶端應相應的某些動作。
200-299 用於表示請求成功。
300-399 用於已經移動的檔案並且常被包含在定位頭資訊中指定新的地址資訊。
400-499 用於指出客戶端的錯誤。400 1、語義有誤，當前請求無法被伺服器理解。401 當前請求需要使用者驗證 403 伺服器已經理解請求，但是拒絕執行它。
500-599 用於支援伺服器錯誤。 503 – 服務不可用
4.一個頁面從輸入 URL 到頁面載入顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）

• 查詢瀏覽器快取
• DNS解析、查詢該域名對應的IP地址、重定向（301）、發出第二個GET請求
• 進行HTTP協議會話
• 客戶端傳送報頭(請求報頭)
• 文件開始下載
• 文件樹建立，根據標記請求所需指定MIME型別的檔案
• 檔案顯示
• 瀏覽器這邊做的工作大致分為以下幾步：
• 載入：根據請求的URL進行域名解析，向伺服器發起請求，接收檔案（HTML、JS、CSS、圖象等）。
• 解析：對載入到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部資料結構（比如HTML的DOM樹，JS的（物件）屬性表，CSS的樣式規則等等）

5.你常用的開發工具是什麼，為什麼？

• Sublime,Atom,Nodepad++;

6.說說最近最流行的一些東西吧？常去哪些網站？

• Node.js、MVVM、React-native,Angular,Weex等
• CSDN,Segmentfault,部落格園,掘金,Stackoverflow,伯樂線上等

7.介紹下你的專案（如果有的話）？並說一下在做這個專案中運用的技術以及遇到的難題是如何解決的

打賞支援我寫出更多好文章，謝謝！

任選一種支付方式