浏览器相关

浏览器地址栏输入 url 到显示

经历的过程

URL 解析 → DNS 解析 → 建立 TCP/HTTPS 连接 → 发送 HTTP 请求 → 服务器响应 → 浏览器解析与渲染

浏览器地址栏输入 URL 后， 浏览器先解析 URL，进行 DNS 解析获取 IP 地址， 然后通过 TCP 三次握手（HTTPS 还会进行 TLS 握手）建立连接， 接着发送 HTTP 请求，服务器返回响应数据， 浏览器解析 HTML 构建 DOM 树，解析 CSS 构建 CSSOM 树， 合并生成 Render Tree， 经过 Layout、Paint、Composite， 最终将页面渲染到屏幕上。

  1. 解析 (协议：https),主机名：www.example.com,端口：443（https 默认）,路径：/path,查询参数：?name=xx,hash：#hash（不会发给服务器）

  2. DNS 解析（域名 → IP）浏览器 DNS 缓存, 操作系统 DNS 缓存,路由器缓存,本地 DNS 服务器（ISP）

  3. 建立 TCP 连接（三次握手/四次挥手）

  4. 服务器处理并返回响应

  5. 浏览器解析 HTML /构建 CSSOM Tree /生成 Render Tree

页面重绘/回流

回流（Reflow / Layout） 元素的几何信息发生变化，浏览器必须重新计算布局 👉 浏览器重新计算元素的位置和尺寸（很贵）宽高 /位置/盒模型/是否占位

重绘（Repaint） 👉 外观变了，但位置大小没变（相对便宜） color background visibility border-color outline box-shadow

既不回流也不重绘的「最优级操作」 transform opactity

操作回流重绘
改 width / height✅✅
改 color❌✅
display:none✅✅
visibility:hidden❌✅
transform❌❌
opacity❌❌
读 offsetWidth✅❌

http与https区别

  • HTTP：明文传输的超文本传输协议，不加密、不校验身份，容易被窃听和篡改。

  • HTTPS：在 HTTP 之上加了 TLS/SSL，实现加密、身份校验和完整性校验，是“HTTP + 加密 + 证书”。

对比维度HTTPHTTPS
全称HyperText Transfer ProtocolHTTP over TLS/SSL（或 Secure HTTP）
默认端口80443
传输方式明文加密（对称 + 非对称）
安全性无加密，易被窃听、篡改、冒充加密 + 身份验证 + 完整性校验
是否需要证书不需要需要（CA 签发或自签名）
握手/性能无加密握手，相对更快有 TLS 握手，略慢、多一次 RTT
SEO搜索引擎可能降权有利于 SEO
协议层应用层应用层 + TLS（介于应用层和传输层之间）

HTTPS（简化）：

  1. 客户端请求 HTTPS（如 https://example.com）
  2. 服务器返回证书（含公钥）
  3. 客户端验证证书（是否可信、是否过期、域名是否匹配）
  4. 客户端用证书里的公钥加密“预主密钥”，发给服务器
  5. 服务器用私钥解密，得到预主密钥
  6. 双方用预主密钥推导出相同的对称密钥
  7. 后续用对称密钥加密/解密应用层数据（HTTP）

HTTPS 的加密过程是怎样的？

  • 先通过 非对称加密（如 RSA、ECDHE）安全交换“预主密钥”。

  • 再用预主密钥生成 对称加密密钥（如 AES）。

  • 实际传输的数据 用对称加密；非对称只用在握手阶段，避免性能问题。

什么是中间人攻击？HTTPS 如何防范？

  • 加密后中间人看不到明文；

  • 证书校验保证你拿到的公钥确实属于该域名，防止被替换成攻击者的公钥。

  • 若证书不被信任（如自签名、被篡改），浏览器会告警，用户不应继续访问。

为什么需要证书？只用加密不行吗？

  • 若只加密不校验身份：中间人可以自己生成一对密钥，分别和客户端、服务器建立连接，转发并解密再加密，仍然能窃听和篡改（中间人攻击）。

  • 证书 的作用：把“服务器公钥”和“域名、组织”绑定，并由可信 CA 签名，让客户端能确认“这个公钥确实属于我要访问的域名”，从而防止公钥被替换。

  • 所以：加密保证机密性，证书保证你加密的对象是正确的服务器。

浏览器事件循环机制

事件循环（Event Loop） 是浏览器（或 JS 引擎）用来协调「执行 JS 代码」「处理用户/事件」「渲染页面」的机制：在单线程下，通过「执行栈 + 任务队列」不断取任务执行，实现“非阻塞”的异步行为。 可以理解为（事件循环用来在单线程下协调同步和异步任务。）

执行时，同步代码在调用栈里执行；异步任务（如定时器、Promise）在就绪后会把回调放进任务队列。任务队列分为宏任务（如 setTimeout、setInterval、I/O）和微任务（如 Promise.then、queueMicrotask、MutationObserver）。

每一轮事件循环大致是：执行一个宏任务（包括里面的同步代码）→ 清空当前微任务队列（包括微任务里再产生的微任务）→ 如需渲染则渲染 → 再取下一个宏任务。所以微任务总在当前宏任务之后、下一个宏任务之前全部执行完。

因此像 Promise.then 会先于同轮的 setTimeout 回调执行，这就是事件循环里宏任务和微任务顺序的体现。”

核心组成部分

  1. 调用栈（Call Stack）

  • 作用：正在执行的同步代码（函数调用）按顺序入栈、执行完出栈。

  • 特点：一次只执行栈顶；栈空表示当前同步代码执行完毕。

  1. 堆（Heap）
  • 存放对象等引用类型数据，和“执行顺序”无直接关系。
  1. 任务队列（Task Queue / Message Queue）

  • 存放已经就绪、等待被主线程执行的回调。

  • 分为：

  • 宏任务队列（Macro Task）

  • 微任务队列（Micro Task）

事件循环就是：在调用栈为空时，按规则从任务队列里取任务，放进调用栈执行。

浏览器攻击防御

  1. 跨站脚本攻击(XSS) 攻击者在网页中注入恶意的 JavaScript 代码，进而窃取用户数据、劫持用户会话或执行未授权的操作
  2. 跨站请求伪造 (CSRF) 攻击者诱导用户访问恶意网站，向受信任的网站发送伪造的请求，利用用户的身份认证执行未授权操作。
  3. 点击劫持 通过在恶意网站上嵌入一个透明的 iframe 来覆盖原始网站，诱导用户点击看不见的按钮或链接，从而执行未授权的操作。
  4. HTTP参数污染
  5. 内容注入攻击
最近更新:
Contributors: milly980810@gmail.com, weak