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

发布于：2025-05-01 ⋅ 阅读:(27) ⋅ 点赞:(0)

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

【初级】前端开发工程师面试100题（一）
【初级】前端开发工程师面试100题（二）
【初级】前端开发工程师的面试100题（速记版）

HTML基础篇

  1. 说说你对HTML语义化的理解？

    • 语义化就是用合适的标签表达合适的内容，比如<header>表示页眉，<nav>表示导航。这样不仅代码更清晰，对SEO也友好，屏幕阅读器也能更好理解页面结构。

  2. HTML5新增了哪些常用标签？

    • <section>表示文档中的节，<article>独立内容，<aside>侧边栏，<video>和<audio>直接嵌入媒体，还有<canvas>画布。

  3. img标签的alt和title属性有什么区别？

    • alt是图片无法显示时的替代文本，对SEO重要；title是鼠标悬停时的提示文本，可加可不加。

  4. 如何理解HTML中的DOCTYPE声明？

    • 它告诉浏览器用哪种HTML版本来解析页面，比如<!DOCTYPE html>表示HTML5，没有它浏览器可能进入怪异模式。

  5. meta标签有哪些常见用法？

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

CSS基础篇

  1. CSS盒模型是什么？标准盒模型和怪异盒模型区别？

    • 盒模型就是把元素看作盒子，有content、padding、border、margin。标准盒模型width只含content，怪异盒模型width包含content+padding+border。

  2. 如何让一个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%);
}

  3. CSS选择器优先级怎么计算？

    • !important > 行内样式 > ID选择器 > 类选择器 > 标签选择器。相同优先级后写的覆盖先写的。

  4. 什么是BFC？如何触发BFC？

    • BFC(块级格式化上下文)是独立的渲染区域，内部元素不会影响外部。触发方式：float非none、overflow非visible、display为inline-block等。

  5. px、em、rem有什么区别？

    • px是固定像素；em相对父元素字体大小；rem相对根元素(html)字体大小。移动端推荐用rem适配不同屏幕。

JavaScript基础篇

  1. let、const和var的区别？

    • var有变量提升，let/const没有；var是函数作用域，let/const是块级作用域；const声明后不能重新赋值。

  2. 什么是闭包？有什么优缺点？

    • 闭包就是函数能访问外部作用域的变量。优点是可以封装私有变量；缺点是可能造成内存泄漏。
    function outer() {
  let count = 0;
  return function inner() {
    return ++count;
  }
}
const counter = outer();
counter(); // 1

  3. 如何判断数据类型？typeof和instanceof区别？

    • typeof能判断基本类型(除null)，instanceof判断引用类型。更全面的可以用Object.prototype.toString.call()。

  4. 什么是事件循环(Event Loop)？

    • JS是单线程的，通过事件循环处理异步任务。同步任务在主线程执行，异步任务(如setTimeout)进入任务队列，主线程空闲时从队列取出执行。

  5. ES6有哪些新特性？

    • let/const、箭头函数、模板字符串、解构赋值、Promise、class、模块化import/export等。

React框架篇

  1. React类组件和函数组件有什么区别？

    • 类组件有this、生命周期和state；函数组件更简洁，现在推荐用Hooks实现同样功能。

  2. React生命周期有哪些？

    • 挂载阶段：constructor → render → componentDidMount
    • 更新阶段：shouldComponentUpdate → render → componentDidUpdate
    • 卸载阶段：componentWillUnmount

  3. 什么是虚拟DOM？为什么用虚拟DOM？

    • 虚拟DOM是真实DOM的轻量级JS对象表示。React通过比较新旧虚拟DOM的差异(diff算法)，最小化更新真实DOM，提高性能。

  4. React中key的作用是什么？

    • key帮助React识别哪些元素改变了，减少不必要的重新渲染。不要用index作为key，应该用唯一id。

  5. React Hooks常用有哪些？

    • useState(状态管理)、useEffect(副作用)、useContext(上下文)、useReducer(复杂状态逻辑)、useCallback/useMemo(性能优化)。

Vue框架篇

  1. Vue2和Vue3主要区别？

    • Vue3用Proxy代替Object.defineProperty实现响应式，Composition API代替Options API，更好的TypeScript支持。

  2. v-if和v-show的区别？

    • v-if是条件渲染，不满足时元素不存在DOM中；v-show只是切换display属性，元素始终在DOM中。

  3. Vue组件通信方式有哪些？

    • 父子：props/$emit；跨级：provide/inject；全局：Vuex/Pinia；事件总线：mitt/EventBus。

  4. Vue生命周期有哪些？

    • beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted。

  5. 什么是Vue的计算属性？和methods有什么区别？

    • 计算属性(computed)有缓存，依赖不变时不会重新计算；methods每次调用都会执行。
    computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

Webpack构建工具篇

  1. Webpack的核心概念有哪些？

    • Entry(入口)、Output(输出)、Loader(处理非JS文件)、Plugin(扩展功能)、Mode(开发/生产模式)。

  2. Loader和Plugin有什么区别？

    • Loader是文件加载器，如处理CSS的css-loader；Plugin是扩展插件，如生成HTML的HtmlWebpackPlugin。

  3. 如何优化Webpack打包速度？

    • 使用cache-loader缓存、thread-loader多线程、DllPlugin预编译、合理配置exclude缩小loader处理范围。

  4. 什么是Tree Shaking？如何实现？

    • 删除未引用代码(dead code)。ES6模块化(import/export) + production模式 + 配置usedExports。
    optimization: {
  usedExports: true
}

  5. Webpack的热更新(HMR)原理是什么？

    • 通过websocket连接开发服务器，文件修改后服务器推送更新消息，客户端替换修改的模块而不刷新页面。

浏览器与网络篇

  1. 从输入URL到页面显示发生了什么？

    • DNS解析 → TCP连接 → HTTP请求 → 服务器响应 → 浏览器解析渲染 → 连接结束。

  2. 什么是跨域？如何解决跨域？

    • 浏览器同源策略限制。解决方案：JSONP、CORS、Nginx反向代理、WebSocket、postMessage。

  3. HTTP缓存有哪些策略？

    • 强缓存(Expires/Cache-Control)和协商缓存(Last-Modified/ETag)。Cache-Control优先级更高。

  4. GET和POST请求有什么区别？

    • GET参数在URL中，有长度限制，可缓存；POST参数在请求体，更安全，不可缓存。

  5. HTTP和HTTPS有什么区别？

    • HTTPS=HTTP+SSL/TLS加密，更安全但性能稍低。HTTPS默认端口443，HTTP是80。

性能优化篇

  1. 前端性能优化有哪些常见手段？

    • 减少HTTP请求(合并文件)、使用CDN、懒加载、代码压缩、使用缓存、减少重排重绘、SSR等。

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

    • 防抖(debounce)：连续触发只执行最后一次；节流(throttle)：固定时间间隔执行一次。
    // 防抖
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  }
}

  3. 如何减少页面重排(Reflow)和重绘(Repaint)？

    • 避免频繁操作样式，使用transform代替top/left，使用visibility代替display:none，批量修改DOM。

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

    • 延迟加载非首屏内容。监听滚动事件，当图片进入视口时再加载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>

  5. Web Workers是什么？有什么作用？

    • 在后台线程运行JS脚本，不阻塞主线程。适合计算密集型任务，但不能直接操作DOM。

安全与异常处理篇

  1. 什么是XSS攻击？如何防范？

    • 跨站脚本攻击，注入恶意脚本。防范：输入输出转义(如<转成&lt;)、CSP内容安全策略、HttpOnly cookie。

  2. 什么是CSRF攻击？如何防范？

    • 跨站请求伪造，诱使用户在已登录状态下执行非预期操作。防范：验证Referer、添加token、SameSite cookie属性。

  3. 前端常见的错误监控方式有哪些？

    • try-catch、window.onerror、Promise.catch、Vue/React错误边界、Sentry等第三方监控。

  4. 如何处理前端兼容性问题？

    • 特性检测(如Modernizr)、polyfill填充、autoprefixer自动加CSS前缀、Babel转译ES6+语法。

  5. 如何实现前端埋点监控？

    • 手动埋点(关键节点手动上报)、无痕埋点(全量采集)、可视化埋点(通过界面配置)。常用方案：Google Analytics、自建日志系统。

项目实战篇

  1. 如何组织大型前端项目的目录结构？

    • 按功能模块划分：/src/components公共组件、/src/views页面、/src/api接口、/src/store状态管理、/src/utils工具函数。

  2. 如何进行前端代码规范？

    • ESLint代码检查、Prettier格式化、Husky+lint-staged提交前检查、制定团队编码规范文档。

  3. 如何实现权限控制系统？

    • 路由权限(动态路由)、菜单权限(后端返回)、按钮权限(v-permission指令)、接口权限(JWT校验)。

  4. 如何优化首屏加载速度？

    • 代码分割、预加载关键资源、SSR服务端渲染、骨架屏、CDN加速、Gzip压缩、图片优化。

  5. 如何实现国际化(i18n)？

    • 使用vue-i18n或react-i18next等库，准备多语言JSON文件，通过切换语言环境变量实现。

面试题必看

【初级】前端开发工程师面试100题（一）
【初级】前端开发工程师面试100题（二）
【初级】前端开发工程师的面试100题（速记版）

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布