└── README.md /README.md: -------------------------------------------------------------------------------- 1 | A collection of browser rendering and rendering performance resources 2 | 3 | ## Specifications 4 | - [HTML5. Web application APIs. Scripting. Event Loops. Processing model](https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model) 5 | - [HTML5. Parsing HTML documents. Overview of the parsing model](https://html.spec.whatwg.org/multipage/parsing.html#overview-of-the-parsing-model) 6 | - [CSS Syntax Module Level 3. Parsing](https://www.w3.org/TR/css-syntax-3/#parsing) 7 | 8 | ## Articles 9 | - [Web Fundamentals. Rendering Performance](https://developers.google.com/web/fundamentals/performance/rendering/) 10 | - [How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) - 2011 11 | - [Как рисует браузер. Доклад Яндекса](https://habr.com/ru/company/yandex/blog/468165/) - расшифровка [доклада](https://www.youtube.com/watch?t=6217&v=Xg-oZp0EcYc) - 2019 12 | - [Overview of the RenderingNG architecture](https://developer.chrome.com/blog/renderingng-architecture/) - 2021 13 | - [Key data structures and their roles in RenderingNG](https://developer.chrome.com/blog/renderingng-data-structures/) - 2021 14 | 15 | ## Talks 16 | - [Faster HTML and CSS: Layout Engine Internals for Web Developers](https://www.youtube.com/watch?v=a2_6bGNZ7bA) - 2008 - very old but useful :) 17 | - [Ilya Grigorik](https://twitter.com/igrigorik), [Critical rendering path - Crash course on web performance](https://www.youtube.com/watch?v=PkOBnYxqj3k) (Fluent 2013) 18 | - [Антон Хлыновский](https://twitter.com/subzey), [Композитные слои и отрисовка в браузере](https://www.youtube.com/watch?v=3rWwFN2ckh0) 19 | - Константин Крамлих, [О настоящем и будущем браузера](https://www.youtube.com/watch?v=6OLVN_gprow) - доклад на YaLoveFrontend, [слайды](https://yadi.sk/i/JH5CHqg91MUcmA) 20 | - [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) 21 | - [USENIX Security '19 - Site Isolation: Process Separation for Web Sites within the Browser](https://www.youtube.com/watch?v=YvVwrcaxxbQ) - render process security 22 | - [Ryan Seddon: So how does the browser actually render a website | JSConf EU 2015](https://www.youtube.com/watch?v=SmE4OwHztCc) - 2015 23 | - [Prashant Palikhe — From code to pixels in a Blink](https://www.youtube.com/watch?v=rVb0pfGFZFw) - 2019 24 | - [Compositing in Blink and WebKit](https://www.youtube.com/watch?v=Lpk1dYdo62o) - 2013 25 | - [Denis Rechkunov: Progressive Rendering – how to make your app render sooner](https://www.youtube.com/watch?v=aRaQe9n1lPk) - JSConf Iceland 2016 26 | - [The main thread is overworked & underpaid](https://www.youtube.com/watch?v=7Rrv9qFMWNM) - Chrome Dev Summit 2019 27 | - [Александр Канунников - AsyncDom](https://www.youtube.com/watch?v=qZaby7iOVts) - доклад на PiterJS #21 28 | - [Smooth Moves: Rendering at the Speed of Right](https://www.youtube.com/watch?v=AB9qSUhlxh8) - Chrome Dev Summit 2018 29 | 30 | ## Chromium docs 31 | 32 | - [Multi-process Architecture](https://www.chromium.org/developers/design-documents/multi-process-architecture) 33 | - [How Blink works](https://docs.google.com/document/d/1aitSOucL0VHZa9Z2vbRJSyAIsAz24kX8LFByQ5xQnUg/) 34 | - [Threading and Tasks in Chrome](https://chromium.googlesource.com/chromium/src/+/master/docs/threading_and_tasks.md) 35 | - [Compositor (Touch) Hit Testing](https://www.chromium.org/developers/design-documents/compositor-hit-testing) 36 | - [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 37 | 38 | ## Sheets 39 | 40 | - [CSS Triggers](https://csstriggers.com/) 41 | - [What forces layout / reflow](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) 42 | 43 | ## Courses 44 | - [Website Performance Optimization](https://classroom.udacity.com/courses/ud884) 45 | - [Browser Rendering Optimization](https://classroom.udacity.com/courses/ud860) 46 | 47 | ## Tools 48 | 49 | - [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) 50 | - [Lighthouse Scoring Calculator](https://googlechrome.github.io/lighthouse/scorecalc/) 51 | --------------------------------------------------------------------------------