HTML page basic structure and loading process

HTML page basic structure and loading process

[[433851]]

Hello everyone, I am Pippi.

Preface

For the front end, HTML is the most basic content.

Today, let's learn about the relationship between HTML and web pages, and how it differs from DOM. Through this lecture, you will understand how browsers process HTML content, and how we can improve the performance of web pages and thus improve the user experience.

1. Browser page loading process

Have you ever had this experience: when you open a browser, you find that it keeps spinning in circles, or you wait for a long time before the page opens...

At this point, will you choose to close the page or wait patiently?

This phenomenon, in addition to reasons such as unstable network and slow network speed, is mostly caused by unreasonable page design that leads to long loading time.

We all know that web pages are written in HTML/CSS/JavaScript.

  • The responsibility of HTML is to tell the browser how to organize the page and build the basic structure of the page;
  • CSS is used to decorate HTML to make our pages look better;
  • JavaScript can enrich page functionality and make static pages dynamic.

HTML consists of a series of elements, commonly referred to as HTML elements. HTML elements are usually used to define the structure of a web page. Basically, all web pages have this HTML structure:

  1.  <html>
  2.  <head></head>
  3.  <body></body>
  4.  </html>

in:

  • The html element is the root element of the page, which describes the complete web page;
  • The head element contains the content that we want to include in the HTML page, but do not want to display on the web page;
  • The body element contains all the content displayed on the page when we visit the page, which is what the user will eventually see;

There are a lot of elements in HTML, including custom elements that can be used in Web Components.

Earlier we mentioned that an unreasonable HTML structure of a page may lead to slow page response. This process is often reflected in the design of the <script> and <style> elements, which will affect the processing of Javascript and CSS codes during page loading.

Therefore, if you want to increase the loading speed of the page, you need to understand the loading process of the browser page and solve the problem fundamentally.

When loading a page, the browser uses the GUI rendering thread and the JavaScript engine thread (more detailed browser loading and rendering mechanisms will be introduced in Lecture 7). The GUI rendering thread is responsible for rendering the HTML elements of the browser interface, and the JavaScript engine thread is mainly responsible for processing JavaScript scripts.

Since JavaScript may change the interface structure and style during execution, they are designed to be mutually exclusive. That is, when the JavaScript engine is executed, the GUI thread will be suspended.

Taking the official website of NetEase Cloud Classroom as an example, let’s take a look at the web page loading process.

(1) When we open the official website, the browser will get the HTML content from the server.

(2) After the browser obtains the HTML content, it begins to parse the HTML elements from top to bottom.

(3) The content of the <head> element will be parsed first, but the browser has not yet started rendering the page.

We can see that the <head> element contains <meta> elements for describing page metadata, and some <link> elements involving external resources (such as images, CSS styles, etc.), and the browser will fetch these external resources. In addition, we can also see that the <head> element also contains a lot of <script> elements, which point to external resources through the src attribute.

(4) When the browser parses here (step 3), it will pause parsing and download the JavaScript script.

(5) When the JavaScript script is downloaded, the control of the browser is transferred to the JavaScript engine. When the script is executed, the control is returned to the rendering engine, which continues to parse the HTML page.

(6) At this point, the content of the <body> element begins to be parsed and the browser begins to render the page.

In this process, we see that the <script> element placed in the <head> will block the rendering process of the page: putting JavaScript in the <head> means that all JavaScript code must be downloaded, parsed and interpreted before the page can be rendered.

At this point, we understand that if the external script takes a long time to load (for example, it cannot be downloaded completely), the web page will become unresponsive for a long time, the browser will appear to be in a "fake death" state, and the user experience will become very bad.

Therefore, for web pages that have high performance requirements and need to quickly present content to users, JavaScript scripts are often placed at the end of the <body>. This can avoid resource blocking and allow the page to be displayed quickly. We can also use attributes such as defer/async/preload to mark the <script> tag to control the loading order of JavaScript.

Baidu Home Page

As you can see, although the <head> element of Baidu's homepage also includes some <script> elements, most of them have the async attribute added. The async attribute allows these scripts to request resources in parallel, and parse and execute them as soon as the resources are acquired. This process is asynchronous and will not block HTML parsing and rendering.

For a search engine like Baidu, it is necessary to provide available services to users in the shortest possible time, which includes the display and interactivity of the search box. Other content will have a relatively low priority.

When rendering a page, the browser needs to parse HTML and CSS to get the DOM tree and CSS rule tree, which are combined to generate the final rendering tree and render it. Therefore, we often put CSS in <head> to avoid repeated calculations of browser rendering.

2. What is the difference between HTML and DOM

We know that <p> is an HTML element, but an element like <p> is often called a DOM node. So what is the difference between HTML and DOM?

According to the official description of MDN: The Document Object Model (DOM) is a programming interface for HTML and XML documents.

In other words, DOM is an interface used to operate and describe HTML documents. If the browser uses HTML to describe the structure of a web page and render it, then DOM can be used to obtain the structure of a web page and operate it. Generally speaking, we use JavaScript to operate the DOM interface to achieve dynamic changes in the page and user interaction.

In the development process, objects are often used to describe a certain type of thing, and a specific set of structures is used to describe a set of certain things. The same is true for DOM, which parses an HTML document into a set of structures consisting of DOM nodes and related objects containing attributes and methods.

3. DOM parsing

Our common HTML elements will be parsed into nodes in the browser. For example, the following HTML content:

  1.  <html>
  2.  <head>
  3.  <title>Title</title>
  4.  </head>
  5.  <body>
  6.  <a href= 'xx.com' > My hyperlink</a>
  7.  <h1>Page First Title</h1>
  8.  </body>
  9.  </html>

Open the console Elements panel and you can see the HTML structure, as shown below:

In the browser, the above HTML will be parsed into a DOM tree like this:

We all know that for tree structures, parent/child/sibling and other methods are often used to describe the relationship between nodes, and DOM trees are no exception.

For example, we often abstract page functions and encapsulate them into components. However, no matter how we organize them, the page is still based on the tree structure of DOM, so the components are also in a tree structure, and the relationship between components can also be described in the way of parent/child/sibling. At the same time, most applications now also start with root as the root node, and our state management and data management often present a tree structure .

4. Event delegation

We know that the order in which each element in the browser receives events from the page includes the event capture phase, the target phase, and the event bubbling phase. Based on the event bubbling mechanism, we can delegate the events of child elements to the parent element for processing, which is event delegation.

If we listen on each element, we need to bind three events; (assuming there are three sibling nodes a, b, and c on the page)

  1.  function clickEventFunction(e) {
  2.   console.log(e.target === this); // logs ` true `
  3.  // You can use this to get the current element here
  4.  }
  5.  // Elements a, b, c binding
  6.  element2.addEventListener( "click" , clickEventFunction, false );
  7.  element5.addEventListener( "click" , clickEventFunction, false );
  8.  element8.addEventListener( "click" , clickEventFunction, false );

Using event delegation, you can delegate events to parent nodes by adding them to the parent node:

  1.  function clickEventFunction(event) {
  2.   console.log(e.target === this); // logs ` false `
  3.  // Get the clicked element
  4.   const eventTarget = event.target;
  5.  // Check if the source element `event.target` meets the expectation
  6.  // This controls the display content of the ad panel
  7.  }
  8.  // Element 1 binding
  9.  element1.addEventListener( "click" , clickEventFunction, false );

What problem does this solve?

  • Binding child elements will bind events many times, while binding parent elements only requires one binding.
  • Delegate the event to the parent node, so that we do not need to re-bind the event when adding, deleting, moving, etc. child elements.

The common usage is mainly the list structure mentioned above. Each option can be edited, deleted, tagged, etc., and the events are delegated to the parent element. No matter we add, delete, or update options, we do not need to manually bind and remove events.

If the list is large, monitoring events for tens of thousands of nodes will consume a lot of performance. By using event delegation, we can greatly reduce the browser's monitoring of elements, which is also a relatively simple and basic approach in front-end performance optimization.

Notice:

If we delegate events directly on document.body, it may cause additional problems;

Since the browser has a synthesis step when rendering a page, the synthesis process will first divide the page into different synthesis layers, and the user needs to receive events when interacting with the browser. At this time, the browser will mark the area on the page with the event handler, and the marked area will communicate with the main thread.

If we bind an event to document.body, the entire page will be marked;

Even if our page doesn't care about some parts of user interaction, the compositor thread must communicate with the main thread and wait every time an event occurs. In this case, we can use the passive: true option to solve

V. Conclusion

We learned about the role of HTML and how it affects the loading process of pages in the browser. We also introduced the use of DOM interfaces to control the display and functional logic of HTML. We learned about DOM parsing event delegation and other related concepts.

This article is reprinted from the WeChat public account "IT Sharing Home", which can be followed through the following QR code. To reprint this article, please contact the IT Sharing Home public account.

<<:  gRPC services communicating through the Istio mesh

>>:  A joke is not nonsense: IP address and MAC address of high-speed rail transfer

Recommend

HTTP caching is enough to read this article

Introduction HTTP caching mechanism is an importa...

PacificRack has run away

The tribe has not shared any information about Pa...

How Network Modernization Drives Digital Transformation

[[422647]] The fact is that the global outbreak o...

Tencent Cloud mid-year discount preview, pre-heating exclusive 618 yuan early bird coupons with one click

Tencent Cloud's annual mid-year discount 618 ...

From "Integration" to "Huawei Inside", Huawei builds a new ecosystem in the intelligent era

[51CTO.com original article] [Fuzhou, China, Marc...

Quick Start with Linkerd v2 Service Mesh

In this guide, we'll walk you through how to ...

Is it really possible for humans to achieve immortality on the Internet?

Through the connection of virtual network devices...

A “cat” walking alone on a narrow road: Cat.1 and narrowband communications (I)

Labs Guide When we talk about narrowband communic...

Have you ever thought about why TCP needs to handshake before sending data?

When I look at computer networks, there is always...

How to redirect HTTP to HTTPS in Nginx

Nginx, pronounced "Engine x", is a free...

Calculation of IP address and subnet mask

Each device connected to the network needs a uniq...

Huawei releases next-generation CloudLink video conferencing solution

[Beijing, China, September 6, 2019] Huawei held a...

Yecao Cloud: Hong Kong VPS annual payment starts from 139 yuan, Hong Kong dedicated server starts from 199 yuan/month

Yecaoyun is a Chinese hosting company founded in ...

What did Chinese operators show the world at the Winter Olympics?

This Winter Olympics is full of technological con...

Introduction to Virtual Switch Technology and Practical Applications in IP Metropolitan Area Networks

With the continuous development of information te...