Battle of the Browsers

vs

Round 1: DevTools

Chrome

Let's take a trip back to 2010

Other cool features

Firefox

#1 DevTools

It's ok. I survived! 😅

Inspector & Debugger

Extensions for Redux & VueX

Android debugging

Basic performance checks

✅

❌

✅

* Network waterfall & sizes

* execution flame graph

Firefox is big on CSS!

Flexbox inspector

Grid inspector

Demo by Rachel Andrew

Fonts inspector

@FirefoxDevTools

Round 2: Internal Architecture

Chrome

JavaScript Engine

Render Engine

Network Component

Platform Specific Bindings

UI Interface

Heap

Stack

foo()

bar()

baz()

{

}

Memory

Allocation

Execution

Contexts

Ignition

Turbofan

Liftoff

Orinoco

<blink>

Parse HTML + CSS

Render Tree

Layout

Paint

Firefox

#2 Internals

The Quantum Era 🚀

by Lin Clark

What styles apply to each element?

What's the position of each visible element?

Painting the elements onto their containing layer

Composing the layers into the correct order!

<style>

.red { color: red; }

.blue { color: blue; }

</style>

<p class="red blue"> Battle of the Browsers </p>

Do it in parallel

Move it into it's own thread!

Quantum

And starting at v67 (May 2019)

🔥 WebRender 🔥
Moving them to GPU

Round 3: Community and Features

Chrome

Account sync

Chromecast support

+

Security

Chrome Canary

Google Stadia Support

Open Source

Chrome Dev Summit

Documentation

Firefox

#3 Features & Community

The Friendly Neighbor 👋

Right click & you're done!

and on the community side...

The Docs of The Web!

aand they're a not-for-profit!

QA

vs

Va multumim pentru prezenta