Thread by @AlexisKSanders

#TechSEOBoost @g33konaut /1

Rendering basics:
- DOM tree (🌲) "layouting" - when we care about the placement of HTML elements 🟥🟦🟩🟧
- DOM 🌲"painting" - adding in information within the HTML elements 🖌️🖼️🎨
- see process waterfall in DevTools > Network 🌊

#TechSEOBoost @g33konaut /2

Rendering basics (cont.):
- JavaScript is fundamentally used to change the DOM 🌲
- We might need to re-paint 🖌️
- Layout thrashing - be aware that this is a thing, requesting changes within the layout forcing client to resize

#TechSEOBoost @g33konaut /3

- the indexing system is a bunch of micro-services talking to each other 🤏
- indexing pipeline:
- duplicate elimination ✅❎
- crawler 🕷️
- link parser 🔗
- robots parser 🤖
- WRS 🔄
- content parser 🔪

+ service wrapper w/caching

#TechSEOBoost @g33konaut /4

- puppeteer, high level code to control a Chrome instance

steps:
1. get new instance of headless browser
2. go to page
- wait for network zero (also, set maximum timeout before killing)
3. get the HTML
4. when we have shadow DOM, more work required

#TechSEOBoost @g33konaut /5

- tools using WRS, though not using caching
- telling WRS shorter timeouts
- renderer:
- orchestration 🎼
- instrumentation 🎷
- metric collection - 4 internal debugging #⃣
+ pool manager 🎱 >> headless chrome

#TechSEOBoost @g33konaut /6

instrumentation 🎷: things r changed
- cookies are overwritten (b/c some sites require to use) 🍪
- cookies are not persistent 🗡️🍪
- date/time f(x) are adjusted 📅
- service workers are rejected ⛔️
- permission prompts are rejected ⛔️

#TechSEOBoost @g33konaut /7

🎷(cont.):
- random *might* be deterministic 🦖
- we are not painting pixel, animations = no go 🎞️⛔️

rendering stuffs:
- queue time (avg. 5 seconds) ⏲️
- render time 🔄