跳到主要内容

谈谈浏览器相关原理

谈谈浏览器渲染​

浏览器渲染，也就是渲染HTML过程

构建DOM树 -> 构建渲染树 解析css -> 布局渲染树 -> 绘制渲染树 -> 绘制页面呈现出来

  • 1、解析html构建dom树
  • 2、解析css构建render渲染树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）
  • 3、布局render树（Layout/reflow），负责各元素尺寸、位置的计算
  • 4、绘制render树（paint），绘制页面像素信息
  • 5、渲染树创建好了，浏览器就可以根据渲染树把页面绘制到屏幕上。
    • 渲染好的东西绘制页面上面去显示给用户

谈谈CPU和GPU​

CPU​

  • 中央处理器，负责处理页面逻辑运算、渲染页面、执行脚本任务等情况
  • CPU 的性能直接影响网页的加载载速度、响应速度
  • 减少不必要的计算和操作可以提高 CPU 的性能

GPU​

  • 图形处理器，负责处理图形和图像以及视频相关的，比如渲染图形、渲染3D、处理视频、动画效果、游戏性能等方面
  • GPU对于处理视觉效果是有很好的性能
  • 每个 GPU 的核心可以并行处理多个任务，因此 GPU 在处理大量图形和图像时具有优势的

谈谈浏览器输入 URL 到页面加载完成发生了什么​

  • 将域名解析成 IP 地址
  • TCP 连接：TCP 三次握手
  • 向服务器发送HTTP请求
  • 服务器处理请求并返回 HTTP响应
  • 浏览器渲染 : 解析渲染页面
    • 构建dom树 -> 渲染渲染树 -> 布局渲染树-> 绘制渲染树
  • 断开连接：TCP 四次挥手