前端实习八股整理-浏览器原理

浏览器原理

一、从输入URL开始到我们看到页面都发生了什么，越详细越好。

1.解析URL：分析需要使用的传输协议和请求资源的路径。如果输入的URL的协议名或主机名不合法，内容传给搜索引擎。如果有非法字符，先进行转义。
2.缓存判断：如果请求的资源在缓存里且没有失效则直接使用，否则向服务器发起新请求。
3.DNS解析：（获取域名的IP地址）首先判断本地服务器缓存是否有该域名的IP，然后向本地DNS服务器发起请求，缓存里也没有的话向根域名服务器发起请求，获得顶级域名服务器的地址后再发起请求，获得权威域名服务器后再发起请求得到IP，本地DNS服务器把IP返回给用户。用户->本地DNS域名服务器（递归请求），本地DNS服务器->各级域名服务器（迭代请求）。【获取就近的cdn服务器地址：智能DNS解析和地理位置定位】
4.获取MAC地址：将IP地址与本机子网掩码相与，判断是否有与请求主机再同一个子网里，如果是，用ARP获取MAC地址；否则，请求转发给网关代为转发，此时同样用ARP获取MAC地址，目的MAC地址为网关的地址。
5.TCP三次握手：首先客户端向服务器发送一个SYN（Synchronize Sequence Numbers，同步序列号）连接请求报文段和一个随机序号，服务端收到请求后向客户端发送一个SYN ACK报文段和一个随机序号，确认连接请求。客户端收到确认应答后，进入连接建立的状态，同时向服务器发送一个ACK确认报文段，服务器端收到确认后也进入连接建立状态。
6.HTTPS握手：（TLS四次握手）首先由客户端向服务器端发送使用协议的版本号、一个随机数和可使用的加密方法。服务器端收到后，确认加密的方法，发送一个随机数和自己的数字证书。客户端先检查数字证书是否有效，有效的话生成一个随机数，并用证书中的公钥对随机数加密后发给服务器端，还有一个前面所有内容的hash值供服务器检验。服务器端使用私钥对数据进行解密，同时向客户端发送一个前面所有内容的hash值供检验。这时候双方都有了三个随机数，按照之前约定的方法将三个随机数生成一把私钥，以后通信前用这个私钥将数据加密后再传输。
7.服务器响应html，返回数据：当前页面请求发到服务端后，服务端会返回一个html文件。这里的服务端可能是server或者是cdn（内容分发网络，可用来加快传输速度，主要用来存储静态文件，例如前端的html、css、js、图片文件等）。服务器上可能会通过nginx等设置静态资源代理，将url对应的html等静态资源返回。如果网站是博客或者其他需要seo友好的页面，就需要做服务端渲染，这时服务器会根据模版和数据渲染好html文件返回给前端。常见的服务端渲染方案有：ejs、art-template、等模版语法，也有基于vue、react等框架的服务端渲染框架nuxt.js及next.js等。
8.页面渲染：【解析HTML】首先根据HTML文件构建DOM树，【解析CSS】根据css创建CSSOM树，【JavaScript执行】遇到script标签要注意（没有defer或async属性的话会造成页面渲染的阻塞）。【构建渲染树】用DOM树和CSSOM树构建渲染树，【布局】根据渲染树计算每个元素的位置和大小生成布局树，布局变化会触发重排，重新计算布局。【绘制】浏览器将布局树转换为绘制指令，描述如何绘制每个元素，样式变化会触发重绘，重新生成绘制指令。【合成】浏览器将页面分为多个图层，分别绘制后再进行合成为最终页面，显示在屏幕上。【事件处理】用户操作会触发事件，浏览器执行相应的事件处理程序。
9.TCP四次挥手：客户端认为数据发送完成，向服务器发送连接释放请求。服务端接受请求，告诉应用层要释放TCP连接，然后发送ACK包，进入CLOSE_WAIT状态。表明客户端到服务端的连接已经释放不再接受客户端数据（服务端仍可以发送）。服务器端发送完毕后向客户端发送链接释放请求，进入LAST_ACK状态。客户端收到请求，发送确认应答，进入TIME_WAIT状态。该状态持续2MSL时间，这段时间内没有收到服务端的重发请求的话，进入CLOSED状态。服务端收到确认应答后也进入CLOSED状态。

二、浏览器的渲染过程

浏览器的渲染过程是将HTML、CSS和JavaScript代码转换为用户可见页面的过程，主要包括以下步骤：

1. 解析HTML

• 构建DOM树：浏览器解析HTML文档，生成DOM（文档对象模型）树，表示页面结构。
• 遇到外部资源：如CSS、JavaScript、图片等，浏览器会并行下载这些资源。

2. 解析CSS

• 构建CSSOM树：浏览器解析CSS文件，生成CSSOM（CSS对象模型）树，表示样式信息。
• 阻塞渲染：CSS解析会阻塞页面渲染，直到CSSOM构建完成。

3. 构建渲染树

• 合并DOM和CSSOM：将DOM树和CSSOM树结合，生成渲染树，包含所有可见元素及其样式。
• 忽略不可见元素：如、display: none等元素不会出现在渲染树中。

4. 布局（Layout）

• 计算几何信息：浏览器根据渲染树计算每个元素的位置和大小，生成布局树。
• 重排（Reflow）：布局变化（如窗口调整）会触发重排，重新计算布局。

5. 绘制（Paint）

• 生成绘制指令：浏览器将布局树转换为绘制指令，描述如何绘制每个元素。
• 重绘（Repaint）：样式变化（如颜色）会触发重绘，重新生成绘制指令。

6. 合成（Compositing）

• 分层绘制：浏览器将页面分为多个图层，分别绘制。
• 合成图层：将所有图层合成为最终页面，显示在屏幕上。

7. JavaScript执行

• 阻塞DOM和CSSOM构建：JavaScript执行会阻塞DOM和CSSOM的构建，除非标记为异步（async或defer）。
• 操作DOM/CSS：JavaScript可以修改DOM或CSSOM，触发重排或重绘。

8. 事件处理

• 用户交互：用户操作（如点击）会触发事件，浏览器执行相应的事件处理程序。

优化建议

• 减少重排和重绘：避免频繁操作DOM或样式。
• 使用CSS动画：优先使用CSS动画而非JavaScript动画。
• 异步加载JavaScript：使用async或defer减少阻塞。

三、浏览器缓存策略

1.强缓存：不需要向服务器发送请求，直接试用本地缓存。

通过HTTP响应头中的Cache-Control（以秒为单位表示资源有效期）【优先级更高】、Expires（指定资源的绝对过期时间）控制。

2.协商缓存：需要向服务器发送请求验证资源是否有效。返回304用本地缓存，返回200更新资源。
通过HTTP响应头：last-Modified/if-Modified-Since:基于文件最后修改时间；ETag/If-None-Match:基于文件内容哈希值

最佳实践：HTTP：协商缓存；CSS、JS、图片：强缓存；API请求：看业务需求。

内存缓存：频繁访问、实时处理、临时数据
硬盘缓存：不频繁反问、大容量数据、持久化存储

四、XSS攻击

XSS攻击指的是跨站脚本攻击，是一种代码注入攻击。
反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库⾥，反射型 XSS 的恶意代码存在 URL ⾥。

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执⾏恶意代码由浏览器端完成，属于前端JavaScript ⾃身的安全漏洞，⽽其他两种 XSS 都属于服务端的安全漏洞。

五、如何防御XSS攻击

1.从浏览器的执行来预防：纯前端，不使用服务器渲染；对插入到HTML中的代码做好充分的转义，对可能出现的恶意代码情况进行判断。【HTML 实体编码：是一种在 HTML 文档中表示特殊字符的方法。HTML 实体编码允许你在 HTML 文档中安全地嵌入那些可能与 HTML 标签或属性发生冲突的字符，例如 <、>、&、" 和 ’ 等】【Vue无论是使用模板还是渲染函数，内容都是自动转义的。这种转义是使用 textContent 这样的浏览器原生 API 完成的，所以只有当浏览器本身存在漏洞时，才会存在漏洞。】

方案一：针对文本内容（Text Content）：
1.使用双花括号 { { }} 插值：Vue默认会对双花括号中的内容进行HTML转义。
2.使用 v-text 指令
3.v-html 是危险的，因为它会直接将字符串作为HTML解析，是XSS的根源。（不要使用！！！）

方案二：使用DOMPurify库（当需要渲染富文本时）
有时你可能确实需要显示用户输入的HTML内容（例如，一个允许用户使用Markdown或简单格式的应用）。在这种情况下，你必须先净化（Sanitize） HTML。
在Vue组件中使用：

<script setup>
import DOMPurify from 'dompurify';

const props = defineProps({
     
     
  message: Object
});