SlideShare a Scribd company logo
1 of 9
Qiyaoyuan
2012/10/25
Chromium为了提高滚动和缩放的效率,使用了多线程
来处理滚动和缩放事件,这样在webcore线程很忙的情
况下依然可以进行缩放和滚动事件的处理

webcore线程



                     js   layout

   Scroll or Pinch

compositor线程
LayerChromium                         CCLayerImpl


          scrollLayer                         scrollLayer

                                  同步数据

NonCompositor       ContentRoot      NonCompositor          ContentRoot




    webcore更新      通知更新完成                   滚动事件               上屏
visibleRect
              当发生滚动时,可视区域会
              发生改变,会根据可视区域
              计算当前需要显示的Layer,
              若该Layer没有同步到cc层,
              就会创建空的SolidQuad显
              示,同时会将滚动的偏移增
              量同步给webcore线程,通
              知其刷新重绘,当其刷新完
              成就会上屏显示
通知webcore对
                                                   LayerChromium树更新
                                  scrollDelta

   CCLayerTreeHostImpl
                                                setNeedsCommitOnImplThread


                       ScrollBy

                                                setNeedsRedrawOnImplThread

       m_scrollLayer

调用CCLayerImpl::ScrollBy方法设置其m_scrollDelta值
                                                          drawQuad上屏
CCScheduler是个状态机,处理
                                       5种状态,并有一个定时器
                        CCScheduler
                                       CCFrameRateController出发,
             webcore                   1/60秒触发一次        Compositor
          ACTIVE_NONE

                                        Layout,去webcore中更
      ACTIVE_BEGIN_FRAME                新LayerChromium树


  将更新数据导入到纹理中                         ACTIVE_BEGIN_UPDATE
                                       _MORE_RESOURCES


  同步LayerChromium树到                     ACTIVE_COMMIT
  CCLayerImpl树


drawQuads以及swapbuffer                    ACTIVE_DRAW
对于双线程滚动来说,滚动的位置,以
                    及双线程之间滚动数据的同步主要是操
                    作这四个变量
  m_scrollDelta
                        滚动的偏移增量,最终上屏的
                        Layer位置是:
                        m_scrollPosition – m_scrollDelta
                        双线程滚动主要是在Compositor
m_sentScrollDelta       线程操作这个变量来实现滚动

                        这个是Compositor线程传给webcore
                        线程的偏移增量
   m_position
                        当前滚动的偏移,主要是针对
                        webcore中的LayerChromium树位置


m_scrollPosition         当前滚动的偏移,主要是针对
                         compositor中的CCLayerImpl树
compositor          webcore


  CCLayerTreeHostImpl::processScrollDelta
                              将scrollLayer的scrollDelta设置成sentScrollDelta,
                              准备数据的传递

   CCThreadProxy::createBeginFrameAndCommitTaskOnImplThread

                              将sentScrollDelta数据封装CCScrollAndScaleSet

              CCThreadProxy::beginFrameAndCommit

                               将得到的sentScrollDelta传给webcore处理

                 WebViewImpl::applyScrollAndScale
webcore                compositor


   LayerChromium::pushPropertiesTo




  Layer->setPosition(m_position)

Layer->setScrollPosition(m_scrollPosition)

Layer->setScrollDelta(layer->scrollDelta() – layer->sentScrollDelta())

Layer->setSentScrollDelta(IntSize())

More Related Content

Similar to Chromium多线程滚动

Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
 
11g新特性streams同步捕获
11g新特性streams同步捕获11g新特性streams同步捕获
11g新特性streams同步捕获
maclean liu
 
Exodus重构和向apollo迁移
Exodus重构和向apollo迁移Exodus重构和向apollo迁移
Exodus重构和向apollo迁移
wang hongjiang
 
Java华为面试题
Java华为面试题Java华为面试题
Java华为面试题
yiditushe
 
FtnApp 的缩略图实践
FtnApp 的缩略图实践FtnApp 的缩略图实践
FtnApp 的缩略图实践
Frank Xu
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型
keelii
 

Similar to Chromium多线程滚动 (20)

Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
 
Open whisk quick start guide
Open whisk quick start guideOpen whisk quick start guide
Open whisk quick start guide
 
Spring 2.0 技術手冊第七章 - Spring Web MVC 框架
Spring 2.0 技術手冊第七章 - Spring Web MVC 框架Spring 2.0 技術手冊第七章 - Spring Web MVC 框架
Spring 2.0 技術手冊第七章 - Spring Web MVC 框架
 
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
 
Vulkan introduction
Vulkan introductionVulkan introduction
Vulkan introduction
 
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails server
 
需求VMWARE架構下就是要建兩邊可以嗎?
需求VMWARE架構下就是要建兩邊可以嗎?需求VMWARE架構下就是要建兩邊可以嗎?
需求VMWARE架構下就是要建兩邊可以嗎?
 
11g新特性streams同步捕获
11g新特性streams同步捕获11g新特性streams同步捕获
11g新特性streams同步捕获
 
Exodus重构和向apollo迁移
Exodus重构和向apollo迁移Exodus重构和向apollo迁移
Exodus重构和向apollo迁移
 
Java华为面试题
Java华为面试题Java华为面试题
Java华为面试题
 
Inside the browser
Inside the browserInside the browser
Inside the browser
 
FtnApp 的缩略图实践
FtnApp 的缩略图实践FtnApp 的缩略图实践
FtnApp 的缩略图实践
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backbone
 
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
 
05 MapKit and Text Input
05 MapKit and Text Input05 MapKit and Text Input
05 MapKit and Text Input
 
视图模式
视图模式视图模式
视图模式
 
Retina mac
Retina macRetina mac
Retina mac
 
ASP.NET Core 2.1設計新思維與新發展
ASP.NET  Core 2.1設計新思維與新發展ASP.NET  Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
 
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型
 

Chromium多线程滚动

  • 3. LayerChromium CCLayerImpl scrollLayer scrollLayer 同步数据 NonCompositor ContentRoot NonCompositor ContentRoot webcore更新 通知更新完成 滚动事件 上屏
  • 4. visibleRect 当发生滚动时,可视区域会 发生改变,会根据可视区域 计算当前需要显示的Layer, 若该Layer没有同步到cc层, 就会创建空的SolidQuad显 示,同时会将滚动的偏移增 量同步给webcore线程,通 知其刷新重绘,当其刷新完 成就会上屏显示
  • 5. 通知webcore对 LayerChromium树更新 scrollDelta CCLayerTreeHostImpl setNeedsCommitOnImplThread ScrollBy setNeedsRedrawOnImplThread m_scrollLayer 调用CCLayerImpl::ScrollBy方法设置其m_scrollDelta值 drawQuad上屏
  • 6. CCScheduler是个状态机,处理 5种状态,并有一个定时器 CCScheduler CCFrameRateController出发, webcore 1/60秒触发一次 Compositor ACTIVE_NONE Layout,去webcore中更 ACTIVE_BEGIN_FRAME 新LayerChromium树 将更新数据导入到纹理中 ACTIVE_BEGIN_UPDATE _MORE_RESOURCES 同步LayerChromium树到 ACTIVE_COMMIT CCLayerImpl树 drawQuads以及swapbuffer ACTIVE_DRAW
  • 7. 对于双线程滚动来说,滚动的位置,以 及双线程之间滚动数据的同步主要是操 作这四个变量 m_scrollDelta 滚动的偏移增量,最终上屏的 Layer位置是: m_scrollPosition – m_scrollDelta 双线程滚动主要是在Compositor m_sentScrollDelta 线程操作这个变量来实现滚动 这个是Compositor线程传给webcore 线程的偏移增量 m_position 当前滚动的偏移,主要是针对 webcore中的LayerChromium树位置 m_scrollPosition 当前滚动的偏移,主要是针对 compositor中的CCLayerImpl树
  • 8. compositor webcore CCLayerTreeHostImpl::processScrollDelta 将scrollLayer的scrollDelta设置成sentScrollDelta, 准备数据的传递 CCThreadProxy::createBeginFrameAndCommitTaskOnImplThread 将sentScrollDelta数据封装CCScrollAndScaleSet CCThreadProxy::beginFrameAndCommit 将得到的sentScrollDelta传给webcore处理 WebViewImpl::applyScrollAndScale
  • 9. webcore compositor LayerChromium::pushPropertiesTo Layer->setPosition(m_position) Layer->setScrollPosition(m_scrollPosition) Layer->setScrollDelta(layer->scrollDelta() – layer->sentScrollDelta()) Layer->setSentScrollDelta(IntSize())