Web前端面试通关【2025年常见800+道】-CSDN博客

一、JavaScript面试题

防抖与节流：这两者都是优化函数执行的方法，但它们的工作原理有所不同。防抖函数是在一定时间内，无论触发多少次，都只执行一次；而节流函数则是确保在给定的时间间隔内，函数只执行一次。
判断元素是否在可视区域中：可以通过获取元素的滚动位置和窗口可视区域的大小来判断。如果元素的顶部或底部位于窗口的可视区域内，那么该元素就处于可视状态。
单点登录：这是一种用户认证技术，允许用户使用一套凭据（通常是用户名和密码）登录一次，即可访问多个应用或服务。其实现通常涉及服务器端验证和客户端状态管理。
上拉加载与下拉刷新：这两种功能常用于移动应用和网页中。上拉加载通常用于数据分页或实时更新，而下拉刷新则常用于刷新页面或重新加载数据。
正则表达式：正则表达式是一种强大的文本处理工具，用于匹配、查找和替换文本中的模式。它们在数据验证、文本处理和搜索等方面有着广泛的应用。
函数式编程：函数式编程是一种编程范式，强调将计算作为数学上的函数求值过程。它具有简洁、直观和易于测试等优点，但也存在性能开销和某些任务处理困难等挑战。
web安全攻击与防御：web安全是一个复杂且不断演变的领域。常见的攻击方式包括跨站脚本攻击（XSS）、SQL注入等。防御措施包括输入验证、输出编码等安全措施，以及使用安全框架和库来降低风险。
JavaScript内存泄漏：JavaScript中的内存泄漏通常发生在全局变量未被正确释放或对象引用无法被垃圾回收机制回收时。解决内存泄漏问题需要仔细管理内存和避免不必要的全局变量使用。
JavaScript继承实现：JavaScript中的继承可以通过原型链、Class关键字或ES6中的class语法来实现。这些方法提供了灵活的继承机制，使得代码更易于维护和扩展。
JavaScript数字精度问题与解决方案：由于JavaScript的数字类型是基于IEEE 754标准的浮点数表示，因此存在精度丢失的问题。为了解决这个问题，可以使用BigNumber库或其他第三方库来提供更高精度的数字运算支持。

二、CSS面试题

如何用CSS画一个三角形？其原理是什么？
答：可以使用CSS的border属性来创建一个三角形。原理在于，通过设置上边框和左右边框，然后让下边框透明，从而形成一个三角形的形状。
如何使用CSS实现视差滚动效果？
答：视差滚动效果可以通过CSS的transform和position属性来实现。通过设置不同的滚动速度和层级关系，可以创造出视差滚动的视觉效果。
CSS3新增了哪些新特性？
答：CSS3新增了许多新特性，如圆角、阴影、渐变、变形、动画等，这些特性使得网页设计更加灵活多样。
CSS3动画有哪些类型？
答：CSS3动画主要包括过渡动画和关键帧动画两种类型。过渡动画通过改变元素的某个属性值来产生动画效果，而关键帧动画则定义了动画过程中的关键帧和过渡帧。
介绍一下Grid网格布局。
答：Grid网格布局是CSS3引入的一种新的布局方式，它提供了更加灵活和强大的布局能力。通过定义网格线和网格区域，可以轻松地创建复杂的布局结构。
说说Flexbox弹性盒布局模型及其适用场景。
答：Flexbox弹性盒布局模型是一种一维的布局方式，主要用于处理容器中项目的对齐和分布。它适用于各种场景，特别是需要在一维空间内进行灵活布局的情况。
谈谈设备像素、CSS像素、设备独立像素、DPR、PPI之间的区别。
答：这些概念都与屏幕分辨率和显示效果相关。设备像素是物理屏幕上的实际像素点，CSS像素是用于网页设计的逻辑像素单位，设备独立像素是一种抽象的像素单位，用于在不同设备上实现一致的显示效果。DPR（设备像素比）和PPI（每英寸像素数）则用于衡量设备的显示密度和清晰度。
说说em/px/rem/vh/vw这些CSS单位的区别。
答：这些单位都是CSS中用于定义尺寸和位置的单位，但它们有不同的特点和适用场景。em单位基于当前元素的字体尺寸，px单位是固定的像素尺寸，rem单位基于根元素的字体尺寸，而vh和vw单位则分别基于视口的高度和宽度进行百分比计算。
如何让Chrome支持小于12px的文字？有哪些区别？
答：可以通过使用CSS的-webkit-text-size-adjust属性来让Chrome支持小于12px的文字。但是，需要注意的是，这种方法可能会受到用户设备或浏览器设置的影响，因此在实际应用中需要谨慎使用。此外，还可以考虑使用其他方法来实现更精细的文字控制，如使用SVG或Canvas等技术。
怎么理解回流与重绘？它们在什么场景下会触发？
答：回流与重绘是浏览器渲染页面的两个重要概念。回流是指页面元素尺寸或布局发生变化时，浏览器需要重新计算页面元素的位置和尺寸的过程；而重绘则是指页面元素的颜色或样式发生变化时，浏览器需要重新绘制元素的过程。这两种操作都会对性能产生影响，因此在优化网页性能时需要尽量避免不必要的回流和重绘操作。常见的触发场景包括DOM操作、样式修改以及窗口尺寸变化等。

三、ES6面试题

谈谈var、let、const之间的区别。
答：在ES6中，var、let和const是用于声明变量的关键字，但它们之间存在一些关键差异。var声明的变量具有函数作用域，且存在变量提升现象；而let和const声明的变量则具有块级作用域，并且不会发生变量提升。此外，let和const还具有不可重复声明的特性，而var则可以多次声明同一个变量。
ES6中数组新增了哪些扩展？
答：ES6为数组对象新增了诸多扩展，包括数组推导式、扩展运算符（…）、find和findIndex方法、includes方法等。这些扩展使得数组操作更加灵活和高效。
函数新增了哪些扩展？
答：ES6为函数对象也带来了一些新特性，如默认参数、箭头函数、函数参数的解构赋值、剩余参数等。这些扩展让函数定义和使用更加简洁和强大。
对象新增了哪些扩展？
答：在ES6中，对象也获得了一些新特性，如属性名表达式、属性简洁表示法、Object.assign方法等。这些扩展使得对象操作更加便捷和高效。
你如何理解ES6中的Promise？使用场景有哪些？
答：Promise是ES6中引入的一种用于处理异步操作的新机制。它代表了一个异步操作的最终完成（或失败）及其结果值。Promise的优点在于它可以避免回调地狱，并提供链式调用的方式来组织异步代码。常见的使用场景包括网络请求、定时器操作等需要处理异步结果的场合。
你如何理解ES6中的Module？使用场景有哪些？
答：ES6中的Module是一种新的模块化解决方案，它提供了更强大的模块导入和导出功能。通过Module，我们可以将代码分割成独立的模块，并在需要时进行导入和使用，从而提高代码的可维护性和复用性。使用场景广泛，如开发大型应用、库或框架时，都可以利用Module来进行模块化管理。
你如何理解ES6中的Generator？使用场景有哪些？
答：Generator是ES6中引入的一种可暂停和恢复的函数类型。它允许我们在函数执行过程中保存当前状态，并在未来某个时刻恢复执行。Generator常用于异步操作、长任务处理等需要暂停和恢复执行的场合，提供了一种更加灵活和高效的处理方式。
你如何理解ES6中的Decorator？使用场景有哪些？
答：Decorator是ES6中的一项实验性特性，它允许我们为类或对象添加额外的功能或修改其行为。通过Decorator，我们可以更灵活地增强或修改对象的属性、方法等特性。使用场景包括对类或对象的增强、拦截调用等需要修改对象行为的场合。虽然目前Decorator还未成为标准特性，但已经得到了广泛关注和讨论。
你如何理解ES6新增的Set和Map数据结构？它们与普通对象有何不同？
答：ES6中新增的Set和Map数据结构提供了更加灵活和高效的集合操作方式。Set是一种只包含唯一值的数据结构，而Map则是一种键值对的数据结构。与普通对象相比，Set和Map提供了更多的操作方法和更好的性能优化。例如，Set提供了自动去重功能，而Map则提供了键值对的精确查找和操作方式。这些特性使得Set和Map在处理集合数据时更加便捷和高效。
你如何理解ES6中的Proxy？使用场景有哪些？
答：Proxy是ES6中引入的一种用于定义对象行为的机制。通过Proxy，我们可以拦截并定义对象的各种操作行为，如属性访问、赋值、删除等。这使得我们可以在不修改原对象的基础上对其行为进行灵活控制和扩展。使用场景包括对对象行为的监控、修改或增强等需要自定义对象操作的场合。

四、Vue2面试题

谈谈你对slot的理解，以及它在Vue中的使用场景。
答：slot是Vue中用于内容分发的机制，它允许开发者在子组件中预留插槽，以便父组件能够向其插入自定义内容。slot的使用场景广泛，例如在组件库或自定义组件中，我们可以利用slot来实现灵活的内容替换和扩展。
什么是虚拟DOM，以及如何实现一个虚拟DOM？请分享你的思路。
答：虚拟DOM是Vue等前端框架中用于高效更新DOM的技术。它通过创建一个轻量级的JavaScript对象来模拟真实的DOM结构，并在需要时将其与真实的DOM进行同步。实现虚拟DOM的思路主要包括创建、更新和补丁三个阶段，通过比较虚拟DOM和真实DOM的差异，找出需要更新的部分，从而提高渲染效率。
在Vue项目中，是否曾封装过axios？如果有，主要封装了哪些方面？
答：在Vue项目中，为了统一管理HTTP请求，我们通常会封装axios。封装的方面主要包括配置默认请求头、拦截请求和响应、以及处理错误等。通过封装axios，我们可以更方便地在Vue项目中发送HTTP请求，并统一处理相关逻辑。
你是如何处理Vue项目中的错误的？请分享你的方法和经验。
答：处理Vue项目中的错误时，我通常会采用全局错误捕获的方法。通过监听未处理的错误事件，我们可以捕获到项目中的异常情况，并进行相应的处理。同时，我们还可以利用Vue的调试工具来帮助我们定位和解决问题。
你了解axios的原理吗？是否有阅读过它的源码？
答：是的，我了解axios的原理。axios基于Promise设计，支持浏览器和Node.js环境中的HTTP请求。它通过拦截请求和响应、转换数据、以及处理错误等机制，提供了简洁且强大的HTTP客户端功能。虽然我尚未阅读过axios的源码，但对其工作原理和关键代码实现有大致的了解。
如果要在Vue中实现权限管理，你会如何进行操作？请分享你的方法和建议。
答：在Vue中实现权限管理时，我会采用基于角色的访问控制策略。通过定义角色和权限的映射关系，我们可以实现对不同用户的访问控制。具体而言，我会在Vue项目的后端API中实现权限验证逻辑，并根据用户的角色信息来决定其是否能够访问特定的资源或执行特定的操作。同时，我还会利用Vue的路由守卫功能来进一步确保用户的访问权限。
请谈谈你对keep-alive的理解是什么？它在Vue中的应用场景有哪些？
答：keep-alive是Vue中的一个内置组件，它用于缓存不活动的组件实例，从而避免重新渲染和销毁/重建组件带来的性能损耗。keep-alive的应用场景广泛，例如在列表渲染或Tab切换等需要频繁切换组件的场景中，我们可以利用它来提高性能和用户体验。通过将需要缓存的组件包裹在keep-alive标签中，我们可以确保这些组件的状态得以保持，从而避免不必要的渲染和计算。
你对SPA单页面的理解是什么？它有哪些优缺点？如何实现一个SPA应用呢？
答：SPA单页面是指整个应用只有一个页面，所有页面内容的加载和切换都通过异步方式实现。这种方式的优点在于用户体验流畅、无需刷新页面即可实现页面内容的切换；缺点则包括首屏加载较慢、对SEO不友好等问题。要实现一个SPA应用，我们可以采用各种前端框架如React、Angular或Vue等来构建单页面应用的结构和逻辑；同时还需要后端提供相应的数据接口和路由管理来实现页面的异步加载和切换功能。
SPA应用的首屏加载速度慢该如何解决？请分享你的方法和建议。
答：针对SPA应用的首屏加载速度慢的问题，我们可以采取多种措施进行优化。首先可以通过优化网络请求、减少数据量等方式来降低加载时间；其次可以利用浏览器缓存机制来缓存常用资源；另外还可以通过使用代码分割、懒加载等技术来按需加载页面内容；最后还可以考虑使用服务端渲染等技术来进一步提升首屏加载速度。
Vue项目在本地开发完成后部署到服务器却出现404错误的原因是什么？该如何解决？
答：Vue项目在本地开发完成后部署到服务器却出现404错误的原因可能有多种：如服务器配置问题导致路由无法正确匹配、文件路径错误或缺失等。为了解决这个问题我们需要仔细检查服务器配置、文件路径以及路由设置等方面的情况；同时还需要确保所有必要的文件都已经正确上传到服务器上并放置在正确的位置上。通过逐一排查这些可能的原因并采取相应的措施进行修复我们可以解决404错误的问题从而确保Vue项目的顺利部署和运行。
你了解SSR（服务器端渲染）吗？它解决了什么问题