浏览器渲染流程

kikii9
119 阅读3分钟

渲染流程

浏览器中的进程

  • 浏览器主进程 负责界面显示、用户交互、子进程管理，同时提供存储等功能

  • 渲染进程

    核心任务： 将HTML、CSS、JavaScript转换为用户可以与之交互的网页 排版引擎Blink和JavaScript引擎V8都是运行在该进程中 chrome会为每个tab标签创建一个渲染进程 出于安全考虑，渲染进程都是运行在沙箱模式下，无法访问系统资源

  • GPU进程 使用初衷：实现3D CSS的效果

  • 网络进程 主要负责网络资源加载

  • 插件进程

浏览器中的线程

渲染进程中的线程

  1. GUI渲染线程

    负责渲染浏览器界面，解析HTML、CSS、构建DOM树和RenderObject树，布局和绘制等 界面需要重绘（Repaint）或由于某种操作引发回流（reflow）时，该线程就会执行

重绘:当页面上一些元素的样式发生改变（颜色、边框等属性），位置、大小不变，此时浏览器只需要重新绘制这些元素的外观即可
回流:当页面时的元素布局发生改变（位置、大小、字体等属性，或者增加、删除了元素），浏览器需要重新计算每个元素的位置和大小，然后重新布局整个页面

一些常见的会触发回流和重绘的操作：
    - 修改DOM元素的样式属性
    - 修改DOM元素的结构，例如增加、删除、移动元素
    - 获取元素的位置和大小，例如通过`offsetTop`等属性
    - 修改页面的滚动位置
为了减少回流和重绘的操作：
    - 使用CSS的`transform`属性代替`top`和`left`
    - 将多次对DOM的操作合并为一次
    - 避免在循环中获取DOM元素的位置和大小
    - 避免对DOM元素进行频繁的读写

  1. JS引擎线程

    JS内核，负责解析JavaScript脚本，运行代码

JS引擎一直等待任务队列中任务的到来，然后加以处理，一个渲染进程无论什么时候都有一个JS线程在运行JS程序

ps： GUI渲染线程与JS引擎线程是相互排斥的，JS引擎线程在执行过程中可能会发生回流和重绘，所以GUI渲染线程执行时，JS引擎线程会被挂起，等待GUI渲染线程执行完毕之后，

  1. 事件触发线程

    归属于浏览器内核而不是JS引擎，用于控制事件循环 当对应的事件符合触发条件以后，该线程会把事件回调函数添加到任务队列的队尾，等待JS引擎的处理 JS是单线程，所以任务队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会执行）

  2. 定时器触发线程 setInterval与setTimeout所在线程 计时完毕后，添加到事件队列中

  3. 异步HTTP请求线程 在XMLHttpRequest连接后通过浏览器新开一个线程请求 检测到状态变更时，如有设置回调函数，异步线程就产生状态变更事件，再将这个回调放入任务队列中

页面渲染流程

构建DOM树-样式计算-布局-绘制-合成

性能优化

合理使用CSS选择器

减少DOM操作

前端框架（VUE、react）是通过虚拟节点（Virtual DOM）来搜集更新，然后一次性更新DOM 日常开发中常见的减少DOM操作的方法还有事件委托

节流：在同一段时间里，疯狂触发事件，只响应第一次触发 防抖：在同一段时间里，不管触发了几次都只认最后一次，并且重新计时，类似于王者回城操作

avatar
文章
阅读
粉丝