---
title: "Browser"
path: "Browser"
---

{%hackmd @RintarouTW/About %}

# Browser

<center><b>Browser Internals</b></center>

digraph "Browser Internals" {
  node [shape=box style="rounded,filled" color="#ccdddd"]
  edge [arrowhead=vee arrowsize=0.8]
  #rankdir=LR
  ".html",".css",".js",".svg",".png" -> "Loader" -> "Parser" 
  edge [label=""]
  subgraph {
    #style=dashed
    "Parser" -> "Document Object Model"
    "Document Object Model" -> "Tags/Elements(Node)", "Styles", "Images", "Scripts"
    "Tags/Elements(Node)", "Styles", "Images" -> "Renderer"
    "Scripts" -> "Script Machine"
    edge [label=" manipulate"]
    "Script Machine" -> "Document Object Model"
    edge [label="  request"]
    "Script Machine" -> "Loader"
    edge [label="  response"]
    "Loader" -> "Script Machine"
  }
}

- Renderer
- DOM (Nodes)
- Text
- Font
- Image
- Graphic
- Video
- Custom Elements
- etc...
- Style
- Script
- Module (.mjs)
https://jakearchibald.com/2017/es-modules-in-browsers/
- Classic (.js)
- Script Machine
- Single Thread
- Worker Threads
- Worker()
- SharedWorker()
- ServiceWorker()
- dedicated worker
- Messaging between threads
- Event Driven
- Graphic
- Canvas (2d context)
- SVG (2d context)
- WebGL (3d context)
- Data Access (URL Loader)
- Network (HTTP)
- File
- Local Storage
- WebSocket
- OS (Event/Messaging)
- HID Input Output
- OpenGL/ES/VG
- File System
- Socket
- Hardware Access
- CaptureDevices
- I/O

###### tags: `browser`