• Firefox与Webkit的不同的绘制策略

    以及动态变化的绘制策略
    服务器君一共花费 7.802 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的
    1. Chapter:

    关于呈现器的绘制,不同的浏览器有不同的方法。

    Firefox 显示列表

    比如 Firefox 会遍历整个呈现树,为绘制的矩形建立一个显示列表。

    列表中按照正确的绘制顺序(先是呈现器的背景,然后是边框等等)包含了与矩形相关的呈现器。这样等到重新绘制的时候,只需遍历一次呈现树,而不用多次遍历(绘制所有背景,然后绘制所有图片,再绘制所有边框等等)。

    Firefox 对此过程进行了优化,也就是不添加隐藏的元素,例如被不透明元素完全遮挡住的元素。

    Webkit 矩形存储

    在重新绘制之前,Webkit 会将原来的矩形另存为一张位图,然后只绘制新旧矩形之间的差异部分。

    动态变化的绘制策略

    在发生变化时,浏览器会尽可能做出最小的响应。

    因此:

    • 元素的颜色改变后,只会对该元素进行重绘。
    • 元素的位置改变后,只会对该元素及其子元素(可能还有同级元素)进行布局和重绘。
    • 添加 DOM 节点后,会对该节点进行布局和重绘。

    一些重大变化(例如增大“html”元素的字体)会导致缓存无效,使得整个呈现树都会进行重新布局和绘制。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [Python程序设计] Django与表单 4 个条目
  2. [软件工程与项目管理] 开始使用Git 3 个条目
  3. [PHP程序设计] Nginx基本操作释疑 7 个条目
  4. [智力开发与知识管理] 超越整体性学习 5 个条目
  5. [C语言程序设计] C语言里的全局变量 2 个条目
  6. [数据库技术] MySQL常用自带函数 3 个条目
  7. [数据库技术] 数据库范式篇 5 个条目
  8. [软件工程与项目管理] 开始了解Git 5 个条目
  9. [移动开发] 从代码角度去认识HttpClient 2 个条目
  10. [移动开发] Android SQLite增删查改实例(数据:魔弹之王) 2 个条目
  11. [PHP程序设计] 对输入文件类型的检测 1 个条目
  12. [移动开发] Android开发基础知识 4 个条目
窗口