2025面试题记录

浏览器从输入 url 到显示网页的全过程

1. DNS解域名为ip地址
2. 检查浏览器是否有缓存
3. TCP三次握手建立连接
4. 客户端发送请求获取html
5. 服务端响应请求
6. 浏览器解析html渲染页面

参考资料：juejin.cn/post/725286…

http和https的区别

1. https需要CA证书
2. http基于TCP协议，明文传输；https协议可以理解为http+SSL/TLS，加密传输
3. http的默认端口是80；https的默认端口是443
4. https安全性高，能够有效防止运营商劫持

http请求和websocket的区别

1. http是短连接，请求响应；websocket是持续连接
2. http是单向通信，客户端发请求；websocket是双向通信，客户端和服务端都可以发送数据
3. 传输效率上，http每次请求都需要完整的请求协议，包含请求头和响应头；websocket一旦建立连接后则不需要
4. http适用于数据更新频率低的场景；websocket适合实时更新的场景

XSS和CSRF了解

XSS（跨域脚本攻击），指利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序等。

1. 反射型：发出请求时，XSS代码出现在URL中，作为输入提交到服务端，服务端解析后响应，XSS代码随响应内容一起传回到浏览器，最后浏览器解析执行XSS代码。
2. 存储型：和反射型的差别是提交的代码会存储在服务端（数据库、内存、文系统等），下次请求目标页面时不用再提交XSS代码。
3. DOM型：不需要服务端参与，触发XSS靠浏览器的DOM解析。

防御措施

1. 过滤：对用户的输入（和url参数）进行过滤。移除用户输入的和事件相关的属性，如onerror和onclick等；移除用户输入的Style节点和Script节点、Iframe节点。
2. 编码：对用户输出进行html编码。对动态输出到页面的内容进行html编码，使脚本无法在浏览器中执行。
3. 服务端设置cookie的http only属性，客户端的脚本不能获取cookie信息了。

CSRF（跨站请求伪造），攻击者通过伪造用户的浏览器请求，向用户曾经访问过的网站发送，使目标网站以为是用户真实的操作而去执行命令。常用于转账、盗号、发送虚假信息等。

防御措施

1. token验证：服务端返回用户一个token信息，用户带token发送请求，如果token不合法，服务端拒绝这个请求。
2. 隐藏令牌：将token隐藏在http的header中。
3. referer验证：页面请求来源验证，只接受本站请求，其他进行拦截。

防抖和节流的区别

• 防抖：在事件触发n秒再执行回调，如果在这n秒内再被触发，则重新计时。（常用于户搜索框输入、浏览器窗口不停缩放）
• 节流：在一段时间内，只能触发一次函数，如果在这段时间内触发了多次，只有一次生效。（常用于鼠标不断点击事件、监听页面滚动事件）

webpack优化

可以通过 webpack-bundle-analyzer 分析打包后的依赖包大小。 可以通过 speed-measure-webpack-plugin 分析总打包耗时以及每个plugin和loader的打包耗时，让我们对打包时间较长的部分进行优化。

1. 缩小构建范围：由于babel-loader转化文件非常耗时，首先缩小babel-loader处理文件的范围。通过test、include、exclude三个配置项来命中Loader要应用规则的文件。
2. 开启热更新
3. 使用oneOf：只匹配固定后缀结尾的文件
4. cache：对eslint和babel编译结果进行缓存
5. Network Cache：fullhash每次修改文件，所有文件的hash都会改变；chunkhash根据不同入口文件（entry）进行依赖文件解析、构建对应的chunk，生成hash值；contenthash根据文件内容生成hash值只有文件内容变化了，hash值才变化。
6. thread：多进程打包，主要提升js的打包速度。
7. Tree Shaking：webpack默认开启。
8. Babel：安装 babel/plugin-transform-runtime， 禁用babel自动对每个文件的runtime引入。
9. 优化代码运行性能：多入口、提取重复代码、按需加载、Preload（预加载）。
10. externals：告诉webpack不打包资源，从而减少入口文件大小。
11. DLLPlugin：分离第三方库代码，每次文件更改时，只会打包自身的代码。

参考资料：juejin.cn/post/712112…

vite和webpack的区别

1. 开发模式：webpack先打包，再启动服务；vite则是直接启动，然后按需编译依赖文件。
2. 对ES Modules的支持：由于现代浏览器都支持ES Modules，vite将开发环境需要的模块文件直接作为浏览器要执行的文件，不用像webpack那样先打包，再交给浏览器执行。
3. 底层语言：webpack基于NodeJs构建，vite基于esbuild进行与构建依赖。esbuild采用Go语言编写，纳米级；NodeJs是毫秒级。
4. 热更新：webpack当一个模块或多个模块内容改变时，需要重新编译这些模块；vite当这些模块内容改变时，只需要让浏览器重新请求这些模块即可。

深拷贝方法

1. JSON.parse(JSON.stringify(obj))（缺陷：无法识别BigInt类型；无法拷贝Symbol、undefined、function 属性；无法处理循环引用）
2. structuredClone(obj)：较新的API，浏览器兼容性稍差
3. 自定义

JS如何进行内存管理和垃圾回收机制

内存管理：

1. JS使用 自动内存管理，开发者不需要手动分配和释放内存
2. 内存通过 堆（用于存储对象和数组等的内存分配）和栈（用于存储函数调用和局部变量） 进行管理

常用的垃圾回收机制：

1. 标记-清除：标记活动对象，清除未标记对象，释放内存
2. 引用计数：计算对象的引用次数，引用为0时回收。但会有循环引用的问题
3. 生成式垃圾回收：通过将内存分为年轻代和老年代，优化垃圾回收频率，减少内存碎片