浏览器渲染机制

构建DOM树

DOM对象是浏览器解析HTML脚本生成的,最终输出一个树状结构的对象。

构建CSSOM树

CSSOM对象是浏览器解析CSS脚本生成的,最终也是输出类似DOM的树状结构。

构建渲染树

DOM 树与 CSSOM 树融合成一棵RenderTree(渲染树),随后计算每个可见元素的布局,并输出给绘制过程,在屏幕上渲染像素。优化这里的每一步对实现最佳渲染性能至关重要。

布局

有了渲染树,就进入布局阶段。根据渲染树种确定的每个DOM元素的样式规则,浏览器就能具体计算每个DOM元素最终在屏幕上显示的大小位置,宽高等等几何属性。由于文档流中的布局是相对的,因此每个元素的布局发生变化,会联动引发其他元素的布局变化。

绘制

绘制就是在已确定了几何属性的元素上填充像素,比如绘制文字,颜色,图像,边框,阴影等等可视元素。这期间会产生多个图层。

合并渲染层

来到这里,浏览器的渲染过程就接近尾声。每个图层绘制完,浏览器会将其按照合理的顺序合并到同一图层,并显示在浏览器上。

推荐阅读更多精彩内容

  • 浏览器指的是Chrome系浏览器【Firefox大同小异,IE未知】以下提到的“节点”、“标签”和“元素”不做区分...
    VeeQun阅读 3,316评论 5赞 24
  • 构建DOM树 DOM对象是浏览器解析HTML脚本生成的,最终输出一个树状结构的对象。 构建CSSOM树 CSSOM...
    RookieD阅读 26评论 0赞 0
  • 参考链接:浏览器渲染的那些事(一)浏览器内部工作原理浏览器的渲染原理概况有关网页渲染,每个前端开发者都该知道的那点...
    恰皮阅读 201评论 3赞 1
  • 众所周知,浏览器是世界上用途最广泛的App了,它们展现着网络资源,但达成这个目标的过程是复杂并且遵循着很多不同的标准...
    Ghj_小树阅读 369评论 0赞 0
  • 一、CSS和JS在网页中的放置顺序是怎样的? 推荐的放置顺序是将css通过 链接引入,放在head标签内部;而JS...
    青鸣阅读 198评论 0赞 0