浏览器渲染原理和性能优化的理解

什么叫渲染?

render==把html字符串转换为像素信息即为渲染

function render(html){

return pixels;

}

渲染发生在什么时候?

网络:获取字符串(html...) 网络进程---网络线程----获取

渲染:转为像素点

消息队列----渲染主线程----渲染任务

过程:HTML----解析---样式计算----布局----绘制----分块----光栅化--画-------像素信息

1.解析html(parse html)------两个树-----【DOM树,CSSOM树】

2.计算样式 computed style(css不会阻塞html,js会阻塞html,遇到解析js,先暂停解析html,解析js,因此阻塞了html解析)

3.布局(根据最终计算出来的样式进行布局---行盒 块盒)-----得到一个布局树

4.分层(提升效率)will-change:transform;

5.绘制(收到指令绘制,绘制什么样的点等等。类似canvas)

渲染主线程到此结束

6.分块(Tiling)将每一层分成不同的小区域(优先绘画视口显示的小区域-----由合成线程完成)

7.光栅化(将每个块变成位图)(优先视口的块光栅化,由GPU进程(多个线程)完成(比cpu功能更多))

8.画(quad指引信息交给GPU进程-----由合成线程完成,根据位图形成像素点)

复制代码
渲染进程(沙河安全,在浏览器中使用GPU,无法使用硬件)----渲染主线程----合成线程

transform不在主线程上 所以效率会很高

什么是reflow(重新排版)?

修改了dom,cssom几何信息的时候,需要重新计算样式的过程称为refolw。获取到几何信息后,立即执行reflow,解决性能问题。

什么是repaint?

根据分层信息得到重绘指令。如果分层变化,就会重新发送重绘的指令,进行重绘。

为什么transform效率高?

因为transform只影响最后一步draw,所以效率高,不会产生重新计算,重新绘画等过程。(滚动条也是)

相关推荐
爱喝水的鱼丶2 小时前
SAP-ABAP:SAP 实战笔记:BAPI_OUTB_DELIVERY_CONFIRM_DEC 详解——外向交货单过账的利器
运维·性能优化·sap·abap·经验交流
咱入行浅3 小时前
慢查询日志在性能优化中的价值
性能优化
布兰妮甜1 天前
原子化 CSS 深度解析:Tailwind 原理、自定义配置、大型项目利弊
css·性能优化·tailwind·前端工程化·设计系统
要开心吖ZSH1 天前
一次 HikariCP 连接池耗尽导致的线上雪崩排查实录——问题概览
java·spring boot·mysql·性能优化·连接池·hikaricp
想你依然心痛2 天前
地图瓦片原理深度解析:切片、加载、缓存机制详解
性能优化·离线地图·金字塔模型·缓存机制·地图瓦片·切片规则·瓦片加载
数据库小学妹2 天前
MySQL联合索引失效怎么解决?从key_len逆向分析
数据库·mysql·性能优化·索引失效·联合索引·最左前缀·keylen
一只叫煤球的猫2 天前
ThreadForge 源码解读三:从任务执行到并发编排,ScopeJoiner 是怎么工作的?
后端·性能优化·开源
做前端的娜娜子2 天前
如何实现网页加载进度条?
性能优化·掘金·金石计划
小孔龙2 天前
Android GPU 渲染管线:一帧画面如何走上屏幕
android·性能优化·gpu
ZENERGY-众壹2 天前
延时 5 秒怎么调优:光伏 SCADA 实时画面与 WebGL 拓扑集成的性能复盘
性能优化·webgl·scada·光伏运维·api集成