前端面试全攻略：从基础到高级，案例解析助你脱颖而出
前端面试详细解析
1. HTML/CSS基础
- HTML5新特性：HTML5引入了许多新元素和API，如
<canvas>、<video>、<audio>、localStorage、sessionStorage等。面试中可能会问到如何使用这些新特性来提升用户体验。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Example</title> </head> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.fillStyle = "#FF0000"; context.fillRect(0, 0, 150, 75); </script> </body> </html> - CSS3动画：CSS3提供了
@keyframes和animation属性，可以实现复杂的动画效果。面试中可能会要求实现一个简单的动画。@keyframes example { from {background-color: red;} to {background-color: yellow;} } div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; }
2. JavaScript基础
- 闭包：闭包是JavaScript中一个非常重要的概念，面试中经常会问到。闭包允许函数访问其词法作用域中的变量。
function outerFunction() { let outerVar = 'I am outside!'; function innerFunction() { console.log(outerVar); } return innerFunction; } const myClosure = outerFunction(); myClosure(); // 输出: I am outside! - 事件循环：JavaScript是单线程的，但通过事件循环机制可以实现异步操作。面试中可能会问到
setTimeout、Promise、async/await等概念。console.log('Start'); setTimeout(() => { console.log('Timeout'); }, 0); Promise.resolve().then(() => { console.log('Promise'); }); console.log('End'); // 输出顺序: Start, End, Promise, Timeout
3. 框架与库
- React：React是一个用于构建用户界面的JavaScript库。面试中可能会问到组件生命周期、状态管理、Hooks等。
import React, { useState, useEffect } from 'react'; function App() { 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> ); } export default App; - Vue：Vue是一个渐进式的JavaScript框架。面试中可能会问到Vue的生命周期、组件通信、Vuex等。
new Vue({ el: '#app', data: { message: 'Hello Vue!' } });
4. 性能优化
- 图片优化：使用
srcset和sizes属性来实现响应式图片加载。<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" sizes="(max-width: 600px) 480px, 800px" alt="Description"> - 代码分割：使用Webpack的
import()函数实现代码分割，减少初始加载时间。import('./module.js') .then(module => { module.default(); }) .catch(err => { console.log('Failed to load module', err); });
5. 安全
- XSS攻击：跨站脚本攻击（XSS）是一种常见的Web安全漏洞。面试中可能会问到如何防范XSS攻击。
const escapeHtml = (str) => { return str.replace(/[&<>'"]/g, (tag) => { const chars = { '&': '&', '<': '<', '>': '>', "'": ''', '"': '"' }; return chars[tag] || tag; }); }; const userInput = "<script>alert('XSS')</script>"; const safeOutput = escapeHtml(userInput); console.log(safeOutput); // <script>alert('XSS')</script>
6. 工具与构建
- Webpack：Webpack是一个模块打包工具，面试中可能会问到如何配置Webpack。
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } };
7. 跨平台开发
- React Native：React Native允许开发者使用JavaScript构建跨平台的移动应用。面试中可能会问到如何使用React Native构建一个简单的应用。
import React from 'react'; import { Text, View } from 'react-native'; const App = () => { return ( <View> <Text>Hello, React Native!</Text> </View> ); }; export default App;
8. 测试
- Jest：Jest是一个JavaScript测试框架，面试中可能会问到如何编写单元测试。
test('adds 1 + 2 to equal 3', () => { expect(1 + 2).toBe(3); });
9. 版本控制
- Git：Git是一个分布式版本控制系统，面试中可能会问到常用的Git命令。
git init git add . git commit -m "Initial commit" git push origin main
10. 项目经验
总结
前端面试涵盖了从基础的HTML/CSS/JavaScript到高级的框架、性能优化、安全、工具、跨平台开发、测试和版本控制等多个方面。准备面试时，不仅要掌握理论知识，还要通过实际案例来展示你的技能和解决问题的能力。
