一、浏览器相关
1、输入 URL 回车后经过哪些过程？
①解析 URL，判断是否命中缓存（DNS prefetch）
②访问 DNS 服务器，将域名解析获取 IP 地址
③三次握手建立 TCP 连接
④发送 HTTP 请求
⑤服务器处理请求并返回 HTTP 报文
⑥浏览器解析渲染页面
⑦断开连接：TCP 四次挥手
2、跨域问题处理
①JSONP（利用 script 标签，前端需要定义一个回调函数接收数据，兼容性好，但只能发送 get 请求）
②CORS（与服务端配置相关）
③PostMessage、WebSocket（HTML5 新特性）
④Nginx 反向代理（偏运维知识）
⑤img 标签（知识广度向，与 script 一样可以跨域）
⑥另外本地工程化项目可以配置 Proxy 代理来跨域请求后端（Webpack、Vite）
3、移动端屏幕适配
①利用 meta 标签，viewport 缩放（页面拉伸模糊）
②响应式布局（css 媒体查询@media，通过这个方式可以在不同分辨率下实现不同样式）
③rem，%，vh vw 等弹性单位（可通过 postcss 插件自动转化 px 单位）
关于postcss插件，这里涉及到了一个比较骚气的操作。Postcss插件影响下如果一定要使用px，如何让该单位不转换？
这里有两种方式可以处理。一种是把那部分 px 写成大写 PX（但代码格式化可能会fix掉），另外一种是通过 JS 写入样式（额外触发回流重绘，但是稳定）。
4、数据存储
一个老生常谈的问题，关于前端的数据存储的知识点。
- Cookie：有过期时间，长度限制4kb，且每次都会携带在请求头中，不推荐使用
- SessionStorage：无过期时间，容量大，但窗口关闭自动删除
- LocalStorage：无过期时间，容量大，应用场景很广
- IndexedDB：存储更大量的结构化数据，浏览器本身不限制其容量
5、浏览器缓存
很多时候我们经常会遇到页面的内容跟我们的代码出现冲突的问题，常常让人抓耳挠腮，不得其解。所以我们需要了解一定的关于缓存的知识，来确保排除这些由缓存引起的问题。
首先，我们可以先从理解缓存策略入手，缓存策略都是通过设置 HTTP Header 来实现的，分为强缓存与协商缓存。
①强缓存就是由浏览器决定的，若命中缓存则无论资源是否更新都不会请求接口（状态码：200）
②协商缓存就是服务器收到请求后进行更新判断，如果资源没有修改就返回 Not Modified（状态码：304）。
关于强缓存与协商缓存，这里有一些比较具体的解释，也可以帮助我们去理解。
强缓存（Expires，cache-control）
Expires（http 1.0 时期产物）：设置的是具体的过期时间。
cache-control（http 1.1 时期产物）：设置的是经过多少时间（单位秒）之后过期，与 Expires 同时存在的话优先级更高。
协商缓存（Last-modified ，Etag）
Last-modified：顾名思义，最后一次更改时间。
ETag：优先级更高，资源的唯一标识。优点是精度更高，因为 Last-modified 时间单位是秒，如果文件在 1 秒内被修改多次就很难侦测到。缺点是性能有一定消耗，因为获得资源的hash值需要额外计算。
6、前端路由
①History 路由
主要是利用实例提供的 API 操纵浏览器会话历史记录。
②Hash 路由
这种路由是利用了锚点（url 中的 #）功能来实现的，当 # 后面的内容发生改变时，可以通过 hashchange 事件监听到，这也是此路由方式称为hash路由的原因。
7、垃圾回收机制
不管什么程序语言，内存生命周期基本是一致的：
①分配你所需要的内存
②使用分配到的内存（读、写）
③不需要时将其释放
像 JavaScript 这些高级语言中，第 1 和第 3 部分并不像底层语言那样明确。JS 是在定义变量时就完成了内存分配，而“垃圾回收器”的工作是跟踪内存的分配和使用，以便当分配的内存不再使用时，自动释放它。
那么垃圾回收它是通过什么样的方式去判定，一个变量是不是需要被处理的呢？
①引用计数算法
这是最初级的垃圾收集算法，此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果一个对象被引用次数为 0，对象将被垃圾回收机制回收。
该方式存在无法处理循环引用的问题。当两个对象被创建，并互相引用，形成了一个循环。它们被调用之后会离开函数作用域，却因为它们互相都有至少一次引用，所以不会被回收。
function f(){
var o = {
};
var o2 = {
};
o.a = o2; // o 引用 o2
o2.a = o; // o2 引用 o
}
②标记清除算法
这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。
这个算法假定设置一个叫做根（root）的对象（在 Javascript 里，根是全局对象）。垃圾回收器将定期从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象……直到找到所有可以获得的对象和收集所有不能获得的对象。
从 2012 年起，所有现代浏览器都使用了「标记-清除」垃圾回收算法。所有对 JavaScript 垃圾回收算法的改进都是基于「标记-清除」算法的改进，并没有改变算法本身和它对“对象是否不再需要”的简化定义。
二、网络基础
1、HTTP 1.0/1.1/2.0/3.0 的特性
①HTTP 1.0：
- 确定了协议是无状态的，即同一客户端每次请求都没有任何关系
- 消息结构包含请求头和请求体
②HTTP 1.1：
- 引入了持久连接，即 TCP 连接默认不关闭，可以被多个请求复用
- 在同一个 TCP 连接里面，客户端可以同时发送多个请求
- 虽然允许复用 TCP 连接，但是同一个TCP连接里面，所有的数据通信是按次序进行的，服务器只有处理完一个请求，才会接着处理下一个 请求。
- 新增了一些请求方法（如 PUT、DELETE 等）、新增一些请求头和响应头
③HTTP2.0
- 采用二进制格式而非文本格式
- 完全多路复用，而非有序并阻塞的、只需一个连接即可实现并行
- 使用报头压缩，降低开销
- 支持服务器推送
④HTTP3.0
弃用 TCP 协议，采用一种新的更快的网络协议 QUIC（基于 UDP 协议）
2、关于HTTPS
①使用了 SSL/TLS 协议进行了加密处理，相对更安全
②默认端口 443
③由于需要涉及加密以及多次握手，实际性能会稍逊 HTTP
3、WebSocket
①是一种建立在单个 TCP 连接上进行全双工通信的协议。
②浏览器和服务器两者之间可以创建持久性的连接，并进行双向数据传输。（HTTP/2 虽然也具备服务器推送功能，但 HTTP/2 只能推送静态资源）
③没有同源限制，天然支持跨域。
④可以发送文本格式和二进制格式，性能和效率也更高。
缺点：
①不支持 HTTP 请求头，无法做缓存等操作。
②由于 WebSocket 可以直接操作底层 TCP 连接，可能存在一些安全问题。
③长连接协议，即使在无通信状态时也会维持连接。这可能会导致过多的空闲连接，从而消耗过多的资源。
④WebSocket 的标准化程度比较低，有些功能只是由特定的浏览器供应商支持，可能会导致一些兼容性的问题。
4、网络安全
XSS（跨站脚本攻击）：利用了浏览器对于从服务器所获取的内容的信任，注入恶意脚本在受害者的浏览器中得以运行，分为反射型、储存型、DOM型。开启 CSP（内容安全策略）可以减少或消除这类攻击，副作用是 eval、Function() 等方法会失效。类似的还有 CRLF 攻击，防御此类攻击的核心就是严格控制用户提交的内容，对输入进行过滤，对输出进行转义。
CSRF（跨站伪造请求）：利用受害者的登录凭证（cookie）达到冒充该用户执行操作的目的，这在被攻击方很难完全防御，所以只能尽量减少 cookie 的使用，目前大部分网站也都是用 Token 来进行身份验证的，可以有效避免该类攻击。
Injection（注入攻击）：这种攻击主要是接口设计不当导致的，例如接口根据用户传递的内容拼接 SQL，那么就可以通过传递 SQL 语句来注入攻击；又例如根据传递的内容来拼接 Shell 命令，那么攻击者如果传了类似 && rm -rf xxx 这样的命令就会被执行，后果不言而喻。
DoS（服务拒绝）、DDoS（分布式服务拒绝）：通过构造大量特定请求，导致服务器资源被消耗过度，挤压正常的请求，进而产生雪崩效应。在 DDoS 攻击中更是利用了僵尸网络，使得追溯源头的可能性几乎为零，这类攻击主要目的在于消耗服务器带宽，非常难防御，常见的有 SYN 洪泛攻击（利用 TCP 三次握手），只能通过一些手段缓解，例如缩短超时，让服务器更快地释放掉长时间响应的连接，从而增加攻击者的成本。
中间人攻击：通过拦截窃取手段破坏通信，信息在用户和服务之间的传递都会暴露在攻击者的视野中。使用 HTTPS 协议传输一般可以避免，还有就是敏感信息不要使用明文传输，剩下的就只能交给用户的安全意识了，比如用户连接了不安全的公共 wifi，那么他就有可能被攻击。
5、域名发散与域名收敛
浏览器对于 TCP 链接有并发数限制，主要是为了不让 DoS 这类攻击的成本太低。
域名发散：将静态资源放在多个子域名下，以此实现多线程下载，突破并行数，在客户端加载大量静态资源时可以更迅速。
域名收敛：相反地，将静态资源集中放在一个域名下，刻意减少 DNS 解析的开销。