前端面試題整理

寫在前面

本小菜雞開學(其實已經開始了)就要面臨找實習的壓力了。因此在此開一貼記錄一下蒐集的前端面試的問題和本身即將被拷問的問題= =。悔不應當初沒有好好學習quq！努力！

面試題目總結

HTML

1.html5新增了哪些內容或api，使用過哪些？

• HTML5新增input輸入類型：

  • email類型
  • url類型
  • number類型提供選擇數字的功能，其中min屬性設定最小值，max屬性設定最大值，value屬性設置當前值，step屬性設定每次增加值。
  • range類型，表示限制數字輸入的範圍域
  • 日期和時間類型:date,month,week,time,datetime,datetime-local
  • search類型
  • tel類型
  • color類型

• HTML5新增表單元素

  • datalist 規定輸入域的選項列表
  • keygen提供一種可靠方法來驗證用戶
  • output用於不一樣類型的輸出
• 還有更多細節內容不列在這裏啦。請看這篇博客

---

2.input和textarea的區別?

• <input type= "textarea">是單行文本框。<textarea>是多行文本框。

---

3.用一個div模擬textarea的實現？

• 首先咱們須要知道div是高度自適應的，高度會隨着內容的增長而增長。而textarea有着固定的大小，高度超過規定高度就會出現滾動條。
• div有一個屬性叫作contenteditable，設置contenteditable屬性爲true就能夠實現，div內容可編輯。
• 實現了內容可編輯之後，在css中設置好規定的高度，設置overflow－y屬性爲auto,便可實現滾動條。

---

4.移動設備忽略將頁面中的數字識別爲電話號碼的方法?

• 移動設備中常常會出現將一串數字識別爲電話的狀況，數字的顏色和樣式都會變化，點擊能夠直接撥打。
• 添加以下代碼能夠關閉識別。

<meta name = "format-detection" content = "telephone=no">

---

5.<iframe>標籤

• <iframe>標籤會創造一個包含另一個文檔的內聯框架。
• <iframe>標籤不少用在頁面廣告。

• 問題：

  • 會影響頁面的並行加載
  • 阻塞onload
• 可使用js動態地爲iframe的src加載頁面內容

---

6.load事件和DomContentLoaded事件

• DomContentLoaded事件在DOM元素加載完畢時觸發，也就是HTML文檔被加載和解析完成時。
• load事件是在頁面上全部資源(包括圖片、視頻、音頻)所有加載完時觸發。
• 詳情請看這篇文章,寫的很是清晰。

CSS

1.左右佈局：左邊定寬、右邊自適應，很多於3種方法

• 方法一：左邊模塊設置左浮動，右邊模塊寬度設置100%
• 方法二：父容器設置display：flex；right部分設置flex：1。display：flex設置爲彈性盒子，其子元素能夠設置flex的數值來控制其所佔空間的比例。
• 方法三：使用負margin。設置左部分和右部分左浮動，併爲right部分設置寬度100%。設置左部分左外邊距爲負100%。爲了不右部分的內容被覆蓋，再爲右部分設置添加左邊距（左部分的寬度）。

---

2.CSS3有哪些新特性?

• CSS3的選擇器

  • E:last-child / E :nth-child(n) / E : nth-last-child(n) 倒數第n個元素
• @Font-face特性用來加載字體樣式，能夠加載服務器端的字體，顯示到客戶端，即便客戶端並無安裝該字體
• 圓角:border-radius
• 彈性盒子模式display：flex。 等等屬性

---

3.BFC與IFC

• 首先解釋FC(Formatting Contexts),這是CSS規範中的一個概念。它指頁面中的一塊渲染區域，有本身的渲染規則，規定了子元素如何定位，以及和其餘元素間的相互做用。
• BFC(Block Formatting Contexts),塊級格式化上下文。BFC就是頁面上一塊隔離的渲染區域，容器內的子元素不會影響外界元素的佈局。
• IFC(Inline Formatting Contexts),內聯格式化上下文。IFC的line box高度由其包含的行內元素最高的實際高度計算而來。IFC能夠理解爲一種盒子從左到右的水平排列方式。

---

4.對柵格的理解

• 柵格佈局由三個部分組成——容器(container)、行(row)、列(column)也就是柵。
• 不一樣的列之間有刪間距。

• 柵格是能夠嵌套的。列也能夠換行。

---

5.水平居中有哪些實現方式？

• 把行內元素包裹在一個屬性display：block的元素中，而且把父層元素添加屬性：text-align：center;
• 塊狀元素解決：添加margin : 10px auto;
• 多個塊狀元素解決方案：首先將元素的display屬性設置爲inline。而後再設置父元素text-align：center。
• flexbox佈局實現多個塊狀元素居中:把待居中元素的父元素添加屬性display:flex和justify-content:center便可

---

6.1像素邊框問題

• border-image圖片實現
• background-image漸變實現
• box-shadow實現

---

7.flex佈局

• css3 flex佈局詳解

---

8.盒子模型

• 
• 盒子模型有兩種標準，一種是w3c標準，一種是ie標準
• 基本組成是同樣的，從內往外分別是content區域、padding、border、margin
• w3c的盒子寬度和高度實際上就是 content部分的寬度和高度。
• ie盒子模型的高度和寬度是content+padding+border的值，這個也比較符合咱們的理解。

---

9.實現一個三欄佈局，兩邊定寬，中間自適應

• 常見的實現方法有聖盃佈局、雙飛翼佈局、以及利用display:flex實現。
• 實現細節請參考這篇博客

JavaScript

1.圖片懶加載

• 圖片懶加載的原理是頁面加載時不一下加載所有的圖片，只加載用戶可見區域內的圖片，而後根據用戶滾動到頁面的位置，再生成相應的img標籤，顯示圖片。

---

2.實現頁面加載進度條

• 咱們能夠將一整個頁面大體分爲4，5個區域。
• 而後在頁面的頂端設置一個div用來顯示進度條。
• 每到達指定的節點就用jquery實現進度條動畫。
• 最後加載完成隱藏進度條便可。

---

3.eval()函數

• 做用：eval函數會將傳入的參數看成實際的javascript語句來執行，而後把執行結果插入到eval()函數所在的位置。
• 可是eval函數中的任何變量或函數都不會被提高，由於在預解析的時候，這些生命都還只是字符串。
• eval函數能夠被用來解析json字符串，將其轉換爲json對象。
• 可是因爲安全考慮，最好不要主動使用eval函數。

---

4.new操做符調用構造函數的執行過程

• 首先建立一個新對象
• 將構造函數的做用域賦給新對象(所以this指向了這個對象)
• 執行在構造函數中的代碼，爲新對象添加相應屬性
• 返回新對象

---

5.Promise對象

• Promise對象用於表示一個異步操做的最終狀態（完成或失敗），以及其返回的值。
• 關於Promise的詳細解析，請看這篇文章

HTTP

1. session和cookie的區別

• Session是在服務端保存的一個數據結構，用來跟蹤用戶的狀態，這個數據能夠保存在集羣、數據庫、文件中；
• Cookie是客戶端保存用戶信息的一種機制，用來記錄用戶的一些信息，也是實現Session的一種方式。
• session的運行依賴於session id 而session id是存在cookie中的，所以若是瀏覽器禁用了cookie，session也會被禁用。