The Safari Web Browser and 10 Useful Safari Features

A Complete Introduction to the Safari Web Browser and 10 Useful Safari Features on iPhone Safari is Apple’s default web browser and a core part of the Apple ecosystem.  While many users are familiar with Safari on a basic level, few take full advantage of its design philosophy and productivity-focused features—especially on the iPhone.  Safari is built to be fast, lightweight, and deeply integrated with Apple devices, offering a smooth and intuitive browsing experience. 1. What Is Safari? Safari is a web browser developed by Apple and first released in 2003.  It is the default browser on macOS, iOS, and iPadOS.  Safari is built using Apple’s WebKit engine, which emphasizes efficiency, performance, and smooth interaction with Apple hardware. Unlike some cross-platform browsers, Safari is optimized specifically for Apple devices.  This tight integration allows Safari to deliver a consistent experience across iPhone, iPad, and Mac. 2. Key Characteristics of S...

How a Browser Renders a Website

How a Browser Renders a Website: A Complete Step-by-Step Explanation

How a Browser Renders a Website


When you type a URL into your browser and hit Enter, a fully rendered website magically appears in front of you within seconds. 

To most users, this feels effortless. But behind the scenes, your browser performs a complex, multi-step process involving networking, parsing, rendering, and execution. 

Every image, button, font, animation, and line of text goes through a carefully orchestrated pipeline before it becomes visible on your screen.

Understanding how a browser displays a website is essential not only for web developers but also for anyone who wants to grasp the invisible machinery of the modern web. 


1. The User Enters a URL

Everything begins when a user types a web address like www.example.com into the browser’s address bar. 

At this moment, the browser needs to determine where the website is hosted. 

Humans use domain names for convenience, but browsers need IP addresses. 

This leads to the next step: DNS resolution.


2. DNS Lookup: Finding the Website’s IP Address

Before a browser can load any webpage, it must convert the domain name into an IP address.

The DNS lookup involves:

  • Checking the browser’s cache

  • Checking the operating system’s cache

  • Querying a DNS resolver (ISP or public DNS)

  • Contacting root, TLD, and authoritative DNS servers

Once the browser receives the website's IP address, it knows exactly which server to communicate with.


3. Establishing a Connection (TCP Handshake + TLS Handshake)

With the IP address in hand, the browser must now establish a stable connection.

TCP Handshake

The browser and the server exchange SYN and ACK packets to create a reliable communication channel. 

This ensures that all data reaches its destination accurately and in order.


TLS Handshake (Only for HTTPS)

If the website uses HTTPS—which most modern sites do—the browser and server must:

  • Negotiate encryption protocols

  • Validate the SSL/TLS certificate

  • Establish a secure encrypted session

This protects the data from eavesdropping and tampering.

Only after all handshakes are complete can the browser proceed to request data.


4. Sending the HTTP Request

The browser sends an HTTP request to the server. A typical request includes:

  • Request line (GET /index.html)

  • Headers (browser type, accepted formats, cookies, etc.)

  • Optional body (for POST requests)

The server processes this request and prepares the website content.


5. Receiving the HTTP Response

The server replies with an HTTP response that contains:

  • Status code (200, 301, 404, 500, etc.)

  • Response headers

  • Body (HTML, JSON, images, or any resource)

If the response is successful (200 OK), the browser begins interpreting the HTML file.


6. Parsing the HTML: Building the DOM

The first major rendering step is parsing HTML to build the DOM (Document Object Model).

The DOM is a tree-like structure representing the page’s elements:

<html>
  <head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

While constructing the DOM, the browser may encounter:

  • <script> tags

  • <link> tags

  • <style> tags

  • Image references

  • External resources

Each of these may require additional requests.


7. Downloading CSS: Building the CSSOM

CSS files define the appearance of the webpage. 

As soon as the browser encounters a <link rel="stylesheet"> tag, it requests the external CSS file.

When the file arrives, the browser parses it to create the CSSOM (CSS Object Model), another tree structure that maps styles to elements.

The CSSOM includes rules, selectors, inheritance, and cascading priorities.


8. Blocking Rendering: Why CSS Matters

Browsers cannot safely render a webpage until both:

  • DOM is built

  • CSSOM is complete

This is because a missing CSS file might dramatically change layout and appearance.

Therefore, CSS is considered a render-blocking resource.

Once the browser has both the DOM and CSSOM, it merges them to form the render tree.


9. Executing JavaScript

JavaScript can modify HTML, change styles, load data, or manipulate the page in real time. When the browser encounters a <script> tag:

If the script is:

  • Not async or defer → Rendering stops until the script finishes.

  • Async → Script loads independently but executes as soon as ready.

  • Defer → Script executes after DOM is fully parsed.

The browser’s JavaScript engine (V8 for Chrome, SpiderMonkey for Firefox) handles:

  • Parsing JavaScript

  • Compiling code

  • Running scripts

  • Managing the call stack

JavaScript may modify the DOM or CSSOM, forcing the browser to re-render parts of the page.


10. Creating the Render Tree

Once HTML and CSS are understood, the browser prepares the render tree, a structure containing only the elements that will appear on the screen.

Render tree excludes:

  • Non-visual elements like <head>

  • Elements with display: none

Each node in the render tree includes:

  • Content

  • Styles

  • Size

  • Position

Now the browser knows what to draw and how it should look.


11. Layout (Reflow): Calculating Positions and Sizes

The next step is layout, also called reflow.

The browser determines:

  • Element height and width

  • Box model values (margin, border, padding)

  • Position in the viewport

  • How elements fit together

This step can be computationally heavy, especially on complex pages. 

Whenever JavaScript changes layout-related properties, reflow might happen again.


12. Painting: Filling Pixels on the Screen

After layout, the browser begins painting, which draws:

  • Text

  • Colors

  • Images

  • Shadows

  • Borders

  • Backgrounds

Each visual part becomes a painted layer.


13. Compositing: Combining Layers for Display

Modern browsers break pages into multiple layers for better performance. 

Once all layers are painted, they are composited together by the GPU.

Compositing allows:

  • Smooth scrolling

  • 3D effects

  • CSS transforms

  • Hardware acceleration

This is the final stage before the webpage appears fully rendered.


14. Continuous Interaction: Reflow and Repaint Events

Even after the page is displayed, the browser continues reacting to:

  • User input

  • Animations

  • JavaScript updates

  • Window resizing

Any of these can trigger partial or complete:

  • Repaint (visual change without size change)

  • Reflow (size or structure change)

Efficient websites minimize unnecessary reflows for performance.


15. Caching: Making Pages Load Faster Next Time

To improve speed, browsers cache many components:

  • HTML files

  • CSS

  • JavaScript

  • Images

  • Fonts

  • DNS lookups

  • SSL handshakes

When you revisit a site, most resources load from cache instead of downloading again, dramatically improving performance.


16. Conclusion

The process of displaying a website is far more complex than it appears. 

From DNS lookups and server communication to HTML parsing, CSS rendering, JavaScript execution, layout calculation, painting, and compositing, a browser performs dozens of sophisticated tasks in milliseconds.

This invisible pipeline is what makes the web feel fast, smooth, and interactive. 

Understanding this process helps developers build faster sites and helps users appreciate the remarkable technology behind every click.

Popular posts from this blog

How Browsers Load a Web Page

Image
How Browsers Load a Web Page Understanding how a browser loads a web page is essential for anyone who works with websites—developers, designers, and even content creators.  When you understand this workflow, you can optimize performance, fix rendering delays, and improve user experience and Core Web Vitals. 1. Step 1 — URL Input & DNS Lookup The browser loading journey begins the moment a user types a URL like: https: //example.com 1.1 What happens next? The browser checks its internal cache for a DNS record. If not found, it queries the operating system DNS cache. If still not found, the OS sends a request to a DNS resolver. The resolver returns the IP address (e.g., 93.184.216.34 ) of the server hosting the website. 1.2 Why it matters DNS lookup adds latency. Slow DNS affects Time to First Byte (TTFB). 2. Step 2 — Establishing a TCP & TLS Connection 2.1 TCP Handshake After DNS lookup, the browser must establish a connection using the TCP ...
Read more

The Birth of Internet Cafes and Online Communities

Image
The Birth of Internet Cafes and Online Communities The late 20th century marked a revolution in human communication.  The internet, once confined to research labs and universities, began spreading into homes, schools, and cities across the globe.  But before every household had Wi-Fi or smartphones, there was another space where people first experienced the digital world together — the Internet Cafe .  At the same time, online communities emerged, connecting people through shared interests, conversations, and digital friendships.  Together, these two phenomena laid the cultural and social foundation of the modern connected world. 1. The Rise of the Internet Cafe: A Gateway to the Digital World In the early 1990s, personal computers and internet connections were still expensive and not widely available.  For many, the first experience of going online didn’t happen at home but in a small, bustling space filled with computers — the Internet Cafe . The world’s ...
Read more

The Early Search Engines: Yahoo, AltaVista, and the Dawn of Web Discovery

Image
The Early Search Engines: Yahoo, AltaVista, and the Dawn of Web Discovery When the World Wide Web first became public in the early 1990s, it was a chaotic digital landscape — thousands of pages scattered across servers around the world, with no easy way to find what you were looking for.  There were no smart algorithms, no Google, and no social media recommendations.  To explore the growing web, users needed a way to search it.  That’s where the first search engines came in.  Among them, Yahoo! and AltaVista were the pioneers that shaped how people discovered information online and laid the foundation for the search-dominated internet we use today. 1. The Problem of Finding Information on the Early Web In the early 1990s, the World Wide Web was growing rapidly.  What began as a small collection of research and university websites quickly expanded into thousands of public pages.  But unlike libraries, the web had no index or directory system.  Us...
Read more