12個常規前端面試題及小結

這是昨天對一個新來有兩月妹紙的一個小測試，整體來講都很簡單常規，但結果有點兒不理想，今天把它總結總結記下來。12個常規面試題，包含了html,css,javascript的基礎知識

1.簡述一下你對HTML語義化的理解？並寫出一段語義化的HTML？

語義化是指根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），便於開發者閱讀和寫出更優雅的代碼的同時，讓瀏覽器的爬蟲和機器很好的解析。

• 用正確的標籤作正確的事情
• html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析
• 語義化的HTML在沒有CSS的狀況下也能呈現較好的內容結構與代碼結構
• 搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
• 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解
• HTML5增長了許多語義化標籤如:header footer nav article ……

語義化HTML示例：

<!-- 這是開放的 --> <header> <h1>header</h1> </header> <section class="main"> main </section> <aside>aside</aside> <footer> footer </footer>

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

HTML5 是定義 HTML 標準的最新的版本。 該術語表示兩個不一樣的概念：

• 它是一個新版本的HTML語言，具備新的元素，屬性和行爲，
• 它有更大的技術集，容許更多樣化和強大的網站和應用程序。這個集合有時稱爲HTML5和朋友，一般縮寫爲HTML5。

HTML5新特性：

• HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長
• 繪畫 canvas;
• 用於媒介回放的 video 和 audio 元素;
• 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失
• sessionStorage 的數據在瀏覽器關閉後自動刪除
• 語意化更好的內容元素，好比 article、footer、header、nav、section
• 表單控件，calendar、date、time、email、url、search
• 新的技術webworker, websocket, Geolocation

移除元素：

• 純表現的元素basefont ，big，center，font, s，strike，tt，u
• 對可用性產生負面影響的元素：frame，frameset，noframes

處理HTML5新標籤的瀏覽器兼容問題：

• IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

• 可直接使用成熟的框架、好比html5shiv

  <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->

如何區分 HTML 和 HTML5:

• DOCTYPE聲明
• 新增元素

3. 爲何要初始化CSS樣式(reset css)？

• 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別

• 最簡單粗暴的

  * {
      margin: 0; padding: 0; }

• 更好的選擇Normalize.css 相比於傳統的CSS reset，Normalize.css是一種現代的、爲HTML5準備的優質替代方案

• Reset CSS:只選對的，不選"貴"的，因根據具體項目來作選擇權衡，不該該濫用

4. css定義的權重？

頁面顯示樣式的優先級取決於其「特殊性」’，特殊性越高，就顯示最高的，當特殊性相等時，顯示後者

特殊性表述爲4個部分：0,0,0,0

一個選擇器的特殊性以下肯定：

• 對於選擇器是#id的屬性值,特殊性值爲：0,1,0,0
• 對於屬性選擇器，class或僞類，特殊性值爲：0,0,1,0
• 對於標籤選擇器或僞元素，特殊性值爲：0,0,0,1
• 通配符‘*’對特殊性值爲：0,0,0,0
• 內聯樣式特殊性值爲：1,0,0,0

5. 講講position的值relative和absolute的區別？

• absolute：生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位

• relative：生成相對定位的元素，相對於其正常位置進行定位

  ​

6. 如何水平垂直居中div？（至少給出2種解決方法）

1.absolute + transform:

<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style>

2.inline-block + text-align + table-cell + vertical-align

<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { text-align: center; display: table-cell; vertical-align: middle; } .child { display: inline-block; } </style>

3.flex + justify-content + align-items

<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /*垂直居中*/ } </style>

更多佈局示例請移步CSS常見佈局解決方案 垂直居中，水平居中，各類佈局

7. 漸進加強 VS 優雅降級，你怎麼看？

漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗

優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽

兩者如何抉擇： 這是我的觀點。。。

8. JavaScript 的數據類型

javascript有六種基本數據類型：Undefined，Null，Boolean，Symbol(es6)，Number和String
還有一種複雜數據類型：對象

9. JavaScript 數組去重？(簡述思路便可)

• 遍歷數組法： 這應該是最簡單的去重方法（實現思路：新建一新數組，遍歷數組，值不在新數組就加入該新數組中）

  // 遍歷數組去重法 function unique(arr){ var _arr = [] //遍歷當前數組 for(var i = 0; i < arr.length; i++){ //若是當前數組的第i已經保存進了臨時數組，那麼跳過， //不然把當前項push到臨時數組裏面 if (_arr.indexOf(arr[i]) == -1) _arr.push(arr[i]) } return _arr }

  注意點：indexOf 爲 ES5 的方法，注意瀏覽器兼容，須要本身實現 indexOf

• 對象鍵值對(hash) 法：速度快，高效，佔用更大的內存換取更快的時間，用 JavaScript 中的 Object 對象來當作哈希表，hash去重的核心是構建了一個 hash 對象來替代 indexOf

  // hash 去重法 function unique(arr){ var _arr = [], hash = {} for (var i = 0; i < arr.length; i++) { var item = arr[i] var key = typeof(item) + item // 對象的鍵值只能是字符串, typeof(item) + item來去分1和'1'的狀況 if(hash[key] !== 1){ _arr.push(item) hash[key] = 1 } } return _arr }

• 炫酷的 es6 Set數據結構: ES6 提供了新的數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值

  function unique(arr){ return Array.from(new Set(arr)) // Array.from方法用於將兩類對象轉爲真正的數組： // 相似數組的對象（array-like object）和可遍歷（iterable）的對象 }

關於 JavaScript 數組去重，還有不少不少能夠講，篇幅有限，這裏介紹了幾種常規的，更多的本身去探索

10. 看以下 JavaScript 代碼，給出代碼運行結果？（並簡述緣由)

var a = 2 function foo() { console.log(a) // 1.??? console.log(bar()) // 2.??? var a = 1 function bar(){ return a } console.log(bar()) // 3.??? } foo() console.log(a) // 4. ???

代碼運行結果： 1: undefined，2: undefined，3: 1，4: 2

這裏考察了 JavaScript 的做用域和變量提高。

在 JavaScript 中，函數、變量的聲明都會被提高（hoisting）到該函數或變量所在的 scope 的頂部

JavaScript 採用詞法做用域(lexical scoping)，也就是靜態做用域，函數做用域在函數定義時就決定了 ，同時在es6 前 JavaScript是沒有塊級區域(block-level scope)，而只有函數域 (function-level scope)。（在es6前咱們可過閉包來實現相似塊級做用域的效果）所謂函數做用域就是：變量在聲明它們的函數體以及這個函數體嵌套的任意函數體內都是有定義的

var a = 2 function foo() { // var a --> 變量提高 console.log(a) // 1.??? // 雖然在函數做用域裏，這個 a 還未聲明， // 實際上因爲變量提高此刻的在函數頭部已經定義了 a 只是還沒有賦值 // 因此1處的值是undefined console.log(bar()) // 2.??? // 理解了第一個第二個也不難了 // 結果也爲 undefined var a = 1 function bar(){ return a } console.log(bar()) // 3.??? // 此刻a已經被賦值1 // 結果爲 1 } foo() console.log(a) // 4. ??? // 函數做用域不會對全局做用域產生影響， // 結果爲2

11. 使用原生ajax獲取 Linus Torvalds 的GitHub信息(API:https://api.github.com/users/torvalds，如記不清具體代碼簡述過程便可)，並將JSON字符串解析爲JSON對象，並講講對JSON的瞭解

這是對 ajax與json的考察

ajax的全稱：Asynchronous Javascript And XML，異步傳輸+js+xml 如今差很少都用JSON

1. 建立XMLHttpRequest對象,也就是建立一個異步調用對象
2. 建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
3. 設置響應HTTP請求狀態變化的函數
4. 發送HTTP請求
5. 獲取異步調用返回的數據
6. 數據處理

下面就來貼代碼吧：

var api = 'https://api.github.com/users/torvalds' var xhr = new XMLHttpRequest() // 建立XMLHttpRequest對象 if(window.XMLHttpRequest){ // 兼容處理 xhr = new XMLHttpRequest() }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP')// 兼容ie6如下下 } xhr.open('get',api,true) //設置請求信息 xhr.send() //提交請求 //等待服務器返回內容 xhr.onreadystatechange = function() { if ( xhr.readyState == 4 && xhr.status == 200 ) { console.log(JSON.parse(xhr.responseText)) // 使用JSON.parse解析JSON字符串 } }

上面這端代碼應該就是最簡單的一個完整的AJax，固然了，你能夠對它進行各類封裝，甚至結合promise，async/await。。。鳥槍換炮

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小 如：{"age":"12", "name":"back"}

JSON.parse() 方法解析一個JSON字符串

JSON.stringify() 方法將一個JavaScript值轉換爲一個JSON字符串

eval也能解析JSON字符串，但不推薦

關於JSON就很少說了，前面寫過一篇 JSON入門

12. 簡單談談前端性能優化

1. 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。
2. 減小DOM操做次數，優化javascript性能。
3. 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。
4. 儘可能避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
5. 圖片預加載，將樣式表放在頂部，將腳本放在底部。
6. ……太多了，一頁紙都寫不完

拋磚引玉

轉載請註明出處，保留原文連接和做者信息。本做品採用 知識共享署名-非商業性使用 4.0 國際許可協議 進行許可