Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Front-end performance optimization, this is also a cliche interview question. The front-end performance is mainly affected by the following aspects: network requests (HTTP requests), CSS optimization, page rendering, JS execution, caching, images and so on…

Optimize the way

  1. To reducehttpNumber of requests

Combine CSS, JS code, static resource images, you can use Sprite

  1. To reducehttpSize of request

Reduce unnecessary images, JS, and CSS. Use gzip to compress resource file size; Compress the code and remove comments; Compress static resource images

  1. willcss 和 jsPlace it in an external file to avoid direct usestyle 和 scriptThe label

Referencing external resources on AN HTML file can take advantage of the browser’s static resource cache.

  1. Avoid emptyhref 和 src

When the href attribute of the tag is empty, or the SRC attribute of the

  1. forHTMLThe specifiedCache-Control 或 Expires

Setting a cache-Control or Expires header for HTML can Cache HTML content to avoid frequent requests to the server. When a cache-Control or Expires header is valid on a page, the browser will read the content directly from the Cache. No more requests are sent to the server

<meta http-equiv="Cache-Control" content="max-age=8200">
<meta http-equiv="Expires" content="Tue, 21 Sep 2021 13:04:03 GMT">
Copy the code
  1. Setting up reasonableEtagandLast-Modified

If Etag and Last-Modified are properly set to use the browser cache, the static resource server will return 304 to the browser for unmodified files, so that the browser can read the files from the cache, reducing the bandwidth consumption of Web resource download and reducing the server load

<meta http-equiv="last-modified" content="Tue, 21 Sep 2021 13:04:03 GMT">
Copy the code

  1. Reduce page redirection

  2. Use CDN to store files properly

  3. Eliminate CSS and JavaScript that block rendering

If the loading time of CSS or JavaScript files on a page is too long, you need to split or delay the loading properly to ensure that resources in key rendering paths can be loaded quickly

  1. Asynchronous loadingJavaScriptresources
<script src="main.js" defer></script>
<script src="main.js" async></script>
Copy the code
  1. theCSSResource reference dropHTMLAt the top of the file

DOM parsing and CSS parsing are parallel processes, so CSS loading does not block parsing of the DOM tree!

The render tree is dependent on the DOM tree and the CSSOM tree, so whether or not the DOM tree is complete, it must wait until the CSSOM build is complete, i.e. the CSS load is complete (or fails) before it can start rendering. Therefore, CSS loading blocks DOM tree rendering.

  1. JavaScriptResource reference dropHTMLAt the bottom of the file

JavaScript resources placed at the bottom of the HTML document prevent JavaScript loading and parsing execution from blocking the page rendering. Since JavaScript resources are parsed blocking by default, unless marked asynchronous or otherwise loaded asynchronously, Otherwise, it blocks HTML DOM parsing and CSS rendering.

  1. Try to pre-set the size of the picture

When loading a large number of image elements, try to pre-limit the size of the image, otherwise the image layout information will be updated during the image loading process, resulting in a large number of rearrangements

  1. To reduceDOMNumber and depth of elements

The more HTML tags, the deeper the hierarchy, the longer the parsing takes, so the number and depth of possible reductions

conclusion

If this article helped you, please like 👍 and follow ⭐️.

If there are any errors in this article, please correct them in the comments section 🙏🙏.