浏览器工作原理（渲染流程/事件循环/存储机制）

一、渲染流程

页面的渲染过程主要包括以下几个阶段

1、解析HTML和构建DOM树

- 浏览器将HTML字节流转换为Token，最终生成DOM树

遇见<script>标签时会阻塞解析

<!-- 阻塞解析 -->
<script src="app.js">

<!-- 异步加载，不阻塞解析 -->
<script async src="app.js">

<!-- 延迟执行，等解析完成后执行-->
<script defer src="app.js">

- css规则解析为CSSDOM

2、渲染树构建

- Attachment阶段：DOM+CSSDOM生成渲染树（Render Tree）

非可视节点（如display:none）不会加入渲染树

伪元素(如::before)会包含在渲染树中

3、布局（Layout/Reflow）

- 计算元素在视口中的精确位置和尺寸，布局发生变化浏览器需要重新计算

4、绘制（Paint）

- 将布局结果转换为屏幕上的实际像素

分层绘制：浏览器将页面分为多个图层（Layers）优化渲染

5、合成（Composite）

- 将各图层合并为最终屏幕图像

二、事件循环

1、调用栈（Call Stack）

JavaScript执行代码的地方，采用“后进先出”原则

2、任务队列

- 宏任务：script脚本、setTimeout、stInterval、UI渲染、I/O操作

- 微任务：peomise.then、process.nextTick

3、事件循环机制执行顺序

- 执行完调用栈所有同步代码

- 清空微任务队列

- 执行渲染更新（如有需要）

- 取宏任务队列首项执行

重复以上步骤

三、存储机制

存储类型	容量	生命周期	访问范围	场景
Cookie	4KB	可设置过期时间	同源	会话管理、用户标识
LocalStorage	510MB	永久储存	同源	持久化数据（如主题）
SessionStorage	510MB	标签页关闭失效	同源且同标签页	临时表单数据
IndexedDB	无硬性限制	永久存储	同源	大型结构化数据

//cookie
//设置
const d=new Date()
d.setDate(d.getDate()+3)//三天后过期
document.cookie="name=lily;expires="+d
//获取
const msg=document.cookie
//删除 设置一个过期时间
document.cookie="name=lily;expires=Thu, 01 Jan 1970 00:00:01 GMT;"

//localStorage
localStorage.setItem("username","lily")//设置
const msg=localStorage.getItem("username")//获取
localStorage.removeItem("username")//删除
localStorage.clear()//清除

//sessionStorage
sessionStorage.setItem("username","lily")//设置
const msg=sessionStorage.getItem("username")//获取
sessionStorage.removeItem("username")//删除
sessionStorage.clear()//清除

设置：document.cookie="name=value"

四、网络请求机制

1、HTTP请求生命周期

- DNS解析

- 建立TCP连接：客户端与目标服务器的IP地址建立TCP连接，使用三次握手确保连接可靠；如果是HTTPS请求，还会进行TLS/SSL握手，建立安全加密通道

- 构造HTTP请求：确定使用的请求方法（post、get等），设置必要元信息（Host、User-Agent、Accept等）

- 服务器接收请求并响应

ps：在请求头中设置 Connection:kepp-alive 可以复用TCP连接，减少网络延迟

2、状态码

- 200 OK：标准响应表示请求成功

- 400 Not Found：未找到请求的资源

- 500 Internal Server Error：服务器内部错误，无法完成请求

3、缓存策略

- 强缓存（优先级高）

缓存有效期内，浏览器不会像服务器发送请求，而是直接在本地缓存中读取数据。所以早缓存有效期内，浏览器与服务器之间不会发生任何交互

通过设置响应头的Cache-Control（max-age=n秒）和Expires（GMT）控制资源的缓存时间

- 协商缓存

每次请求都会与服务器进行交互。浏览器会向服务器发送请求，询问资源是否更新

设置ETag和Last-Modified

五、安全机制

1、同源策略（SOP）

限制范围：Cookie、DOM、AJAX请求

跨域处理：jsonp（过时）、iframe、postMessage（HTML5）、CORS（后端）、WebSocket、Nginx、脚手架服务器（vite.config.ts设置代理）

export default defineConfig(()=>{
    return {
        server:{
            proxy:{
                "/dev":{
                    #代理目标地址
                    target:"http://locahost:3000",
                    #跨域
                    changeOrigin:true,
                    reerite:(path)=>path.replace(/^/dev/,"")
                }
            }
        }
    }
})

2、XSS攻击

向web页面注入恶意脚本，用户浏览时该代码被执行，从而达到恶意攻击目的

防范措施

输入验证：对于用户提交的数据进行验证，只接受指定格式数据，禁止特殊字符键入

避免将用户输入内容拼接到html标签

设置cookie的HttpOnly：js无法读写cookie

内容安全策略（CSP）：指定允许加载资源的来源

<meta 
    http-equiv="Content-Security-Policy" 
    content="default-src 'self'; script-src 'unsafe-inline'"
>
//default-src：定义针对所有类型资源的默认加载策略
//script-src：指定浏览器信任的script来源
//object-src、style-src、child-src等都可以定义

使用框架：react、vue等框架内置了XSS防护机制

3、CSRF（跨站请求伪造）攻击

利用用户在已登录网站上的身份，向改网站发送恶意请求，从而执行未授权的操作

防范措施

同源策略：HTTP头信息中的Referer表示HTTP请求的来源地址，后端可以根据Referer来源域名。但Referer有可能会被篡改

CSRF Token：用户登录后，服务器生成一个随机令牌，每次请求时验证其有效性

添加验证码：在必要场景添加随机验证码

4、页面劫持

通过篡改http返回的数据，向用户展示恶意内容或窃取用户信息

防范措施

https：使用https加密数据传输，防止数据在传输过程中被恶意篡改

CSP（内容安全策略）：设置Content-Security-Policy 'self’表示只允许同源站点嵌入‌，防止恶意脚本

监听DOM：用MutationObserver等API监听DOM的修改

六、优化策略

1、减少HTTP请求

合并资源：将多个CSS/JS文件合并，减少请求次数（使用webpack打包）

雪碧图（Sprites）：合并小图标为一张大图，通过CSS定位显示（维护复杂，不常用）

2、代码分割和懒加载

按需加载：通过动态import()分割代码，仅加载当前页面所需模块

图片/组件懒加载：当资源进入可视范围再加载（如使用IntersectionObserver ）

const observer = new IntersectionObserver((item)=>{
    item.forEach(v=>{
        if(v.isIntersecting)
        //元素进入视口时实行的操作
    })
}) 

const targetEle=documen.querySelector('.target')
observer.observer(targetEle)

3、预加载关键资源

使用<link rel="preload">提前加载首屏资源，如字体、关键CSS等

4、减少重排和重绘

避免频繁操作DOM，批量修改样式

使用transform和opacity实现动画

5、优化CSS和JS加载顺序

CSS置顶：防止页面无样式闪烁，有限渲染内容

JS置底或异步加载：使用async或defer避免阻塞渲染

6、虚拟列表和按需渲染

进渲染可视区域内容，适用于长列表场景