0


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

HTML/CSS 面试题

  1. 什么是语义化 HTML?1. 说明语义化 HTML 使用 HTML 标签来描述内容的含义,而不仅仅是其外观。使用语义化标签可以提高可读性和可访问性,并对 SEO 友好。2. 示例<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>

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

  3. 如何创建响应式设计?1. 说明响应式设计使网页在不同设备上良好展示,通常使用媒体查询和流式布局。通过 CSS 适配不同屏幕尺寸。2. 示例/* 默认样式 */.container { display: flex; flex-direction: row;}/* 媒体查询 */@media (max-width: 600px) { .container { flex-direction: column; /* 在小屏幕上改为列方向 */ }}

  4. CSS 选择器的优先级是如何计算的?1. 说明CSS 选择器的优先级影响样式的应用。优先级从高到低为:内联样式 > ID 选择器 > 类选择器和属性选择器 > 标签选择器。2. 示例<style> /* 标签选择器 */ p { color: blue; } /* 类选择器 */ .important { color: red; } /* ID 选择器 */ #unique { color: green; }</style><p id="unique" class="important">这段文本是绿色的。</p>

  5. 什么是 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); /* 三列布局 */}

  6. 什么是 CSS 预处理器?为什么使用它?- 说明CSS 预处理器(如 Sass、LESS)扩展了 CSS 的功能,支持变量、嵌套规则、混入等,使 CSS 代码更具可维护性和复用性。- 示例(使用 Sass)$primary-color: blue;.button { background-color: $primary-color; &:hover { background-color: darken($primary-color, 10%); }}

  7. 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; /* 持续循环动画 */}

  8. 如何使用媒体查询实现响应式布局?- 说明媒体查询允许根据不同设备的特性(如屏幕宽度)应用不同的样式。- 示例@media (max-width: 768px) { .container { flex-direction: column; /* 小屏幕时使用列布局 */ }}

  9. 如何优化网页的加载速度?- 说明可以通过减少 HTTP 请求、压缩图片、使用 CDN、最小化 CSS 和 JavaScript 文件等手段提升网页性能。- 示例<link rel="stylesheet" href="styles.min.css"> <!-- 使用压缩后的 CSS -->

  10. ** 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 面试题

  1. JavaScript 的基本数据类型有哪些?- 说明JavaScript 中有七种基本数据类型:*undefinednullbooleannumberstringsymbol**(ES6 引入)和 **bigint*(ES11 引入)。- 示例let num = 10; // numberlet str = "Hello"; // stringlet isTrue = true; // booleanlet nothing = null; // nulllet notDefined; // undefinedlet sym = Symbol(); // symbollet bigInt = BigInt(123); // bigint

  2. 什么是闭包?- 说明闭包是指一个函数能够访问其外部作用域的变量,即使外部函数已经返回。闭包可以用来创建私有变量。- 示例function outer() { let count = 0; return function inner() { count++; console.log(count); };}const increment = outer();increment(); // 1increment(); // 2

  3. 解释原型链的概念。- 说明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

  4. JavaScript 中的 this 是什么?- 说明:*this 是一个动态绑定的关键字,指向函数执行时的上下文。它的值取决于调用函数的方式。*- 示例const obj = { name: 'Alice', greet() { console.log(`Hello, ${this.name}`); }};obj.greet(); // Hello, Aliceconst greetFunc = obj.greet;greetFunc(); // Hello, undefined (在非严格模式下)

  5. 解释 ===== 的区别。- 说明:*== 是宽松比较,会进行类型转换;=== 是严格比较,不会进行类型转换。*- 示例console.log(0 == '0'); // trueconsole.log(0 === '0'); // false

  6. 什么是 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!"

  7. 什么是 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!"

  8. 解释事件冒泡和事件捕获。- 说明事件冒泡是指事件从目标元素向上冒泡到父元素的过程;事件捕获是指事件从父元素向下传播到目标元素的过程。可以通过 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>

  9. 什么是节流(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); };}

  10. 解释浅拷贝和深拷贝的区别。- 说明浅拷贝只复制对象的第一层属性,若属性是引用类型,复制的是地址;深拷贝则递归复制所有层级的属性。- 示例(浅拷贝)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 面试题

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

  2. 什么是 Vue 实例的生命周期钩子?- 说明Vue 实例在创建、挂载、更新和销毁的过程中会经历不同的生命周期阶段,生命周期钩子允许我们在这些阶段执行特定操作。- 示例new Vue({ data() { return { message: 'Hello!' }; }, created() { console.log('组件创建时调用'); }, mounted() { console.log('组件挂载后调用'); }, destroyed() { console.log('组件销毁前调用'); }});

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

  4. 什么是双向数据绑定,如何实现?- 说明双向数据绑定允许视图和模型之间同步变化。Vue.js 使用 v-model 指令实现双向绑定。- 示例<div id="app"> <input v-model="inputValue"> <p>{{ inputValue }}</p> <!-- 实时显示输入的内容 --></div><script>new Vue({ el: '#app', data() { return { inputValue: '' }; }});</script>

  5. Vue 的计算属性与方法的区别是什么?- 说明计算属性是基于其依赖进行缓存的,当依赖改变时才会重新计算;方法是每次调用时都会执行。- 示例new Vue({ el: '#app', data() { return { number: 1 }; }, computed: { double() { return this.number * 2; // 计算属性 } }, methods: { doubleMethod() { return this.number * 2; // 方法 } }});

  6. Vue 中的指令是什么?- 说明:指令是 Vue.js 特有的特殊属性,用于在 DOM 元素上应用特定的行为。常见的指令有 v-ifv-forv-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>

  7. 什么是 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'); // 提交变更 } }});

  8. 如何在 Vue 中实现路由?- 说明:Vue Router 是 Vue.js 的官方路由管理器,允许在应用中实现导航和路由。- 示例const router = new VueRouter({ routes: [ { path: '/home', component: HomeComponent }, { path: '/about', component: AboutComponent } ]});new Vue({ el: '#app', router});

  9. 什么是 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' }; }});

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

Vue 2 vs Vue 3 面试题

  1. 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'; // 会触发视图更新

  2. Vue 3 引入的 Composition API 有什么优势?- 说明Composition API 允许更灵活的代码组织和复用逻辑。它支持逻辑的组合,减少了大型组件中的代码耦合,提高了可读性。- 示例// Vue 2export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; } }};// Vue 3import { ref } from 'vue';export default { setup() { const count = ref(0); const increment = () => count.value++; return { count, increment }; }};

  3. 在 Vue 3 中如何创建一个组件?- 说明Vue 3 支持使用 Composition API 创建组件,同时也保留了 Options API 的使用方式。- 示例(使用 Composition API): import { defineComponent } from 'vue';export default defineComponent({ setup() { return () => <div>Hello, Vue 3!</div>; }});

  4. 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'; // 新增属性自动响应

  5. 如何处理 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>

  6. Vue 3 中的 Teleport 组件是什么?有什么用?- 说明Teleport 组件允许将子组件渲染到 DOM 的不同位置,通常用于模态框或工具提示等场景。- 示例<template> <teleport to="body"> <div class="modal">这是一个模态框</div> </teleport></template>

  7. 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" />

  8. Vue 3 引入的 Suspense 组件有什么用途?- 说明:*Suspense 组件用于处理异步组件的加载状态,提供 fallback 内容直到异步组件加载完成。*- 示例<suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <div>Loading...</div> </template></suspense>

  9. 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' }};

  10. 在 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. 使用 asyncawait 处理异步函数。2. 使用 Future 来表示异步操作的结果。3. 使用 Stream 来处理一系列的异步事件,例如流式数据。

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

  • Navigator 是 Flutter 中用于管理应用页面导航的组件。它维护一个堆栈,用于跟踪屏幕导航。
  • 路由管理: 1. 通过 Navigator.push()Navigator.pop() 方法进行页面间的跳转和返回。2. 使用 MaterialPageRoute 或自定义的 PageRoute 实现页面动画。3. 通过 onGenerateRouteNavigator 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. 使用 AnimatedBuilderAnimatedWidget 来实现基本动画。2. 使用 TweenAnimationController 实现自定义动画。3. 使用 Implicit AnimationsAnimatedContainerAnimatedOpacity 等简化常见动画效果的实现。

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

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

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

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

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

  • Flutter 通过平台通道(Platform Channels)允许与原生代码(如 Android 的 Kotlin/Java,iOS 的 Swift/Objective-C)进行通信,从而调用平台特定的功能。
  • 可以通过 MethodChannel 实现 Flutter 与原生代码的双向通信。
标签: 1024程序员节

本文转载自: https://blog.csdn.net/m0_62359005/article/details/143207319
版权归原作者 flutter大佬(接私活) 所有, 如有侵权,请联系我们删除。

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

还没有评论