1.
Parallel Execution in a Web
Application
By Guy Bary
linkedin.com/in/bgauryy

2.
Who am I
● Technical FED Guild Manager @ Wix
● Working as Software Engineer for 10 years on several
software domains
● Web development is my main focus
● Like Beers, Music and Snowboarding

3.
Basic User Metrics
● Conversion Rate
○ percentage of visitors who did action on a site (purchase/click..)
● Bounce Rate
○ percentage of visitors who entered a web page page once

4.
User metrics - Load Time To Conversion

5.
Application Loading Flow

6.
Application Loading Flow
5
4
3
2
1

7.
Application Flow - CSR vs SSR
● Client Side Rendering (CSR)
○ Fetch HTML
○ Parse HTML
■ Execute scripts
■ Dynamically build DOM
○ Create DOM, CSSOM, Render Tree
○ Paint
○ User interactions
● Server Side Rendering (SSR)
● Static Site Generation (SSG)
○ Fetch HTML
○ Parse HTML
■ less code to parse
■ Content is calculated in the server
○ Create DOM, CSSOM, Render Tree
○ Paint
○ User interactions

8.
The Challenges
Render Web Application soon as possible
Let Users Interact With the Web Application
As Soon As Possible
Let Users Use Web Applications Smoothly

9.
Performance Bottlenecks
● Rendering
○ Critical Rendering Path
○ Reflow/Repaint
● Javascript
○ Main Thread
○ Blocking events
● Network
○ Blocking resources
○ Complex dependencies

10.
Performance Bottlenecks - Rendering
● Screens refresh at 60Hz (historical standard)
● Browser should repaint at 60fps
○ Once every ~16.6ms (1000ms / 60hz)
○ < 60fps might look janky
● requestAnimationFrame

11.
Performance Bottlenecks - Rendering
Critical Rendering Path
The flow of creating initial view on web application
● HTML Parsing (DOM)
● CSS Parsing (CSSOM)
● Create Render Tree
○ CSSOM + DOM
● calculate layout
○ Elements positions
● calculate Paint
● Render

12.
Performance Bottlenecks - Rendering
● Repaint
○ Style changes
● Reflow
○ Calculation of elements position
○ Layout changes
○ Viewport changes

13.
Performance Bottlenecks - Rendering
● Browser need to check render tree and update elements
● User blocking events
● Virtual DOM tries to minimize performance issues

14.
Performance Bottlenecks - Javascript
● Event loop
○ Single main thread
○ User events, Network events, Timers
● Blocking Events
○ Long executions (>16.6 ms, >50ms)
○ synchronous network requests (XMLHttpRequest)
○ repaint/reflow

15.
Event Loop
D
A
B
C
setTimeout UI event onLoad
Microtasks
then microtask microtask
then
● Heap
○ Objects allocations
○ Removed by GC
● Stack
● Tasks queue
● Microtask Queue

16.
Event Loop Specification

17.
Event Loop - Tasks
● Tasks
○ Timers (~4ms)
■ setTimeout
■ setInterval
○ Animation
■ requestAnimationFrame
○ Events
■ DOM/Network/Storage/User events
● Microtask
○ Promise fulfill
○ queueMicrotask

18.
Browser Structure - Chromium

19.
Browser Structure - Chromium
Multi-process architecture
● Process
○ Independent program that runs in OS
○ Dedicated memory space
● Thread
○ Lightweight executable within a process
○ Shares process memory
● IPC (Inter-Process Communication)
○ share data between processes
● Renderer (process)
○ Process that creating
Web page from HTML, JS, CSS
● Pros
○ Isolation (bugs)
○ Security
● Cons
○ CPU
○ Memory

20.
Browser Structure - Chromium
● Renderer
○ Process
○ Chromium Tab
● Realm
○ Instance of the V8 JavaScript engine
○ Isolated JavaScript environment
○ Global and intrinsic objects (Web API)
■ Iframe alert example
○ Proposals
■ ShadowRealms
■ compartments

21.
Browser Structure - V8 Javascript Engine
● JavaScript (ECMAScript) Runtime
● WASM Runtime
● Code parsing & Compilation
● Memory allocation & GC
● Main Thread & Threads allocation

22.
Browser Structure - Workers
● Run Javascript outside main thread
● Has its own V8 instance and event loop
● Types:
○ Dedicated: accessible only to the script that created it
○ Shared worker: accessible to multiple scripts under the same origin
(protocol+host+port)
● No Access to DOM
● V8 Code
● Chromium Implementation Code

23.
● Thread on the renderer process
● Limitations
○ navigator.hardwareConcurrency
● Creation
○ URL
○ Blob
Browser Structure - Workers

24.
Browser Structure - Workers Communication
● Asynchronous Communication
● postMessage/onMessage
○ Example
● BroadcastChannel- cross-context communication
○ Example

25.
Browser Structure - Worklets
● Experimental
● Lightweight Worker (Blink Implementation)
● Types
○ Animation
■ Enables high performance animations
■ Chrome flag: chrome://flags/#enable-experimental-web-platform-
features
○ Paint
■ Extend CSS
■ Allow Custom painting without extending the DOM
○ Layout
■ Allow creating custom layout algorithms
○ Audio
■ Offload Audio processing to high priority thread

26.
Browser Structure - Service Worker
● Worker thread
○ background thread
○ Installed on the browser process
● offline support
○ PWA (manifest.json)
● Push notifications
○ Can be triggered when user is not on the site
● Background sync
○ Support offline user operations

27.
Workers - PartyTown
● Worker library for running scripts on web worker thread synchronously
● Offload execution from the main thread

28.
Workers - PartyTown
● The Trick
○ using synchronous http request to interact with worker thread
○ Execute code in web worker within the service worker

29.
The goal is to maximize web performance by using browser processes
efficiently

30.
How do we detect performance issues?
How do we monitor web application performance?

31.
Monitoring
● Production
○ Monitor users
● Automated sessions
○ Lighthouse
○ Tests
○ …
● Development
○ devTools
Monitor performance metrics where you monitor your conversion

32.
Monitoring Production - performance
● Window.performance
○ getEntries
■ PerformanceEntry
● performance metric
○ memory
○ Measure
○ ..

33.
Monitoring Production - PerformanceObserver
● PerformanceObserver
○ observe performance measurement events
■ Paint
■ largest-contentful-paint
■ longTask
■ Resource
■ First-input
■ Layout-shift

34.
Monitoring Production - Core Web Vitals
● Runtime monitoring
● Google metrics for web applications (focus on users)
● Using PerformanceObserver under the hood
● Metrics
○ FCP - First Contentful Paint
○ CLS - Cumulative Layout Shift
○ FID - First Input Delay
○ INP - Interaction to Next Paint
○ LCP - Largest Contentful Paint
○ TTFB - Time to First Byte
○ TTI - Time to Interactive
○ TBT - The Total Blocking Time

35.
Monitoring Production - Core Web Vitals

36.
Monitoring Automated sessions
● Lighthouse
● Pagespeed (using lighthouse)
● Automation
○ Chrome devtools API (Puppeteer implementation)
○ Puppeteer + Lighthouse
Pitfalls
● Not all websites behave the same for google user agents
● Automated sessions are done mostly on strong machines with strong network
● Not all browsers are covered (real mobile devices, tablets, TV...)

37.
Monitoring with DevTools
● Lighthouse/Audit tab
● Performance tab
● Performance insights tab
● Javascript Profiler tab
● Rendering & Performance Monitors