Home > Developer > Web Develop
I believe in the normal development of the page, the UI to your PSD is always a variety of wonderful fonts, PM special needs, 2M background images, lazy loading window jitter, as well as the annoying agent network speed to load CSS.
Have a knife to cut the UI and then cut PM Impulse (open a little joke).
The speed of the person may not feel, but some of the slow speed is not the same. CSS may be hosting a site with a problem, requesting half a minute is also possible.
As we all know, CSS loading will block the browser rendering or cause browser repainting, the industry is generally recommended to put CSS in, to prevent the CSS has not been loaded, the DOM has been drawn out, resulting in the completion of the CSS load redraw. In modern browsers, we have no way to improve the first screen rendering speed that?
The font file is not loaded and cannot be rendered;
1 <HTML>2 <Head>3 <!--font file exists in Headstyle.css webfont.woff2 -4 <Linkrel= "stylesheet"type= "Text/css"href= "/style.css">5 </Head>6 <Body>7 <P>Text</P>8 <Linkrel= "stylesheet"type= "Text/css"href= "/bodystyle.css">9 </Body>Ten </HTML>The browser is from the top down parsing the HTML document, when found STYLE.CSS, stop parsing html, download style.css,style.css found webfont.woff2 after downloading, and continue to parse the CSS StyleSheet, After parsing, continue parsing HTML, found P tag after rendering, when the browser found BODYSTYLE.CSS, will download Style.css, parse CSS, and then update cssstylesheet, this will cause a redraw. It also causes a redraw when the font is downloaded.
In this process, there are two very serious problems. First, if the Style.css file is large, the browser needs to parse a lot of line CSS to have a font file to download, in fact, it is very late, the font download time a little longer, there will be the problem I mentioned earlier. Second, bodystyle.css if there is a P-label corresponding to the style, the P-label style will be after the completion of BODYSTYLE.CSS parsing, change the style, very affect the experience.The first method: Reduce the time of CSS download; Pre-parse DNS to resolve DNS for the domain name of the CSS file in advance.
<link rel= "preload" href= "/webfont.woff2" as= "Font" >
PreloadBecause the CSS is already in the head, do not need to add preload, but the CSS used in the font file, must be preload before all CSS;
Home CSS Inline, non-essential CSS asynchronous loading;
function Loadstyle (URL) { try { document.createstylesheet (URL) } catch (e) { var csslink = Document.createelement (' link '); Csslink.rel = ' stylesheet '; Csslink.type = ' text/css '; csslink.href = URL; var head = document.getElementsByTagName (' head ') [0]; Head.appendchild (Csslink) }}
If you use Webpack, use the Import function, the official website tutorial is here: https://doc.webpack-china.org
Direct introduction of Cssimport ' Style.css ' in the Index.js module
Improt (' Path-of-index.js ') where the Index.js module is required. Then (module = {})
Webpack packaging, in fact, is to pack style.css into the Index.js, in the asynchronous loading A.js, the code in STYLE.CSS will be inserted into the haed tag.
<! DOCTYPE html>
This article just added CSS and fonts, my heart is the ultimate Perfect page HTML structure is like this
CSS Performance Optimizations
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
