前端面试题及答案

一、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"
  }
}