Preface to 0.

The official docs from Google (Chrome) and Mozilla (Firefox) make this very clear. Google Docs requires some special means to see, which is not a big problem for programmers. However, one of the problems with Google’s official documents is that they are written in English, which is not a problem for me as an English major, but a pain for students with poor English. But more importantly, Google’s official Chinese translation quality is not high, basically cut off most people to see Google official documents and the possibility and necessity. However, at the end of the article, I still attached the Google team’s article for myself and students who are good at English to read.

The good thing is that the Mozilla team has been doing an excellent job of localizing, and while their documentation is in English, their translations are just as good.

The references for this note are two articles.

1. Principles of browser rendering

After Navigation, the browser gets the data returned in the background, and the next step is to render and display the data. This process is how browsers render. As for navigation, it involves the knowledge of THE HTTP protocol. I will write another blog, and I will not click here. I’ll update the hyperlink here when I’m done.

The data we get in the background doesn’t just become a web page. The first data to work with is a piece of HTML code and CSS code.

HTML code sample (from MDN documentation) :

<! doctype HTML><html>
 <head>
  <meta charset="UTF-8"/>
  <title>My simple page</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="myscript.js"></script>
</head>
<body>
  <h1 class="heading">My Page</h1>
  <p>A paragraph with a <a href="https://example.com/about">link</a></p>
  <div>
    <img src="myimage.jpg" alt="image description"/>
  </div>
  <script src="anotherscript.js"></script>
</body>
</html>
Copy the code

Examples of CSS code (my own) :

.heading{
    font-family : san-serif;
}
Copy the code

What the browser actually does is parse the above code.

Once you get the code, the browser starts parsing it. The essence of parsing is a process of Bytes → characters → Tokens → Nodes → Object Model [3].

The transition from bytes to characters involves computer internals, but it’s not hard — parsing the HTML code we write to a certain coding standard (usually UTF-8).

The transition from characters to tokens is tokenization. According to Google, Tokenization is “The browser Secondary strings of characters into distinct tokens — as specified by The W3C HTML5 Standard; for example, , — and other strings within Angle brackets. Each token has a special meaning and its own set of rules. The process by which HTML tags are meaningfully made by browsers according to standards such as W3C standards. In this process, tags such as < HTML > are no longer dry strings, but meaningful. Can be interpreted as a lottery ticket.

Next, the browser constructs a DOM tree (HTML DOM) and a CSSDOM tree, commonly known as the “two trees.” So, what does each tree look like?

Here’s the DOM tree (image from Google) :

Here is the CSSDOM tree (image from Google) :

Building a DOM tree fits neatly into HTML’s own tree structure. The DOM tree just describes the contents of the document, but also represents the hierarchy. In the DOM tree, < HTML > is the root, and the content is expanded layer by layer below it.

Regarding the CSSDOM tree, although CSS is specified in a way that does not necessarily follow the HTML-style tree structure, it does because it is deeply bound to HTML. In CSS, child nodes inherit the CSS styles of their parents, but can also specify their own styles.

The final step is to render. The specific process is:

The DOM tree and CSSDOM tree are combined to form a render tree. There are only nodes in the tree that need to be rendered to the page. Then, the layout calculation is carried out to layout each element on the tree, which can be understood as picking the fruit from the tree and placing it neatly in the arranged position. Finally, draw the web page.

To sum up, except for the necessary processes inside the computer (Bytes → characters → tokens), the last two steps (Nodes → Object Model) are similar to those of drawing and writing an article: first build the skeleton (DOM tree and CSSDOM tree), then work on the content.

2. Two ways to animate CSS

What is animation? That is, the illusion caused by the visual residue when the still picture is played continuously. In CSS, there are two ways to animate: Transition and animation.

  • transition: can be used to specify the transition effect of one or more properties. You can define different transitions for an element when it switches between different states.
  • animation: Specifies a group or groups of animations separated by commas

In fact, both Transition and animation are shorthand properties.

Transition includes the following branching properties:

  • transition-property: Specifies the name of the application transition property.
  • transition-duration: Specifies the time, in seconds or milliseconds, to transition the animation. The default value is0s, indicating that no transition animation occurs.
  • transition-timing-function: The CSS property is affectedtransition effectWill produce an ever-changing median. This property is used to describe how the intermediate value is computed.
  • transition-delay: Specifies the amount of time to wait before the transition effect kicks in.

Separated by a space after the transition properties of the sequence is: the property name | duration | timing function | delay

As for the transition-timing function, please refer to MDN official description [6] for detailed instructions and dynamic demonstration.

Animation includes more branching properties. They are, in order:

  • animation-name: Name the animation
  • animation-duration: Specifies the duration of an animation cycle
  • animation-timing-functionThe: property defines the rhythm at which a CSS animation is executed during each animation cycle. There may be one or more values<timing-function>.
  • animation-delay: Defines when the animation begins, the length of time from when the animation is applied to the element to when the animation begins. 0s is the default value for this property, which means that the animation starts executing immediately after it is applied to the element.
  • animation-iteration-count: Defines the number of times the animation runs before it ends.
  • animation-direction: Indicates whether the animation plays backwards.
  • animation-fill-mode: Sets how a CSS animation applies styles to its target before and after execution.
  • animation-play-stateThe: property defines whether an animation is run or paused.

Spacing also follows the order above.

3. Anything else you want to write

It’s all in these two articles:

  • The front end learns to step on the pit
  • CSS cascading context

Reference

  • [1] Populating the page: how browsers work – MDN
  • [2] Render pages: How browsers work -MDN
  • [3] Google team’s related article
  • [4] animation – MDN
  • [5] transition – MDN
  • [6] Timing Function – MDN