前端面试高频50题，嘎嘎香

1. HTML相关问题

1. 什么是Doctype？有什么作用？

Doctype（文档类型声明）是一种标准通告，它告诉浏览器当前文档的类型及版本。它的作用是使浏览器以正确的模式（标准模式或兼容模式）渲染页面内容。

<!DOCTYPE html>

2. HTML5有哪些新特性？

HTML5增加了一些新的语义元素（如 <article>、<section>、<header>、<footer>），新的表单控件（如 <date>、<email>、<url>），新的API（如本地存储、音视频支持、Canvas绘图）。

3. 行内元素和块级元素的区别？

行内元素（inline element）不占据整个宽度，仅占据自身的内容宽度；而块级元素（block element）占据其父容器的整个宽度。行内元素不能包含块级元素，但块级元素可以包含行内元素。

4. 如何在HTML中嵌入SVG？

可以使用 <svg> 标签直接嵌入SVG代码，或者使用 <img> 标签引用外部SVG文件。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

5. HTML5中的自定义数据属性是什么？

自定义数据属性可以使用 data- 前缀在HTML元素上定义，这些属性可以通过JavaScript轻松访问。

<div data-user-id="12345">User Info</div>

2. CSS相关问题

6. CSS选择器有哪些？请举例说明。

常见的CSS选择器包括：

元素选择器：div
类选择器：.className
ID选择器：#idName
属性选择器：[type="text"]
伪类选择器：:hover
伪元素选择器：::before

7. CSS的盒模型是什么？

CSS的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。这些属性共同决定了元素的总大小和布局。

.box {
  width: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

8. 如何实现一个水平居中的div？

可以使用 margin: auto 或者使用 flexbox。

.center {
  width: 200px;
  margin: 0 auto;
}

9. 什么是Flexbox布局？它有哪些优点？

Flexbox是一种用于一维布局的CSS布局模式，它使得盒子在容器中可以根据可用空间动态排列和调整大小。优点包括：便捷的水平和垂直对齐、简单的元素排序、适应不同屏幕尺寸等。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

10. 如何使用CSS实现响应式设计？

可以使用媒体查询（media queries）来针对不同屏幕尺寸应用不同的样式。

@media (max-width: 600px) {
  .responsive {
    font-size: 14px;
  }
}

3. JavaScript相关问题

11. JavaScript的数据类型有哪些？

JavaScript的基本数据类型包括：undefined、null、boolean、number、string、symbol 和 object。

12. 如何判断一个变量的类型？

可以使用 typeof 运算符和 instanceof 运算符。

typeof 42; // "number"
typeof "hello"; // "string"
[] instanceof Array; // true

13. 什么是闭包（closure）？

闭包是指一个函数可以记住并访问其词法作用域，即使这个函数在其词法作用域之外执行。闭包使得函数拥有私有变量。

function outerFunction() {
  let outerVariable = 'I am outside!';
  function innerFunction() {
    console.log(outerVariable);
  }
  return innerFunction;
}
const closureFunction = outerFunction();
closureFunction(); // 输出 "I am outside!"

14. JavaScript中的事件循环（Event Loop）是什么？

事件循环是JavaScript处理异步操作的机制。它不断检查调用堆栈和消息队列，如果调用堆栈为空，就将消息队列中的第一个任务推入调用堆栈执行。

15. 什么是Promise？如何使用？

Promise 是一种用于处理异步操作的对象。它有三种状态：pending、fulfilled 和 rejected。可以通过 then 和 catch 方法链式调用。

const promise = new Promise((resolve, reject) => {
  if (success) {
    resolve('Success');
  } else {
    reject('Error');
  }
});
promise.then(result => console.log(result)).catch(error => console.log(error));

16. 如何实现深拷贝一个对象？

可以使用递归函数或者第三方库如 lodash 来实现深拷贝。

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  const clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    clone[key] = deepClone(obj[key]);
  }
  return clone;
}

17. 什么是this关键字？它在不同场景下的值分别是什么？

this 是一个特殊的关键字，它的值取决于函数的调用方式。在全局环境中，它指向 window 对象；在方法调用中，它指向调用该方法的对象；在构造函数中，它指向新创建的实例对象。

18. JavaScript中的作用域链（Scope Chain）是什么？

作用域链是指在函数执行时，沿着函数声明的位置向上查找变量的过程。每个函数都会形成一个新的作用域，当前作用域没有找到的变量，会沿着作用域链依次向上查找。

19. 如何实现继承？

可以使用 class 语法和 extends 关键字，或者通过构造函数和 prototype 实现继承。

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

const child = new Child('John', 25);
child.sayName(); // 输出 "John"

20. JavaScript中的原型链（Prototype Chain）是什么？

原型链是指对象的原型对象的链条。当访问对象的属性时，如果属性不存在于对象本身，会沿着原型链向上查找，直到找到属性或达到原型链的顶端（null）。

4. Vue.js相关问题

21. 什么是Vue的双向绑定？

Vue的双向绑定是指数据模型和视图之间的同步更新。通过 v-model 指令，表单输入元素可以与数据进行双向绑定。

22. Vue组件的生命周期有哪些？

Vue组件的生命周期分为四个阶段：创建、挂载、更新和销毁。常用的钩子函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。

23. Vue中的计算属性（computed）和侦听属性（watch）有什么区别？

计算属性用于基于其他属性的值计算新值，并且具有缓存特性。侦听属性用于观察和响应数据变化，但不会缓存值。

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}
watch: {
  firstName(newVal, oldVal) {
    console.log(`firstName changed from ${oldVal} to ${newVal}`);
  }
}

24. Vue中的指令有哪些？请举例说明。

常用的Vue指令包括：

v-if: 条件渲染
v-for: 列表渲染
v-bind: 动态绑定属性
v-on: 事件绑定
v-model: 双向绑定

Vue中的v-for指令中使用key有什么作用？
key 属性用于在 v-for 循环中为每个节点提供唯一标识，帮助Vue更高效地更新和复用节点，避免不必要的重渲染。

26. 如何在Vue中实现父子组件通信？

可以通过 props 向子组件传递数据，通过 $emit 向父组件发送事件。

// 父组件
<template>
  <child-component :message="parentMessage" @child-event="handleEvent"></child-component>
</template>
<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    handleEvent(data) {
      console.log('Received event from child:', data);
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>
<script>
export default {
  props: ['message'],
  methods: {
    sendEvent() {
      this.$emit('child-event', 'Hello from child');
    }
  }
};
</script>

27. Vue中如何使用插槽（slots）？

插槽用于在组件模板中嵌入父组件的内容。

// 父组件
<template>
  <child-component>
    <template v-slot:header>
      <h1>Header Content</h1>
    </template>
    <p>Main Content</p>
  </child-component>
</template>

// 子组件
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

28. Vue中的动态组件是什么？

动态组件是指根据条件动态加载和渲染不同的组件。可以使用 component 组件和 :is 属性实现动态组件。

<template>
  <component :is="currentComponent"></component>
</template>
<script>
export default {
  data() {
    return {
      currentComponent: 'componentA'
    };
  },
  components: {
    componentA,
    componentB
  }
};
</script>

29. Vue中的混入（mixins）是什么？

混入是指将可复用的代码片段分离出来，在多个组件中共享。混入对象可以包含任意组件选项，混入时会与组件自身的选项合并。

const myMixin = {
  created() {
    console.log('Mixin hook called');
  }
};

export default {
  mixins: [myMixin],
  created() {
    console.log('Component hook called');
  }
};

30. Vue Router的基本使用方法是什么？

Vue Router 是 Vue.js 的官方路由管理器，用于创建SPA（单页应用）。基本使用包括定义路由、创建路由实例并挂载到Vue实例。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

5. React相关问题

31. React的生命周期有哪些阶段？

React组件的生命周期分为挂载、更新和卸载三个阶段。主要的生命周期方法包括 componentDidMount、componentDidUpdate、componentWillUnmount。

32. 什么是React Hooks？举例说明如何使用useState和useEffect。

React Hooks是React 16.8引入的一种全新API，允许在函数组件中使用state和其他React特性。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

33. React中的虚拟DOM（Virtual DOM）是什么？

虚拟DOM是React中的一种轻量级的JavaScript对象表示，它与真实DOM保持同步。在状态变化时，React会先更新虚拟DOM，再通过diff算法找到最小的变更并更新真实DOM。

34. 如何在React中实现组件通信？

可以通过props在父子组件之间传递数据和回调函数，或者使用Context在深层嵌套组件中传递数据。

35. React中高阶组件（Higher-Order Component, HOC）是什么？

高阶组件是一个函数，它接受一个组件并返回一个新的组件。HOC通常用于组件逻辑的复用。

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

36. 什么是React中的Context API？

Context API用于在组件树中传递数据，而无需通过props逐层传递。它包括React.createContext、Provider和Consumer。

const MyContext = React.createContext();

function Parent() {
  return (
    <MyContext.Provider value="Hello from context">
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  return (
    <MyContext.Consumer>
      {value => <p>{value}</p>}
    </MyContext.Consumer>
  );
}

37. React中的Ref是什么？如何使用？

Ref用于访问DOM节点或React实例。可以通过React.createRef创建Ref，并在组件中通过ref属性使用。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    this.myRef.current.focus();
  }
  render() {
    return <input ref={this.myRef} />;
  }
}

38. React中的Fragment是什么？它有什么作用？

Fragment允许将多个子元素分组，而不在DOM中添加额外的节点。可以使用<React.Fragment>或<>语法。

function MyComponent() {
  return (
    <>
      <p>First paragraph</p>
      <p>Second paragraph</p>
    </>
  );
}

39. React中的Portals是什么？如何使用？

Portals用于将子节点渲染到父组件以外的DOM节点中。可以使用ReactDOM.createPortal方法。

ReactDOM.createPortal(
  <div>Portal Content</div>,
  document.getElementById('portal-root')
);

40. 如何在React中处理异步请求？

可以使用useEffect钩子（在函数组件中）或componentDidMount生命周期方法（在类组件中）来处理异步请求。

useEffect(() => {
  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  }
  fetchData();
}, []);

6. 浏览器相关问题

41. 浏览器的渲染过程是什么？

浏览器的渲染过程包括以下几个步骤：解析HTML生成DOM树、解析CSS生成CSSOM树、将DOM树和CSSOM树合并生成渲染树、布局计算和绘制。

42. 什么是重绘（Repaint）和重排（Reflow）？

重绘是指元素外观的改变（如颜色），不会影响布局。重排是指布局的改变，会影响到部分或整个页面的布局，需要重新计算布局。

43. 浏览器的同源策略是什么？

同源策略是一种安全机制，限制来自不同源（协议、域名、端口）的脚本对当前网页资源的访问。不同源的请求会受到限制，以防止跨站脚本攻击。

44. 如何解决跨域问题？

常见的跨域解决方案包括：JSONP、CORS、服务器代理。

45. 浏览器缓存有哪些类型？

浏览器缓存包括：强缓存和协商缓存。强缓存通过Cache-Control和Expires头实现，协商缓存通过Last-Modified和ETag头实现。

7. 性能优化相关问题

46. 如何优化网页加载速度？

优化网页加载速度的方法包括：减少HTTP请求、使用CDN、压缩资源、延迟加载（lazy loading）、使用缓存等。

47. 如何优化CSS性能？

优化CSS性能的方法包括：减少CSS选择器的复杂度、避免使用低效的选择器、压缩CSS文件、减少重绘和重排等。