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
Android debugging
Basic performance checks
✅
✅
❌
✅
* Network waterfall & sizes
* execution flame graph
Firefox is big on CSS!
Flexbox inspector
Grid inspector
Fonts inspector
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
:max_bytes(150000):strip_icc():format(webp)/firefox-vs-chrome-synthetic-benchmark-results-5bc522474cedfd00515920f9.png)
Firefox
#2 Internals
The Quantum Era 🚀
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
vs
Battle of the Browsers: United
By stefancoros
