JavaScript

JavaScript (JS) is a function-first, lightweight, interpreted or just-in-time compiled programming language. Node.js is a scripting language for both client and server (Node.js), known as unstructured programming. Dynamic.

Browser rendering mechanism

  • DOM: The browser sends an HTTP request to the server. The server responds to the HTTP request and sends the document to the browser. The browser parses the HTML and builds a DOM tree.
  • CSSOM: The browser parses CSS to build the CSSOM tree.
  • Render Tree: Combine THE DOM and CSSOM into a Render Tree. With the Render Tree, the browser knows which nodes are on the page and the CSS properties of each node.
  • Layout: Calculates the geometry of each node based on the rendered tree. As the name suggests, it calculates the position of each node on the screen.
  • Painting: Draw each node on the screen.

Repaint

When the style changes, the position does not change, and the page does not need to be recalculated.

Reflow (rearrangement/Reflow)

You have a change in position that affects the position of the other elements, and you have to recalculate the position, rearrange it, and then redraw it.

Redraw does not necessarily rearrange, rearrange necessarily redraw

Application of rearrangement and redrawing

rearrangement

  • Add, delete, and update DOM node drawings
  • Hide a DOM node with display: None (position changed)
  • Element size changes (e.g., margins)
  • Animate a DOM node
  • Add styles that change the entire style
  • Change window size and scroll window
  • Calculate offsetWidth, scrollTop, clientTop, getComputedStyle() and other attributes (obtaining the information of these attributes requires the return of new layout information, which will force queue refresh and trigger rearrangement)

redraw

  • Use visibility: Hidden to hide a node that needs to be redrawn

hang

A blank screen appears if the page is not loaded.

  • In IE, when you put styles at the bottom, the page will appear white in certain scenarios (such as opening a new window or refreshing a page) instead of gradually displaying the content.
  • If you use the @import tag, even if you write CSS to an external stylesheet that is introduced by Link and placed in the header, you may get a blank screen.
  • Blocking the loading of HTML and CSS by putting the JS file at the top of the page without defer or async delaying or asynchronously loading the JS file will also result in a blank screen.

FOUC

Eg: In war, eg in war. Eg: In war, eg in war.

FOUC phenomenon occurs on the page, which is the gradual loading of unstyled content and the sudden display of style after the CSS loading is complete.

  • When the style is placed at the bottom, the loaded HTML content is displayed first, and then the unstyled content is gradually loaded. When the CSS is fully loaded, the page suddenly displays the style.

The best order to place CSS and JS

  • Use the link tag to place the style sheet at the top
  • Put JS at the bottom

JS blocking problem

  • JS blocks parsing and rendering of the DOM tree
  • If JS file page top
    • The JS script blocks the rendering of subsequent content
    • JS scripts block the download of subsequent components such as images
    • If the LOADING time of JS is too long and the CSS needs to wait, a blank screen is displayed for a period of time

Blocking problems with CSS

reference

  • CSS blocks rendering of DOM trees (which are dependent on CSSOM and DOM and must wait until CSSOM is built)
  • CSS may block parsing of DOM trees (if CSS blocks JS statements, JS blocks DOM, CSS may block DOM)
  • CSS blocks the execution of subsequent JS statements (JS may use DOM nodes and CSS styles)
  • It’s an optimization mechanism to avoid backflow

Asynchronous loading

<script src="script.js"></script>
Copy the code

The js file at the top is loaded ahead of time. How do I make it still load later at the top?

Async (asynchronous script)

Instead of having the page wait for a script to download and execute, and load the rest of the page asynchronously (in parallel), the asynchronous script executes before the page load event. Order is not guaranteed.

<script async src="script.js"></script>
Copy the code

Defer (defer script)

The js script is delayed until the entire page has been parsed, before the DOMContentLoaded event. Execute in order.

<script defer src="script.js"></script>
Copy the code

role

Shorten the load time of web pages, and they display faster.

Page load

For browsers, there are two main events for page loading. DOMContentLoaded, onLoad.

onLoad

It will not trigger until all resources on the page have loaded.

DOMContentLoaded

Trigger when the page content is parsed.

  • If js is in front of CSS, DOMContentLoaded does not wait for CSS to load, nor does it wait for subsequent images, videos, and other resources to load.
  • If the JS is behind the CSS, the CSS blocks the execution of the js statement behind it, and the JS blocks DOM parsing, DOMContentLoaded will wait for the CSS to finish loading and execute.

Browser kernel

The browser The kernel
IE trident
Chrome blink
Opera blink
Safari webkit
Firefox Gecko