前端经典【面试题】持续更新HTML、CSS、JS、VUE、FLUTTER、性能优化等

HTML/CSS 面试题

什么是语义化 HTML？

说明：语义化 HTML 使用 HTML 标签来描述内容的含义，而不仅仅是其外观。使用语义化标签可以提高可读性和可访问性，并对 SEO 友好。

示例：

<header>
    <h1>网站标题</h1>
</header>
<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
</nav>
<article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
</article>
<footer>
    <p>版权信息</p>
</footer>

盒子模型是什么？
1. 说明：CSS 盒子模型描述了每个元素的布局，包括内容、内边距（padding）、边框（border）和外边距（margin）。理解盒子模型对布局和样式设计至关重要。
2. 示例：
```
.box {
    width: 200px; /* 内容宽度 */
    padding: 20px; /* 内边距 */
    border: 5px solid black; /* 边框 */
    margin: 15px; /* 外边距 */
}
```

如何创建响应式设计？

说明：响应式设计使网页在不同设备上良好展示，通常使用媒体查询和流式布局。通过 CSS 适配不同屏幕尺寸。

示例：

/* 默认样式 */
.container {
    display: flex;
    flex-direction: row;
}

/* 媒体查询 */
@media (max-width: 600px) {
    .container {
        flex-direction: column; /* 在小屏幕上改为列方向 */
    }
}

CSS 选择器的优先级是如何计算的？

说明：CSS 选择器的优先级影响样式的应用。优先级从高到低为：内联样式 > ID 选择器 > 类选择器和属性选择器 > 标签选择器。

示例：

<style>
    /* 标签选择器 */
    p {
        color: blue;
    }

    /* 类选择器 */
    .important {
        color: red;
    }

    /* ID 选择器 */
    #unique {
        color: green;
    }
</style>

<p id="unique" class="important">这段文本是绿色的。</p>

什么是 Flexbox 和 Grid，主要区别是什么？
- 说明：Flexbox 是用于一维布局（横向或纵向）的 CSS 布局模型，适合于处理单行或单列元素的对齐；Grid 是用于二维布局（行和列）的 CSS 布局模型，适合于更复杂的布局。
- 示例（Flexbox）：
```
.flex-container {
    display: flex;
    justify-content: space-between; /* 水平对齐 */
}
```
- 示例（Grid）：
```
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列布局 */
}
```
什么是 CSS 预处理器？为什么使用它？
- 说明：CSS 预处理器（如 Sass、LESS）扩展了 CSS 的功能，支持变量、嵌套规则、混入等，使 CSS 代码更具可维护性和复用性。
- 示例（使用 Sass）：
```
$primary-color: blue;

.button {
    background-color: $primary-color;
    &:hover {
        background-color: darken($primary-color, 10%);
    }
}
```

CSS 动画和过渡的区别是什么？

说明：CSS 过渡是元素在状态变化时的平滑过渡，通常涉及两个状态的变化；CSS 动画允许在多帧之间定义关键帧，创建更复杂的动画效果。

示例（过渡）：

.box {
    width: 100px;
    height: 100px;
    transition: background-color 0.5s;
}

.box:hover {
    background-color: red; /* 悬停时改变背景色 */
}

示例（动画）：

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

.box {
    width: 100px;
    height: 100px;
    animation: example 2s infinite; /* 持续循环动画 */
}

如何使用媒体查询实现响应式布局？
- 说明：媒体查询允许根据不同设备的特性（如屏幕宽度）应用不同的样式。
- 示例：
```
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 小屏幕时使用列布局 */
    }
}
```
如何优化网页的加载速度？
- 说明：可以通过减少 HTTP 请求、压缩图片、使用 CDN、最小化 CSS 和 JavaScript 文件等手段提升网页性能。
- 示例：
```
<link rel="stylesheet" href="styles.min.css"> 
```
DOCTYPE 的作用是什么？
- 说明：DOCTYPE 声明定义了文档类型，告诉浏览器使用哪种 HTML 或 XHTML 规范来渲染页面。它有助于确保页面在标准模式下呈现，而不是怪异模式。
- 示例
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
```

JavaScript 面试题

JavaScript 的基本数据类型有哪些？

说明：JavaScript 中有七种基本数据类型：undefined、null、boolean、number、string、symbol（ES6 引入）和 bigint（ES11 引入）。

示例：

let num = 10;         // number
let str = "Hello";    // string
let isTrue = true;    // boolean
let nothing = null;    // null
let notDefined;        // undefined
let sym = Symbol();    // symbol
let bigInt = BigInt(123); // bigint

什么是闭包？

说明：闭包是指一个函数能够访问其外部作用域的变量，即使外部函数已经返回。闭包可以用来创建私有变量。

示例：

function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    };
}
const increment = outer();
increment(); // 1
increment(); // 2

解释原型链的概念。

说明：JavaScript 中的对象通过原型链继承属性和方法。每个对象都有一个 __proto__ 属性，指向其构造函数的原型。

示例：

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const john = new Person('John');
john.greet(); // Hello, my name is John

JavaScript 中的 `this` 是什么？

说明：this 是一个动态绑定的关键字，指向函数执行时的上下文。它的值取决于调用函数的方式。

示例：

const obj = {
    name: 'Alice',
    greet() {
        console.log(`Hello, ${this.name}`);
    }
};
obj.greet(); // Hello, Alice

const greetFunc = obj.greet;
greetFunc(); // Hello, undefined (在非严格模式下)

解释 == 和 === 的区别。
- 说明：== 是宽松比较，会进行类型转换；=== 是严格比较，不会进行类型转换。
- 示例：
```
console.log(0 == '0');  // true
console.log(0 === '0'); // false
```
什么是 Promise？如何使用？
- 说明：Promise 是用于处理异步操作的对象，表示一个可能在将来某个时间点完成的操作。它有三种状态：pending（进行中）、fulfilled（已完成）、rejected（已失败）。
- 示例：
```
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched!');
        }, 1000);
    });
};

fetchData().then(data => console.log(data)); // 1秒后输出 "Data fetched!"
```

什么是 async/await？

说明：async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码。async 声明一个异步函数，await 用于等待 Promise 完成。

示例：

const fetchData = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Data fetched!');
        }, 1000);
    });
};

const fetchAsyncData = async () => {
    const data = await fetchData();
    console.log(data);
};
fetchAsyncData(); // 1秒后输出 "Data fetched!"

解释事件冒泡和事件捕获。

说明：事件冒泡是指事件从目标元素向上冒泡到父元素的过程；事件捕获是指事件从父元素向下传播到目标元素的过程。可以通过 addEventListener 的第三个参数控制。

示例：

<div id="parent">
    <button id="child">Click me</button>
</div>

<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => {
    console.log('Parent clicked');
}, false); // false 为冒泡，true 为捕获

child.addEventListener('click', () => {
    console.log('Child clicked');
}, false);
</script>

什么是节流（throttling）和防抖（debouncing）？

说明：节流是指限制某个函数在一定时间内只能执行一次；防抖是指在事件触发后等待一段时间，如果在这段时间内又触发了事件，则重新计时。

示例（节流）：

function throttle(fn, delay) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime > delay) {
            lastTime = now;
            fn.apply(this, args);
        }
    };
}

示例（防抖）：

function debounce(fn, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

解释浅拷贝和深拷贝的区别。

说明：浅拷贝只复制对象的第一层属性，若属性是引用类型，复制的是地址；深拷贝则递归复制所有层级的属性。

示例（浅拷贝）：

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.b.c = 3;
console.log(original.b.c); // 3 (原对象也受到影响)

示例（深拷贝）：

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;
console.log(original.b.c); // 2 (原对象没有受到影响)

Vue.js 面试题

Vue 的核心概念是什么？
- 说明：Vue.js 是一个用于构建用户界面的渐进式框架。其核心概念包括响应式数据绑定、组件化开发和虚拟 DOM。
- 示例：
```
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
```

什么是 Vue 实例的生命周期钩子？

说明：Vue 实例在创建、挂载、更新和销毁的过程中会经历不同的生命周期阶段，生命周期钩子允许我们在这些阶段执行特定操作。

示例：

new Vue({
    data() {
        return {
            message: 'Hello!'
        };
    },
    created() {
        console.log('组件创建时调用');
    },
    mounted() {
        console.log('组件挂载后调用');
    },
    destroyed() {
        console.log('组件销毁前调用');
    }
});

如何在 Vue 中创建组件？
- 说明：Vue 组件是 Vue 应用的核心，通过 Vue.component() 或单文件组件（.vue 文件）来定义。
- 示例：
```
Vue.component('my-component', {
    template: '<div>A custom component!</div>'
});
```

什么是双向数据绑定，如何实现？

说明：双向数据绑定允许视图和模型之间同步变化。Vue.js 使用 v-model 指令实现双向绑定。

示例：

<div id="app">
    <input v-model="inputValue">
    <p>{{ inputValue }}</p> <!-- 实时显示输入的内容 -->
</div>

<script>
new Vue({
    el: '#app',
    data() {
        return {
            inputValue: ''
        };
    }
});
</script>

Vue 的计算属性与方法的区别是什么？

说明：计算属性是基于其依赖进行缓存的，当依赖改变时才会重新计算；方法是每次调用时都会执行。

示例：

new Vue({
    el: '#app',
    data() {
        return {
            number: 1
        };
    },
    computed: {
        double() {
            return this.number * 2; // 计算属性
        }
    },
    methods: {
        doubleMethod() {
            return this.number * 2; // 方法
        }
    }
});

Vue 中的指令是什么？

说明：指令是 Vue.js 特有的特殊属性，用于在 DOM 元素上应用特定的行为。常见的指令有 v-if、v-for、v-show 等。

示例：

<div id="app">
    <p v-if="isVisible">这个段落是可见的</p>
    <button @click="toggleVisibility">切换可见性</button>
</div>

<script>
new Vue({
    el: '#app',
    data() {
        return {
            isVisible: true
        };
    },
    methods: {
        toggleVisibility() {
            this.isVisible = !this.isVisible; // 切换可见性
        }
    }
});
</script>

什么是 Vuex，如何使用？

说明：Vuex 是 Vue.js 的状态管理库，允许集中管理组件的状态。它通过 State、Getters、Mutations 和 Actions 进行状态管理。

示例：

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    }
});

new Vue({
    el: '#app',
    store,
    computed: {
        count() {
            return this.$store.state.count; // 获取状态
        }
    },
    methods: {
        increment() {
            this.$store.commit('increment'); // 提交变更
        }
    }
});

如何在 Vue 中实现路由？

说明：Vue Router 是 Vue.js 的官方路由管理器，允许在应用中实现导航和路由。

示例：

const router = new VueRouter({
    routes: [
        { path: '/home', component: HomeComponent },
        { path: '/about', component: AboutComponent }
    ]
});

new Vue({
    el: '#app',
    router
});

什么是 Vue 的过滤器，如何使用？

说明：过滤器用于对数据进行格式化和处理，在模板中使用。

示例：

Vue.filter('capitalize', function(value) {
    if (!value) return '';
    return value.charAt(0).toUpperCase() + value.slice(1);
});

new Vue({
    el: '#app',
    data() {
        return {
            message: 'hello'
        };
    }
});

什么是服务端渲染（SSR），Vue 如何实现？
- 说明：服务端渲染是指在服务器上生成 HTML，并返回给客户端，提升首屏加载速度和 SEO 性能。Vue 可以通过 Nuxt.js 等框架实现 SSR。
- 示例：
```
// 使用 Nuxt.js
export default {
    asyncData(context) {
        return context.$axios.$get('/api/data').then(data => {
            return { data };
        });
    }
};
```

Vue 2 vs Vue 3 面试题

Vue 2 和 Vue 3 的响应式系统有什么区别？
- 说明：Vue 2 使用 Object.defineProperty 实现响应式，主要通过 getter/setter 劫持对象属性。而 Vue 3 则使用 Proxy API，实现更加高效和灵活的响应式系统。
- 示例（Vue 2）：
```
const vm = new Vue({
    data: {
        message: 'Hello'
    }
});
vm.message = 'World'; // 会触发视图更新
```
- 示例（Vue 3）：
```
const { reactive } = Vue;
const state = reactive({
    message: 'Hello'
});
state.message = 'World'; // 会触发视图更新
```

Vue 3 引入的 Composition API 有什么优势？

说明：Composition API 允许更灵活的代码组织和复用逻辑。它支持逻辑的组合，减少了大型组件中的代码耦合，提高了可读性。

示例：

// Vue 2
export default {
    data() {
        return { count: 0 };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
};

// Vue 3
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const increment = () => count.value++;
        return { count, increment };
    }
};

在 Vue 3 中如何创建一个组件？
- 说明：Vue 3 支持使用 Composition API 创建组件，同时也保留了 Options API 的使用方式。
- 示例（使用 Composition API）：
```
import { defineComponent } from 'vue';

export default defineComponent({
    setup() {
        return () => <div>Hello, Vue 3!</div>;
    }
});
```
Vue 2 中的 $set 和 Vue 3 中的反应性系统如何处理新增属性？
- 说明：在 Vue 2 中，添加新属性需要使用 $set 方法才能使其响应式；而在 Vue 3 中，使用 Proxy 后，新增属性会自动变为响应式。
- 示例（Vue 2）：
```
const vm = new Vue({
    data: {
        obj: {}
    }
});
Vue.set(vm.obj, 'newProp', 'value'); // 新增属性使其响应式
```
- 示例（Vue 3）：
```
const { reactive } = Vue;
const state = reactive({ obj: {} });
state.obj.newProp = 'value'; // 新增属性自动响应
```
如何处理 Vue 2 和 Vue 3 中的事件监听？
- 说明：在 Vue 2 中使用 v-on 监听事件，而在 Vue 3 中可以使用 @ 符号简化语法。
- 示例（Vue 2）：
```
<button v-on:click="handleClick">Click me</button>
```
- 示例（Vue 3）：
```
<button @click="handleClick">Click me</button>
```
Vue 3 中的 Teleport 组件是什么？有什么用？
- 说明：Teleport 组件允许将子组件渲染到 DOM 的不同位置，通常用于模态框或工具提示等场景。
- 示例：
```
<template>
    <teleport to="body">
        <div class="modal">这是一个模态框</div>
    </teleport>
</template>
```
Vue 3 中的 v-model 有哪些变化？
- 说明：Vue 3 中的 v-model 允许更灵活的使用，支持多个 v-model 和自定义 modelValue 属性。
- 示例：
```
<input v-model="message" />
```
- 示例（多个 v-model）：
```
<MyComponent v-model:title="title" v-model:content="content" />
```
Vue 3 引入的 Suspense 组件有什么用途？
- 说明：Suspense 组件用于处理异步组件的加载状态，提供 fallback 内容直到异步组件加载完成。
- 示例：
```
<suspense>
    <template #default>
        <AsyncComponent />
    </template>
    <template #fallback>
        <div>Loading...</div>
    </template>
</suspense>
```

Vue 3 中的 `provide/inject` 是如何工作的？

说明：provide/inject 允许父组件向其所有子组件提供数据，而不需要通过 props 层层传递。

示例：

// 父组件
import { provide } from 'vue';
export default {
    setup() {
        provide('key', 'value');
    }
};

// 子组件
import { inject } from 'vue';
export default {
    setup() {
        const value = inject('key');
        console.log(value); // 'value'
    }
};

在 Vue 2 和 Vue 3 中如何处理错误捕获？
- 说明：Vue 2 中使用全局的 errorHandler 和组件内的 errorCaptured；而 Vue 3 采用了新的 API，可以在 setup 中使用 onErrorCaptured。
- 示例（Vue 2）：
```
Vue.config.errorHandler = (err, vm) => {
    console.error(err);
};
```
- 示例（Vue 3）：
```
import { onErrorCaptured } from 'vue';
setup() {
    onErrorCaptured((err) => {
        console.error(err);
        return false; // 继续传播
    });
}
```

FLutter

1. 什么是 Flutter？它的优势是什么？

Flutter 是 Google 提供的开源 UI 框架，用于构建跨平台应用程序。它允许使用 Dart 编程语言编写代码，并通过一个代码库生成适用于 iOS、Android、Web 和桌面应用的界面。
优势：
- 单一代码库支持多平台。
- 高性能，因为 Flutter 使用自己的渲染引擎。
- 丰富的自定义控件，提供了极大的设计自由。
- 热重载功能，提高开发效率。

2. StatefulWidget 和 StatelessWidget 有什么区别？

StatelessWidget 是不可变的，一旦构建完成，Widget 的状态不可更改，通常用于无状态的 UI 元素。
StatefulWidget 是可变的，可以在运行时动态更改状态，需要通过 setState 来更新 UI。

3. Flutter 中的状态管理有哪些方式？

Flutter 提供了多种状态管理的方式：
1. setState()：最基础的状态管理方式，适用于小范围的组件状态管理。
2. InheritedWidget：用于在组件树中跨越多个组件共享数据。
3. Provider：一种更现代且常用的状态管理库，基于 InheritedWidget，简化了状态管理流程。
4. Riverpod：Provider 的替代方案，提供更灵活的 API。
5. Bloc (Business Logic Component)：使用事件和状态流来管理应用程序状态。
6. GetX：轻量级的状态管理、依赖注入和路由管理框架。

4. 什么是 Hot Reload 和 Hot Restart？有什么区别？

Hot Reload：只重新加载 Dart 代码的更改，并保持应用程序的状态不变。这使得开发过程更加高效。
Hot Restart：重新启动应用程序，并重新加载所有状态和代码，类似于应用的冷启动。

5. Flutter 中的 Widget 树是什么？为什么重要？

在 Flutter 中，所有东西都是 Widget，Flutter 应用由一棵 Widget 树组成。Widget 树定义了应用程序的 UI 和布局，理解和构建有效的 Widget 树对于提高性能非常重要。

6. 什么是 Keys？为什么需要使用 Keys？

Keys 是 Flutter 中用于标识和跟踪 Widget 的特殊属性。它们在 Widget 树中起到识别作用，特别是在 List 或状态复杂的情况下，Keys 帮助 Flutter 正确地更新和维护 Widget。
使用场景：
- 在 ListView 中保持元素顺序不变。
- 当需要保留 StatefulWidget 状态时。

7. Flutter 中如何处理异步操作？

Flutter 提供了多种处理异步操作的方式：
1. 使用 async 和 await 处理异步函数。
2. 使用 Future 来表示异步操作的结果。
3. 使用 Stream 来处理一系列的异步事件，例如流式数据。

8. Flutter 中的 Navigator 和路由是什么？如何管理路由？

Navigator 是 Flutter 中用于管理应用页面导航的组件。它维护一个堆栈，用于跟踪屏幕导航。
路由管理：
1. 通过 Navigator.push() 和 Navigator.pop() 方法进行页面间的跳转和返回。
2. 使用 MaterialPageRoute 或自定义的 PageRoute 实现页面动画。
3. 通过 onGenerateRoute 或 Navigator 2.0 实现复杂的路由管理。

9. 什么是 FutureBuilder 和 StreamBuilder？它们的作用是什么？

FutureBuilder 是用于处理和显示 Future 数据的 Widget，适合一次性异步数据获取。
StreamBuilder 则用于处理流数据，适合用于多次异步数据变化的场景（如数据流）。

10. 如何优化 Flutter 应用的性能？

优化方法：
1. 避免在 build() 方法中执行繁重的计算。
2. 使用 const 构建不可变的 Widget。
3. 合理使用 ListView.builder 等延迟加载的列表控件。
4. 使用 RepaintBoundary 降低不必要的重绘。
5. 分析性能瓶颈，可以通过 Flutter DevTools 进行调试。

11. Flutter 中如何进行网络请求？

可以使用 Flutter 提供的 http 包进行网络请求。以下是一个简单的网络请求示例：

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    var data = jsonDecode(response.body);
    print(data);
  } else {
    throw Exception('Failed to load data');
  }
}

12. 如何在 Flutter 中实现动画效果？

Flutter 提供了多种方式实现动画，包括：
1. 使用 AnimatedBuilder 或 AnimatedWidget 来实现基本动画。
2. 使用 Tween 和 AnimationController 实现自定义动画。
3. 使用 Implicit Animations 如 AnimatedContainer、AnimatedOpacity 等简化常见动画效果的实现。

13. Flutter 中如何进行国际化 (i18n)？

Flutter 提供了 flutter_localizations 包来支持国际化。主要步骤包括：
1. 在 pubspec.yaml 中添加依赖：
```
dependencies:
  flutter_localizations:
    sdk: flutter
```
2. 使用 Intl 包来管理翻译文件。
3. 在 MaterialApp 中配置 localizationsDelegates 和 supportedLocales。

14. 什么是 Sliver？如何使用 Sliver Widgets？

Sliver 是一组可以延迟加载和滚动的 Widget。它们允许更灵活的滚动效果，特别是在大数据列表和自定义滚动布局中。常见的 Sliver 包括 SliverList、SliverGrid、SliverAppBar 等。

15. Flutter 中如何实现平台特定的代码？

Flutter 通过平台通道（Platform Channels）允许与原生代码（如 Android 的 Kotlin/Java，iOS 的 Swift/Objective-C）进行通信，从而调用平台特定的功能。
可以通过 MethodChannel 实现 Flutter 与原生代码的双向通信。