前端面试题总结

面试

自我介绍

url 转化格式

比如 https:abc.com?a=1&b=2​ 转化为

{ host:'xxx', query:{a:1,b:2} },

使用 JS 将 URL 转化为所需格式的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function parseURL(url) {
const parsedURL = new URL(url);
const host = parsedURL.host;
const searchParams = parsedURL.searchParams;
const query = {};
for (const [key, value] of searchParams) {
query[key] = value;
}
return { host, query };
}

const url = "https://abc.com?a=1&b=2";
const parsedURL = parseURL(url);
console.log(parsedURL); // {host: "abc.com", query: {a: "1", b: "2"}}

现在您可以使用 parseURL​ 函数将任何 URL 转换为所需的格式。


<pre>​​ 标签作用

在 HTML 中,<pre> ​ 标记的作用是定义预格式化文本。<pre> ​ 标签内的文本会保留所有空白字符和换行符,而不会将它们转换为 HTML 中的空格和换行符。

<pre>​ 标签通常用于展示代码示例或其他需要保留空格和格式的文本。预格式化文本可以使代码示例更易于阅读和复制。

示例代码:

1
2
3
4
5
6
7
<pre>
function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Alice");
</pre>

这段代码使用 <pre>​ 标记,将空格和换行符正常地显示在页面上,从而生成以下展示效果:

1
2
3
4
5
function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Alice");

生成随机字符串

Math.random().toString(36).slice(2)

这行代码实际上是生成一个随机的字符串,具体过程如下:

  1. Math.random() 会生成一个 0 到 1 之间的随机小数。

  2. toString(36) 将该随机小数转化为 36 进制数字表示。即将小数点后所有位依次乘以 36 的不同正整数幂(个位对应 36^0, 十位对应 36^1, 百位对应 36^2…),得到的结果倒序排列再连接起来就是 36 进制表示的数字了。其中数字 0-9 对应原样输出,10-35 则用 a-z 字母代替。

  3. slice(2) 是从 36 进制表示的字符串的第二位开始截取,目的是去除掉这个字符串开头的"0."

因此,在执行完该行代码后,返回的结果将是:

1
一个由10位以下的小写英文字母和阿拉伯数字随意组合而成的随机字符串。

说一下 http 的请求方法

GET:获取资源,只请求获取资源,不修改资源。
POST:向服务器提交数据,通常会导致资源的修改或者创建。
PUT:上传文件或数据,会导致资源被创建或修改,与 POST 类似。
DELETE:删除资源。
HEAD: 获取报文首部信息,用于获取报文首部元信息,而不获取响应体内容。
OPTIONS:用于查询支持的请求方法,比如查询该 URL 支持 GET、POST 哪些方法。
CONNECT:把请求转化为对所请求资源的双向隧道,主要用于代理服务器的连接。
TRACE:追踪路径,用于测试或诊断。

get 和 post 区别

GET 和 POST 都是 HTTP 协议常用的两种请求方法,它们的区别如下:

  • 获取资源的方式不同:
    GET 通过 URL 参数传递,数据放在 URL 中,对数据量有限制。
    POST 通过请求体传递,数据放在请求体中,对数据量无限制。

  • 安全性不同:
    GET 请求参数可被缓存,会保留在浏览器历史记录中。
    POST 请求对参数编码,不会被缓存,更安全

  • 对服务器端的影响不同:
    GET 对服务器端是只读的,不会修改服务器端资源。
    POST 可能会修改服务器端资源,如添加、更新、删除等操作。

  • 可见性不同:
    GET 请求参数可在 URL 中看到。
    POST 请求参数不可见。

  • 幂等性不同:
    GET 请求多次执行的效果和执行一次相同,所以是幂等的。
    POST 请求多次执行的效果和执行一次不同,所以不是幂等的。总之,GET 更适合用于获取资源,POST 更适合用于修改服务器端资源。选择合适的请求方法很重要。

transition 有哪些属性

CSS transition 主要包含以下几个属性:

  1. transition-property:指定应用过渡效果的 CSS 属性名,默认值为 all,表示所有属性都应用过渡效果。

  2. transition-duration:指定过渡效果的持续时间,如 0.5s。

  3. transition-timing-function:指定过渡函数,定义过渡效果的速度曲线,如 linear、ease、ease-in 等。

  4. transition-delay:定义过渡效果开始前的延迟间隔,如 0.5s。

  5. transition:作为简写属性,包含上面四个属性,不需要以特定顺序书写属性值。

讲一下 transform 的属性及应用

CSS 中的 transform 属性用于对元素进行旋转、缩放、移动或倾斜 transform 的主要属性包括:

  1. transform-origin: transform 的基点位置。

  2. transform-function:具体的 transform 函数,如:

  • rotate():旋转

  • scale():缩放

  • translate():位移

  • skew():倾斜

  1. transform-style:transform 子元素的布局方式。

css 响应式布局哪些单位

响应式布局主要利用 CSS3 中的一些新单位来实现元素的尺寸与页面大小适配。常见的 CSS 响应式布局单位包括:

  1. vw:视窗宽度的 1/100,元素尺寸随视窗宽度改变。

  2. vh:视窗高度的 1/100,元素尺寸随视窗高度改变。

  3. rem:相对于根元素字体大小的单位。

  4. em:相对于父元素字体大小的单位。

  5. %:百分比单位,相对于父元素的百分比尺寸。

  6. flex:Flexible Box 布局,用来适应不同屏幕。

  7. media query:@media 规则,根据不同媒体查询适配样式。

响应式布局的实现方法:

  1. 弹性图片:max-width: 100% 使图片宽度随容器变化。

  2. 弹性布局:用 flex、grid、max-width、media query 等。

  3. 弹性文本:使用 em、rem、vw、vh 等单位。

利用这些 CSS 单位和方法可以非常灵活地实现元素的响应式尺寸,适配各种设备的视窗大小,构建出优秀的响应式网站。

部署的流程 怎么解决跨域的

手动部署: 打包后放到 nginx 服务器文件夹内

自动化部署: 使用 vercel 等自动化部署平台

跨域解决方法:

  1. 代理

  2. cors

  3. jsonp

防抖和节流 应用及口述伪代码

防抖(debounce)和节流(throttle)都是对事件触发频率的控制技术,常用于优化高频率执行的函数。

防抖:指触发事件后在一定时间内没有再触发事件,则执行函数。

应用场景:搜索输入提示、窗口调整大小等。

节流:间隔一定时间执行一次函数。

应用场景:滚动加载更多、点击提交等。

防抖适合处理最后一次事件触发的场景;节流适合处理持续触发事件的场景。合理使用可以有效优化页面性能,提升用户体验。

webpack 是怎么用的 从头说一下

Webpack 是一个模块打包器,其基本工作流程は以下几步:

  1. 新建一个项目,初始化包管理配置(npm init)

  2. 安装 Webpack 和必要的加载器及插件(如 webpack webpack-cli style-loader css-loader)

  3. 在项目根目录下新建 webpack.config.js 文件,配置入口文件、输出文件、模块规则等

  4. 项目源码根目录下创建 src 源码目录,编写代码

  5. 在 package.json scripts 中添加 webpack 命令,用于打包(如 “build”: “webpack”)

  6. 根目录下运行 webpack 命令进行打包,会生成 dist 目录及打包后的文件

  7. 在 src/index.html 中通过 script 标签引入打包生成的 js 文件

  8. 运行 index.html 查看效果

  9. 可以继续完善配置:添加 HTML、CSS 等加载器,提取 CSS 文件,添加 devServer 等

  10. 通过 npm run build 进行生产环境打包

讲一下 jwt

JWT(JSON Web Token)是一种可用于用户认证的标准方式,主要由三部分组成:

头部(Header):包含加密算法信息

负载(Payload):存放有效信息的地方

签名(Signature):对头部和负载内容通过加密算法生成

工作流程:

  1. 用户登录,验证成功后服务端生成 JWT 并返回给客户端。

  2. 客户端存储 JWT,并在每次请求时带上该 JWT。

  3. 服务端验证 JWT 签名是否正确,如果正确则用户保持登录状态。

JWT 的优点是在用户跨服务调用时可以传递信息;缺点是占用存储空间,不能在 JWT 中存储大量信息。需要根据具体业务场景选择是否使用 JWT。

var let const 区别

var、let 和 const 都是 JavaScript 用来声明变量的关键字,主要区别为:

  1. 作用域不同

  • var 声明的变量只有全局作用域和函数作用域

  • let 和 const 声明的变量有块级作用域

  1. 变量提升不同

  • var 声明的变量会提升到作用域顶部

  • let 和 const 不会发生变量提升

  1. 暂时性死区

  • let 和 const 声明的变量会有一个暂时性死区

  • 在声明前使用会引起错误

  1. 是否能重复声明

  • var 可以重复声明同一变量

  • let 和 const 不允许在同一作用域重复声明

  1. 是否能重新赋值

  • var 和 let 可以重新赋值

  • const 声明的变量不能被重新赋值

综上,使用 let 和 const 替代 var 可以使代码更安全,所以在 ES6 中应优先使用 let 和 const 来声明变量。

讲一下 xss 和 csrf

XSS 和 CSRF 是 Web 应用中常见的两类安全威胁:

XSS(跨站脚本攻击):

  • 攻击者通过在页面注入恶意代码实现攻击效果。

  • 比如通过注入 JavaScript 代码获取用户数据、劫持会话等。

  • 防御方法有对用户输入进行过滤、输出编码等。

CSRF(跨站请求伪造):

  • 攻击者盗用用户状态,以用户名义发送恶意请求。

  • 比如盗取用户的登录状态,修改用户数据,发布内容等。

  • 防御方法有校验请求来源、添加 token、Referer 校验等。

总结防御 XSS 和 CSRF 的方法:

  1. 输入过滤,过滤特殊字符。

  2. 输出时编码转换,防止作为代码执行。

  3. 避免直接使用用户输入。

  4. 避免直接在 DOM 中插入用户内容。

  5. 同源策略,不被同源限制的场景需谨慎处理。

  6. CSRF Token 同步验证请求来源。

  7. 限制和验证重要操作权限。

  8. HTTPS 加密传输保证完整性。

防范 XSS 和 CSRF 需要既了解其攻击原理,又要熟悉防御方法。

es6 新特性

ES6 添加了许多新的语言特性,主要的有:

  1. let 和 const: 块级作用域变量声明

  2. 箭头函数:简化函数定义语法

  3. 类:实现面向对象编程

  4. 模块:实现模块化编程

  5. Promise:用于异步编程

  6. 模板字符串:简化字符串拼接

  7. 解构赋值:简化提取属性值

  8. 参数默认值:简化参数处理

  9. 延展运算符:替代 apply 方法

  10. 对象属性增强:属性声明简写等

  11. Set/Map:集合与映射数据结构

  12. Proxy/Reflect:元编程功能

  13. 生成器:控制函数执行过程

  14. async/await:简化异步代码

箭头函数的 this 指向,用法

没有自己的 this,指向上下文 context 的 this,用法如果一行且用 ( ) 包裹可以省略 return,如果多行需要写返回值

async await 解决的问题

地狱回调,代码更优雅,yield Generator

详细说说数组 splice 方法

arr.splice(操作元素下标, 删除几个元素[, 要添加的元素...])

html5 新特性

HTML5 新增的主要特性包括:

  1. 新语义化标签:article、footer、header、nav 等,更好描述页面结构。

  2. 多媒体标签:video、audio、canvas 等,用于媒体播放、2D 绘图。

  3. 表单控件:calendar、date、time、email 等,更好支持表单交互。

  4. 新的 API:

  • 地理位置:Geolocation API 获取用户位置。

  • 本地存储:localStorage 和 sessionStorage 存储数据于本地。

  • 网络状态:允许检测用户网络状态变化。

  • Web Worker:支持多线程处理。

  • WebSocket:实现实时通信功能。

  1. CSS3 特性:transition、animation、transform 等,实现复杂效果。

  2. 其他:微数据(microdata)、MathML 数学标记等。

总体来说,HTML5 致力于页面语义、本地存储、设备访问、多线程、2D/3D 图形、增强表单等方面的功能改进与增强,极大地丰富了网页应用的可能性。

WebAssembly

对于 BFC 的理解

对于伪类元素的理解

CSS 中常用的伪元素主要包括:

  1. ::before 和 ::after

用于在元素前后插入生成内容,常用于清除浮动、插入装饰性内容等。

  1. ::first-line 和 ::first-letter

用于设置元素首行或首字母的样式。

  1. ::selection

设置元素被选中的样式。

  1. ::placeholder

设置输入框占位文字的样式。

  1. ::marker

设置列表项标记的样式。

  1. ::backdrop

设置元素背景层的样式。

  1. ::content

用于插入元素生成的内容。

伪元素使用两个冒号表示,可以设置常规元素无法控制的样式效果,十分强大。但要注意浏览器兼容性问题。

常用的主要是::before 和::after 来在元素中插入内容实现各种页面效果。正确掌握可以减少不必要的 HTML 标签。

对于伪类选择器的理解

// :hover :focus :nth-child :not …

对于 dom,bom 操作的理解

如何识别访问设备,比如移动端,ipad 端,pc 等

useragent ua

介绍 websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。其主要特点和使用方式如下:

  • 允许服务器主动向客户端推送数据,更实时。

  • 建立在 TCP 协议之上,和 HTTP 协议不同,更轻量和高效。

  • 可以发送文本或二进制数据,没有同源限制。

  • API 使用简单,主要通过 WebSocket 对象操作。

  • 支持事件监听,如 onopen、onclose、onmessage 等。

使用示例:

  1. 客户端创建 WebSocket 对象,指明服务端地址。

  2. 通过 onopen 事件回调建立连接。

  3. onmessage 事件回调获取服务端数据。

  4. 通过 send() 方法向服务端发送数据。

  5. onclose 事件回调处理关闭连接。

WebSocket 非常适合即时应用、聊天室等对实时数据交互要求高的场景,可以大幅优化传统 HTTP 短轮询的模式。

http1.1,2.0,3.0 区别

HTTP 协议从 1.1 到 3.0 有了很大的进步,主要区别为:

  1. HTTP/1.1

  • 请求管道化,支持持久连接,管道化请求提高效率。

  • 支持断点传输、分块传输编码,提高大文件传输效率。

  • 增加缓存处理,有条件请求及响应等缓存机制。

  1. HTTP/2

  • 采用二进制格式传输数据,更加轻量及高效。

  • 支持多路复用,同一连接并行传输多请求与响应。

  • 支持流优先级及流依赖,优化资源调度。

  • 支持头部压缩,减少协议开销。

  1. HTTP/3

  • 基于 UDP 协议及 QUIC 传输协议,更可靠。

  • 支持 0-RTT 连接,省去握手开销。

  • 支持流优先级及依赖性,智能调度。

  • 支持内建缓存、安全验证等新特性。

总体来说,HTTP 协议不断演进,使传输效率越来越高,减少延迟,从而能搭建越来越高性能的 web 应用。这需要客户端、服务器都支持新的 HTTP 版本来实现优化。

http 和 https 区别

HTTP 和 HTTPS 的主要区别如下:

  1. 连接方式不同。HTTP 是超文本传输协议,信息是明文传输;HTTPS 则是有 SSL 层的 HTTP 安全版协议,信息加密传输。

  2. 端口不同。HTTP 默认端口 80,HTTPS 默认端口 443。

  3. 安全性不同。HTTPS 协议由于加密,防止数据在传输过程中被窃取、篡改,因此更安全。

  4. 信任度不同。HTTPS 使用证书验证服务器身份,更可信。

  5. 速度不同。HTTPS 需要进行加解密运算,会略微增加传输时间。

  6. 搜索引擎优化影响不同。Google 等搜索引擎会给予 HTTPS 更高权重。

  7. 价格不同。HTTPS 证书需要购买,需要证书授权机构验证。

主要区别在于 HTTP 是不安全的,而 HTTPS 是安全的 HTTP 通道。在传输敏感信息时,必须使用 HTTPS 协议来加密数据。但也要考虑成本和速度损失。

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

行内元素和块级元素在网页布局中的主要区别有:

  1. 显示方式不同

  • 行内元素不会独占一行,相邻行内元素会在同一行上继续排列。

  • 块级元素会独占整行,一个块级元素自己本身就会另起一行。

  1. 宽高设置不同

  • 行内元素的宽高由内容决定,不能手动设置宽高。

  • 块级元素可以手动设置元素的宽高。

  1. 内外边距不同

  • 行内元素只能设置左右外边距,不能设置上下外边距。

  • 块级元素都可以设置。

  1. 内容模型不同

  • 行内元素只占据内容空间,不存在内外边距。

  • 块级元素内容、内边距、边框、外边距都参与布局。

  1. 默认样式不同

  • 行内元素几乎没有默认样式,显示为内容本身。

  • 块级元素有默认宽度等样式。

典型的行内元素有 span、a,块级元素有 div、p 等。正确使用两种元素可以构建页面结构。

vue2 里面的生命周期

activited 和 isActivited 生命周期

缓存路由组件 ​ keep-alive

兄弟组件通信方式

v-if 和 v-show

一个是直接移除 dom 元素, 一个改 css 的 display

v-show 适合频繁切换

computed 和 watch

计算属性和监听器

计算属性有缓存

watch 可以异步

watch 和 watchEffect

watchEffect 自动收集依赖

用过哪些内置指令

// 提到 v-html 的 xxs 攻击并详细的举了几个例子,对应 innerHtml,v-text 对应 innerText,v-bind,v-model 语法糖通过 v-bind 绑定 oninput 事件实现,v-once…

v-cloak 了解过吗?

// 纯静态数据的 vue 代码,可以有一个预加载的效果

webpack 用过吗?

// 答用得少,用 vite 多一点

vite 用过哪些插件?

// vite-plugin-compression(压缩成 gzip 格式,配合 nginx) ,unplugin-auto-import 自动导入,unplugin-vue-components 导入 vue 组件

rollup-plugin-visualizer 检查打包文件占用

问部署方式?

// 聊了差不多 5 分钟,讲了讲传统部署 apache 手动上传 dist 文件 + 后端 jar 包指定端口运行,现代化部署自己搭建 jetkins + docker ci/ cd 流水线部署,免费的部署模式 vercel + 微信云托管 docker 动态扩容,和前者差不多,对于学生党比较友好,只需要购买域名并备案,其余不用花钱

问对 docker 了解多少?

// 答了相关的概念,最后询问,了解公司内部可能需要自己写 shell 脚本搭建 jetkins + docker 的 ci/cd 流水线


1、vue 的双向绑定原理是什么?里面的关键点在哪里?

object.defineProperty 和 proxy

2、实现水平垂直居中的方式?

3、常用伪元素有哪一些?

4、移动端如何适配不同屏幕尺寸?

5、本地存储有哪一些?他们三者有什么区别?

6、JS 的数据类型?如何判断 js 的数据类型?

7、说一下 ES6 的新特性有哪些?

8、Let、const、var 三者有什么区别?

9、数组去重有哪些办法?

ES6 新增构造函数 set,利用 set 具有天然去重功能

数组迭代

10、说一下深拷贝和浅拷贝,如何自己实现一个深拷贝?

11、Vue 的生命周期有哪一些?说一下它们每个阶段做什么操作?

12、组件通讯方式有哪一些?

13、Vuex 有几个属性及作用?

14、Vue 的监听属性和计算属性有什么区别?

15、说一下防抖和节流。怎么实现?

16、Vue 的导航守卫有哪一些?

17、你的登录拦截怎么实现的?

18、有用过图表吗?用的多吗?

19、闭包是什么?如何实现?

20、Vue2.0 和 vue3.0 有什么区别?

Vue 2.0 和 Vue 3.0 之间有很多区别:

  1. 性能优化:Vue 3.0 采用 Proxy 实现响应式,速度比 Vue 2.0 中的 Object.defineProperty() 快很多。

  2. 组合式 API:Vue 3.0 推出了 setup() ,可以更灵活地组合组件逻辑。

  3. 新增的生命周期钩子:Vue 3.0 新增了 beforeUnmount、unmounted 等生命周期钩子函数。

  4. fragments :Vue 3.0 支持多根组件。

  5. Teleport:Vue 3.0 可以将组件挂载到父组件 DOM 之外。

  6. 悬念组件和异步组件:更好的代码分割能力。

  7. 移动平台支持:Vue 3.0 支持移动端平台。

  8. Typescript 支持:Vue 3.0 内置了 Typescript 的类型推断支持。

  9. 新的全局 API:Vue 3.0 提供了 createApp() 等全局 API。

  10. 更好的自身类型推断能力。

总体来说,Vue 3.0 在性能、功能、类型支持等方面有很大提升,是一次重要的升级。

21、Vue 常用的指令有哪些?

22、v-If 和 v-show 有什么区别?

23、v-for 为什么要加一个 key?

在 Vue 中使用 v-for 进行列表渲染时,添加 key 有以下重要作用:

  1. 区分不同元素,提高 diff 算法效率

v-for 在更新已渲染过的元素列表时,依赖 key 值识别元素,如果没有 key,会默认使用 index,降低效率。

  1. 触发过渡动画

如果不使用 key,在执行列表过渡动画时,会默认执行就地更新动画,而不是移动动画。

  1. 重用和重排元素

使用 key 可以让 Vue 识别相同元素,复用已有元素而不是重新渲染。

  1. 保持状态和位置

使用 key 可以让 Vue 维持元素当前的状态和位置,避免重新渲染导致的状态丢失。

所以在使用 v-for 时,务必配合 :key ​ 使用,这对渲染优化非常关键。key 要使用唯一且稳定的标识,如 id、索引等。

24、你是如何封装一个组件的?

25、有自己从 0 到 1 搭建过项目吗?

26、有用过 uni-app 吗?

27、你会写后台吗?有搞过服务端渲染吗?

28、说一下你项目中遇到的难点,如何解决?

29、Url 到浏览器的一个过程有哪些步骤?

30、如何实现小程序的 request 封装及拦截?

31、在 vue 的项目应用中,不使用框架,怎么封装?

32、什么是 Js 原型?原型链是什么?

33、组件通讯方式有哪些?

34、用闭包的原理做过哪些?

35、作用域是什么?

36、操作数组的方式有哪些?

37、0.1 + 0.2 等于 0.3 吗?为什么?如何解决?

38、keep-alive 是什么?有哪几个生命周期阶段?

39、判断一个变量是否是数组,有哪些办法?

40、判断一个变量是否是对象,有哪些办法?

41、对象/数组常用方法有哪些?

42、创建一个空数组/空对象有哪些方式?

43、哪些遍历方式会改变原数组?

44、Set 和 Map 各是什么?

45、介绍一下 promise。

46、Promise 通常会解决三种问题(1)链式回调(2)同时发起几个异步请求,谁先有结果就拿谁的(3)发起多个请求,等到所有请求后再做下一步处理这三种方式 promise 是怎么处理的?

47、如何改变一个函数 a 的上下文?

48、Call 和 apply 有什么区别?

49、Evenbus 是什么东西?

50、Vue 中普通的生命周期大概有哪些?

51、父子组件生命周期执行顺序是怎么样的?

52、mixins 有几个生命周期阶段?

53、弹性布局,一行两列,一列固定宽,如何实现?

54、Flex:1 包含哪三种属性

作者

cuicui

发布于

2023-07-27

更新于

2023-07-27

许可协议

评论