Browsers | Notion

The application on which your website is displayed. it’s just another application/process runnning on your OS.

javascript engine + browser engine

https://medium.com/@itskishankumar98/wtf-is-a-browser-c14ca462768e

take chrome as an example

host env = chrome. provides web apis, event loop and tasks queue

v8 = the js engine used in chrome. provides callstack, heap , js interpreter/compiler whatever

Web APIs

https://developer.mozilla.org/en-US/docs/Web/API Run on browser env, not on v8. Not run on main thread! Hence, concurrency is possible. fucking, every answer on how JS implements concurrency says event loop. event loop has nothing to do with this. event loop is just an execution order. the actual work for an async task is done on a seperate browser thread.

https://stackoverflow.com/a/28651001

https://stackoverflow.com/questions/49264524/where-do-the-browser-web-apis-run-in-javascript/49264625#49264625

stuff that happens within web APIs are not a part of javascript or v8. they’re written in c++ etc.

order of execution of html, css and js in the browser

https://www.youtube.com/watch?v=PkOBnYxqj3k

first, html is parsed incrementally, as it arrives over the wire.

if any js script is specified, the html parsing is blocked, and js download, parsing and execution takes place. even CSSOM construction is blocked when js script encountered.

if any css link is specified, the html parsing can continue, but paint/render can’t happen cause css can change the CSSOM. css parsing waits for the entire css file to be downloaded, not incrementally, cause you can have mulitple selectors in the same file targeting the same element.

hence, simple rule of thumb,

first have critical css on top, and then use async for JS. (which will not block anything, until js has been fetched, after which it is immediately parsed and executed)

then, once the DOM and CSSOM are ready, it creates the render tree, which then does layout and then paints that on the screen.

Event loop

is just a while loop that performs some logic in order i.e fetching from callback, asking v8 to execute it etc.

it’s not an ACTUAL THREAD OR ANYTHING!!! it’s just a infinite running task that’s all!

provided by the browser

**https://stackoverflow.com/a/67247893!!!**

tasks queue

the currently running JS, setTimeout callbacks, setInterval callbacks, I/O events callbacks

microtasks queue

promises callbacks, queueMicrotask

animation queue

rAF callbacks

https://javascript.info/event-loop#macrotasks-and-microtasks

https://www.youtube.com/watch?v=cCOL7MC4Pl0

this is just a high level working of the event loop.

lil more detailed https://stackoverflow.com/a/65462647

tick

1 run of the event loop from start to finish

event loop fundamental order

entire js call stack / 1 task from task queue (if entire js call stack is empty, it moves onto step2, and the remaining tasks queue are executed later, after step5)
all tasks from microtask
if 5 is going to run, then before 5, run all task from rAF callback queue. if rAF triggered from rAF, then execute in next tick.
check and runs all microtasks again, if queued in rAF callback or were triggered before but got done while #3 was running.
any re-render that the browser wants to do (depends on the browser) (1 tick might or might not contain a render step) (usually happens once every 16ms)
1. layout / reflow
  1. calculates the structure and position of dom elements wrt to viewport
  2. reflow might not happen if size/structure of nothing changed
2. paint / repaint
  1. calculates style and visuals of all the element ex color, background color, visibility
  2. converts vectors to pixels data (rasterize)
  3. repaint might not happen if reflow didn’t happen, or only the things like color, bg color etc changed but not anything that affects it’s position or size
3. composite
  1. sends converted pixel data to gpu for rendering. might defer or batch to next tick/frame
  2. composite will always happen if a reflow or repaint happeend, but there are things that can trigger this directly wout a reflow/repaint
    1. ex opacity, or transformX. these are GPU accelerated.
repeat

https://javascript.info/event-loop#summary

ex trick question

requestAnimationFrame(() => { console.log("rAF"); });

setTimeout(() => console.log("t1"), 0);

what is logged here?

ans - no set order, as the browser may or may not re-render everytime.

all of this should ideally happen within 1000ms(1s)/60fps = 16ms.

ideally, your application code should run within 10ms (on average), cause after that, the browser needs to do GC + reflow + repaint in the remaninig 6ms.

https://stackoverflow.com/questions/67863820/event-loop-queueing-order

initially looked confusing, but makes sense once you realise await is also making the rest of the code below it a microtask.

https://www.youtube.com/watch?v=cCOL7MC4Pl0

inside of your code, if you update the dom/cssom and then query that property via JS right away, it forces the browser to perform a layout(reflow) right then and there, causing it to lag. it won’t paint then, it’ll still paint later in the event loop itself. but it’ll consider the result of the reflowed as it’s starting point.

box.style.transform = 'translateX(1000px)'; box.style.transition = 'transform 1s'; getComputedStyle(box).transform; // Forces reflow box.style.transform = 'translateX(500px)';

hence, in this code, even though the final value is 500px, since you performed a reflow and the transition was set, it’ll consider the starting point as 1000px. if no transition was set, even though reflow happened, it won’t repaint and it’ll directly consider the starting point as 500px.

https://stackoverflow.com/questions/60686489/what-purpose-does-void-element-offsetwidth-serve

rAF

request animation frame. runs a callback right before the reflow + repaint step.

handling http connections

browsers limit no of concurrent http connections to a domain

https://stackoverflow.com/questions/36835972/is-the-per-host-connection-limit-raised-with-http-2

they might optionally dowgrade the protocol for analytics

https://stackoverflow.com/a/48067393/11750752