zoukankan      html  css  js  c++  java
  • 浏览器是如何工作的系列:绘制

    绘制(painting)

    绘制阶段,遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上,绘制使用UI基础组件,这在UI的章节有更多的介绍。

    1.全局和增量:

    和布局一样,绘制也可以是全局的-绘制完整的树-或增量的。在增量的绘制过程中,一些渲染对象以不影响整棵树的方式改变,改变的渲染对象使其在屏幕上的矩形区域失效,这将导致操作系统将其看作dirty区域,并产生一个paint事件,操作系统很巧妙的处理这个过程,并将多个区域合并为一个。Chrome中,这个过程更复杂些,因为渲染对象在不同的进程中,而不是在主进程中。Chrome在一定程度上模拟操作系统的行为,表现为监听事件并派发消息给渲染根,在树中查找到相关的渲染对象,并重绘这个对象(往往还包括它的children)。

    2.绘制顺序:

    css2定义了绘制过程的顺序-http://www.w3.org/TR/CSS21/zindex.html。这个就是元素压入堆栈的顺序,这个顺序影响着绘制,堆栈从后向前进行绘制。
    一个块渲染对象的堆栈顺序是:
    a>背景色
    b>背景图像
    c>border
    d>children
    e>outline

    3.Firefox显示列表

    Firefox读取渲染树并为绘制的矩形创建一个显示列表,该列表以正确的绘制顺序包含这个矩形相关的渲染对象。用这样的方法,可以使重绘时只需查找一次树,而不需要多次查找——绘制所有的背景、所有的图片、所有的border等等。Firefox优化了这个过程,它不添加被隐藏的元素,比如:元素完全在不透明元素下面。

    4.webkit矩形存储

    重绘前,webkit将旧的矩形保存为位图,然后只绘制新旧矩形的差集。

    5.动态变化

    浏览器总是试着以最小的动作响应一个变化,所以一个元素颜色的变化将只导致该元素的重绘,元素位置的变化将导致这个元素的布局和重绘,添加一个Dom节点,也会导致这个元素的布局和重绘。一些主要的变化,

    比如增加html元素的字号,将会导致缓存失效,从而引起整数的布局和重绘。

    6.渲染引擎的线程

    渲染引擎是单线程的,除了网络操作以外,几乎所有的事情都在单一的线程中处理,在Firefox和Safari中,这是浏览器的主线程,Chrome中这是tab的主线程。
    网络操作由几个并行线程执行,并行连接的个数是受限的(通常是2-6个)。

    7.事件循环

    浏览器主线程是一个事件循环,它被设计为无限循环以保持执行过程的可用,等待事件(例如layout和paint事件)并执行它们。下面是Firefox的主要事件循环代码。
    while (!mExiting) NS_ProcessNextEvent(thread);

  • 相关阅读:
    【k8s】Volume-persistentVolumeReclaimPolicy
    【k8s】Volume-pv
    【k8s】Secret-生成环境变量
    【k8s】Volume-nfs
    【k8s】Volume-hostPath
    【k8s】Volume-emptyDir
    【k8s】Volume-downwardAPI
    【k8s】Volume-Secret
    【k8s】Volume-ConfigMap-file
    SQL SERVER 列转行
  • 原文地址:https://www.cnblogs.com/suncoolcat/p/3313225.html
Copyright © 2011-2022 走看看