十分钟弄懂浏览器渲染机制面试题

本文详细介绍了浏览器的渲染过程,包括HTML和CSS的解析、生成DOM树和CSS树、形成渲染树、布局和绘制等步骤。并深入探讨了如何优化文件大小、避免资源下载阻塞文档解析以加快首屏速度,讲解了回流和重绘的概念及其触发条件,以及如何使用GPU加速和减少回流来提高网页性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、浏览器的渲染过程是怎样的

在这里插入图片描述
大致流程如下:

  1. HTML和CSS经过各自解析,生成DOM树和CSS树
  2. 合并成渲染树
  3. 根据渲染树进行布局
  4. 最后调用GPU进行绘制,显示在屏幕上
2、如何根据浏览器渲染机制加快首屏速度
  1. 优化文件大小:HTML和CSS的加载和解析都会阻碍渲染树的生成,从而影响首屏展示速度,因此我们可以通过优化文件大小,减小css文件层级的方法来加快首屏速度
  2. 避免资源下载阻塞文档解析:浏览器解析到
3、什么是回流(重排),什么情况下会触发回流
  • 元素的尺寸和位置发生变化,就需要重新计算渲染树,这就是回流
  • DOM元素的几何特性(width、height、padding、margin、border)发生变化时会触发回流
  • DOM元素移动或者增加会触发回流
  • 读写offset、scroll、client等属性时会触发回流
  • 调用window.getComputedStyle会触发回流。
4、什么是重绘,什么情况下会重绘
  • DOM样式发生变化,但是没有影响DOM的几何属性时,会触发重绘,而不会触发回流。重绘由于DOM位置信息不需要更新,省去了布局的过程,因而性能上优于回流。
5、什么是GPU加速,如何使用GPU加速,GPU加速的优点

优点:使用transform、opacity、filters等属性时,会直接在GPU中完成处理,这些属性的变化不会引起回流重绘
缺点:GPU渲染字体会导致字体模糊,过多的GPU处理会导致内存问题

6、如何减少回流
  • 使用class替代style,减少style的使用
  • 使用resize、scroll时进行防抖和节流处理,这两者会直接导致回流
  • 使用visibility替换display: none,因为前者只会引起重绘,后者会引发回流
  • 批量修改元素时,可以先让元素脱离文档流,等修改完毕后,再放入文档流
  • 避免触发同步布局事件,我们在获取offsetWidth这类属性的值时,可以使用变量将查询结果存起来,避免多次查询,每次对offset/scroll/client等属性进行查询时都会触发回流
  • 对于复杂动画效果,使用绝对定位让其脱离文档流,复杂的动画效果会频繁地触发回流重绘,我们可以将动画元素设置绝对定位从而脱离文档流避免反复回流重绘。

在这里插入图片描述

7、页面更新机制
  • 更新了元素的几何属性(重排 回流)
  • 更新元素的绘制特性(重绘)
  • 直接合成
    css3的属性可以直接跳到这一步
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值