https://github.com/ufocoder/browser-rendering-performance
A collection of browser rendering performance resources
https://github.com/ufocoder/browser-rendering-performance
Last synced: 7 months ago
JSON representation
A collection of browser rendering performance resources
- Host: GitHub
- URL: https://github.com/ufocoder/browser-rendering-performance
- Owner: ufocoder
- Created: 2021-01-20T22:21:00.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-09-27T11:27:20.000Z (over 4 years ago)
- Last Synced: 2025-01-02T23:27:23.991Z (over 1 year ago)
- Homepage:
- Size: 40 KB
- Stars: 52
- Watchers: 5
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A collection of browser rendering and rendering performance resources
## Specifications
- [HTML5. Web application APIs. Scripting. Event Loops. Processing model](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model)
- [HTML5. Parsing HTML documents. Overview of the parsing model](https://html.spec.whatwg.org/multipage/parsing.html#overview-of-the-parsing-model)
- [CSS Syntax Module Level 3. Parsing](https://www.w3.org/TR/css-syntax-3/#parsing)
## Articles
- [Web Fundamentals. Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering/)
- [How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) - 2011
- [Как рисует браузер. Доклад Яндекса](https://habr.com/ru/company/yandex/blog/468165/) - расшифровка [доклада](https://www.youtube.com/watch?t=6217&v=Xg-oZp0EcYc) - 2019
- [Overview of the RenderingNG architecture](https://developer.chrome.com/blog/renderingng-architecture/) - 2021
- [Key data structures and their roles in RenderingNG](https://developer.chrome.com/blog/renderingng-data-structures/) - 2021
## Talks
- [Faster HTML and CSS: Layout Engine Internals for Web Developers](https://www.youtube.com/watch?v=a2_6bGNZ7bA) - 2008 - very old but useful :)
- [Ilya Grigorik](https://twitter.com/igrigorik), [Critical rendering path - Crash course on web performance](https://www.youtube.com/watch?v=PkOBnYxqj3k) (Fluent 2013)
- [Антон Хлыновский](https://twitter.com/subzey), [Композитные слои и отрисовка в браузере](https://www.youtube.com/watch?v=3rWwFN2ckh0)
- Константин Крамлих, [О настоящем и будущем браузера](https://www.youtube.com/watch?v=6OLVN_gprow) - доклад на YaLoveFrontend, [слайды](https://yadi.sk/i/JH5CHqg91MUcmA)
- [Life of a Pixel. Chrome University 2020](https://www.youtube.com/watch?v=PwYxv-43iM4), [2019](https://www.youtube.com/watch?v=m-J-tbAlFic), [2018](https://www.youtube.com/watch?v=zVwDTLOOSmY)
- [USENIX Security '19 - Site Isolation: Process Separation for Web Sites within the Browser](https://www.youtube.com/watch?v=YvVwrcaxxbQ) - render process security
- [Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015](https://www.youtube.com/watch?v=SmE4OwHztCc) - 2015
- [Prashant Palikhe — From code to pixels in a Blink](https://www.youtube.com/watch?v=rVb0pfGFZFw) - 2019
- [Compositing in Blink and WebKit](https://www.youtube.com/watch?v=Lpk1dYdo62o) - 2013
- [Denis Rechkunov: Progressive Rendering – how to make your app render sooner](https://www.youtube.com/watch?v=aRaQe9n1lPk) - JSConf Iceland 2016
- [The main thread is overworked & underpaid](https://www.youtube.com/watch?v=7Rrv9qFMWNM) - Chrome Dev Summit 2019
- [Александр Канунников - AsyncDom](https://www.youtube.com/watch?v=qZaby7iOVts) - доклад на PiterJS #21
- [Smooth Moves: Rendering at the Speed of Right](https://www.youtube.com/watch?v=AB9qSUhlxh8) - Chrome Dev Summit 2018
## Chromium docs
- [Multi-process Architecture](https://www.chromium.org/developers/design-documents/multi-process-architecture)
- [How Blink works](https://docs.google.com/document/d/1aitSOucL0VHZa9Z2vbRJSyAIsAz24kX8LFByQ5xQnUg/)
- [Threading and Tasks in Chrome](https://chromium.googlesource.com/chromium/src/+/master/docs/threading_and_tasks.md)
- [Compositor (Touch) Hit Testing](https://www.chromium.org/developers/design-documents/compositor-hit-testing)
- [GPU Accelerated Compositing in Chrome](https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome) - This paper has conditions that will trigger the creation of a new render layer
## Sheets
- [CSS Triggers](https://csstriggers.com/)
- [What forces layout / reflow](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)
## Courses
- [Website Performance Optimization](https://classroom.udacity.com/courses/ud884)
- [Browser Rendering Optimization](https://classroom.udacity.com/courses/ud860)
## Tools
- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
- [Lighthouse Scoring Calculator](https://googlechrome.github.io/lighthouse/scorecalc/)