全网最全前端必问面试题（持续更新中）

夏夜星光.

已于 2023-07-28 11:22:20 修改

阅读量1.1k

点赞数 2

分类专栏：前端面试题文章标签：前端

于 2023-07-23 14:34:50 首次发布

本文链接：https://blog.csdn.net/m0_63760882/article/details/131874320

版权

本文汇总了前端开发面试中的常见问题，包括HTML新标签、Vuex的理解、单页面与多页面应用的对比、Vue.js的路由、Vuex模块、Vue组件生命周期、CSS定位方式、Vue双向数据绑定原理、JS作用域链、脚本的defer属性、XSS与CSRF攻击、HTML5/CSS3的新特性、CSS盒子模型转换、CSS定位、Vue Router的路由守卫、Vue的v-if与v-show区别、BOM与DOM的区别、ES6的新特性、跨域解决方案、Vue项目中数据更新问题、改变this的指向方法、事件监听器的添加方法、移动端项目适配策略、JavaScript原型链、闭包内存泄漏解决方案、JavaScript中var/let/const的区别、const定义对象的修改、Set与Map的区别、Vue的created钩子与DOM操作、computed与watch的区别、Vue中v-model和.sync的差异、Vue事件修饰符、前端优化策略、JavaScript事件循环机制、Vue的v-for指令中的key作用、GET与POST请求的区别以及Vue路由参数传递等。

摘要由CSDN通过智能技术生成

全网最全前端必问面试题

1、html新增了哪些标签？

1. <header> : 定义文档或节的页眉。
2. <nav> : 定义文档的导航链接部分。
3. <section> : 定义文档中的节或区域。
4. <article> : 定义独立的自包含文章内容。
5. <aside> : 定义页面内容之外的内容，如侧边栏或广告。
6. <footer> : 定义文档或节的页脚。
7. <main> : 定义文档的主要内容。
8. <figure> : 定义自包含的媒体内容，如图像、图表或视频。
9. <figcaption> : 定义 <figure> 元素的标题。
10. <video> : 定义视频。
11. <audio> : 定义音频。
12. <canvas> : 定义用于绘制图形的画布。
13. <datalist> : 定义输入字段的选项列表。
14. <progress> : 定义任务的进度条。
15. <meter> : 定义度量衡的标量值。
16. <time> : 定义日期或时间。
17. <mark> : 定义突出显示的文本。
18. <details> : 定义用户可查看或隐藏的附加细节。
19. <summary> : 定义 <details> 元素的摘要或标题。

这只是HTML5中新增的一些标签，还有其他更多的标签可以用于不同的目的。

2、怎么理解vuex

在Vue.js中，Vuex是一种用于管理应用程序状态的官方状态管理模式。它允许您在应用程序的不同组件之间共享和访问数据，以及在整个应用程序中进行状态的一致性管理。
以下是对Vuex的一些理解：

集中式存储：Vuex将应用程序的状态存储在一个单一的地方，称为"store"。这个store类似于一个全局对象，可以在应用程序的任何组件中访问。
状态管理：Vuex提供了一种管理状态的方式，以确保状态的一致性。通过定义状态和在store中进行修改，您可以追踪应用程序状态的变化，并在需要时进行响应。
状态的响应式更新：当在组件中修改store中的状态时，所有依赖于该状态的组件都会自动更新，确保应用程序中的所有组件保持同步。
模块化：Vuex允许您将store分割成模块，每个模块可以有自己的状态、操作、获取器和提交方式。这样可以更好地组织和管理大型应用程序的状态。
方便的数据获取和修改：通过使用Vuex的getters和mutations，您可以方便地获取和修改store中的状态，而不需要在组件之间传递数据或使用事件总线。

3、单页面vs多页面的理解

单页面应用（Single Page Application，SPA）和多页面应用（Multiple Page Application，MPA）是两种不同的前端应用架构方式。

单页面应用（SPA）：

SPA是一种基于JavaScript的应用程序，通过动态地更新当前页面的部分内容，而不是每次加载整个页面来实现页面切换和交互。
SPA通常使用前端框架（如Vue.js、React等）来实现，通过路由机制来管理不同的页面状态。
SPA的优点包括更流畅的用户体验、更快的页面切换速度、减少服务器负载、更方便的开发和维护。
缺点包括初始加载时间较长、对SEO不友好（需要额外处理）、较大的JavaScript包大小。

多页面应用（MPA）：

MPA是一种传统的Web应用程序架构，每个页面都是一个独立的HTML文件，每次页面切换都需要重新加载整个页面。
MPA通常使用服务器端渲染（SSR）或模板引擎来生成不同的页面。
MPA的优点包括更好的SEO支持、更快的初始加载时间、更小的JavaScript包大小。
缺点包括页面切换速度较慢、用户体验相对较差、开发和维护相对复杂。

选择SPA还是MPA取决于具体的应用需求。如果您需要更流畅的用户体验、更快的页面切换速度和更方便的开发体验，可以选择SPA。如果您需要更好的SEO支持、更快的初始加载时间和更小的JavaScript包大小，可以选择MPA。

4、vue-loader是什么

vue-loader是一个Webpack加载器（loader），用于将Vue单文件组件（.vue文件）转换为JavaScript模块。

Vue单文件组件是一种将组件的模板、样式和逻辑封装在一个文件中的方式。它包含三个部分：

模板（template）：用于定义组件的结构和布局，使用Vue的模板语法编写。
样式（style）：用于定义组件的样式，可以使用CSS、Sass、Less等预处理器编写。
逻辑（script）：用于定义组件的行为和数据，使用JavaScript编写。

使用vue-loader，可以将这些部分合并为一个JavaScript模块，以便在应用程序中进行加载和使用。

vue-loader还提供了许多其他功能，例如：

支持预处理器：可以使用Sass、Less等预处理器编写样式。
支持CSS模块化：可以将样式文件作为模块导入，并在组件中使用模块化的类名。
支持热重载：在开发过程中，可以实时预览和调试组件的修改，无需刷新页面。
支持自定义块：可以在单文件组件中定义自定义块，用于编写其他类型的代码（如模板引擎、Markdown等）。

总之，vue-loader是一个用于将Vue单文件组件转换为JavaScript模块的Webpack加载器，提供了许多功能和扩展，使得开发Vue应用程序更加方便和高效。

5、router和route有什么区别

Router（路由器）：路由器是一种网络设备，用于在计算机网络中转发数据包。它连接多个网络，并根据目标地址来确定数据包的最佳路径，以便将其从源网络发送到目标网络。路由器通常用于在互联网中转发数据。
Route（路由）：路由是指在网络中定义的路径，用于将数据包从源地址发送到目标地址。路由是由网络管理员配置的，它指定了数据包在网络中的传输路径。路由可以基于不同的因素进行选择，例如最短路径、最快路径或特定的网络策略。

6、vue中的路由模式有哪些

Hash 模式：默认模式，URL 中会有一个 # 符号，例如 http://example.com/#/route 。在这种模式下，路由的改变不会触发浏览器的页面刷新，而是通过监听 URL 中的 hash 变化来进行路由切换。
History 模式：通过使用 HTML5 的 History API，URL 中不再有 # 符号，例如 http://example.com/route 。在这种模式下，路由的改变会修改浏览器的历史记录，并触发浏览器的页面刷新。

7、vue2.x和3.x的diff算法有什么区别

Vue.js 3.x 的 diff 算法相对于 2.x 更加高效，通过静态标记和其他优化措施，可以减少不必要的操作和提升性能。这使得 Vue.js 3.x 在性能方面有了显著的改进。

8、js中的== 和 === 有什么区别

== 操作符进行相等比较时，会进行类型转换。它会尝试将两个操作数转换为相同类型，然后再进行比较。
=== 操作符进行严格相等比较时，不会进行类型转换。它会首先比较两个操作数的类型，如果类型不同，则直接返回 false 。只有当类型相同且值相等时，才会返回 true 。

9、iframe的优缺点是什么

优点：

分离内容：iframe 可以将页面内容分割成独立的区块，每个区块可以有自己的独立的 HTML、CSS 和 JavaScript。这样可以实现模块化开发和维护，方便团队协作。
安全性：iframe 可以提供一定的安全性，因为它可以将外部内容隔离在一个独立的环境中。这可以防止外部内容对主页面的恶意攻击，例如跨站脚本攻击（XSS）。
并行加载：使用 iframe 可以实现页面的并行加载，