In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-29 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
This article mainly explains "HTML, CSS, JavaScript how to become a page", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "HTML, CSS, JavaScript how to become a page" bar!
From entering HTML, CSS, JavaScript to rendering the desired effect in the browser, the rendering process is divided into these sub-stages: building DOM tree, style calculation, layout phase, layering, drawing, blocking, rasterization and compositing.
Use the following html to illustrate these processes:
/ / aa.html Title hello
Hi
Ok / / aa.css # p-two {font-size:2rem;} / / aa.js $("# p-three") .bind ("click", function () {$("# p-three") .css ("color", "blue");})
Build a DOM tree
Because the browser implementation directly understands and enables the HTML, you need to transform the HTML into a structure that the browser can understand-the DOM tree.
Style calculation
The purpose of style calculation is to calculate the specific style of each element in the DOM node, which is divided into three steps:
1. Convert CSS into a structure that browsers can understand-styleSheets
two。 Convert the property values in the stylesheet to standardize them, such as:
Font-size:2em- > font-size:32px p {color:blue}-> p {color:rgb (0P0255)} div {font-weight:bold}-> div {font-weight:700}
3. The specific style of each node in the DOM tree is calculated, and the final output is the style of each DOM node, which is saved in the structure of ComputedStyle.
Layout stage
Now, with the styles of the elements in the DOM tree and the DOM tree, but not enough to display the page, because the geometric position information of the DOM element is not yet known, the layout phase just needs to calculate the geometric position of the element in the DOM tree, including the following steps:
Create a layout tree
The DOM tree contains many invisible tags, such as a tag that uses the attribute "display:none". So before displaying, we have to build an additional layout tree that contains only visible elements. The general process of creating a layout tree by the browser is to traverse all the visible nodes in the DOM tree and add them to the layout tree, ignoring the invisible nodes.
Layout calculation
Calculate the geometric coordinates of each element and save this information in the layout tree.
Summary of the first three stages: after the HTML page content is submitted to the browser rendering engine, the rendering engine first parses the HTML into DOM; that the browser can understand, and then calculates the style of all nodes according to the CSS style sheet; then calculates the geometric coordinate position of each element and saves the information in the layout tree.
Stratification
With the style and location information of each element, you still can't start drawing the page, because there are many complex effects in the page, such as 3D changes, page scrolling, and so on. In order to achieve these effects, the rendering engine also needs to generate a special layer for a specific node and a corresponding layer tree, that is, some elements are actually divided into many layers, and these layers are superimposed to form the final page. A corresponding layer can be generated as long as the element meets one of the following two conditions:
Elements with cascading context attributes are promoted to a separate layer
As you can see from the figure, elements that explicitly locate attributes, elements that define transparent attributes, elements that use CSS filters, and so on, all have cascading context attributes.
Areas that need to be cut will also be created as layers.
For example: after specifying a div big width and height attribute in css, if the text content of the div sub-element p tag exceeds the widthheight size, only the content that can be displayed in the widthheight area will be displayed, and the other content will be cut.
Layer drawing
With the layer tree, the rendering engine draws each layer in the layer tree. The layer drawing phase is to enter a list of various drawing instructions (note that this stage is not really starting to draw).
Add code to the original aa.html file pp in the following figure, the red area is the drawing list, the pink area shows the drawing process, you can click on any drawing process to view.
Blocking and rasterization operation
The drawing list is only used to record the drawing order and instructions, while the actual drawing operation is done by the synthesis thread in the rendering engine. When the layer's drawing list is ready, the main thread submits the drawing list to the compositing thread. The compositing thread divides the layer into blocks, and the blocks near the viewport (that is, the visible area of the current window) give priority to producing bitmaps, which are actually performed by rasterization (the specific meaning of rasterization can be self-Baidu). Rendering maintains a rasterized thread pool, all block rasterization is performed within the thread pool, the process is accelerated using GPU, and the produced bitmaps are saved in GPU memory.
Synthesis and display
When all the blocks are rasterized (rasterized), the compositing thread generates a command to draw the block, which is then submitted to the browser process (here we briefly talk about the Chrome browser multi-process architecture, which divides the browser into: rendering process, plug-in process, GPU process and browser main process, which includes UI module, network module, file module, etc.) The browser process draws its page content into memory and finally displays the memory content on the screen.
At this point, HTML+CSS+JavaScript can generate the page we see.
Thank you for your reading, the above is "HTML, CSS, JavaScript is how to become a page" of the content, after the study of this article, I believe you on HTML, CSS, JavaScript is how to become a page of this problem has a deeper understanding, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.