1.从输入URL到页面加载发生了什么？
1. 浏览器检查缓存
- 浏览器会先检查以下缓存，看看是否有匹配的资源：
- DNS 缓存：本地是否已缓存目标域名的 IP 地址。
- 浏览器缓存：是否有与 URL 匹配的 HTML、CSS、JS 等资源缓存。
- 操作系统缓存：若浏览器缓存中没有找到，操作系统可能也有域名解析的缓存记录。
- 如果缓存中有相关内容，可以直接从缓存中读取数据，而无需发起请求。
2. 若没有换成，开始 DNS 解析
浏览器将通过 DNS 将输入的域名（如 example.com）解析为目标服务器的 IP 地址。
- 本地缓存：检查本地 DNS 缓存。
- 向 DNS 服务器查询：如果本地没有找到，则通过递归查询找到目标 IP。
3. 建立 TCP 连接
浏览器与目标服务器建立 TCP 连接，通常会使用三次握手：
- 客户端发送 SYN 包。
- 服务器返回 SYN-ACK 包。
- 客户端返回 ACK 包，连接建立成功。
4. TLS/SSL 握手（如果是 HTTPS）
如果是 HTTPS 请求，浏览器会在 TCP 连接的基础上与服务器协商 TLS 加密协议，完成加密通信的建立。
5. 发送 HTTP 请求
6. 服务器处理请求
7. 服务器返回 HTTP 响应
8. 浏览器接收响应并开始渲染
浏览器接收 HTTP 响应后，会按照以下步骤渲染页面：
(1) 解析 HTML
- 浏览器解析 HTML 文件，构建 DOM 树（Document Object Model）。
- 如果遇到外部资源（如 CSS、JS 文件），则会发起新的请求获取资源。
(2) 加载 CSS 和构建 CSSOM
- 下载和解析 CSS 文件，构建 CSSOM（CSS Object Model）。
- 与 DOM 树结合，生成渲染树（Render Tree）。
(3) 加载 JS
- 如果遇到
<script>标签，会阻塞 HTML 的解析，先执行 JS 文件。 - 如果是异步加载的 JS（如
<script async>或<script defer>），不会阻塞 HTML 的解析。
(4) 布局和绘制
- 根据渲染树计算每个节点的布局（位置和大小）。
- 将内容绘制到屏幕上（绘制阶段）。
9. 触发加载完成事件
- 当所有资源（包括图片、JS 等）加载完成后，触发
window.onload事件。 - 如果只需 HTML 加载完成，则触发
DOMContentLoaded事件。
2.TCP的三次握手和四次挥手
三次握手的过程：
- 第一次握手：客户端向服务端发送连接请求报文，请求发送后，客户端便进入 SYN-SENT 状态
- 第二次握手：服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，发送完成后便进入 SYN-RECEIVED 状态
- 第三次握手：当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED(已建立的) 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功
为什么需要三次握手
三次握手之所以是三次，是保证client和server均让对方知道自己的接收和发送能力没问题而保证的最小次数。两次不安全，四次浪费资源
四次挥手的过程
当服务端收到客户端关闭报文时，并不会立即关闭，先回复一个报文，告诉客户端，"你发的FIN报文我收到了"。只有等到我Server端所有的报文都发送完了，我才能发送连接释放请求，因此不能一起发送。故需要四步挥手
为什么需要四次挥手
- TCP 使用四次挥手的原因，是因为 TCP 的连接是全双工的，所以需要双方分别释放掉对方的连接
- 单独一方的连接释放，只代表不能再向对方发送数据，连接处于的是半释放的状态
- 最后一次挥手中，客户端会等待一段时间再关闭的原因，是为了防止客户端发送给服务器的确认报文段丢失或者出错，从而导致服务器端不能正常关闭
3.CP和UDP的区别
相同点：UDP协议和TCP协议都是传输层协议
不同点：
- TCP 面向有连接； UDP：面向无连接
- TCP 要提供可靠的、面向连接的传输服务。TCP在建立通信前，必须建立一个TCP连接，之后才能传输数据。TCP建立一个连接需要3次握手，断开连接需要4次挥手，并且提供超时重发，丢弃重复数据，检验数据，流量控制等功能，保证数据能从一端传到另一端
- UDP不可靠性，只是把应用程序传给IP层的数据报发送出去，但是不能保证它们能到达目的地
- 应用场景
- TCP效率要求相对低，但对准确性要求相对高的场景。如常见的接口调用、文件传输、远程登录等
- UDP效率要求相对高，对准确性要求相对低的场景。如在线视频、网络语音电话等
4.浏览器缓存
浏览器缓存，也称Http缓存，分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。
强缓存
强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。强缓存中，当请求再次发出时，浏览器会根据其中的 expires 和 cache-control 判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与服务端发生通信。
Cache-Control 相对于expires更加准确，它的优先级也更高。当 Cache-Control 与 expires 同时出现时，我们以 Cache-Control 为准。
协商缓存
协商缓存依赖于服务端与浏览器之间的通信。协商缓存机制下，浏览器需要向服务器去询问缓存的相关信息，进而判断是重新发起请求、下载完整的响应，还是从本地获取缓存的资源。如果服务端提示缓存资源未改动（Not Modified），资源会被重定向到浏览器缓存，这种情况下网络请求对应的状态码是 304。
Etag 在感知文件变化上比 Last-Modified 更加准确，优先级也更高。当 Etag 和 Last-Modified 同时存在时，以 Etag 为准。
5.浏览器如何判断一个文件有没有缓存
浏览器通过解析HTTP头信息与遵循缓存策略，以及在不同缓存层级中查找，来确定一个文件是否已缓存以及是否需要更新。
- 如
Cache-Control、Expires、ETag和Last-Modified等。Cache-Control指示了资源的缓存规则（如最大缓存时间），而Expires指定了资源何时过期。ETag和Last-Modified用于验证已缓存内容的新鲜度。 - 当浏览器再次请求该文件时，会在请求头中包含
If-None-Match（对应ETag）和If-Modified-Since（对应Last-Modified）字段，让服务器判断文件是否已改变。如果没有改变，服务器会返回一个304 Not Modified响应，告诉浏览器使用本地缓存。 - 浏览器首先在内存缓存（memory cache）中查找，这是最快的数据访问层级。如果没找到，接着会在磁盘缓存（disk cache）中搜索。最后，如果在这些缓存中都找不到，才会发起网络请求。
6.强缓存返回的http状态码是多少
强缓存不会发出网络请求，所以没有状态码。如果资源是从强缓存中获取的，浏览器网络面板通常会显示状态码200（OK）。
7.设置强缓存后，万一我的数据要变，怎么重新获取
- 可以通过Ajax请求获取，并在每次请求时附带时间戳或随机参数，避免浏览器使用缓存的响应
- 结合使用
ETag或Last-Modified，即使资源被强缓存，浏览器也会在请求头中发送If-None-Match或If-Modified-Since字段，让服务器决定资源是否已改变。
8.重排和重绘
重绘（Repaint）：当页面中元素样式的改变不影响布局时，浏览器将只会重新绘制受影响的元素，这个过程称为重绘。例如，改变一个元素的背景色或文字颜色，但不影响其位置和大小，就会触发重绘。
回流（Reflow 或 Relayout）：也称为重排，当页面布局或几何属性发生变化时，浏览器需要重新计算元素的几何属性，并重新构建渲染树，这个过程称为回流。例如，改变元素的宽度、高度、位置等属性，或者添加、删除DOM节点，都会触发回流。
减少重绘和回流的方法
20.什么是跨域
跨域是因为浏览器的同源策略限制。所谓同源，指的是两个页面具有相同的协议（如http或https）、主机（域名或IP地址）和端口号。当这三个条件中任何一个不匹配时，就会触发跨域问题。
JSONP：利用标签不受同源策略限制的特性，通过动态插入标签来请求不同源的数据。JSONP只支持GET请求，并且需要在服务器端进行相应的配合。
cors：是解决跨域问题的常见解决方法，关键是服务器要设置Access-Control-Allow-Origin，控制哪些域名可以共享资源
origin是cors的重要标识，只要是非同源或者POST请求都会带上Origin字段，接口返回后服务器也可以将Access-Control-Allow-Origin设置为请求的Origin，解决cors如何指定多个域名的问题
Nginx：通过配置 Nginx 的反向代理功能来添加跨域响应头
21.WebSocket
WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议，WebSocket没有跨域的限制
相比于接口轮询，需要不断的建立 http 连接，严重浪费了服务器端和客户端的资源
WebSocket基于TCP传输协议，并复用HTTP的握手通道。浏览器和服务器只需要建立一次http连接，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
缺点
websocket 不稳定，要建立心跳检测机制，如果断开，自动连接
22.cookie和session区别
Cookie 和 Session 是在 Web 开发中常用的两种技术，主要用于存储用户信息并实现状态管理。两者的主要区别如下：
- 存储位置
Cookie存储在客户端浏览器中，由浏览器管理。
Session存储在服务器端，由服务器管理。
- 数据存储方式
Cookie数据以键值对的形式保存在客户端，可以直接通过浏览器查看或修改。
Session数据保存在服务器，客户端只保存一个唯一的 Session ID（sessionId），用来标识用户的会话。
- 数据安全性
Cookie数据存储在客户端，容易被篡改或窃取。
Session数据存储在服务器端，安全性较高。
- 数据大小限制
Cookie单个 Cookie 的大小一般限制为 4KB。每个域名最多可存储 20 个 Cookie。
Session没有固定的大小限制，取决于服务器的内存或存储空间。
- 数据有效期
Cookie可设置过期时间（Expires 或 Max-Age），如果未设置过期时间，则 Cookie 为会话级别，会在浏览器关闭时自动删除。
Session默认在用户会话结束（如关闭浏览器）时失效。服务器可以设置 Session 的超时时间，默认超时时间通常是 20-30 分钟。
使用建议
-
Cookie：
- 用于保存一些不太敏感、需要长期存在的数据，如用户偏好、购物车标识等。
- 注意通过
HttpOnly、Secure和SameSite属性来增强安全性。
-
Session：
- 用于存储敏感的用户信息，如登录状态、用户权限等。
- 搭配 HTTPS 使用，防止会话劫持。
两者通常结合使用：通过 Cookie 保存一个 sessionId，服务器通过这个 sessionId 找到对应的 Session 数据，从而实现安全的会话管理。
23. GET和POST有什么区别？
24. HTTP2相对于HTTP1.x有什么优势和特点？
HTTP/2相对于HTTP/1.x具有显著的优势和特点，主要体现在以下几个方面：
二进制分帧层：HTTP/2不再使用文本格式来传输数据，而是将所有传输的信息分割为更小的消息和帧（frame），并以二进制格式进行编码。这有助于更高效地解析HTTP消息，并减少了解析错误的可能性。多路复用：HTTP/2引入了多路复用技术，允许在单个TCP连接中并行处理多个请求和响应。这消除了HTTP/1.x中的队头阻塞问题，极大地提高了网络性能和资源利用率。头部压缩：HTTP/2使用了头部压缩技术，通过共享头部信息，可以显著减少传输的数据量。这有助于减少延迟和网络带宽的消耗，特别是在传输大量小请求时效果更为显著。服务器推送：HTTP/2允许服务器主动向客户端推送资源，而无需等待客户端的请求。这有助于减少往返时间，并提高网页加载速度。流量控制：HTTP/2通过流控制、消息控制和窗口控制等机制，实现了对流量的精细控制，有助于防止网络拥塞和资源浪费。
总的来说，HTTP/2相对于HTTP/1.x在传输效率、安全性、网络性能等方面都有显著的提升。这些优势使得HTTP/2成为现代Web应用中广泛采用的协议标准。
25. https是怎么保证安全的，为什么比http安全？
HTTPS之所以比HTTP更安全，主要是通过以下几种机制来保证其安全性：
加密传输：HTTPS使用SSL/TLS协议对HTTP报文进行加密，使得敏感数据在网络传输过程中不容易被窃听和篡改。这种加密过程结合了对称加密和非对称加密，确保数据的保密性和完整性。身份验证：HTTPS通过数字证书进行身份验证，确保通信双方的真实性。在建立HTTPS连接时，服务器会提供数字证书来证明自己的身份。如果验证通过，客户端就可以信任服务器，并继续与其进行安全的数据传输。这有效防止了被恶意伪装的服务器攻击。数据完整性保护：在传输数据之前，HTTPS会对数据进行加密，并使用消息摘要（hash）算法生成一个摘要值。在数据到达接收端后，接收端会使用相同的算法对接收到的数据进行摘要计算，并与发送端的摘要值进行比较。如果两者一致，说明数据在传输过程中没有被篡改。如果不一致，通信双方应重新进行验证或中断连接。
这些机制共同作用，使得HTTPS在数据传输、身份验证和数据完整性保护等方面都优于HTTP，从而提供了更高的安全性。因此，对于涉及用户个人隐私和敏感信息的网站，如银行、电商等，使用HTTPS协议可以有效保护用户的账号、密码等信息，提高用户信息的安全性。
26. http 与 https 默认端口号
- HTTP默认端口号：80
- HTTPS默认端口号：443
当客户端与服务器进行HTTP通信时，默认情况下会使用端口号80进行通信。例如，如果您在浏览器中输入 http://example.com, 则浏览器会默认使用80端口发送HTTP请求给服务器
而当客户端与服务器进行HTTPS通信时，默认情况下会使用端口号443进行加密通信。HTTPS通过使用SSL（Secure Sockets Layer）或TLS（Transport Layer Security）协议对通信进行加密和认证，以确保数据传输的安全性。例如，如果您在浏览器中输入 https://example.com, 则浏览器会默认使用443端口发送HTTPS请求给服务器
请注意，虽然这些是默认端口号，但是在实际应用中，可以通过显式指定不同的端口号来进行自定义配置。例如，有时会在非标准端口上部署HTTP或HTTPS服务，以满足特定的需求。
27. HTTP的状态码有哪些？并代表什么意思？
28.post请求为什么会多发送一次option请求
POST 请求前发送的 OPTIONS 请求实际上是 HTTP 的一种特性，称为“预检请求”（Preflight request）。这主要发生在跨域请求（CORS, Cross-Origin Resource Sharing）的场景中，尤其是当请求涉及一些可能不太安全的方法（如 PUT、DELETE 或 POST）或使用了一些自定义的 HTTP 头部时。
预检请求的目的是检查服务器是否允许来自不同源（域、协议或端口）的请求进行某些操作。这样做可以确保客户端在发送实际请求之前，先得到服务器的明确许可。
29. HTTP的keep-alive是干什么的？
HTTP的keep-alive，也称为HTTP长连接，是一种通过重用TCP连接来发送和接收多个HTTP请求的机制。其主要作用包括：
减少连接建立开销：在没有keep-alive的情况下，每次HTTP请求都需要经过TCP三次握手建立连接，这会导致较大的延迟和资源消耗。而使用keep-alive，可以在一个TCP连接上发送多个HTTP请求，从而减少了建立连接的开销。降低网络负载：每次建立和关闭连接时，都会消耗网络带宽和服务器资源。通过保持持久连接，可以减少连接的频繁建立和关闭，从而降低了网络负载和服务器负载。提高性能和响应时间：由于避免了连接建立和关闭的开销，keep-alive可以提高请求的响应时间和整体性能。客户端可以在同一个连接上连续发送请求，而服务器也可以在保持连接的情况下更快地响应这些请求。支持HTTP管道化：HTTP管道化是允许客户端在同一TCP连接中连续发送多个请求而无需等待每个请求的响应的技术。当与keep-alive结合使用时，可以进一步提高性能。
需要注意的是，keep-alive机制在HTTP/1.0和HTTP/1.1协议中都有支持。在HTTP/1.0中，需要在请求头中显式添加“Connection: keep-alive”来启用该机制；而在HTTP/1.1中，keep-alive是默认启用的。
总的来说，HTTP的keep-alive机制通过重用TCP连接和优化请求处理流程，提高了HTTP通信的性能和效率。
30. web安全攻击方式及防御方法
跨站脚本攻击 (XSS)：攻击者通过在页面注入恶意脚本，使之在用户的浏览器上运行。
攻击的几种方式
1）常见于带有用户提交数据的网站功能，如填写基本信息、论坛发帖、商品评论等；在可输入内容的地方提交如<script>alert('XSS')</script>之类的代码
XSS 的恶意代码存在数据库里，浏览器接收到响应后解析执行，混在其中的恶意代码也被执行
2）用户点击http://xxx/search?keyword="><script>alert('XSS');</script>，前端直接从url中将keyword后的参数取出来，并显示到页面上，但是没有做转义，就造成了XSS攻击。
防御方法：
1）前端尽量对用户输入内容长度控制、输入内容限制（比如电话号码、邮箱、包括特殊字符的限制）
2）服务器对前端提交的内容做好必要的转义，避免将恶意代码存储到数据库中，造成存储性xss攻击
3）前端对服务器返回的数据做好必要的转义，保证显示到页面的内容正常
跨站请求伪造 (CSRF)
csrf的攻击原理：
诱导受害者进入钓鱼网站，在钓鱼网站中利用你在被攻击网站已登录的凭证（凭证存在cookie中），冒充用户发送恶意请求，这些请求因为携带有用户的登录信息，会被服务器当做正常的请求处理，从而使你的个人隐私泄露或财产损失
csrf的攻击过程：
1）受害者登录A站点，并保留了登录凭证（Cookie）
2）攻击者诱导受害者访问了站点B
3）站点B向站点A发送了一个请求，浏览器会默认携带站点A的Cookie信息
4）站点A接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者发送的请求
5）站点A以受害者的名义执行了站点B的请求，攻击完成，攻击者在受害者不知情的情况下，冒充受害者完成了攻击
CSRF的攻击的必要条件：
1）用户已登录过某网站，并且没有退出，登录信息存储在cookie中（发送请求时，浏览器会自动在请求头上带上要请求域名的cookie）
2）在不登出A的情况下，访问危险网站B
防御方法：
1）根据攻击的原理可以看出，csrf通常是跨域请求（从钓鱼网站B发送请求网站A的请求），请求头上的Referer或origin字段可以判断请求的来源，如果服务器判断请求的域名不在白名单中，就拒绝对应的请求
2）添加token验证：CSRF攻击之所以能够成功，是因为用户验证信息都存在cookie中，攻击者可以完全伪造用户的请求。从请求头或请求参数中添加用户的token用来验证用户，如果请求没有或token不对，就拒绝对应的请求
3）验证码：对于转账或支付的环节，强制用户必须与应用进行交互，才能完成最终请求
31.浏览器存储数据方式有哪些
浏览器存储是指浏览器在本地计算机上保存数据的方式，以便在用户访问网站时能够更快地加载内容，提供更好的用户体验。浏览器存储主要有以下几种方式：
Cookie：Cookie是一种小型的文本文件，存储在客户端的浏览器中。它主要用于存储用户的身份认证、会话状态等信息。Cookie的大小通常受到浏览器和服务器的限制，一般不超过4KB。每次向同一个域名下发送请求时，都会携带相同的Cookie，这样服务器就能识别客户端的身份信息。然而，由于Cookie的大小限制，它只能用来存储少量的信息。Web Storage：Web Storage是HTML5引入的一种新的存储方式，主要包括Local Storage和Session Storage两种类型。- Local Storage：这种存储方式类似于电脑或手机上的下载功能，可以永久保存数据。除非用户主动删除，否则数据会一直存在。
- Session Storage：与Local Storage不同，Session Storage只在当前会话下有效。当页面关闭时，存储的数据就会被删除。这种方式常用于存储一些临时性的信息，如网页微博之类的密码保存。
IndexedDB：IndexedDB是一种浏览器本地数据库，可以在客户端浏览器中存储大量的结构化数据。它支持事务操作、索引查询等功能，存储空间相对较大，通常限制为几百MB到几GB。与Web Storage相比，IndexedDB的存储方式更为复杂，但提供了更强大的数据操作能力。
总的来说，浏览器存储提供了多种方式来保存数据，以便在用户访问网站时提供更好的体验。不同的存储方式有各自的特点和适用场景，开发者可以根据实际需求选择适合的存储方式。
