Web front-end performance optimization is mainly divided into the following sections:

  • Load optimization

    • The DNS resolution beforehand
    • Merge IMG, CSS, javascript files to reduce HTTP requests
    • Cache all cacheable resources
    • Use long Cache
    • Use external references to CSS and javascript files
    • Compress HTML, CSS, javascript files
    • To enable GZip
    • Use first screen loading (e.g. isomorphism)
    • Use load resource files on demand
    • Use scroll to record resource files
    • Lazy resource loading
    • Load CSS files through Media Query
    • Adding a Loading progress bar
    • Reduce the Cookie
    • Avoid focus direction

  • Image optimization

    • Compress the image and reduce the image size while maintaining the image quality
    • Use Css3, SVG, iconFONT instead of images
    • The first time you load an image no larger than 1024KB
    • Image width no larger than 640px(mobile)

  • The script to optimize

    • Reduce reentry and backflow operations
    • Cache DOM elements, DOM list length, and attribute values
    • Use event delegate to avoid batch binding events
    • Use ID selectors whenever possible
    • Use the Touch event instead of the click event
    • Use throttling functions to reduce performance consumption

  • HTML optimization

    • CSS files are written in the header, javascript in the tail
    • Avoid deep nesting of levels
    • Avoid empty SRC for elements such as img, iframe, and a
    • Avoid inline styles and event bindings
    • Avoid base64 for large images

  • CSS optimization

    • Remove an empty CSS rule
    • Use display properties correctly
    • Don’t abuse of float
    • Don’t declare excessive font size
    • Do not use units when the value is 0
    • Standardize various browser prefixes

  • Rendering optimization

    • HTML using viewPort (mobile)
    • Reducing DOM nodes
    • Try to use CSS3 3D animation to trigger GPU rendering
    • Use requestAnimationFrame instead of setTimeInter and setTimeout
    • Use canvas animations appropriately
    • Throttling is used for resize and Mousemove events to reduce DOM backflow and redraw times

Important tips:

  • The first screen to load

    The fast display of the first screen can greatly improve the user’s perception of the page speed. Therefore, optimize the fast display of the first screen as much as possible, such as Loading waiting animation, server rendering the first screen (isomorphism)…

  • The DNS resolution beforehand

    DNS is the basic protocol of the Internet, and its resolution speed seems to be easily overlooked by website optimizers. Most new browsers have been optimized for DNS resolution. A typical DNS resolution takes 20-120 milliseconds, so reducing the time and frequency of DNS resolution is a good optimization. DNS Prefetching reduces waiting time and improves user experience as domain name resolution and loading is a serial network operation when a domain name has this property without requiring the user to click on a link.

    The first domain name DNS lookup process of a web site is as follows:

    Browser cache – System cache – Router cache -ISP DNS cache – Recursive search

    DNS pre-resolution implementation:

    • Use meta information to tell the browser that the current page should be pre-resolved by DNS:
    <meta http-equiv="x-dns-prefetch-control" content="on" />
Copy the code
    • Use the link tag in the page header to force DNS preresolution:
    <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
Copy the code

    The sample

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://mat1.gtimg.com"/>
<link rel="dns-prefetch" href="http://tajs.qq.com" />
Copy the code

    Note: Use dns-prefetch with caution. Repeated DNS prefetch on multiple pages increases the number of repeated DNS queries.

    PS: DNS pre-resolution is mainly used for website front-end page optimization, the role in SEO has not been verified, but as part of enhancing user experience rel=” dnS-prefetch “may be worth slowly discovering.