记录--浏览器渲染流程解析

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

10年积累的成都做网站、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有巧家免费网站建设让你可以放心的选择与我们合作。

大家可能经常会听到 css 动画比 js动画性能更好这样的论断，或者是“硬件加速”，“层提升” 这样的字眼；要了解这些内容就需要对浏览器的渲染流程有个大致的了解，本文就是我个人对这些内容的一个总结梳理

需要注意的是：

1. 本文仅个人学习总结梳理，如有错漏，望指正
2. 本文以谷歌浏览器Blink内核为例
3. 随着谷歌浏览器的更新迭代，有些渲染流程或对象名词可能发生变化（如， RenderObject 变成了 LayoutObject，RenderLayer 变成了 PaintLayer），查看相关文档时需要注意文档的时间

渲染流程

先来看下blink的一个大致渲染流程，图源谷歌的一份共享幻灯片 Life of a Pixel ，它比较全面的阐述了浏览的渲染流程，非常值得一看，我们就借这张图来梳理一遍