前端面試題及答案

一、HTML和CSS

1、請列舉一些HTML語義化標籤。

答：HTML語義化標籤指的是能夠清晰地表達內容和結構的標籤。比如header、nav、article、section、main、aside、footer等標籤。

<header>
  <h1>頁面標題</h1>
  <p>頁面頭部</p>
</header>
<nav>
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">產品</a></li>
    <li><a href="#">服務</a></li>
  </ul>
</nav>
<article>
  <h2>文章標題</h2>
  <p>文章內容</p>
</article>
<section>
  <h2>區域標題</h2>
  <p>區域內容</p>
</section>
<main>
  <h2>主要內容</h2>
  <p>主要內容部分</p>
</main>
<aside>
  <h2>側邊欄標題</h2>
  <p>側邊欄內容</p>
</aside>
<footer>
  <p>版權信息</p>
</footer>

2、請問box-sizing的取值有哪些？默認值是什麼？

答：box-sizing的取值有content-box和border-box。默認值是content-box。

* {
  box-sizing: border-box;
}

3、請用CSS實現一個自適應居中的div盒子。

答：

/*HTML部分*/
<div class="box">
  <div class="content">
    這是一個自適應居中的div盒子
  </div>
</div>

/*CSS部分*/
.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.content {
  width: 70%;
  padding: 20px;
  border: 2px solid #000;
}

二、JavaScript

1、請寫出至少三種判斷JavaScript數據類型的方法。

答：使用typeof運算符、判斷原型鏈、使用Object.prototype.toString()方法。

//typeof運算符
typeof 'hello world'; //'string'
typeof 123; //'number'
typeof NaN; //'number'
typeof undefined; //'undefined'
typeof null; //'object'
typeof []; //'object'
typeof {}; //'object'
typeof new Date(); //'object'
typeof (() => {}); //'function'

//判斷原型鏈
const isFunction = value => value instanceof Function;
const isRegExp = value => value instanceof RegExp;
const isArray = value => value instanceof Array;
const isDate = value => value instanceof Date;
const isObject = value => value instanceof Object;

//Object.prototype.toString()方法
Object.prototype.toString.call('hello world'); //'[object String]'
Object.prototype.toString.call(123); //'[object Number]'
Object.prototype.toString.call(NaN); //'[object Number]'
Object.prototype.toString.call(undefined); //'[object Undefined]'
Object.prototype.toString.call(null); //'[object Null]'
Object.prototype.toString.call([]); //'[object Array]'
Object.prototype.toString.call({}); //'[object Object]'
Object.prototype.toString.call(new Date()); //'[object Date]'
Object.prototype.toString.call(() => {}); //'[object Function]'

2、請用原生的JavaScript代碼實現一個簡單的點擊切換顏色的效果。

答：

/*HTML部分*/
<button id="btn">點擊切換顏色</button>

/*JavaScript部分*/
const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
  const bgColor = this.style.backgroundColor;
  this.style.backgroundColor = bgColor === 'red' ? 'blue' : 'red';
});

3、請解釋一下JavaScript中的閉包是什麼。

答：閉包是指函數和其相關的引用環境組合的體系，允許函數訪問其詞法範圍內的變數，即使函數在詞法範圍外被調用，仍然可以使用這些變數。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

const counter1 = createCounter();
counter1(); //1
counter1(); //2

const counter2 = createCounter();
counter2(); //1

三、框架和庫

1、請解釋一下React中的Virtual DOM是什麼。

答：Virtual DOM是React的核心概念之一，它是一個虛擬的DOM樹，用JavaScript對象模擬了真實的DOM樹。React通過對比前後兩個Virtual DOM樹的差異，最小化重繪和重新計算布局的次數，從而提高了頁面性能。

2、請簡述Vue.js的MVVM模式。

答：Vue.js採用的是MVVM模式，即Model-View-ViewModel模式。ViewModel是連接View和Model的橋樑，它把Model轉換成View的可用形式，同時將View的狀態和行為轉換成Model的狀態和行為。

3、請解釋一下Angular中的指令是什麼。

答：Angular中的指令是用來向HTML元素添加額外的行為。指令可以被用作元素、屬性、類和注釋。Angular提供了一些內置的指令和可以自定義指令。

四、性能優化

1、請說說幾種提高網站性能的方法。

答：幾種提高網站性能的方法包括：

• 使用CDN加速靜態資源的載入。
• 壓縮CSS、JavaScript、HTML等文件以減小文件體積。
• 使用懶載入技術，延遲載入圖片和內容。
• 使用瀏覽器緩存，緩存重複請求的資源。
• 減少HTTP請求次數，合併同類型的文件。
• 使用Web Workers，將一些耗時的任務交給worker線程執行。
• 避免使用重排和重繪，優化CSS選擇器，避免頻繁引起DOM重排。

2、請解釋一下JavaScript中的Event Loop。

答：Event Loop是JavaScript的執行模型之一，它是一個運行在瀏覽器中的線程，負責監聽執行隊列中的任務，執行這些任務並持續不斷地循環。當JavaScript執行函數時，會先將函數添加到執行隊列中，當執行隊列中有任務時，Event Loop就會執行這些任務，由於任務的執行是非同步的，因此不會影響到JavaScript的整體執行。

3、請給出具體的代碼示例說明如何使用Webpack進行前端項目的優化。

答：

//webpack.config.js
const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: Path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
}

//package.json
{
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  }
}