This document discusses the Blink rendering engine used in Chromium and Chrome. It begins with an overview of web browser basics, including the rendering engine flow, DOM, CSS, parsing, and layout/rendering. It then covers the evolution from KHTML to WebKit to Blink. Key aspects of Blink covered include its multi-process architecture with separate browser and renderer processes, inter-process communication (IPC), multi-process resource loading, and the rendering path including software rendering, hardware acceleration using the GPU process, and threaded compositing.
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
These slides describes about rendering engine, types of rendering engine and how Webkit rendering works.
A rendering engine (also called layout engine or web browser engine) is a software component that takes marked up content (like HTML, XML, image files, etc.) and formatting information (like CSS, XSL, etc.) and displays the formatted content on the screen.
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...Amazon Web Services Korea
서비스 런칭을 위해 라이온하트와 카카오게임즈가 어떻게 최적 성능의 인스턴스를 선택하고, Windows 운영 체제를 최적화하며, 왜 Amazon Aurora를 기본 데이터베이스로 채택하였는지를 설명합니다. 또한, 출시부터 운영까지의 과정에서 MMORPG가 어떻게 AWS 상에서 설계되고, 게임 서버 성능을 극대할 수 있었는지에 대해 전달해드립니다.
Learn why DotNetNuke has become the CMS of choice for many businesses, and how Landscapes In Motion can deliver a web 2.0 dynamic and modern website based on your budget and needs.
Visit: http://www.landscapesinmotion.com.au/webconstruction
Email: sales@landscapesinmotion.com.au
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
These slides describes about rendering engine, types of rendering engine and how Webkit rendering works.
A rendering engine (also called layout engine or web browser engine) is a software component that takes marked up content (like HTML, XML, image files, etc.) and formatting information (like CSS, XSL, etc.) and displays the formatted content on the screen.
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...Amazon Web Services Korea
서비스 런칭을 위해 라이온하트와 카카오게임즈가 어떻게 최적 성능의 인스턴스를 선택하고, Windows 운영 체제를 최적화하며, 왜 Amazon Aurora를 기본 데이터베이스로 채택하였는지를 설명합니다. 또한, 출시부터 운영까지의 과정에서 MMORPG가 어떻게 AWS 상에서 설계되고, 게임 서버 성능을 극대할 수 있었는지에 대해 전달해드립니다.
Learn why DotNetNuke has become the CMS of choice for many businesses, and how Landscapes In Motion can deliver a web 2.0 dynamic and modern website based on your budget and needs.
Visit: http://www.landscapesinmotion.com.au/webconstruction
Email: sales@landscapesinmotion.com.au
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterDoris Chen
How to tackle real-world web platform performance problems in modern websites and apps? This session starts with a basic understanding of the web platform and then explores to a set of problem/solution pairs built from industry-standard performance guidance. In the talk, we will demonstrate performance tips and tricks that will help you improve the performance of your apps and sites today. We will discuss the following respond to network requests, speed and responsiveness, optimizing media usage, and writing fast JavaScript. These performance tips and tricks apply equally to web sites that run on standards based web browsers, as well as to modern apps.
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009ken.egozi
A presentation describing Castle Monorail, the MVC framework for ASP.NET from Castle project.
Given at Microsoft offices in Ra'anana, Israel, on Feb 2nd, 2009, for the Web Developers Community (WDC), by Ken Egozi, project lead of Monorail
Sascha Corti
With Internet Explorer 9, Microsoft has entered the league of HTML 5 browsers and with its active participation in the W3C working groups, the company proves its engagements towards the new and emerging standards. Developers however are often left wondering where the boundaries are drawn between HTML5 web site, plug-in based rich internet application and smart client or “app”.
This session intends to answer this question and uses many examples to show you some of the most important enhancements introduced by HTML5, CSS3, SVG, DOM, WOFF and ECMA script. You will learn now the standards are still evolving and how Microsoft is contributing.
http://soft-shake.ch/2011/conference/sessions/microsoft/2011/09/06/introduction-to-html5.html
Sitecore CMS is an extensive Web Content Management (WCM) platform
for the mid-market. It offers reduced IT expenditures, a streamlined content
lifecycle, and a return of content control to the subject matter experts. The
newest incarnation of Sitecore CMS version 6.0 is a mature product that
incorporates standard social media components such as wikis, blogs, RSS
syndication and “e-mail a friend” features.
Based on standard .NET technologies, Sitecore offers customers a
seemingly clear path to implementation. Though, like any other project
implementation, there is careful planning required. And only by planning
carefully, you’re able to execute to perfection.
To read full white paper - please click Download.
Sitecore CMS is an extensive Web Content Management (WCM) platform
for the mid-market. It offers reduced IT expenditures, a streamlined content
lifecycle, and a return of content control to the subject matter experts. The
newest incarnation of Sitecore CMS version 6.0 is a mature product that
incorporates standard social media components such as wikis, blogs, RSS
syndication and “e-mail a friend” features.
Based on standard .NET technologies, Sitecore offers customers a
seemingly clear path to implementation. Though, like any other project
implementation, there is careful planning required. And only by planning
carefully, you’re able to execute to perfection.
Building a website without a webserver on AzureTodd Whitehead
JamStack is a popular modern architecture for creating web apps apps using JavaScript, APIs, and prerendered markup all delivered without web servers. The end result is fast, dynamic and more secure web sites that can cost significantly less than traditional approaches. In this session I’ll share how I build retrodevops.com using the JamStack architecture, Hugo and Azure as well as lessons learned along the way.
Top 10 HTML5 Features for Oracle Cloud DevelopersBrian Huff
Whether you are using Mobile, Social, Java, or Sites in the cloud, HTML5 is probably the easiest way to create and maintain web applications. Most of the Oracle cloud supports HTML5, so it is important to understand what powerful new features are built into this platform.
Similar to Mobile Browser Internal (Blink Rendering Engine) (20)
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
2. 0. Contents
1. Chapter 1: Web Browser Basics
①
②
③
④
⑤
⑥
2.
Browser at High Level
Rendering Engine main flow
DOM (Document Object Model)
CSS (Cascading Style Sheets)
Loader, Parser, Tree Builder
Layout, Rendering
Chapter 2: Blink Rendering Engine
①
②
③
④
⑤
⑥
⑦
⑧
⑨
⑩
⑪
⑫
KHTML -> WebKit Vs Blink
Chrome Vs Chromium
Chromium / Blink Source Structure
Chromium / Blink Structure, Use Case
Why multi-process architecture
Blink Multi Process Architecture
Multi-process resource loading
Rendering Path
GPU Process
Threaded Compositor
Threaded Rasterization
Chromium powered WebView
2
6. 3. DOM (Document Object Model)
+
DOM: Document Object Model
- Document = HTML, well-formed XML
- Object Model = Data + Method
Standard way for accessing and manipulating documents.
6
7. 4. CSS (1/2): Box model
The way the box is layed out is determined by
Box type: inline, block
Box dimensions: width, height
Positioning scheme: static, absolute, fixed, relative
External information: image size / view port size
Default style sheet for HTML 4
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block;}
* Default display property: inline
7
11. 6. Parser (2/3): Example
HTML
<html>
<head>
<title> NHN </title>
</head>
<body>
<div>
<h1> Hello </h1>
<p> World </p>
</div>
</body>
</html>
HEAD
BODY
TITLE
DIV
NHN
H1
P
Hello
World
11
21. 9. Rendering (2/3): Double Buffering
< Single Backing Store >
< Tiled Backing Store >
21
22. 9. Rendering (3/3): GPU Acceleration
1. 각 Layer 별 bitmap을 생성 (Render Layer traversing)
2. Textures upload into Video memory
3. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update
22
23. 10. Summary of browser main flows.
Loading
HTML
Parsing
Layouting
Layout
DOM
Tree
HTML
Parser
Platform drawing callback.
Render
Tree
attach()
CSS Style
Sheet
Painting
Display
Painting
Style
Rule
CSS
Parser
DOM Tree
Render Tree
DOM
Node
Render
Layer
Render
Object
DOM
Node
Render
Object
DOM
Node
Render
Layer
Render
Object
DOM
Node
Render
Object
DOM
Node
DOM
Node
Render
Object
Render
Layer
Render
Object
Render
Layer
23
25. 1. KHTML -> WebKit Vs Blink
KHTML, KJS (1999.05 ~)
WebKit (2001 ~)
Open Source in 2005
Apple Forks KHTML, KJS in 2001
Google Forks WebKit in 2013
Blink (2013.04 ~)
25
26. 2. Chrome Vs Chromium
Google Chrome
Chromium
Logo
Colorful
Blue
Crash reporting
Yes, if you turn it on
None
User metrics
Yes, if you turn it on
No
Video and audio tags
AAC, MP3, Vorbis and Theora
Vorbis and Theora by default
Adobe Flash
custom (non-free) plugin
included in release
supports NPAPI plugins,
including the one from Adobe
PDF support
custom (non-free) plugin
included in release
downloads and displays with
system PDF viewer
Code
Tested by Chrome developers
May be modified by
distributions
Sandbox
Always on
Depending on the distribution
Quality Assurance
New releases are tested before
sending to users
Depending on the distribution
26
30. 5. Why multi-process architecture?
기존 브라우저의 문제점
• 현재(크롬 제작 당시)의 브라우저는 과거의 OS와 비슷한 구조
• 과거의 OS는 단일 사용자, 협조적 멀티 태스킹 시스템
• 이와 같은 시스템에서, 어떤 어플리케이션의 문제는 OS 전체의 안정성에 영향을 미침
• 단일 프로세스 모델의 브라우저에서는 한 페이지의 문제가 브라우저 전체에 문제를 일으킴
문제해결을 위한 접근
• 절대적으로 안정적인 렌더링 엔진을 만드는 것은 거의 불가능함
• 최근의 OS는 각 어플리케이션을 고립시킴으로써 특정 어플리케이션의 문제가 시스템 전체의 안정
성에 영향을 미치지 않도록 하며, 사용자 각자의 데이터를 보호하고 있음
30
31. 6. Blink Multi Process Architecture
Browser Process와
Renderer Process의 연결 구조
Renderer Process의 각 View
역시 Browser Process에
연결 고리를 가짐
각 프로세스별로
입출력을 위한 스레드가
별도로 존재
Renderer Process에
WebKit 렌더링 엔진 존재
31
32. 7. Blink IPC (Inter-process communication)
Browser Process IPC
• Browser Process 내에서 별도의 I/O Thread가 IPC를 담당하게 됨
• Main Thread와의 메시지 교환은 IPC::ChannelProxy를 통해 이루어짐
• I/O Thread를 사용하는 이유는 성능상 영향을 많이 주는 네트워크 처리 요구 메시지 등을 전담하
여 처리함으로써 사용자 인터페이스에 영향을 주지 않도록 하기 위함
• I/O Thread 내부에서 처리할 메시지를 걸러내기 위해 ChannelProxy::MessageFilter 사용
Renderer Process IPC
• Renderer Process 내에서 별도의 I/O Thread가 IPC를 담당하게 됨
• 웹 페이지 렌더링을 비롯한 기타 작업은 Render Thread (Main Thread)에서 이루어짐
• 스레드를 분리함으로써 브라우저로의 동기적인 메시지 송수신이 가능
32
33. 8. Blink Multi Process Architecture in detail
Browser Process
IPC
RenderWidgetHost
RenderViewHost
Manager
WebContents
SiteInstance
RenderViewHost
RenderProcessHost
RenderWidgetHost
RenderViewHost
2
1
RenderViewHost
Manager
WebContents
RenderMainThread
(Single Process Mode)
Process Launcher
Thread
SiteInstance
RenderProcessHost
RenderWidgetHost
RenderViewHost
Cache Thread
File Thread
Main Thread
DB Thread
UI Thread
RenderWidget
WebKit
RenderWidget
I/O
Thread
RenderView
6
Main Thread
4
5
3
Renderer Process
Renderer Process
Main Thread
IO Thread
RenderWidget
RenderView
RenderView
WebKit
WebKit
I/O
Thread
33
34. 9. Multi Process Resource Loading
• Renderer Process는 독립적인 I/O Thread를 통해 Browser Process에 접근.
• Browser Process의 I/O Thread에서 ResourceMessageFilter로 요청을 Intercept.
• Network Stack이 Browser Process에 Embedded된 구조의 특징
Socket pool and connection limits, Socket reuse, Socket late-binding, Consistent
session state, Global resource and network optimizations, Predictive optimizations
34
36. 10. Rendering Path: Software Rendering Path
1. Renderer Process에서 skia를 이용하여 bitmap을 생성 (필요 시 compositing)
2. Shared Memory를 이용하여 Browser Process에 전달하여 화면에 Update.
36
37. 10. Rendering Path: Hardware Rendering Path
1. 각 Layer 별 bitmap을 생성 (Render Layer traversing)
2. Textures upload into Video memory
3. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update
37
38. 11. GPU Process: Overview
•
GPU Process의 구조적 특징: Security, Robustness, Uniformity, Parallelism
•
Client(Render Process): GL Command를 생성, Ring Buffer에 Insert
-> 일반적인 페이지의 경우 Texture Upload용으로 사용, HTML5 Canvas / WebGL은 직접 GL Command를 사용
•
Server(GPU Process): Command를 fetch, execution.
•
GL command는 GL ES 2.0 API와 거의 유사한 Async command
38
39. 11. GPU Process: Rendering with the compositor
3. GL Command로 Texture Quad요청
2. GL Command로 Textures Upload 요청
1. Compositor에서 bitmap을 생성
39