目录
- HTML相关问题
- CSS相关问题
- JavaScript相关问题
- Vue.js相关问题
- React相关问题
- 浏览器相关问题
- 性能优化相关问题
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文件、减少重绘和重排等。