整理一下下自己遇到的前端面试题

前端模块化，工程化

前端工程化的主要目标就是解放生产力、提高生产效率。通过制定一系列的规范，借助工具和框架解决前端开发以及前后端协作过程中的痛点和难度问题。 将 系统化，规范化，可度量的方法用于前端的开发，维护 提高开发效率 降低开发难度 提升产品质量 比如说 脚手架 代码格式化 编码效率 代码提交 发布 更少的代码 去实现更优的功能 模块化 组件化 规范化 自动化 开发 组件库 框架 前后端分离脚手假 组件库 Mock 微前端 构建 打包 压缩 代码分割 编译 分包 部署 nginx 静态分离 负载均衡 部署流程 Http 性能 缓存 异步 按需 请求合并 首屏渲染 懒加载 性能测试

npm 三方包调试，

库打包或者迭代后 不适合发布到线上调试 npm link 可以模拟包安装后的状态，在系统中做一个快捷的隐射，可以直接使用哪个. npm link 操作会在项目的 node_modules 目录下创建一个 module1 的超链接（类似 Windows 的快捷方式），链接到 project_npmlink/module1。 npm link 操作会在全局 node_modules 目录下创建一个 module-name 的超链接。 npm 包在本地编辑完成后需要本地调试之后才能发布，那么怎么调试呢？ 在需要调试的 npm 包目录下结构下的控制台输入 npm link 这个命令会把当前包映射到本地的一个全局的 npm 包里面 在引用的目录结构下的控制台输入 npm link 包名称 这个命令会把本地引用的这个 npm 包的路径定位到全局的 npm 包下 全局的 npm 包相当于一个中转站，在编辑区域与引用区域之间中转 解除调试 调试成功之后 通过 npm unlink 包名称 解除映射关系 npm publish 发布

jwt

Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准(RFC 7519)。该 token 被设计为紧凑且安全的，特别适用于分布式站点的单点登录(SSO)场景。JWT 的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该 token 也可直接被用于认证，也可被加密。 第一段我们叫它头部(header)，第二部分被称为载荷(payload)，最后一部分则叫做签证(signature) 声明使用的加密算法（通常使用带有 SHA-256 的 HMAC） 声明类型（JWT） 载荷（payload） 这个部分是用来存储有效信息的地方，包含有三个部分：标准中注册的声明公共的声明私有的声明 这部分是通过加密后的 header 和加密后的 payload 使用.连接成的字符串，再通过 header 中声明的加密方式进行加盐 secret 组合加密，然后就构成了 jwt 的第三部分。 前面也有提到，JWT 的 payload 模块可以携带一些业务逻辑所必要的非敏感信息。因此，前端需要能够解析出 JWT 字符串。

前端跨平台开发

API 接口协议：定义基础接口能力标准； 内置组件协议：定义基础 UI 组件标准； 框架协议：定义生命周期、路由等框架标准； DSL 协议：定义视图和逻辑层的语法标准； 多态实现协议：定义允许用户使用差异化能力标准。

Flex

Flex:1 = grow  shrink  basis，代表的是扩大自适应，缩小自适应，和设置固定空间，

flex-direction:

• row从主轴方向
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

justify-content

• flex-start（默认值）：左对齐（即上面页面展示效果）
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex-wrap

• nowrap（默认值）：不换行。
• wrap：换行。
• wrap-reverse：换行，第一行在下方。 

URL-loader

小于3K的转换为bse64 和页面一起发axaj请求，减少axax请求

HttpS

安全隐患，把http改成https后 收藏夹地址重定向漏洞

解决：固定重定向URL ，检查重定向目标域名，采用白名单机制，限制

HTTPS实现原理

采用混合加密，传输共享秘钥时候非对称加密，传输数据对称加密

客户端发请求，一个随机值+加密算法，

服务器响应请求并返回一个协商好的加密算法，和随机值，和公钥

客户端验证身份后加，使用两个随机值和一个秘钥，加密成回话秘钥，在用公钥加密发给服务器

服务器用私钥解密。得到回话秘钥，确定通信方式

双方通信

SSL

及其继任者传输层安全是为网络通信提供安全及数据完整性的一种安全协议。如今被广泛使用，如网页，电子邮件，互联网传真，即时消息和语音在IP电话（VoIP）。其中网站是通过使用TLS来保护WEB浏览器与服务器之间的通信安全。

 SSL介于应用层和TCP层之间。应用层数据不再直接传递给传输层，而是传递给SSL层，SSL层对从应用层收到的数据进行加密，并增加自己的SSL头。

HTTP

http1:没有状态码，不支持虚拟机，每次都要链接

http1.1:新增状态码，支持虚拟机，建立长链接，头部压缩技术等

http2:多链接，服务器推送，更优的头部压缩技术

http3:UDP协议，没有三次握手挥手，切网不断线，性能好

UDP和TCP区别：

1. 基于连接与无连接
2. TCP要求系统资源较多，UDP较少；
3. UDP程序结构较简单
4. 流模式（TCP）与数据报模式(UDP);
5. TCP保证数据正确性，UDP可能丢包
6. TCP保证数据顺序，UDP不保证

缓存 Cache-Control

强制缓存 pulish 全部缓存 privide 缓存客户端 No-stroe 不缓存 no-catch 协商缓存

Max-age 强缓存多久失效

协商缓存

If-Modified-Since 请求时间

Etag / If-None-Match 唯一表示

强缓存优先级高级协商缓存

样式显示不正常，什么原因？

1. 权重问题，共同开发中有人设置了Z-index ,
2. 优先级问题，有的可能加了！Importent，或者内联样式的影响
3. 父组件继承问题，可能父组件本身就有问题

线上项目偶遇BUG怎么办，客户不告诉你

1. 多个环境测试，2上线后多次点击，3，开发参与测试用例编写，4，开发期间让同事多点点

网络环境不好，网页加载慢

1. 使用CDN部署动静分离，先保证静态页面
2. 强缓存，max-age
3. 请求头加conten-Encodeing:gzip，压缩，代理缓存 Accept-encoding
4. 样式头部，脚本尾部
5. 减少DNS解析，
6. 不修改数组的用GET请求，缓存接口

WebPack

模块化打包器，会把JS CSS JSON文件打包成一个builds,通过chunk去分割，然后实现按需加载

Entry 入口文件，output出口文件，mode 类型，loader 转换器，pulgin 插件

style-loader------读取css，输出js字符串。解析css文件、import

css-loader-----------输出字符串

postcss-loader----让webpack解析、处理css文件的loader，给浏览器加前缀的

autoprefixer-------结合postcss-loader使用，告诉postcss-loader哪些可以加前缀

file-loader----------将文件编译到js中，引入文件（图片/字体）

url-loader-----------将文件编译到js中，以base64形式将文件放在bundle里

less-loader---------编译less

babel-loader--------将es6语法编译为es5等能被浏览器识别的语法

html-webpack-plugin定义entry输出目录的html的文件，并将chunk路径写进html，js写到或者<body底部, 用 MiniCssExtractPlugin 提取的 CSS会写到head的link

clean-webpack-plugin：删除上一次的dist

copy-webpack-plugin ：拷贝文件到JS目录下

webpack-dev-server： 开启一个服务器

compression-webpack-plugin GIZP压缩代码

优化：分包，prefeach preLoad，树摇，缓存，开启热更新，source-map定位错误类型，webpack-bundle-analyzer打包后体积显示，asset-module（URL-loader）

VUE 3

1. reactive 创建一个响应式对象，只支持引用类型。
2. Ref，创建一个响应式数据，可基础类型，可引用类型。
3. Readonly 创建一个只读的
4. shllowReactive 创建一个浅的响应式数据最外层
5. shllowreadonly上一个响应式变成浅的只读
6. toRaw让一个响应式对象变成只读的，永远不会引起页面更新
7. markRaw标记一个对象使他永远不能成为响应式的
8. shllowref处理基本类型响应式
9. toRefs,toRef 创建一个 ref 对象，其value值指向另一个对象中的某个属性。把响应式对象的某个属性提供给外部，

Effect

effect 作为 reactive 的核心，主要负责收集依赖,更新依赖

其实就是一个改良版的发布订阅模式。get 时通过 track 收集依赖，而 set 时通过 trigger 触发了依赖，而 effect 收集了这些依赖并进行追踪，在响应后去触发相应的依赖。effect 也正是 Vue3 响应式的核心。在调用 effect 时会触发 track 开启响应式追踪

为了实现响应式，我们使用了new Proxy

effect默认数据变化要能更新，我们先将正在执行的effect作为全局变量，渲染（取值），然后在get方法中进行依赖收集

依赖收集的数据格式weakMap（对象：map（属性：set（effect））

用户数据发生变化，会通过对象属性来查找对应的effect集合，全部执行；

调度器的实现，创建effect时，把scheduler存在实例上，调用runner时，判断如果有调度器就调用调度器，否则执行runner

nextTick

操作DOM,VUE是异步更新，所以更新后不能立即获取更新后的视图，这个时候操作DOM是视图感受不到的，nextTick，解决这个问题的，他的本质就是一个Promise 的resolve

Computed

computed可以传入一个函数，也可以传入一个对象（带有get和set方法）,计算属性返回一个计算值，该值通过value属性访问，当参与计算的数据发生改变，则重新计算，不发生改变，则直接返回之前缓存的值，

Watch

其本质就是一个响应式数据，当数据发生变化时候，去执行相应的回调函数

Watch利用了effect，他是收集上层的effect，他是监听数据，当监听的数据发生变化了。执行调度函数，

Watch是一个属性去影响多个属性，首次不加载 除非 immediate:true，deep:true深度监听，

监听路由，input焦点，或者输入值，或者日历，时间等

watchEffect

和watch差不多，但是没有指定依赖，自动收集依赖源，那个变化了，，就监听那个

任何你有用到的响应式依赖更新时，该回调函数便会重新执行

循环引用问题

当对象 1 中的某个属性指向对象 2，对象 2 中的某个属性指向对象 1 就会出现循环引用，

 JSON.decycle 

post为什么发两次

预检请求是在进行跨域资源共享 CORS 时，由浏览器自动发起的一种 OPTIONS 请求。它的存在是为了保障安全，并允许服务器决定是否允许跨域请求。

跨域请求是指在浏览器中向不同域名、不同端口或不同协议的资源发送请求。出于安全原因，浏览器默认禁止跨域请求，只允许同源策略。而当网页需要进行跨域请求时，浏览器会自动发送一个预检请求，以确定是否服务器允许实际的跨域请求。

预检请求中包含了一些额外的头部信息，如 Origin 和 Access-Control-Request-Method 等，用于告知服务器实际请求的方法和来源。服务器收到预检请求后，可以根据这些头部信息，进行验证和授权判断。如果服务器认可该跨域请求，将返回一个包含 Access-Control-Allow-Origin 等头部信息的响应，浏览器才会继续发送实际的跨域请求。

使用预检请求机制可以有效地防范跨域请求带来的安全风险，保护用户数据和隐私。

整个完整的请求流程有如下图所示：

如何发布自己的Npm包

如何发布自己的npm包_发布npm包-CSDN博客