面经-浏览器/网络/HTML/CSS

当浏览器发起一个资源请求时，浏览器会先判断本地是否有缓存记录，如果没有会向服务器请求新的资源。
如果有缓存记录，先判断强缓存是否存在，如果强缓存的时间没有过期则返回本地缓存资源(状态码为200)
如果强缓存失效了，客户端会发起请求进行协商缓存策略，首先服务器判断头信息标识符，如果客户端传来标识符和当前服务器上的标识符是一致的，则返回状态码 304(也就是不会返回资源内容)
如果tag和服务器端上的不一致，重新获取新的资源，并进行协商缓存返回数据。

缓存机制

强缓存：通过Cache-Control和Expires头部控制。
- Cache-Control：提供了更细粒度的缓存控制，包括但不限于：
  - no-cache：要求在使用缓存前必须向服务器验证资源是否有更新。
  - no-store：禁止缓存，每次都要从服务器获取最新数据。
  - public：指示响应可以被任何缓存存储。
  - private：指示响应仅对单个用户有效，不能被共享缓存存储。
  - max-age=<seconds>：指定资源被认为新鲜的最大时间（秒）。
- Expires：指定了一个绝对的过期时间，格式为GMT时间。由于其依赖于客户端时钟准确性，现代实践中更多使用Cache-Control。
协商缓存：当强缓存未命中或根据策略需要重新验证时，使用ETag和/或Last-Modified进行缓存验证。
- ETag：提供了一个唯一的标识符（通常是哈希值），用于判断资源是否发生变化。
- If-None-Match：随请求发送给服务器，包含之前收到的ETag值。如果资源未变化，服务器返回304 Not Modified状态码，客户端继续使用缓存。
- Last-Modified：指示资源最后修改的时间。
- If-Modified-Since：随请求发送给服务器，包含上次收到的Last-Modified时间。逻辑同If-None-Match。

流程概述

当用户首次访问一个页面时，浏览器会从服务器下载资源，并根据响应头部设置本地缓存。

在后续访问中，浏览器首先检查强缓存是否可用且未过期。如果是，则直接使用缓存，不会发起请求。

如果强缓存已过期或者根据Cache-Control指示需要验证，浏览器将发起条件请求（带有If-None-Match或If-Modified-Since头部）到服务器进行验证。

服务器根据请求头部中的信息决定资源是否自上次请求后发生改变。如果没有变化，返回304状态码；如果有变化，则返回新的资源以及相应的缓存指令。

通过合理配置这些头部，可以有效地利用HTTP缓存机制提升用户体验，同时减轻服务器负担。不过需要注意的是，缓存策略应根据实际情况精心设计，以避免因缓存导致的数据不一致问题。

2. 常见的http状态码

1xx（信息性状态码）

100 Continue：客户端应继续发送请求的剩余部分。
101 Switching Protocols：服务器已理解客户端的请求，并将通过升级协议进行切换。

2xx（成功状态码）

200 OK：请求成功。
201 Created：请求成功，服务器已创建资源。
204 No Content：请求成功，但无内容返回。

3xx（重定向状态码）

301 Moved Permanently：资源永久移动到新URL。
302 Found：资源临时移动，客户端应继续使用原URL。
304 Not Modified：资源未被修改，可以使用缓存的版本。

4xx（客户端错误状态码）

400 Bad Request：请求无效，语法错误（参数错误等）。
401 Unauthorized：未授权，需身份验证。
403 Forbidden：服务器拒绝访问，权限不足。
404 Not Found：请求的资源不存在。
405 Method Not Allowed：请求方法不被允许。
408 Request Timeout：请求超时。

5xx（服务器错误状态码）

500 Internal Server Error：服务器内部错误。
501 Not Implemented：服务器不具备完成请求的功能。
502 Bad Gateway：作为网关或代理角色的服务器从上游服务器接收到无效响应。
503 Service Unavailable：服务器暂时无法处理请求，通常是超载或维护。
504 Gateway Timeout：网关超时。

3. http和https的区别？

HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP）数据传输过程是加密的，安全性较好。

使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构）申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。

HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。

http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。

HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。

4. 跨域的解决方案

跨域资源共享（CORS, Cross-Origin Resource Sharing）是一种机制，它使用额外的HTTP头部让浏览器能够从一个源请求另一个源的资源。以下是几种常见的跨域解决方案：

1. 服务端设置 CORS 头（最常用）

在后端接口响应中添加 HTTP 头：

Access-Control-Allow-Origin: https://your-frontend.com  // 或 *
Access-Control-Allow-Methods: GET,POST,PUT,DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true  // 如果需要携带 cookie

优点：安全、标准、浏览器原生支持。
缺点：必须后端配合修改。

2. 反向代理（开发环境常用）

由前端开发服务器或中间层代理请求，解决跨域。

Vue CLI 配置示例：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
};

优点：前端可控，后端无需改。
缺点：仅开发环境可用，生产需额外部署代理。

3. Nginx / Apache 反向代理

生产环境中在服务器层代理请求：

location /api/ {
    proxy_pass https://api.example.com/;
}

优点：生产环境稳定、安全。
缺点：需运维配置。

4. 服务器中转（Server-side Proxy）

前端请求自己的后端，后端再去请求目标接口。

// 前端请求 /myapi
fetch('/myapi/user')
// 后端 Node.js
app.get('/myapi/user', (req, res) => {
  axios.get('https://api.example.com/user').then(resp => res.send(resp.data));
});

优点：彻底解决跨域，支持所有请求类型。
缺点：增加服务器压力，延迟略高。

JSONP（JSON with Padding）：
- JSONP是一种利用<script>标签不受同源策略限制的特点实现跨域请求的方法。
- 它的工作原理是动态创建一个<script>元素，并设置其src属性为目标跨域URL，该URL返回的数据会被包装在一个函数调用中，这个函数在当前页面定义。
- 注意：由于安全性问题，现代应用推荐使用CORS而非JSONP。只能 GET，不安全，已很少使用。
WebSocket：
- WebSocket协议提供了一种新的途径来建立客户端和服务器之间的交互，且不受同源策略的限制。
- 当需要实时通信时，这是一种有效的解决跨域问题的方法。缺点：协议不同（ws://），不适合普通 HTTP 请求场景。
修改.htaccess文件（适用于Apache服务器）：
- 可以通过编辑.htaccess文件添加必要的CORS头部信息，使服务器支持跨域请求。
iframe与postMessage API：
- 使用iframe嵌入外部内容，并结合HTML5的postMessageAPI实现跨文档消息传递。
- 这样可以让不同源的文档之间安全地交换字符串消息。

总结建议：

开发环境：用 devServer 代理（Vue CLI、Vite、Webpack）。
生产环境：后端配置 CORS 或 Nginx 反向代理。
特殊场景：JSONP（GET）、WebSocket、postMessage、服务器中转。

CORS注解(Spring)

参考：https://blog.csdn.net/Do_LaLi/article/details/117568142

@CrossOrigin的使用：

在方法上，表示该方法可以实现跨域请求。
在类上，表示该类中所有方法都可实现跨域请求。

@CrossOrigin的两个参数：

origins：允许可访问的域列表
maxAge：准备响应前的缓存持续的最大时间（以秒为单位）。

示例：@CrossOrigin(origins = "http://localhost:8082", maxAge = 3600)

5. 浏览器存储，他们的区别？

localStorage：永久保存，以键值对保存，存储空间（各浏览器不同）
sessionStorage：关闭页签/浏览器时清空
cookie：随着请求发送，通过设置过期时间删除
session：保存在服务端

localStorage/sessionStorage是window的属性，cookie是document的方法

存储类型	典型接口	存储大小	生命周期	作用域	可被服务器访问	特点与适用场景
Cookie	`document.cookie`	~4KB	可设置过期时间，默认会话结束清除	同源	是（会随请求发送）	适合存储少量数据，需要随请求发送到服务器，如登录状态、跟踪信息；支持过期设置，但性能较差，每次请求都会携带数据
LocalStorage	`window.localStorage`	510MB（各浏览器不同）	永久存储，除非手动清除	同源	否	数据长期保存，刷新页面或关闭浏览器都存在；同步接口，操作简单；不随请求发送服务器
SessionStorage	`window.sessionStorage`	510MB	会话级存储，关闭标签页或窗口即清除	同源、同窗口	否	适合临时数据存储，如表单数据保存、单页应用状态；同标签页有效，不影响其他标签页
IndexedDB	`window.indexedDB`	几百MB到GB	永久存储	同源	否	结构化数据库，可存储大量复杂数据，如文件、JSON对象；异步接口，性能高；适合大数据存储和离线应用
Cache Storage（Service Worker）	`caches`	几百MB	永久存储（可管理生命周期）	同源	否	专为离线缓存资源设计，如 HTML、JS、CSS、图片；结合 Service Worker 使用

6. 页面优化

1、某个页面加载较慢，从哪些方向分析、解决问题？

传统页面
首先判断是接口慢，还是页面慢。如果接口慢，后端优化。

如果前端页面加载慢，看是否是因为图片等资源过大，尝试替换不同格式体积的图片。定位是否是某些数据处理的函数，比较耗时。或者是否循环操作DOM，js生成dom后再批量插入。

如果页面直接卡死，就需要分析是否内存泄漏。比如大屏展示的定时刷新卡死，排查思路可如下：

使用chrome的任务管理器，操作页面观察的内存占用的变化。定位到是哪些操作，哪块代码导致内存占用飙升。

因为js并没有直接释放缓存的语法，只有靠浏览器的垃圾回收机制自动清理。我们需要做的是及时给不需要的变量赋空。

特别注意大数据的循环实例化后，变量是否及时赋空。定时器等闭包方法中是否存在内存泄漏，循环渲染地图时，是否先将之前地图数据清空等。

单页面应用
单页面一般不会某个页面加载慢，一般都集中在首屏加载时白屏较久。处理方法可参考上文中

2、使用缓存

有些接口没必要每次打开页面都请求，可用cookie计时。某个时间段内不重新获取。
某些数据初始化时加载一次即可，可通过cookie计时，某个时间段内不用请求。
某些数据可用localstorage存储，默认填充input，更新时才重写缓存。这个只是用户体验好些

7. 计算机原理

1、进程和线程的关系？
进程（Process）和线程（Thread）是操作系统中两个重要的概念，它们之间存在密切的关系。

进程：

进程是程序执行的实例，是操作系统资源分配的基本单位。
每个进程都有独立的地址空间、代码、数据和系统资源。
进程之间相互独立，彼此不受影响。
线程：

线程是进程内的执行单元，是操作系统调度的基本单位。
同一进程内的多个线程共享相同的地址空间和系统资源。
线程之间可以方便地进行通信和数据共享。
关系：

一个进程可以包含多个线程，这些线程共享进程的资源，包括内存、文件句柄等。
同一进程内的线程之间可以通过共享的内存空间进行通信和数据交换，这使得线程间的协作变得更加高效。

总的来说，进程和线程之间是包含关系，一个进程可以拥有多个线程，而线程则是在进程内执行的单元。通过线程的使用，可以更加高效地利用系统资源，提高程序的并发性和响应性。

8. GET和POST请求方式的区别

数据传输方式

GET：将参数附加在URL后面作为查询字符串发送到服务器。例如：http://example.com/page?key1=value1&key2=value2
POST：通过请求体发送数据，参数不会显示在URL中。

安全性

GET：因为数据直接暴露在URL中，所以相对不安全，不适合传输敏感信息如密码等。
POST：数据在请求体中，相对更安全一些，但也不是绝对安全，仍需使用HTTPS协议保证数据传输的安全性。

缓存

GET：请求可被浏览器缓存，适合用于获取数据的操作，如搜索内容。
POST：请求一般不会被缓存，更适合用于提交数据的操作，如表单提交。

幂等性

GET：应该是幂等的，即多次相同的GET请求应该产生相同的结果，不会影响服务器状态。
POST：不是幂等的，每次请求可能会导致服务器状态的变化（比如数据库记录的增加）。

用途

GET：适用于获取资源，不应有副作用。
POST：适用于提交数据，可能会改变服务器上的资源状态。

选择GET还是POST应根据具体的应用场景来决定。如果只是简单地获取数据且不需要保密，GET通常是不错的选择；如果涉及到用户输入、文件上传或任何可能修改服务器端资源的操作，则应使用POST。

9. script标签，async和defer的作用

在HTML中，<script>标签用于加载和执行JavaScript代码。为了优化网页的性能，避免脚本阻塞页面的渲染或资源加载，async和defer属性被引入。它们的作用是控制脚本的加载和执行行为。

1. 默认行为（无 async 和 defer）

如果 <script> 标签没有指定 async 或 defer 属性：
- 加载：浏览器会立即加载脚本，并且阻塞 HTML 的解析。
- 执行：一旦脚本加载完成，浏览器会立即执行脚本，然后继续解析剩余的HTML内容。
- 问题：这种方式可能会导致页面渲染延迟，尤其是在脚本文件较大或网络较慢的情况下。

<script src="example.js"></script>

2. async 属性

作用：

脚本异步加载，不会阻塞HTML的解析。

脚本加载完成后，会立即执行，即使HTML尚未完全解析。

多个带有 async 属性的脚本之间的执行顺序不保证，谁先加载完成谁先执行。

适用场景：

适用于独立的脚本（如统计分析脚本、广告脚本等），这些脚本不需要依赖其他脚本或DOM结构。

<script src="example.js" async></script>

特点：
- 不会阻塞HTML解析。
- 执行时机不确定（取决于脚本的加载速度）。

3. defer 属性

作用：

脚本异步加载，不会阻塞HTML的解析。

脚本加载完成后，会等待HTML解析完成后才执行。

多个带有 defer 属性的脚本会按照它们在HTML中的顺序依次执行。

适用场景：

适用于需要操作DOM但又不想阻塞页面渲染的脚本（如主程序逻辑）。

<script src="example.js" defer></script>

特点：
- 不会阻塞HTML解析。
- 执行顺序是确定的，按照脚本在HTML中的顺序执行。
- 执行时机是在HTML解析完成后、DOMContentLoaded事件之前。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Script Example</title>
  <script src="script1.js" async></script>
  <script src="script2.js" defer></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

行为分析：

script1.js（async）：
- 异步加载，加载完成后立即执行。
- 可能会在页面渲染之前执行，也可能在渲染之后执行。
- 如果script1.js比script2.js先加载完成，则会先执行。
script2.js（defer）：
- 异步加载，但会等待HTML解析完成后按顺序执行。
- 即使script2.js比script1.js先加载完成，也会等到HTML解析完成后再执行。

6. 总结

如果脚本之间有依赖关系，或者需要确保脚本在HTML解析完成后执行，使用 defer。
如果脚本是独立的，且不需要依赖HTML解析结果，使用 async。
如果脚本必须同步加载并立即执行（如某些关键逻辑），则不加 async 或 defer。

通过合理使用 async 和 defer，可以显著提升网页的加载速度和用户体验。

10. 重绘和重排（回流）的区别

重排（Reflow）

重排是指当浏览器为了重新渲染部分或全部文档，需要重新计算元素的几何属性（如宽度、高度、位置等）的过程。任何影响到元素布局的操作都会导致重排。例如：

改变窗口大小

添加或删除可见的DOM元素

改变内容，比如文本改变或者图片尺寸变化

浏览器窗口的滚动

重排是一个昂贵的过程，因为它会触发页面中其他元素的布局更新，有时甚至是整个页面的重新布局。

重绘（Repaint）

重绘发生在不需要重新计算布局但需要重新绘制元素的情况下。这通常是因为某些只影响元素外观而非其大小或位置的属性发生了变化，比如：

改变元素的颜色

改变背景图像

可见性（visibility）的变化

相比于重排，重绘的成本较低，因为它不涉及重新计算布局，但它仍然消耗资源，尤其是在大规模发生时。

总结

重排（Reflow）：涉及到元素尺寸或位置的改变，需要重新计算布局，成本较高。

重绘（Repaint）：只涉及元素外观的改变，不需要重新计算布局，成本相对较低。

优化网站性能的一个关键点就是尽量减少重排和重绘的次数。通过批量修改DOM、使用CSS3硬件加速以及避免频繁的布局操作，可以有效提升网页的响应速度和用户体验。

11. Dom事件流的顺序？什么是事件委托？

当页面上的一个元素被点击时，先从document向下一层层捕获到该元素。然后再向上冒泡，一层层触发。

事件委托是将事件写在父级元素上，e.target是事件捕获时那个最小的元素，即选中的元素。所以可以根据e.target操作选中的元素。这样不需要给每个子元素绑定事件，代码更加简约。

DOM（文档对象模型）事件流描述了事件在页面中触发和传播的顺序，它包括三个阶段：捕获阶段、目标阶段和冒泡阶段。

1. 捕获阶段（Capture Phase）

事件从文档的根节点（document）开始，依次向下查找，直到找到事件目标元素的父元素。在这个过程中，事件会依次经过各级祖先元素。

例如，当你点击一个页面中的按钮时，事件会从 document 开始，经过 html、body 等元素，逐渐向下查找，直到按钮的父元素。

2. 目标阶段（Target Phase）

当事件到达目标元素时，就进入了目标阶段。目标元素就是实际触发事件的元素，比如上面提到的按钮。

在这个阶段，事件会直接作用于目标元素。

3. 冒泡阶段（Bubbling Phase）

事件从目标元素开始，依次向上传播，经过各级祖先元素，直到到达文档的根节点（document）。

继续以点击按钮为例，事件在目标阶段作用于按钮后，会依次经过按钮的父元素、父元素的父元素，一直传播到 document。

在实际的事件绑定中，可以通过 addEventListener 方法的第三个参数来指定事件处理函数是在捕获阶段还是冒泡阶段执行。如果第三个参数为 true，则事件处理函数在捕获阶段执行；如果为 false 或者省略该参数，则事件处理函数在冒泡阶段执行。

事件委托

事件委托（Event Delegation）是一种利用事件冒泡原理的技术，它允许将事件处理程序绑定到一个父元素上，而不是直接绑定到每个子元素上。当子元素上的事件触发时，事件会冒泡到父元素，然后由父元素上的事件处理程序来处理。

优点

减少内存占用：如果有大量的子元素需要绑定相同的事件处理程序，直接绑定到每个子元素上会占用大量的内存。使用事件委托只需要在父元素上绑定一个事件处理程序，从而减少内存开销。

动态添加子元素时无需重新绑定事件：当动态添加新的子元素时，由于事件处理程序是绑定在父元素上的，新的子元素会自动继承该事件处理程序，无需重新为每个新元素绑定事件。

12、防抖/节流的区别？

区别：防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。

防抖:

原理是维护一个定时器，将很多个相同的操作合并成一个。规定在delay后触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。例如：实时搜索的input，一直输入就不发送。

let input = document.querySelector("input");
let time = null;//time用来控制事件的触发
 
input.addEventListener('input',function(){
   //防抖语句，把以前的定时删除，只执行最后一次
   if(time !== null){
     clearTimeout(time);
   }
   time = setTimeout(() => {
     console.log(this.value);//业务实现语句，这里的this指向的是input
   },500)
 })

封装成通用函数

防抖逻辑可以封装成一个通用的工具函数，方便复用。

function debounce(fn, delay) {
    let timer = null;
    return function(...args) {
        if (timer !== null) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

input.addEventListener('input', debounce(function() {
    console.log(this.value);
}, 500));

节流：

原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。例如：在指定的时间内多次触发无效

    //节流
    function throttle(fn, time) {//连续触发事件  规定的时间
        let flag = false;
        return function () {
            //使用标识判断是否在规定的时间内重复触发了函数，没有就触发，有就不触发
            if (!flag) {//不为假时 执行以下
                fn();//触发事件
                flag = true;//为真
                setTimeout(() => {//超时调用（在规定的时间内只执行一次）
                    flag = false;
                }, time);
            }
        }
    }
  
    mybtn.onclick = throttle(btn, 3000);//单击事件   节流(btn,3s时间)

13、margin高度塌陷

在 CSS 中，margin 高度塌陷是指在一些特定情况下，元素的margin属性没有按照预期产生垂直方向的间距，导致元素之间的距离出现异常。以下是对其产生原因及解决方案的介绍。

产生原因

父子元素 margin 重叠：当父元素没有边框、内边距或其他能阻止 margin 传递的属性时，子元素的 margin-top 或 margin-bottom 会与父元素的相应 margin 合并，导致父元素的高度塌陷。例如，一个父元素包含一个子元素，子元素设置了margin-top: 20px，如果父元素没有设置border-top、padding-top等属性，那么子元素的margin-top会作用在父元素上，使父元素顶部出现 20px 的空白，而不是子元素与父元素之间有 20px 的间距。
相邻兄弟元素 margin 合并：垂直方向上相邻的两个兄弟元素，它们的margin值会取其中较大的值作为它们之间的间距，而不是两者相加。例如，一个元素有margin-bottom: 20px，它下面的兄弟元素有margin - top: 10px，那么这两个元素之间的实际间距是 20px，而不是 30px。

解决方案

为父元素设置边框或内边距：给父元素添加border或padding，可以阻止子元素的margin与父元素的margin合并。例如，设置border-top: 1px solid transparent或padding - top: 1px。
使用 overflow:hidden：给父元素设置overflow: hidden，可以创建一个新的块级格式化上下文，从而防止margin塌陷。但要注意，这可能会导致子元素中超出父元素范围的内容被隐藏。
使用 flex 或 grid 布局：在父元素上应用display: flex或display: grid，可以改变元素的布局方式，避免margin塌陷问题。因为 flex 和 grid 布局有自己的一套布局规则，会影响margin的行为。
分开设置 margin：对于相邻兄弟元素，尽量避免同时设置上下方向的margin。可以根据实际情况，只在其中一个元素上设置margin，以达到期望的间距效果。

14、HTTP常见的请求头

HTTP头字段(HTTP header fields),是指在超文本传输协议(HTTP)的请求和响应消息中的消息头部
分
它们定义了一个超文本传输协议事务中的操作参数
HTTP头部字段可以自己根据需要定义，因此可能在Web 服务器和浏览器上发现非标准的头字段
下面是一个 HTTP 请求的请求头:

Accept: 客户端希望接收的数据类型列表，如text/html, application/json等。
Accept-Language: 客户端希望接收的内容语言偏好设置，例如zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7。
Accept-Encoding: 客户端支持的内容编码类型（如gzip, deflate）以及它们的优先级。
Connection: 控制网络连接的行为，比如keep-alive表示长连接，close表示请求结束后关闭连接。
Referer: 包含当前页面的来源页面的URL，即用户是从哪个页面跳转到当前页面的。
Authorization: 用于向服务器传递认证凭据，常用于HTTP基本认证或携带Bearer Token进行OAuth认证。
Content-Type: 发送的数据的MIME类型，如application/x-www-form-urlencoded, multipart/form-data, 或者application/json，通常在POST或PUT请求时使用。
Content-Length: 请求体的长度，以字节为单位。
Origin: 标识请求源站点，在跨域请求(CORS)中会被用到。
Cookie: 包含了之前由服务器通过Set-Cookie头设定的cookie值，用于维持会话状态或个性化设置。