【初级】前端开发工程师面试100题（一）

本题库共计包含100题，考察html，css，js，以及react，vue，webpack等基础知识掌握情况。

HTML基础篇

说说你对HTML语义化的理解？
- 语义化就是用合适的标签表达合适的内容，比如<header>表示页眉，<nav>表示导航。这样不仅代码更清晰，对SEO也友好，屏幕阅读器也能更好理解页面结构。
HTML5新增了哪些常用标签？
- <section>表示文档中的节，<article>独立内容，<aside>侧边栏，<video>和<audio>直接嵌入媒体，还有<canvas>画布。
img标签的alt和title属性有什么区别？
- alt是图片无法显示时的替代文本，对SEO重要；title是鼠标悬停时的提示文本，可加可不加。
如何理解HTML中的DOCTYPE声明？
- 它告诉浏览器用哪种HTML版本来解析页面，比如<!DOCTYPE html>表示HTML5，没有它浏览器可能进入怪异模式。

meta标签有哪些常见用法？

<meta charset="UTF-8"> <!-- 字符编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 -->
<meta name="description" content="页面描述"> <!-- SEO用 -->

CSS基础篇

CSS盒模型是什么？标准盒模型和怪异盒模型区别？
- 盒模型就是把元素看作盒子，有content、padding、border、margin。标准盒模型width只含content，怪异盒模型width包含content+padding+border。

如何让一个div水平垂直居中？

/* 方法1：flex布局（最推荐） */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 方法2：绝对定位+transform */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

CSS选择器优先级怎么计算？
- !important > 行内样式 > ID选择器 > 类选择器 > 标签选择器。相同优先级后写的覆盖先写的。
什么是BFC？如何触发BFC？
- BFC(块级格式化上下文)是独立的渲染区域，内部元素不会影响外部。触发方式：float非none、overflow非visible、display为inline-block等。
px、em、rem有什么区别？
- px是固定像素；em相对父元素字体大小；rem相对根元素(html)字体大小。移动端推荐用rem适配不同屏幕。

JavaScript基础篇

let、const和var的区别？
- var有变量提升，let/const没有；var是函数作用域，let/const是块级作用域；const声明后不能重新赋值。
什么是闭包？有什么优缺点？
- 闭包就是函数能访问外部作用域的变量。优点是可以封装私有变量；缺点是可能造成内存泄漏。
```
function outer() {
  let count = 0;
  return function inner() {
    return ++count;
  }
}
const counter = outer();
counter(); // 1
```
如何判断数据类型？typeof和instanceof区别？
- typeof能判断基本类型(除null)，instanceof判断引用类型。更全面的可以用Object.prototype.toString.call()。
什么是事件循环(Event Loop)？
- JS是单线程的，通过事件循环处理异步任务。同步任务在主线程执行，异步任务(如setTimeout)进入任务队列，主线程空闲时从队列取出执行。
ES6有哪些新特性？
- let/const、箭头函数、模板字符串、解构赋值、Promise、class、模块化import/export等。

React框架篇

React类组件和函数组件有什么区别？
- 类组件有this、生命周期和state；函数组件更简洁，现在推荐用Hooks实现同样功能。
React生命周期有哪些？
- 挂载阶段：constructor → render → componentDidMount
- 更新阶段：shouldComponentUpdate → render → componentDidUpdate
- 卸载阶段：componentWillUnmount
什么是虚拟DOM？为什么用虚拟DOM？
- 虚拟DOM是真实DOM的轻量级JS对象表示。React通过比较新旧虚拟DOM的差异(diff算法)，最小化更新真实DOM，提高性能。
React中key的作用是什么？
- key帮助React识别哪些元素改变了，减少不必要的重新渲染。不要用index作为key，应该用唯一id。
React Hooks常用有哪些？
- useState(状态管理)、useEffect(副作用)、useContext(上下文)、useReducer(复杂状态逻辑)、useCallback/useMemo(性能优化)。

Vue框架篇

Vue2和Vue3主要区别？
- Vue3用Proxy代替Object.defineProperty实现响应式，Composition API代替Options API，更好的TypeScript支持。
v-if和v-show的区别？
- v-if是条件渲染，不满足时元素不存在DOM中；v-show只是切换display属性，元素始终在DOM中。
Vue组件通信方式有哪些？
- 父子：props/$emit；跨级：provide/inject；全局：Vuex/Pinia；事件总线：mitt/EventBus。
Vue生命周期有哪些？
- beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted。
什么是Vue的计算属性？和methods有什么区别？
- 计算属性(computed)有缓存，依赖不变时不会重新计算；methods每次调用都会执行。
```
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}
```

Webpack构建工具篇

Webpack的核心概念有哪些？
- Entry(入口)、Output(输出)、Loader(处理非JS文件)、Plugin(扩展功能)、Mode(开发/生产模式)。
Loader和Plugin有什么区别？
- Loader是文件加载器，如处理CSS的css-loader；Plugin是扩展插件，如生成HTML的HtmlWebpackPlugin。
如何优化Webpack打包速度？
- 使用cache-loader缓存、thread-loader多线程、DllPlugin预编译、合理配置exclude缩小loader处理范围。
什么是Tree Shaking？如何实现？
- 删除未引用代码(dead code)。ES6模块化(import/export) + production模式 + 配置usedExports。
```
optimization: {
  usedExports: true
}
```
Webpack的热更新(HMR)原理是什么？
- 通过websocket连接开发服务器，文件修改后服务器推送更新消息，客户端替换修改的模块而不刷新页面。

浏览器与网络篇

从输入URL到页面显示发生了什么？
- DNS解析 → TCP连接 → HTTP请求 → 服务器响应 → 浏览器解析渲染 → 连接结束。
什么是跨域？如何解决跨域？
- 浏览器同源策略限制。解决方案：JSONP、CORS、Nginx反向代理、WebSocket、postMessage。
HTTP缓存有哪些策略？
- 强缓存(Expires/Cache-Control)和协商缓存(Last-Modified/ETag)。Cache-Control优先级更高。
GET和POST请求有什么区别？
- GET参数在URL中，有长度限制，可缓存；POST参数在请求体，更安全，不可缓存。
HTTP和HTTPS有什么区别？
- HTTPS=HTTP+SSL/TLS加密，更安全但性能稍低。HTTPS默认端口443，HTTP是80。

性能优化篇

前端性能优化有哪些常见手段？
- 减少HTTP请求(合并文件)、使用CDN、懒加载、代码压缩、使用缓存、减少重排重绘、SSR等。

什么是防抖和节流？有什么区别？

防抖(debounce)：连续触发只执行最后一次；节流(throttle)：固定时间间隔执行一次。

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

如何减少页面重排(Reflow)和重绘(Repaint)？
- 避免频繁操作样式，使用transform代替top/left，使用visibility代替display:none，批量修改DOM。

什么是懒加载？如何实现图片懒加载？

延迟加载非首屏内容。监听滚动事件，当图片进入视口时再加载src。

<img data-src="image.jpg" class="lazyload">
<script>
  const images = document.querySelectorAll('.lazyload');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach(img => observer.observe(img));
</script>

Web Workers是什么？有什么作用？
- 在后台线程运行JS脚本，不阻塞主线程。适合计算密集型任务，但不能直接操作DOM。

安全与异常处理篇

什么是XSS攻击？如何防范？
- 跨站脚本攻击，注入恶意脚本。防范：输入输出转义(如<转成<)、CSP内容安全策略、HttpOnly cookie。
什么是CSRF攻击？如何防范？
- 跨站请求伪造，诱使用户在已登录状态下执行非预期操作。防范：验证Referer、添加token、SameSite cookie属性。
前端常见的错误监控方式有哪些？
- try-catch、window.onerror、Promise.catch、Vue/React错误边界、Sentry等第三方监控。
如何处理前端兼容性问题？
- 特性检测(如Modernizr)、polyfill填充、autoprefixer自动加CSS前缀、Babel转译ES6+语法。
如何实现前端埋点监控？
- 手动埋点(关键节点手动上报)、无痕埋点(全量采集)、可视化埋点(通过界面配置)。常用方案：Google Analytics、自建日志系统。

项目实战篇

如何组织大型前端项目的目录结构？
- 按功能模块划分：/src/components公共组件、/src/views页面、/src/api接口、/src/store状态管理、/src/utils工具函数。
如何进行前端代码规范？
- ESLint代码检查、Prettier格式化、Husky+lint-staged提交前检查、制定团队编码规范文档。
如何实现权限控制系统？
- 路由权限(动态路由)、菜单权限(后端返回)、按钮权限(v-permission指令)、接口权限(JWT校验)。
如何优化首屏加载速度？
- 代码分割、预加载关键资源、SSR服务端渲染、骨架屏、CDN加速、Gzip压缩、图片优化。
如何实现国际化(i18n)？
- 使用vue-i18n或react-i18next等库，准备多语言JSON文件，通过切换语言环境变量实现。