How
Browser
Works

Vitaliy Petrychuk

Front-End Developer @SoftServe

Agenda

  • Introduction
  • High level structure
  • Life of a request
  • HTML Parsing
  • CSS Parsing
  • Rendering

Introduction

Web browsers are the most widely used software.

High level structure

Life of a request

Life of a request

HTML Parsing

<html>
  <body>
    <p>
      Hello World
    </p>
    <div>
      <img src="example.png"/>
    </div>
  </body>
</html>

HTML Parsing

<html>
  <body>
    <p>
      Hello World
    </p>
    <div>
      <img src="example.png"/>
    </div>
  </body>
</html>

CSS Parsing

p,
div {
  margin-top: 3px;
}

.error {
  color: red;
}

CSS Parsing

p,
div {
  margin-top: 3px;
}

.error {
  color: red;
}

Rendering

So far

Layout

Paint

Repaint

Reflow

Questions?