前端面试中常见的八股文题目主要涵盖基础知识、框架、性能优化、安全等方面。
1. HTML & CSS
问题：解释盒模型
代码语言：txt复制/* CSS盒模型 */
.box {
width: 300px; /* 内容宽度 */
padding: 20px; /* 内边距 */
border: 5px solid #000; /* 边框 */
margin: 15px; /* 外边距 */
}
- 内容区域：width和height。
- 内边距：padding，会增加元素的大小。
- 边框：border，包围在内边距外面。
- 外边距：margin，元素与其他元素之间的距离。
问题：CSS选择器优先级
代码语言：txt复制/* 优先级从高到低 */
#id { } /* ID选择器 */
.class { } /* 类选择器 */
element { } /* 元素选择器 */
2. JavaScript
问题：闭包的概念及示例
代码语言：txt复制function outerFunction() {
let outerVariable = 'I am outside!';
function innerFunction() {
console.log(outerVariable); // 可以访问外部作用域的变量
}
return innerFunction;
}
const myInnerFunc = outerFunction();
myInnerFunc(); // 输出 "I am outside!"
问题：异步编程与Promise
代码语言：txt复制// Promise示例
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('数据获取成功');
}, 2000);
});
};
fetchData().then(data => {
console.log(data); // 输出 "数据获取成功"
});
3. DOM操作
问题：如何添加、删除DOM元素
代码语言：txt复制// 添加元素
const newDiv = document.createElement('div');
newDiv.innerText = 'Hello, World!';
document.body.appendChild(newDiv);
// 删除元素
const elementToRemove = document.querySelector('.remove-me');
if (elementToRemove) {
elementToRemove.remove();
}
4. 性能优化
问题：如何减少HTTP请求数量
代码语言：txt复制<!-- 合并多个CSS文件 -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css">
<!-- 使用webpack或gulp合并 -->
问题：懒加载图片
代码语言：txt复制<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy-load" alt="Lazy loaded image">
<script>
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll('.lazy-load');
const options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const lazyLoad = (image) => {
image.src = image.dataset.src;
image.classList.remove('lazy-load');
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
lazyLoad(entry.target);
observer.unobserve(entry.target);
}
});
}, options);
lazyImages.forEach(image => {
observer.observe(image);
});
});
</script>
5. 安全性
问题：什么是XSS攻击？如何防止？
- 定义：跨站脚本攻击（XSS）是指攻击者向网页中注入恶意脚本。
- 防止措施：
- 输入验证和过滤
- 使用Content Security Policy (CSP)
<!-- 示例：使用CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.com;">
6. 框架(Vue/React)
Vue组件基础
代码语言：txt复制<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
};
}
};
</script>
React组件基础
代码语言：txt复制import React from 'react';
function App() {
const [message, setMessage] = React.useState('Hello React!');
return <div>{message}</div>;
}
export default App;
