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

什么叫渲染?

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,所以效率高,不会产生重新计算,重新绘画等过程。(滚动条也是)

相关推荐
李纲明5 小时前
WordPress 图片拖慢首屏与磁盘:媒体库体积、缩略图爆炸与懒加载排查
性能优化·wordpress·webp·图片优化·媒体库
赵大仁6 小时前
官网性能优化实战:LCP 3.2s → 2.1s、CLS 0.107 → 0,以及被我推翻的 6 个判断
前端·性能优化·cls·lcp·core web vitals
CCblandy10 小时前
一致性哈希到底省了多少搬迁?本机实测 3 轮:取模 6→7 搬 85.8%,V=128 只搬 14.3%,虚拟节点太少会被倾斜骗
后端·python·云原生·性能优化·架构
Linux实战笔记12 小时前
压测后我对GraphQL vs REST API 设计改了灵活查询与性能权衡
性能优化·graphql·rest api·接口设计·n+1 问题
CCblandy1 天前
Agent 工具调用怎么编排?本机实测:并行只到 2.63 倍,慢的先发省 30ms,CPU 活加 worker 无效
人工智能·后端·python·性能优化
用AI来创业吧1 天前
网站建设公司哪家好:报价差 3 倍,差在哪四项成本上(选型笔记)
笔记·性能优化·软件工程·安全威胁分析
yunwei372 天前
eBPF 入门实践教程:BPF Token,安全的委托式权限与程序加载
linux·后端·性能优化
CSharp精选营2 天前
SaveChanges 一万行?换批量操作快 10 倍
性能优化·efcore·批量操作·csharp·executeupdate
爱喝水的鱼丶2 天前
SAP-ABAP:S/4 HANA ABAP 新特性入门:与 ECC ABAP 的核心差异、架构优势与学习路径规划
运维·数据库·性能优化·sap·abap·hana·开发交流
余槐i2 天前
PostgreSQL 函数索引报错 must be immutable:3种绕法与代价
数据库·后端·sql·postgresql·性能优化