Web optimization-style sheets, scripts

To avoid white screen, place the style sheet in the head at the top of the document. There are two ways to include a style sheet in a document: using the link tag and the @improt rule. A stryle block can contain multiple @import rules, but @import rules must be placed before all other rules. @import rule causes the component to be unordered when it is downloaded.

"If the style sheet is still loading, building the rendering tree is a waste because there is no need to return anything until all the stylesheets have been loaded and disassembled." Otherwise, displaying content before it is ready encounters the flash of unstyled content issue. ”

The biggest impact on response time is the number of components in the page. The http1.1 specification, which recommends that browsers download two components in parallel from each host name. If a Web page evenly places components under two hosts, the overall response time can be reduced by about half. Instead of relying on users to modify browser settings, front-end engineers simply use the CNAME to place components in multiple host names.

The advantages of parallel download components are obvious. Then, when the script is downloaded, the parallel download is actually disabled (even if a different host name is used, the browser does not start another download.) One reason is that the script might use document.write to modify the contents of the page, so the browser waits to ensure that the page is properly laid out. Another reason is to ensure that the scripts are executed in the correct order. Because dependencies exist between them, it can cause JavaScript errors if they are not executed sequentially.

Obfuscation is another optimization method that can be applied to the source code. As with refiners, it overflows annotations and whitespace, and it also overwrites the code. The most rewritten part, the names of functions and variables will be converted to shorter strings, where the code is more refined and harder to read. Thin tools can use jsmin.

　　

　　

The above content is excerpt from "High-performance website Construction Guide"

Web optimization-style sheets, scripts