SlideShare a Scribd company logo

Understanding Webkit Rendering

1 of 82
Download to read offline
Understanding
                        WebKit Rendering


                             Ariya Hidayat




Sunday, October 7, 12
whoami




Sunday, October 7, 12
Sunday, October 7, 12
WebKit




Sunday, October 7, 12
WebKit is Everywhere




Sunday, October 7, 12
Browser at a High Level


                                        User Interface




                                                                    Data Persistence
                                     Browser Engine




                                     Render Engine



                        Networking     JavaScript        Graphics
                           I/O           Engine           Stack




Sunday, October 7, 12
Ad

Recommended

JavaScript - Chapter 1 - Problem Solving
 JavaScript - Chapter 1 - Problem Solving JavaScript - Chapter 1 - Problem Solving
JavaScript - Chapter 1 - Problem SolvingWebStackAcademy
 
A Brief Introduction to React.js
A Brief Introduction to React.jsA Brief Introduction to React.js
A Brief Introduction to React.jsDoug Neiner
 
Handy-Programmierung mit Python
Handy-Programmierung mit PythonHandy-Programmierung mit Python
Handy-Programmierung mit PythonAndreas Schreiber
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to ReactRob Quick
 

More Related Content

What's hot

Styled components presentation
Styled components presentationStyled components presentation
Styled components presentationMaciej Matuszewski
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentationThanh Tuong
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media QueriesRuss Weakley
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 
Introduction to SQLAlchemy ORM
Introduction to SQLAlchemy ORMIntroduction to SQLAlchemy ORM
Introduction to SQLAlchemy ORMJason Myers
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJSKnoldus Inc.
 
React js programming concept
React js programming conceptReact js programming concept
React js programming conceptTariqul islam
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Introducing Drools
Introducing DroolsIntroducing Drools
Introducing DroolsMario Fusco
 
Introduction to xml
Introduction to xmlIntroduction to xml
Introduction to xmlGtu Booker
 
Proxies are Awesome!
Proxies are Awesome!Proxies are Awesome!
Proxies are Awesome!Brendan Eich
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersPrakritiDhang
 
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Hyungwook Lee
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!Ana Cidre
 

What's hot (20)

How Browser Works?
How Browser Works?How Browser Works?
How Browser Works?
 
Styled components presentation
Styled components presentationStyled components presentation
Styled components presentation
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
 
React with Redux
React with ReduxReact with Redux
React with Redux
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
jQuery
jQueryjQuery
jQuery
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
 
Introduction to SQLAlchemy ORM
Introduction to SQLAlchemy ORMIntroduction to SQLAlchemy ORM
Introduction to SQLAlchemy ORM
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
Drools rule Concepts
Drools rule ConceptsDrools rule Concepts
Drools rule Concepts
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Introducing Drools
Introducing DroolsIntroducing Drools
Introducing Drools
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
Introduction to xml
Introduction to xmlIntroduction to xml
Introduction to xml
 
Proxies are Awesome!
Proxies are Awesome!Proxies are Awesome!
Proxies are Awesome!
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginners
 
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 

Viewers also liked

Hardware Acceleration in WebKit
Hardware Acceleration in WebKitHardware Acceleration in WebKit
Hardware Acceleration in WebKitJoone Hur
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolutionjuanjosanchezpenas
 
WebKit and GStreamer
WebKit and GStreamerWebKit and GStreamer
WebKit and GStreamercalvaris
 
Android Chromium Rendering Pipeline
Android Chromium Rendering PipelineAndroid Chromium Rendering Pipeline
Android Chromium Rendering PipelineHyungwook Lee
 
WebKit, HTML5 media and GStreamer on multiple platforms
WebKit, HTML5 media and GStreamer on multiple platforms WebKit, HTML5 media and GStreamer on multiple platforms
WebKit, HTML5 media and GStreamer on multiple platforms philn2
 
Introduction to QtWebKit
Introduction to QtWebKitIntroduction to QtWebKit
Introduction to QtWebKitAriya Hidayat
 
WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)Igalia
 
FrontTalks: Вадим Макеев (Opera Software), «Зачем Опере Вебкит, или Опиум для...
FrontTalks: Вадим Макеев (Opera Software), «Зачем Опере Вебкит, или Опиум для...FrontTalks: Вадим Макеев (Opera Software), «Зачем Опере Вебкит, или Опиум для...
FrontTalks: Вадим Макеев (Opera Software), «Зачем Опере Вебкит, или Опиум для...Yandex
 
WebKit vs. the mobile Web
WebKit vs. the mobile WebWebKit vs. the mobile Web
WebKit vs. the mobile WebJosh Tumath
 
WebKit and Blink: open development powering the HTML5 revolution
WebKit and Blink: open development powering the HTML5 revolutionWebKit and Blink: open development powering the HTML5 revolution
WebKit and Blink: open development powering the HTML5 revolutionjuanjosanchezpenas
 
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -Koji Ishimoto
 
WebKitGtk+ Project
WebKitGtk+ ProjectWebKitGtk+ Project
WebKitGtk+ ProjectJoone Hur
 
Irfan e hidayat az ifadat imam e ahle sunnat
Irfan e hidayat az ifadat imam e ahle sunnatIrfan e hidayat az ifadat imam e ahle sunnat
Irfan e hidayat az ifadat imam e ahle sunnatMuhammad Tariq
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
 

Viewers also liked (20)

Hardware Acceleration in WebKit
Hardware Acceleration in WebKitHardware Acceleration in WebKit
Hardware Acceleration in WebKit
 
The WebKit project
The WebKit projectThe WebKit project
The WebKit project
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
 
WebKit and GStreamer
WebKit and GStreamerWebKit and GStreamer
WebKit and GStreamer
 
Android Chromium Rendering Pipeline
Android Chromium Rendering PipelineAndroid Chromium Rendering Pipeline
Android Chromium Rendering Pipeline
 
WebKit, HTML5 media and GStreamer on multiple platforms
WebKit, HTML5 media and GStreamer on multiple platforms WebKit, HTML5 media and GStreamer on multiple platforms
WebKit, HTML5 media and GStreamer on multiple platforms
 
Introduction to QtWebKit
Introduction to QtWebKitIntroduction to QtWebKit
Introduction to QtWebKit
 
WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)WebKit2 And You (GUADEC 2013)
WebKit2 And You (GUADEC 2013)
 
FrontTalks: Вадим Макеев (Opera Software), «Зачем Опере Вебкит, или Опиум для...
FrontTalks: Вадим Макеев (Opera Software), «Зачем Опере Вебкит, или Опиум для...FrontTalks: Вадим Макеев (Opera Software), «Зачем Опере Вебкит, или Опиум для...
FrontTalks: Вадим Макеев (Opera Software), «Зачем Опере Вебкит, или Опиум для...
 
WebKit vs. the mobile Web
WebKit vs. the mobile WebWebKit vs. the mobile Web
WebKit vs. the mobile Web
 
פיתוח אפליקציות Webkit לדפדפנים סלולריים Ppt
פיתוח אפליקציות Webkit לדפדפנים סלולריים Pptפיתוח אפליקציות Webkit לדפדפנים סלולריים Ppt
פיתוח אפליקציות Webkit לדפדפנים סלולריים Ppt
 
WebKit and Blink: open development powering the HTML5 revolution
WebKit and Blink: open development powering the HTML5 revolutionWebKit and Blink: open development powering the HTML5 revolution
WebKit and Blink: open development powering the HTML5 revolution
 
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 -
 
WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)WebKit, why it matters (PDF version)
WebKit, why it matters (PDF version)
 
WebKitGtk+ Project
WebKitGtk+ ProjectWebKitGtk+ Project
WebKitGtk+ Project
 
Guides To Analyzing WebKit Performance
Guides To Analyzing WebKit PerformanceGuides To Analyzing WebKit Performance
Guides To Analyzing WebKit Performance
 
Quran as guidance
Quran as guidanceQuran as guidance
Quran as guidance
 
Guidance from the noble Quran edited by shaykh mufti afzal hoosen elias
Guidance from the noble Quran edited by shaykh mufti afzal hoosen eliasGuidance from the noble Quran edited by shaykh mufti afzal hoosen elias
Guidance from the noble Quran edited by shaykh mufti afzal hoosen elias
 
Irfan e hidayat az ifadat imam e ahle sunnat
Irfan e hidayat az ifadat imam e ahle sunnatIrfan e hidayat az ifadat imam e ahle sunnat
Irfan e hidayat az ifadat imam e ahle sunnat
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 

Similar to Understanding Webkit Rendering

Document Object Model
Document Object ModelDocument Object Model
Document Object Modelchomas kandar
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelchomas kandar
 
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPAIntegrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPACheng Ta Yeh
 
Introduction to Web Programming
Introduction to Web ProgrammingIntroduction to Web Programming
Introduction to Web ProgrammingYnon Perek
 
Understanding the dom by Benedict Ayiko
Understanding the dom by Benedict AyikoUnderstanding the dom by Benedict Ayiko
Understanding the dom by Benedict AyikoDamalie Wasukira
 
Single page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web apiSingle page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web apiAlexander Zeitler
 
Custom Android Code Templates
Custom Android Code TemplatesCustom Android Code Templates
Custom Android Code Templatesmurphonic
 
Build and Deploy Sites Using Features
Build and Deploy Sites Using Features Build and Deploy Sites Using Features
Build and Deploy Sites Using Features Phase2
 
Polymer and web component
Polymer and web componentPolymer and web component
Polymer and web componentImam Raza
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
Modular applications with montage components
Modular applications with montage componentsModular applications with montage components
Modular applications with montage componentsBenoit Marchant
 
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...Jesse Cravens
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
J Query(04 12 2008) Foiaz
J Query(04 12 2008) FoiazJ Query(04 12 2008) Foiaz
J Query(04 12 2008) Foiaztestingphase
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering PathRaphael Amorim
 
Jdbc Dao it-slideshares.blogspot.com
Jdbc Dao it-slideshares.blogspot.comJdbc Dao it-slideshares.blogspot.com
Jdbc Dao it-slideshares.blogspot.comphanleson
 

Similar to Understanding Webkit Rendering (20)

Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPAIntegrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
Integrate Spring MVC with RequireJS & Backbone.js & Spring Data JPA
 
Introduction to Web Programming
Introduction to Web ProgrammingIntroduction to Web Programming
Introduction to Web Programming
 
Understanding the dom by Benedict Ayiko
Understanding the dom by Benedict AyikoUnderstanding the dom by Benedict Ayiko
Understanding the dom by Benedict Ayiko
 
Single page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web apiSingle page applications mit asp.net mvc und der asp.net web api
Single page applications mit asp.net mvc und der asp.net web api
 
Custom Android Code Templates
Custom Android Code TemplatesCustom Android Code Templates
Custom Android Code Templates
 
Build and Deploy Sites Using Features
Build and Deploy Sites Using Features Build and Deploy Sites Using Features
Build and Deploy Sites Using Features
 
IOC + Javascript
IOC + JavascriptIOC + Javascript
IOC + Javascript
 
Polymer and web component
Polymer and web componentPolymer and web component
Polymer and web component
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Modular applications with montage components
Modular applications with montage componentsModular applications with montage components
Modular applications with montage components
 
ActiveDOM
ActiveDOMActiveDOM
ActiveDOM
 
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
Client Server 3.0 - 6 Ways JavaScript is Revolutionizing the Client/Server Re...
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
HTML literals, the JSX of the platform
HTML literals, the JSX of the platformHTML literals, the JSX of the platform
HTML literals, the JSX of the platform
 
J Query(04 12 2008) Foiaz
J Query(04 12 2008) FoiazJ Query(04 12 2008) Foiaz
J Query(04 12 2008) Foiaz
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
 
Jdbc Dao it-slideshares.blogspot.com
Jdbc Dao it-slideshares.blogspot.comJdbc Dao it-slideshares.blogspot.com
Jdbc Dao it-slideshares.blogspot.com
 
Web components
Web componentsWeb components
Web components
 

More from Ariya Hidayat

Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
 
JavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality AnalysisJavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality AnalysisAriya Hidayat
 
Build HTML5 App (Intel Elements 2011)
Build HTML5 App (Intel Elements 2011)Build HTML5 App (Intel Elements 2011)
Build HTML5 App (Intel Elements 2011)Ariya Hidayat
 
Hybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitAriya Hidayat
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAriya Hidayat
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitAriya Hidayat
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitAriya Hidayat
 
Efficient Graphics with Qt
Efficient Graphics with QtEfficient Graphics with Qt
Efficient Graphics with QtAriya Hidayat
 
Writing Tools using WebKit
Writing Tools using WebKitWriting Tools using WebKit
Writing Tools using WebKitAriya Hidayat
 

More from Ariya Hidayat (9)

Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
JavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality AnalysisJavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality Analysis
 
Build HTML5 App (Intel Elements 2011)
Build HTML5 App (Intel Elements 2011)Build HTML5 App (Intel Elements 2011)
Build HTML5 App (Intel Elements 2011)
 
Hybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKit
 
Analyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile Web
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
Efficient Graphics with Qt
Efficient Graphics with QtEfficient Graphics with Qt
Efficient Graphics with Qt
 
Writing Tools using WebKit
Writing Tools using WebKitWriting Tools using WebKit
Writing Tools using WebKit
 

Recently uploaded

The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIEDanBrown980551
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education pptsafnarafeek2002
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsEvangelia Mitsopoulou
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stackSummit
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementMimmo Squillace
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manualDomotica daVinci
 
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?GleecusTechlabs1
 
Traffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxTraffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxharimaxwell0712
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfDomotica daVinci
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERNRonnelBaroc
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxVotarikari Shravan
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfThomas Poetter
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
My self introduction to know others abut me
My self  introduction to know others abut meMy self  introduction to know others abut me
My self introduction to know others abut meManoj Prabakar B
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...shaiyuvasv
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanDatabarracks
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17Ana-Maria Mihalceanu
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologySafe Software
 

Recently uploaded (20)

The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
LF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIELF Energy Webinar: Introduction to TROLIE
LF Energy Webinar: Introduction to TROLIE
 
Importance of magazines in education ppt
Importance of magazines in education pptImportance of magazines in education ppt
Importance of magazines in education ppt
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stack
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvement
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
 
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
Unlocking the Cloud's True Potential: Why Multitenancy Is The Key?
 
Traffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxTraffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptx
 
Curtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdfCurtain Module Manual Zigbee Neo CS01-1C.pdf
Curtain Module Manual Zigbee Neo CS01-1C.pdf
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
 
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docxLeveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
Leveraging SLF4j for Effective Logging in IBM App Connect Enterprise.docx
 
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdfLLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
LLMs, LMMs, their Improvement Suggestions and the Path towards AGI.pdf
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
My self introduction to know others abut me
My self  introduction to know others abut meMy self  introduction to know others abut me
My self introduction to know others abut me
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
 
How to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response PlanHow to write an effective Cyber Incident Response Plan
How to write an effective Cyber Incident Response Plan
 
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17Enhancing Productivity and Insight  A Tour of JDK Tools Progress Beyond Java 17
Enhancing Productivity and Insight A Tour of JDK Tools Progress Beyond Java 17
 
Breaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI TechnologyBreaking Barriers & Leveraging the Latest Developments in AI Technology
Breaking Barriers & Leveraging the Latest Developments in AI Technology
 

Understanding Webkit Rendering

  • 1. Understanding WebKit Rendering Ariya Hidayat Sunday, October 7, 12
  • 6. Browser at a High Level User Interface Data Persistence Browser Engine Render Engine Networking JavaScript Graphics I/O Engine Stack Sunday, October 7, 12
  • 7. WebKit Components Render Engine CSS DOM SVG HTML Canvas WebCore Client Interface JavaScript Engine (JSC/V8) Sunday, October 7, 12
  • 8. Platform Abstraction Networking Thread Geolocation Timer I/O Client Interface Clipboard Events Theme Graphics API Calls Events Port (Chrome, Safari, etc.) Sunday, October 7, 12
  • 10. From Contents to Pixels DOM Render Layout HTML DOM HTML Parser Tree Render Paint Tree Style CSS Style Sheets Parser Rules http://www.html5rocks.com/en/tutorials/internals/howbrowserswork Sunday, October 7, 12
  • 11. DOM Tree <html><body><p>Hello</p></body></html> HTMLDocument HTMLBodyElement HTMLParagraphElement attributes, children, contents Sunday, October 7, 12
  • 12. HTML Parsing tag <html><body><p>Hello</p></body></html> Loader Tokenizer text DOM Tree May come in chunks Tree Builder Section 12.2 in HTML Specification http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#parsing Sunday, October 7, 12
  • 13. DOM Tree vs Render Tree HTMLDocument RenderRoot HTMLBodyElement RenderBody HTMLParagraphElement RenderText There is no Render* for display:none Sunday, October 7, 12
  • 14. “Attach” Process Historical: Node is invisible, attach it to the main view to make it visible View 1:1 many:1 Node/Element RenderObject RenderStyle tree structure/navigation <div>42</div> computed style metrics (box model) hit testing another tree structure Sunday, October 7, 12
  • 16. It’s a forest! Sunday, October 7, 12
  • 17. Effects of Style Recalc and Layout document.getElementById('box').style.top = '100px'; Aggregated “dirty” area document.getElementById('box').style.backgroundColor = 'red'; No layout necessary, metrics are not flagged as “changed” Sunday, October 7, 12
  • 18. Getting the Right Style Stylesheet List HTMLDocument p { color: blue } HTMLBodyElement HTMLParagraphElement DOM Tree RenderStyle CSS Style Selector: id, class, tags, ... Sunday, October 7, 12
  • 19. Minimizing Layout Element clientHeight focus() clientLeft getBoundingClientRect() clientTop getClientRects() clientWidth scrollByLines() offsetHeight scrollByPages() offsetLeft scrollHeight offsetParent scrollIntoView() offsetTop scrollIntoViewIfNeeded() offsetWidth scrollLeft scrollTop scrollWidth innerText outerText http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html http://code.google.com/p/chromium/source/search?q=%22-%3EupdateLayoutIgnorePendingStylesheets()%22 Sunday, October 7, 12
  • 21. Goals of Painting • “Visualize” all RenderObjects (again, tree traversal) • All painting commands go to GraphicsContext abstraction • Important Optimizations • Clipped to the visible viewport • Back-to-front Transparency & clipping Sunday, October 7, 12
  • 22. CSS Painting: 10 Stages http://www.w3.org/TR/CSS2/zindex.html Appendix E. Elaborate description of Stacking Contexts • Background • Floats • Foreground • Selection Done by the render objects • Outline (in the render tree) Sunday, October 7, 12
  • 23. Graphics Abstraction Chromium Android Qt Mac & iOS GraphicsContext Skia CoreGraphics QPainter graphics stack Native controls, RenderTheme e.g. form elements Sunday, October 7, 12
  • 24. Painting Flow: Browser vs WebKit Browser WebKit User scrolls the viewport Request painting, GraphicsContext Sometimes to the backing store Style change Mark “dirty” area Sunday, October 7, 12
  • 25. Path is Everything Sunday, October 7, 12
  • 26. Stroke = Outline Solid Dashed Dotted Textured Sunday, October 7, 12
  • 27. Brush = Fill None Solid Gradient Textured Sunday, October 7, 12
  • 28. Gradient = Non-uniform Pixel Values Sunday, October 7, 12
  • 29. Drawing Time: Solid vs Gradient Only border 14x slower Solid color fill (depending on the dimension) Linear gradient fill Radial gradient fill Sunday, October 7, 12
  • 30. Path Approximation Curves Polygon Sunday, October 7, 12
  • 31. Antialiasing Multiple levels of transparency Sunday, October 7, 12
  • 32. Transformation Scaling Perspective Rotation Sunday, October 7, 12
  • 34. Font Atlas Buffer Bye Sunday, October 7, 12
  • 35. Simple to Complex ell o! H Simple shape Solid color Curves Gradient brush Textured stroke Blur shadow Serif text Rotated Sunday, October 7, 12
  • 36. Simple to Complex ell o! H Simple shape Solid color Curves Gradient brush Textured stroke Blur shadow Serif text Make it as an image Rotated Sunday, October 7, 12
  • 38. Game vs Web Sunday, October 7, 12
  • 39. Game Text Textured objects Animation Transformation Physics Sunday, October 7, 12
  • 40. Large Area, but Still Bounded Sunday, October 7, 12
  • 41. Web Page Images Text Sunday, October 7, 12
  • 42. Challenges Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔ Initial response immediate Sunday, October 7, 12
  • 43. SoC = System-on-a-Chip CPU GPU Sunday, October 7, 12
  • 44. GPU Workflow Matrix Vertices Rendered Textured Sunday, October 7, 12
  • 45. Optimized for Games “Fixed” geometry Transformation Textured triangles Parallelism Sunday, October 7, 12
  • 46. Powerful Capabilities http://epicgames.com/technology/ http://www.rage.com/ epic-citadel Sunday, October 7, 12
  • 48. Fundamental Physical Limitations • Memory: Can’t store too much stuff • Speed: Quad-core CPU can do certain operations better • Bandwidth: Data transfer can be the bottleneck Sunday, October 7, 12
  • 50. Efficient Use of GPU Drawing Backing Layer & primitives stores compositing Sunday, October 7, 12
  • 51. Maps Tile Sunday, October 7, 12
  • 52. Pinch to Zoom when you pinch... Sunday, October 7, 12
  • 53. Responsive Interface decoupled Rendering Processor User interaction Sunday, October 7, 12
  • 54. Rendering vs Interaction Screen Backing Store Rendering Web Page User interaction Sunday, October 7, 12
  • 56. Progressive Rendering Fast but blurry Crisp but slow Sunday, October 7, 12
  • 57. Perceived Responsiveness User pinches Smooth scaled Blocky (but fast!) Sunday, October 7, 12
  • 58. Tiling System Texture upload .... .... CPU GPU Sunday, October 7, 12
  • 59. Tile Transformation Panning = Translation Zooming = Scaling Sunday, October 7, 12
  • 61. Typical Animation opacity, movement, scaling, rotation, ... Sunday, October 7, 12
  • 62. Principles of Fluid Animation At the beginning, push as many 1 resources as possible to the GPU 2 During the animation, minimize CPU-GPU interaction Sunday, October 7, 12
  • 63. Immediate vs Retained At the beginning... draw the shape onto a buffer For every animation tick... blit the buffer at (x, draw the shape at (x, y) y) x = x + 10 x = x + 10 Off main thread Sunday, October 7, 12
  • 64. Mechanics of Animation “Hey, this is good stuff. Cache it as texture Initialization “Apply [operation] to texture #42.” Animation step Sunday, October 7, 12
  • 65. Elements = Layer Sunday, October 7, 12
  • 67. Compositing By Force -webkit-transform: translateZ(0) Not needed for CSS .someid { -webkit-animation-name: somekeyframeanimation; -webkit-animation-duration: 7s; -webkit-transform: translateZ(0); } Don’t do that Sunday, October 7, 12
  • 68. Magical Advice Use translate3d for hardware acceleration Sunday, October 7, 12
  • 69. Magical Advice Use translate3d for hardware acceleration Sunday, October 7, 12
  • 70. Debugging in Safari defaults write com.apple.Safari IncludeInternalDebugMenu 1 Sunday, October 7, 12
  • 71. Compositing Indicators Texture (number = upload) Composited layer No associated texture Container layer Overflow Sunday, October 7, 12
  • 72. Avoid Texture Reupload No reupload Upload Opacity Position Everything else! Size Animation “Hardware accelerated CSS” Sunday, October 7, 12
  • 74. Color Transition @-webkit-keyframes box { 0% { -webkit-transform: background-color: blue; } 100% { -webkit-transform: background-color: green; } } Need a new texture uploaded to the GPU for every in-between color Sunday, October 7, 12
  • 75. Color Transition: The Trick Blended with http://jsfiddle.net/79AVn Sunday, October 7, 12
  • 76. Prepare and Reuse Hide the layer offscreen Viewport Sunday, October 7, 12
  • 77. Timer Latency Depending on user Animation end triggers the JavaScript callback JavaScript code kicks the next animation Prepare both animation and hide the “wrong” one Sunday, October 7, 12
  • 78. Avoid Overcapacity .... .... Think of the GPU memory like a cache. Sunday, October 7, 12
  • 81. There is No Silver Bullet Sunday, October 7, 12
  • 82. Thank You ariya.hidayat@gmail.com ariya.ofilabs.com @AriyaHidayat Sunday, October 7, 12