前端面试核心考点全解析

前端面试常见问题及解析大纲

核心技术篇

HTML相关问题

1. HTML5新特性解析

• 语义化标签（<header>、<section>等）的作用与示例
• 本地存储（localStorage与sessionStorage）的差异

localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key')); // 输出 'value'

2. 跨域问题与解决方案

• CORS机制及服务器端配置示例
• JSONP原理及代码实现

function handleResponse(data) {
  console.log(data);
}
const script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);

---

CSS相关问题

1. 盒模型详解

• 标准模型与怪异模型的区别
• 通过box-sizing属性控制

.box {
  box-sizing: border-box; /* 宽度包含padding和border */
}

2. Flex布局实战

• 主轴与交叉轴概念
• 常见属性如justify-content、align-items的应用

.container {
  display: flex;
  justify-content: center;
}

---

JavaScript核心问题

1. 闭包与作用域链

• 闭包的内存泄漏风险及规避方法

function outer() {
  let count = 0;
  return function() {
    return ++count;
  };
}
const counter = outer();
counter(); // 1

2. Promise与异步编程

• 手写Promise.all实现

Promise.myAll = function(promises) {
  return new Promise((resolve, reject) => {
    let results = [];
    promises.forEach(promise => {
      promise.then(res => {
        results.push(res);
        if (results.length === promises.length) resolve(results);
      }).catch(reject);
    });
  });
};

---

框架篇

React高频问题

1. Virtual DOM diff算法

• Key属性的重要性及优化策略

2. Hooks使用规范

• useEffect依赖项数组的注意事项

useEffect(() => {
  fetchData();
}, [id]); // 仅当id变化时执行

---

Vue核心考点

1. 响应式原理

• Object.defineProperty与Proxy的对比

2. 生命周期钩子

• created与mounted阶段的数据操作差异

---

工程化篇

Webpack优化策略

• Tree Shaking生效条件
• 分包加载配置示例

optimization: {
  splitChunks: {
    chunks: 'all',
  },
}

---

算法与网络

1. 防抖与节流实现

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

2. HTTP/2特性

• 多路复用与头部压缩机制

---

实战案例分析

1. 性能优化方案

• 图片懒加载实现

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));

前端面试题技术知识点大纲

HTML 部分

• HTML5 新特性
• 语义化标签的作用
• 跨域问题及解决方案
• 本地存储（LocalStorage、SessionStorage、Cookie）
• SEO 优化技巧

<!-- 语义化标签示例 -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>
    <h1>Article Title</h1>
  </article>
</main>
<footer>
  <p>Copyright 2023</p>
</footer>

JavaScript 部分

• 闭包原理及应用场景
• 原型链与继承
• 事件循环机制
• ES6+ 新特性（Promise、async/await、箭头函数等）
• 防抖与节流实现

// 防抖函数实现
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

Vue 部分

• 响应式原理
• 生命周期钩子函数
• 组件通信方式
• Vuex 核心概念
• Vue Router 实现原理

// Vue 组件通信示例
// 父组件
<template>
  <child-component @custom-event="handleEvent" />
</template>

// 子组件
methods: {
  triggerEvent() {
    this.$emit('custom-event', data);
  }
}

UniApp 部分

• 跨平台开发原理
• 条件编译使用场景
• 页面路由管理
• 原生插件开发流程
• 性能优化方案

// 条件编译示例
// #ifdef H5
console.log('只在H5平台执行');
// #endif

React 部分

• Virtual DOM 原理
• Hooks 使用规则
• 状态管理方案对比（Redux、MobX）
• Fiber 架构理解
• 高阶组件应用

// React Hooks 示例
import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);
}

TypeScript 部分

• 类型系统优势
• 接口与类型别名区别
• 泛型应用场景
• 装饰器原理
• 模块声明方式

// 泛型示例
function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("myString");

综合问题

• 前端性能优化方案
• Web 安全防护措施
• 前端工程化实践
• 微前端架构理解
• 常见设计模式应用

// 性能优化示例：虚拟列表
// 仅渲染可视区域内的列表项
function VirtualList({ items, itemHeight, visibleCount }) {
  const [startIndex, setStartIndex] = useState(0);
  
  // 计算需要渲染的items
  const visibleItems = items.slice(startIndex, startIndex + visibleCount);
  
  return (
    <div style={{ height: items.length * itemHeight }}>
      <div style={{ transform: `translateY(${startIndex * itemHeight}px)` }}>
        {visibleItems.map(item => (
          <div key={item.id} style={{ height: itemHeight }}>
            {item.content}
          </div>
        ))}
      </div>
    </div>
  );
}

实战案例分析

• 复杂状态管理方案设计
• 大型项目架构设计
• 性能问题排查流程
• 组件库设计原则
• 新技术调研方法论

// 状态管理方案示例
interface AppState {
  user: User | null;
  loading: boolean;
}

const initialState: AppState = {
  user: null,
  loading: false
};

function reducer(state: AppState, action: Action): AppState {
  switch(action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_LOADING':
      return { ...state, loading: action.payload };
    default:
      return state;
  }
}