23
How to Optimize Web Engine 2015429TV Web Framework

How to Optimize Web Engine

Embed Size (px)

Citation preview

Page 1: How to Optimize Web Engine

How to OptimizeWeb Engine

2015년 4월 29일TV Web Framework 팀

신 병 선

Page 2: How to Optimize Web Engine

What’s in it Web Engine

Page 3: How to Optimize Web Engine

Pros: Separation of Duty → JS Execution vs. User Interaction

Cons: Sharing Graphics Data→ Producer: Web(Render) Process→ Consumer: UI(Browser) Process

Multi Process Architecture

Page 4: How to Optimize Web Engine

Execution Pipeline

Page 6: How to Optimize Web Engine

Is Chrome/Blink really an answer?

Page 7: How to Optimize Web Engine

What’s in iOS

Page 8: How to Optimize Web Engine

Behind Core Animation

http://arstechnica.com/apple/2005/04/28/macosx-10-4/14/

Page 9: How to Optimize Web Engine

Off-Screen Buffer SharingThe IOSurfaceAPI header contains the public API for the IOSurface framework. The IOSurface framework provides a framebuffer object suitable for sharing across process boundaries. It is commonly used to allow applications to move complex image decompression and draw logic into a separate process to enhance security.

Page 10: How to Optimize Web Engine

WebKit Optimization on iOSFix Border-radius clipping issue on a composited descendants

https://bugs.webkit.org/show_bug.cgi?id=138551

Patch by Byungseon Shin < [email protected]> on 2015-01-07

Reviewed by Simon Fraser.

Fix clipping compositing descendants of an accelerated layer having

border radius and clip overflow issue by using layer corner-radius

or a CAShapeLayer mask on Mac, and setting up a separate mask layer

on the childContainmentLayer on other platforms.

Page 11: How to Optimize Web Engine

Chromium UI Framework - Aura

Page 12: How to Optimize Web Engine

Chromium - GPU Process

Page 13: How to Optimize Web Engine

Threaded Compositing in Chromium… continued from page 4.

Page 14: How to Optimize Web Engine

Optimization in Chromium - Slimming Painting

Project Goal● Faster recording/painting● Correct and faster compositing● Healthier, better tested code

How to achieve● Blink paint code not optimized for our compositor architecture nor Skia

○ Inherited 2 code paths: CG/CA & Skia/cc● We cache pixels, repeat work to define them

→ Lesson on Blink(WebKit), harden on Compositor & Skia

Page 15: How to Optimize Web Engine

Slimming Painting DetailsDisplay(Paint) list concept already exists in Core Animation & Android UI Framework

Page 16: How to Optimize Web Engine

Wayland - Ozone● Ozone is a platform abstraction layer beneath the Aura window

system that is used for low level input and graphics.● In Linux graphics, Mesa GBM provides the ability for user

application directly allocate accelerated graphics buffers.● Fullscreen Chromium targets such as ChromeOS, Chromecast

among others require minimal interaction with the native windowing system.

● Ozone-GBM is the native fullscreen-only platform that delegates the composition tasks of the root window to a new platform window based on KMS/DRM. It uses EGL/GLES2 for accelerated rendering. Besides, Ozone-GBM has an internal implementation of the Linux evdev subsystem.

● Fullscreen Chromium targets can use Ozone-GBM to remove unnecessary dependency on full-fledged window systems like X11, Wayland, DirectFB, etc.

Page 17: How to Optimize Web Engine

What else besides GFX….● Using bmalloc allocator in WebKit

Page 18: How to Optimize Web Engine

JS Engine: asm.js / turboPan / FTL

http://ariya.ofilabs.com/page/2Ultimately, TurboFan needs to generate some machine code. Predictably, it has its own code generator (currently for x86 and ARM, both 32-bit and 64-bit), it does not reuse the existing Hydrogen and Lithium code generators from Crankshaft.

Page 19: How to Optimize Web Engine

Memory considerations ...● Counts the memory usage of every process● Take action to keep memory usage below the limit (drop caches, stop page loading etc.)● Process “negotiation” to keep global memory usage below the specified limit● Some fixes to avoid memory peaks

Page 20: How to Optimize Web Engine

Memory allowance system(1/3)Memory Counting

● Hooks in tcmalloc and v8● Counts heap size (e.g. not individual malloc() amounts)● Count updated when heap is expanded or shrunk (not at every malloc())● File mappings are not counted (e.g. executable, libs, fonts, etc...)

Counting heap size gives us● An accurate count (system memory count)● A high count (better not count too low)● Less counter updates (more efficient)● An early count (gives a head start to react to memory growth)

Page 21: How to Optimize Web Engine

Memory allowance system(2/3)Process workflow

● Start with a large memory allowance (quota).● Check allowance after each task.● Running out of allowance? - Request more.● Denied more allowance? - Dump caches.● Out of allowance? - Increase allowance and report it.

>>>> Requests and reports (may) require IPC!

● The receiving end of memory allowance requests and reports from processes.● Guards the limit (total memory allowance)● Keeps tab of the memory allowance.● Tells the processes to yield when allowance is running low (e.g. dump caches and stop loading)

Page 22: How to Optimize Web Engine

Memory allowance system(3/3)● Hooks for counting in tcmalloc and V8● Hooks in message loop to jump the queue● Fail process startup on low memory● Resource loading can be put on hold

waiting for more allowance.

Page 23: How to Optimize Web Engine

Let’s discuss what to do for webOS TV 3.0