• 呈现器的绘制方法与绘制顺序

    堆栈样式上下文
    服务器君一共花费 14.671 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    在绘制阶段,系统会遍历呈现树,并调用呈现器的“paint”方法,将呈现器的内容显示在屏幕上。

    绘制工作是使用用户界面基础组件完成的。

    全局绘制和增量绘制

    和布局一样,绘制也分为全局(绘制整个呈现树)和增量两种。

    在增量绘制中,部分呈现器发生了更改,但是不会影响整个树。更改后的呈现器将其在屏幕上对应的矩形区域设为无效,这导致 OS 将其视为一块“dirty 区域”,并生成“paint”事件。OS 会很巧妙地将多个区域合并成一个。

    在 Chrome 浏览器中,情况要更复杂一些,因为 Chrome 浏览器的呈现器不在主进程上。Chrome 浏览器会在某种程度上模拟 OS 的行为。展示层会侦听这些事件,并将消息委托给呈现根节点。然后遍历呈现树,直到找到相关的呈现器,该呈现器会重新绘制自己(通常也包括其子代)。

    绘制顺序

    在谈绘制顺序之前,先谈谈堆栈样式上下文

    CSS 的 z-index 属性大家可能都知道,它代表了框的第三个维度,也就是沿“z 轴”方向的位置。

    这些框分散到多个堆栈(称为堆栈上下文)中。在每一个堆栈中,会首先绘制后面的元素,然后在顶部绘制前面的元素,以便更靠近用户。如果出现重叠,新绘制的元素就会覆盖之前的元素。

    堆栈是按照 z-index 属性进行排序的。具有“z-index”属性的框形成了本地堆栈。视口具有外部堆栈。

    比如:

    <style type="text/css">
          div {
            position: absolute;
            left: 2in;
            top: 2in;
          }
    </style>
    
    <p>
        <div
             style="z-index: 3;background-color:red; width: 1in; height: 1in; ">
        </div>
        <div
             style="z-index: 1;background-color:green;width: 2in; height: 2in;">
        </div>
     </p>
    

    结果如下:

    固定定位

    虽然红色 div 在标记中的位置比绿色 div 靠前(按理应该在常规流程中优先绘制),但是 z-index 属性的优先级更高,因此它移动到了根框所保持的堆栈中更靠前的位置。

    回到绘制顺序,CSS2 规范定义了绘制流程的顺序。绘制的顺序其实就是元素进入 堆栈样式上下文 的顺序。这些堆栈会从后往前绘制,因此这样的顺序会影响绘制。

    块呈现器的堆栈顺序如下:

    1. 背景颜色
    2. 背景图片
    3. 边框
    4. 子代
    5. 轮廓
更多 推荐条目

Welcome to NowaMagic Academy!

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

本章最新发布
随机专题
  1. [PHP程序设计] PHP与函数式编程 1 个条目
  2. [Python程序设计] Django模板系统 11 个条目
  3. [Python程序设计] Tornado 服务器环境配置 3 个条目
  4. [智力开发与知识管理] 整体性学习步骤 9 个条目
  5. [PHP程序设计] PHP数组的遍历 7 个条目
  6. [Python程序设计] 写几个简单的Tornado程序吧 5 个条目
  7. [移动开发] Android Studio的使用技巧 4 个条目
  8. [PHP程序设计] PHP数组探索 4 个条目
  9. [移动开发] 刷机与root相关 2 个条目
  10. [Python程序设计] urls.py设置技巧 8 个条目
  11. [移动开发] Android属性系统Property 9 个条目
  12. [移动开发] 使用support-v7 ActionBar前的那些坑 3 个条目
窗口 -- [博客]