The exact order can vary. Browsers may download multiple resources concurrently, reuse cached files or execute scripts that affect document parsing.
8. What Happens Inside the Browser?
Understanding the basic rendering process will help you learn HTML, CSS and JavaScript more effectively.
Step 1: HTML Parsing
The browser parses HTML markup and constructs a document structure called the Document Object Model, or DOM.
Step 2: CSS Processing
When stylesheets are available, the browser processes CSS rules to determine how elements should appear.
Step 3: JavaScript Execution
JavaScript can read or change the DOM, respond to events and update the page. Scripts can also influence loading and rendering behavior.
Step 4: Layout and Rendering
The browser calculates element positions and sizes, paints visual content and presents the result on the screen. Modern browsers may perform these operations in more complex or overlapping stages.
9. Static HTML vs Dynamically Generated HTML
Static HTML
Static HTML is stored as a file and served without requiring the server to generate a new document for every request.
<h1>About Our Company</h1>
<p>We build websites and software.</p>This type of content can be served by a static hosting service or a conventional web server.
Dynamically Generated HTML
Dynamically generated HTML is produced by an application or another process. The output may depend on a user's request, database records, authentication or application logic.
For example, a Laravel application may retrieve a user's name and render it into an HTML template.
<h1>Welcome, Bikram!</h1>This is an example of the resulting HTML. A server-side template could generate the name dynamically before sending the document to the browser.
Important: Both static and dynamically generated pages can result in HTML being processed by the browser. A server-side framework is not required for every website.
10. Frontend and Backend: An Introduction
Frontend development concerns the parts of a web application presented and used in the browser. Backend development handles server-side application logic, data access, authentication and other operations.