Two years ago, I wrote an article about performance optimization, in which I suggested that performance optimization should be done by recording the performance of the page and optimizing it step by step through the entire process of page access.

Two years have passed, I have a little new thinking, in Ali also learned some new optimization methods, here to share with you.

When it comes to performance optimization, you can do it earlier, before the user enters the URL, when the user is going to visit your page.

Therefore, we can divide performance optimization into three pieces in chronological order:

Page access before, page loading, page running

Performance optimization before users visit the site

  • Push resources:
    • Push page resources such as JS, images and multimedia files to the client/browser in advance
  • Preload:
    • Prefetch (Resources that may be used)
    • Preload (Essential resources)
    • prerender
  • Open the WebView container early:
    • Opening the WebView container takes some time, so we can save time by opening the WebView ahead of time
  • Pre-request AJAX:
    • Get ajax data needed for the next jump page in advance and cache it to localStorage

Performance optimization during page loading

  • Query strong cache:

    • service worker
    • Strong cache

  • Analytical DNS:

    • Domain of convergence
    • http dns
    • dns-prefetch: <link rel="dns-prefetch" href="/domain.com'>
    • CDN is used to direct the DNS configuration of images and other resources to CDN to speed up download and smooth out carrier differences

  • Establishing a TCP connection:

    • Http2: multiplexing
    • Keep alive: indicates the long connection
    • Domain name divergence: Exceeds the limit of concurrent requests
    • Sprite figure
    • Packaging code

  • Send a request;

    • Disk Cache Negotiation cache
    • Small images use Base64 to avoid requests.

  • The server processes the request:

    • Fewer redirects, 301 permanent, 302 temporary
    • Use HSTS to force HTTPS, 307

  • Send a response:

    • Gzip compressed resources
    • Use a better format like WebP
    • use<script type=module>Transfer es6 version of the code,<script nomodule>Transfer ES5 code

  • Parse the HTML:

    • Js to avoid blocking,
    • Defer is ordered until the document has been parsed. Async executes immediately after loading, out of order

  • Build the render tree:

    • Reduce the number and nesting levels of DOM
    • Reduce redrawing and rearrangement: reduce DOM manipulation, reduce reading geometry layout attributes, class instead of sttyle, resize, scroll throttle.
    • Lazy loading
    • CSS optimization: Fewer selectors

  • White:

    • Skeleton screen
    • Server rendering

  • Run JS:

    • Dependent version unification
    • To streamline the code
    • tree shaking
    • The code segment

  • Get the interface required for rendering:

    • Localstorage caches data that is not time-sensitive
    • Get the interface when the user opens the page (need the client to cooperate with the transformation, can use THE URL with parameters or configuration file)

  • First screen content:

    • placeholder
    • Key CSS and DOM

  • Page interactive DOMContentloaded

  • Load completed

Page runtime performance optimization

Using RAF to record FPS can record frame rate

  • Build compositing layer to enable GPU acceleration:
    • Will change: opacity, transform, top left bottom right
    • transfrom:translateZ
    • position:fixed
    • zIndex
  • Reduce redrawing rearrangements
    • Avoid frequent manipulation of styles and DOM
    • Avoid reading offsetTop, ScrollTop, clientTop, and other attributes
    • The class instead of style
    • Batch modified elements, complex animations out of the document flow
  • Virtual scroll bars should be loaded indefinitely
  • Throttling stabilization
  • Virtual DOM
  • Use RAF to do animation
  • Rolling optimization
    • Node recovery
    • placeholder
    • Event throttling, event broker
  • Downgrade of poor performance models :(how to judge?)
    • Canvas sniff GPU model: Keywords include experimental-WebGL, WEBGL_debug_renderer_info, info.unmasked_renderer_webgl
    • Native API phone model identification
    • UA Obtains the system version
    • The resolution of the

If my article is helpful to you, welcome star and follow me on Github ~