浏览器原理

  1. 浏览器缓存

    浏览器的缓存分为强缓存和协商缓存，缓存流程如下

    1. 在浏览器第一次请求资源的时候，根据服务器的响应头决定是否将资源存入本地缓存
    2. 浏览器再次请求同一资源，先检查本地缓存
    3. 检查强缓存字段：Cache-control和expires
      1. 若缓存未过期直接使用本地缓存返回200
      2. 若过期则判断协商缓存
    4. 检查协商缓存：浏览器向服务器发起请求并携带If-None-Match和 If-modified-since
    5. 服务器判断资源是否有更新
      1. 更新则返回新资源和200
      2. 未更新则返还304，浏览器直接使用本地缓存

    浏览器缓存字段有

    1. 强缓存
      1. Expires，HTTP1.0,依赖于客户段时间
      2. Cache-Control: HTTP 1.1,相对过期时间，多种组合
        1. max-age: 相对于请求时间的秒数
        2. s-maxage: 只适用于公共缓存服务器
        3. public：可以被任何节点缓存
        4. private：只给客户端缓存
        5. no-cache:强制协商缓存
        6. no-store:不缓存（敏感信息）
    2. 协商缓存
      1. Last-Modifed / If-Modified-Since
      2. ETag / If-None-match

  2. 从输入URL到页面呈现

    1. 浏览器请求响应：
    2. 浏览器新建一个进程（tab）：浏览器是多进程的，一个进程又有多个线程，比如GUI渲染线程，JS线程。GUI线程和JS线程互斥
    3. 检查输入的url是搜索关键字还是url规则，然后组装成完整url
    4. 检查本地强缓存是否可用，如果可用就从缓存中返回资源
    5. DNS解析，如果强缓存不可用，进行dns解析，通过递归和迭代来解析域名得到ip地址
    6. 3次握手建立tcp连接
    7. 发送http请求携带cookie和缓存标识
    8. 网关可能有一系列的负载均衡处理，然后通过反向代理分配到对应服务器
    9. 服务器返回响应，先判断协商缓存
    10. 浏览器收到http响应之后根据connection:keep-alive来判断是四次挥手断开tcp连接还是保留
    11. 浏览器缓存缓存标识字段
    12. 浏览器解析并渲染：
    13. 解析html文档构建dom树
    14. 碰到样式时会异步下载，下载完成后构建CSSOM树
    15. 遇到不带 defer / async的script，会阻止解析并进行下载和执行
    16. 根据CSSOM和dom构建渲染树
    17. 布局：根据渲染书将dom布局在屏幕上
    18. 绘制：绘制所有节点和他们的样式
      1. 对布局树进行分层生成图层树
      2. 将图层拆分成绘制指令提交到合成线程
      3. 栅格化生成位图：用户只能看到视口这部份，会先从视口附近的图块优先生成位图
      4. 图块全部栅格化之后浏览器绘制显示

  3. 浏览器安全

  4. XSS攻击：嵌入 js 脚本
    1. 存储型：脚本提交到了数据库，在客户端被执行。评论区
    2. 反射型：脚本作为url参数。常见于搜索/登录
    3. 文档型：脚本作为url参数。浏览器执行
    4. 防范措施：转义和过滤，cookie设置HttpOnly，使用CSP

  5. CSRF跨站请求伪造：诱导用户跳转恶意网站，原理就是http请求会自动携带 Cookie
    1. 防范：设置SameSite Cookies,CSRF Token,验证Referer（可被伪造）

  6. SQL注入

  7. 点击劫持：X-FRAME-OPTIONS

  8. 跨域

  9. 浏览器同源策略：只有协议、域名、端口都相同才是同源。同源策略限制了客户端 js 的部分行为，比如访问 cookie，操作dom和ajax请求

  10. 处理跨域的方式
    1. CORS
    2. jsonp
    3. postMessage

  11. html渲染时遇到script标签会怎么样

  12. 暂停解析html

  13. 如果script标签有src属性，会向服务器发起请求来下载，如果没有的话直接执行里面的内容

  14. 执行脚本

  15. 恢复解析 html

  16. script 的 async 和 defer属性

  17. async : 异步下载脚本，不会暂停解析 html，当下载完成时会立马执行，如果html未解析完成则会中断html解析

  18. defer : 异步下载脚本，并且不会暂停解析html，脚本的执行会推迟到html文档解析完成之后，DOMContentLoaded 事件触发之前，多个脚本保证执行顺序

  19. 跨域的表现

  20. 对于复杂请求，浏览器会发送OPTIONS 请求进行预检，如果服务器拒绝则会报错不进行后续

  21. 无论简单请求还是通过预检的复杂请求，浏览器都会向服务端发送请求

  22. 收到服务端响应后浏览器检查响应中Access-Control-Allow-Origin
    1. 如果没有或不匹配，则抛出错误，网络层面已完成，但是js读不到响应
    2. 如果匹配则放行

  23. 简单请求和复杂请求

  24. 简单请求

  1. 方法：`get` ``post`` ``head``
  2. 请求头：``Accept`` ``Accept-Language``...
  3. Content-Type值：``application/x-www-form-urlencoded`` ``multipart/form-data`` ```text/plain```
  4. 直接看响应头的 cors 头来处理
  1. 复杂请求
  1. 发送 options 请求进行预检
  
  2. options请求会响应 method，headers，origin
  
  3. 浏览器进行检查，如果检查通过才发送真正的请求
  1. CSSOM和DOM如何合成渲染树

浏览器会遍历dom树上的所有可见节点，并把他们与cssom树上的对应样式规则进行匹配

  1. 遍历dom树：从dom树的根节点开始，自上而下的遍历

  2. 过滤不可见节点：head标签，display:none 的元素

  3. 匹配样式：对于每一个可见的dom节点，浏览器会在cssom中寻找匹配的样式规则并应用到这个节点上

  4. 构建渲染树：将可见的dom节点和计算后的样式合并，生成一个新节点，这个新节点就是渲染树上的一个渲染对象

  5. 打开新页面的时候如何传递数据

    1. 构造url参数
    2. 本地存储
    3. window.open的情况下可以使用postMessage
    4. Service Worker
感谢您的支持 | Thank you for supporting
document
#面试 #八股 #前端
浏览器原理
http://example.com/2025/10/17/4BrowserPrinciples/
作者
Eli Bi
发布于
2025年10月17日
更新于
2025年10月20日
许可协议