2022前端面试攻略需要掌握的知识点

dearweb 发布：2022-02-25 09:02:35阅读：

转眼间2022已过了2月，接下来的金三银四你准备好了吗？说起前端面试，自然少不了面试题，下面就给大家分享一下小编认为需要掌握的一些题目，希望可以帮助到各位。

面试题一览

谈一谈 css 盒模型

多种方式实现上面 100px 下面自适应的布局

display 都有哪些属性

块元素和行内元素、行内块元素的区别

js 原型和原型链

Person.prototype.constructor 是什么

函数有没有 __ proto __ 属性

谈一谈 js 数据类型

如何判断数据类型的多种方式，有什么区别，适用场景

Promise 如何一次进行多个异步请求

Promise.all 的返回机制是什么

如果想要其中一个请求出错了但是不返回结果怎么办

webpack 打包优化知道多少

长列表优化，一万条数据不用分页和懒加载，如何提升性能

数据请求从发起到接收数据之间发生了什么

前端安全了解吗

csrf 和 xss 是什么，如何避免

前端怎样对用户的数据进行加密传输

基于 md5 提升安全性

谈一谈 css 盒模型

CSS盒子模型与margin负值

多种方式实现上面 100px 下面自适应的布局

flex 布局

gird 布局

margin-top + calc

定位 + calc

display 都有哪些属性

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。

table 此元素会作为块级表格来显示，表格前后带有换行符。

inherit 规定应该从父元素继承 display 属性的值。

flex 弹性盒模型。

grid 网格布局。

块元素和行内元素、行内块元素的区别

块级元素

（1）常见的块元素有哪些？

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。

（2）块级元素有什么特点？

自己独占一行

高度，宽度、外边距以及内边距都可以控制。

宽度默认是容器（父级宽度）的 100%

是一个容器及盒子，里面可以放行内或者块级元素

（3）注意问题：

只有文字才能组成段落，因此 p 标签里面不能放块级元素，特别是 p 标签不能放 div。同理还有这些标签h1,h2,h3,h4,h5,h6,dt ，他们都是文字类块级标签，里面不能放其他块级元素。

行内元素

（1）常见行内元素有哪些？

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等，其中 <span> 标签最典型的行内元素，也称内联元素。

（2）行内元素有哪些特点？

相邻行内元素在一行上，一行可以显示多个

高、宽直接设置是无效的

只可以设置水平方向的内外边距

默认宽度就是它本身内容的宽度

行内元素只能容纳文本或则其他行内元素

（3）注意问题：

链接里面不能再放链接。

特殊情况 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

行内块元素

（1）常见行内块儿元素有哪些？

在行内元素中有几个特殊的标签 <img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

（2）行内块元素有什么特点？

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个。

默认宽度就是它本身内容的宽度。

高度，行高、外边距以及内边距都可以控制。

块级元素、行内元素和行内块元素的区别

元素模式元素排列设置样式默认宽度包含

块级元素一行只能放一个块级元素可以设置宽度高度容器的100% 容器级可以包含任何标签

行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或则其他行内元素

行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度

块级元素、行内元素和行内块元素互转

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块：display: inline-block;

js 原型和原型链

Person.prototype.constructor 是什么
Person.prototype.constructor === Person // true

函数有没有 __ proto __ 属性

let fn = function() {}
// 函数（包括原生构造函数）的原型对象为Function.prototype
fn.__proto__ === Function.prototype // true

函数都是由 Function 原生构造函数创建的，所以函数的 __proto__ 属性指向 Function 的 prototype 属性。

js 数据类型

JavaScript数据类型相关的六个面试题

如何判断数据类型的多种方式，有什么区别，适用场景

谈一谈JavaScript数据类型判断

Promise 如何一次进行多个异步请求

答：利用 Promise.all 。

Promise.all 的返回机制是什么

除了 Promise.all ，还有其他几个原型方法也要知道。

看了就会，手写Promise原理，最通俗易懂的版本！！！

如果想要其中一个请求出错了但是不返回结果怎么办

答：使用 Promise.allSelect 。

webpack 打包优化知道多少

玩转 webpack，使你的打包速度提升 90%

长列表优化，一万条数据不用分页和懒加载，如何提升性能

后端一次给你10万条数据，如何优雅展示，到底考察我什么?

数据请求从发起到接收数据之间发生了什么

这个我不会，也没有找到什么有效的资料，希望有大佬可以指点一下。

csrf 和 xss 是什么，如何避免

浅说 XSS 和 CSRF

前端怎样对用户的数据进行加密传输

md5，我其实不太了解，只是用 md5 做过登录注册的密码加密，也不会别的了。

基于 md5 提升安全性

答：md5（md5），我开玩笑的，有没有大佬可以指点一下。

B公司

整体总结

B 公司上来就是个咔咔咔一顿问，没有什么逻辑，问完一个就换下一个，像一个没有感情的提问机器，没有问到项目经验相关的问题，刷过面试题的基本都能应对自如，整体来说非常简单，这种基本上就是招 coder，能干活就行，薪资不会开到太高。

let,const,var 有什么区别

遍历数组的 n 种方法

说一下 vue 有哪些优点和特点

什么是虚拟 dom

vue 组件间传值的 n 种方式

vue 有哪些内置指令

v-show 和 v-if 有什么区别

如何让 CSS 只在当前组件中起作用

如何解决 vue 初始化页面闪动问题

什么是 SPA，有什么优点和缺点

vue 首屏渲染优化有哪些

vue 生命周期函数有哪些

第一次页面加载会触发哪几个钩子

在哪个生命周期中发起数据请求

vue-router 有几种模式

hash 和 history 有什么区别

vuex 有哪些属性

git 常用命令了解哪些

搭一个新项目的框架,需要考虑哪些问题

如何做权限认证

如何做 mock 数据

let,const,var 有什么区别

（1）块级作用域： 块作用域由 { }包括，let 和 const 具有块级作用域，var 不存在块级作用域。块级作用域解决了 ES5 中的两个问题：

内层变量可能覆盖外层变量

用来计数的循环变量泄露为全局变量

（2）变量提升： var 存在变量提升，let 和 const 不存在变量提升，即在变量只能在声明之后使用，否在会报错。

（3）给全局添加属性： 浏览器的全局对象是 window，Node 的全局对象是 global。var 声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是 let 和 const 不会。

（4）重复声明： var 声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const 和 let 不允许重复声明变量。

（5）暂时性死区： 在使用 let、const 命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用 var 声明的变量不存在暂时性死区。

（6）初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而 const 声明变量必须设置初始值。

（7）指针指向： let 和 const 都是 ES6 新增的用于创建变量的语法。let 创建的变量是可以更改指针指向（可以重新赋值）。但 const 声明的变量是不允许改变指针的指向。

区别 var let const

是否有块级作用域 × ✔️ ✔️

是否存在变量提升 ✔️ × ×

是否添加全局属性 ✔️ × ×

能否重复声明变量 ✔️ × ×

是否存在暂时性死区 × ✔️ ✔️

是否必须设置初始值 × × ✔️

能否改变指针指向 ✔️ ✔️ ×

遍历数组的 n 种方法

你了解JavaScript常用的的十个高阶函数么?

说一下 vue 有哪些优点和特点

渐进式框架：可以在任何项目中轻易的引入；

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；

简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；

双向数据绑定：在数据操作方面更为简单；

组件化：很大程度上实现了逻辑的封装和重用，在构建单页面应用方面有着独特的优势；

视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

什么是虚拟 dom

Virtual DOM 是 DOM 节点在 JavaScript 中的一种抽象数据结构，之所以需要虚拟 DOM，是因为浏览器中操作 DOM 的代价比较昂贵，频繁操作 DOM 会产生性能问题。

虚拟 DOM 的作用是在每一次响应式数据发生变化引起页面重渲染时，Vue 对比更新前后的虚拟 DOM，匹配找出尽可能少的需要更新的真实 DOM，从而达到提升性能的目的。

虚拟 DOM 的实现原理主要包括以下 3 部分：

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；

diff 算法 — 比较两棵虚拟 DOM 树的差异；

pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

vue 组件间传值的 n 种方式

（1）props / $emit 适用父子组件通信

（2）ref 适用父子组件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

（3）$parent / $children / $root：访问父 / 子实例 / 根实例

（4）EventBus （$emit / $on）适用于父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（5）$attrs/$listeners 适用于隔代组件通信

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

（6）provide / inject 适用于隔代组件通信

祖先组件中通过 provide 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（7）Vuex 适用于父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

（8）插槽

Vue3 可以通过 usesolt 获取插槽数据。

（9）mitt.js 适用于任意组件通信

Vue3` 中移除了 `$on`，`$off`等方法，所以 `EventBus` 不再使用，相应的替换方案就是 `mitt.js

vue 有哪些内置指令

v-show 和 v-if 有什么区别

手段：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素；v-show 是通过设置 DOM 元素的 display 样式属性控制显隐；

编译过程：v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 css 切换；

编译条件：v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show 是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且 DOM 元素保留；

性能消耗：v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；

使用场景：v-if 适合运营条件不大可能改变；v-show 适合频繁切换。

如何让 CSS 只在当前组件中起作用

在组件中的 style 标签中加上 scoped

如何解决 vue 初始化页面闪动问题

使用 vue 开发时，在 vue 初始化之前，由于 div 是不归 vue 管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于 {{message}} 的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

首先：在 css 里加上 [v-cloak] { display: none; } 。如果没有彻底解决问题，则在根元素加上 style="display: none;" :style="{display: block }"

什么是 SPA，有什么优点和缺点

SPA 仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

有利于前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

不利于 SEO：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

vue 首屏渲染优化有哪些

图片压缩/懒加载

禁止生成 .map 文件

路由懒加载

cdn 引入公共库

开启 GZIP 压缩

vue 生命周期函数有哪些

Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好（内部采用数组的方式存储）然后在创建组件实例的过程中会一次执行对应的钩子方法（发布）。

beforeCreate：是 new Vue() 之后触发的第一个钩子，在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问。

created：在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发 updated 函数。可以做一些初始数据的获取，在当前阶段无法与 Dom 进行交互，如果非要想，可以通过 vm.$nextTick 来访问 Dom。

beforeMount：发生在挂载之前，在这之前 template 模板已导入渲染函数编译。而当前阶段虚拟 Dom 已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发 updated。

mounted：在挂载完成后发生，在当前阶段，真实的 Dom 挂载完毕，数据完成双向绑定，可以访问到 Dom 节点，使用 $refs 属性对 Dom 进行操作。

beforeUpdate：发生在更新之前，也就是响应式数据发生更新，虚拟 dom 重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

updated：发生在更新完成之后，当前阶段组件 Dom 已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy：发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed：发生在实例销毁之后，这个时候只剩下了 dom 空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

第一次页面加载会触发哪几个钩子

beforeCreate`，`created`，`beforeMount`，`mounted

在哪个生命周期中发起数据请求

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。

推荐在 created 钩子函数中调用异步请求，有以下优点：

能更快获取到服务端数据，减少页面 loading 时间；

ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

vue-router 有几种模式

vue-router 有 3 种路由模式：hash、history、abstract：

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；

history : 依赖 HTML5 History API 和服务器配置。

abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

hash 和 history 有什么区别

（1）hash 模式的实现原理

早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 #search：

https://www.word.com#search

hash 路由模式的实现主要是基于下面几个特性：

URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；

hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制 hash 的切换；

可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；

我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

（2）history 模式的实现原理

HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：

window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

history 路由模式的实现主要基于存在下面几个特性：

pushState 和 repalceState 两个 API 来操作实现 URL 的变化；

我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；

history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

vuex 有哪些属性

有五种，分别

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

git 常用命令了解哪些

进入查看 git命令大全

搭一个新项目的框架,需要考虑哪些问题

结合代码实践，全面学习前端工程化

如何做权限认证

答：在路由守卫中根据 url 地址结合 token 做权限认证。

如何做 mock 数据

答：可以使用 mock.js

面试题一览3

ajax 是什么?有什么优缺点

同步和异步的区别

如何解决跨域问题

WEB 应用从服务器主动推送 Data 到客户端有哪些方式

经常遇到的浏览器的兼容性问题有哪些?原因是什么?如何解决

有哪些常用的 hack 技巧

前端开发性能优化,你有什么经验

谈谈你对 webpack 的看法

主流的前端框架的优缺点是什么

你最喜欢哪个框架，为什么

如何消除一个数组里面重复的元素

css 如何实现一个幻灯片效果

手写表格

ajax 是什么?有什么优缺点

ajax 是一种创建交互网页应用的一门技术。

优点：

实现局部更新(无刷新状态下)，

减轻了服务器端的压力

缺点：

破坏了浏览器前进和后退机制(因为 ajax 自动更新机制)

ajax 请求多了，也会出现页面加载慢的情况。

搜索引擎的支持程度比较低。

ajax 的安全性问题不太好(可以用数据加密解决)。