The basic rule

  • In the CSS into
  • Js in front of the bottom
  • Inline loading is fast
  • Externals can be reused, they can be cached

Number of concurrent browsers

Browser HTTP1.0 HTTP1.1
6, 7 2 4
IE8 6 6
Firebox 6 6
Safari 4 4
Chrome 6 6
Opera 4 4

The picture

  1. The CSS Sprite figure

    advantages

    • Reduce the number of requests to the server when loading web images
    • The number of bytes that can reduce an image is smaller than multiple image bytes.

    disadvantages

    • Maintenance is troublesome
    • Adaptive screen, easy to appear background fracture
    • The position of the element needs to be computed

  2. Picture quality optimization

    • If it is a colorful picture, generally choose JPG
    • If it is an animated image, choose GIF
    • If you need a clear image or transparent image, choose PNG and use PNG 8 as much as possible

  3. Image compression (Tinypng)

  4. WebP is a new image format launched by Google in 10 years. It was first applied in Google products. The official version of Android Studio 2.3 released by Google includes updates to WebP support. The WebP format is about 20% smaller than the JPG format. This has a good effect on optimizing user experience and reducing CDN bandwidth consumption, but not all browsers support WebP, so in order to use webP, you need to do a little compatibility work.

  5. Base64: Reduce HTTP requests, small byte map available.

  6. Iconfont: too many advantages, suitable for small ICONS, size and color variable. Common ICONS do not require design. Iconfont is a rich library

  7. Image lazy loading (lazy loading)

CSS

  1. CSS selector: Matches from right to left
  2. Minimize the use of computed attributes, such as calc(), expression, etc
  3. Do not use @import
  4. Repaint, reflow repaint: Part of the screen is repainted, such as changing the background color in a CSS, without changing the element size. Reflow: Any element size change that requires revalidation and calculation of the Render Tree will result in a rearrangement.

Common operations that cause rearrangements:

  • Js adds or removes elements
  • Element size changes (border, padding, width)
  • The browser window size changes
  • Element position change
  • Setting the style property
  • Page first render

Common operations that cause redrawing:

Color, background, background-position, box-shadow, border-radius, etc.

Optimize rearrangement and redraw

  • Reduce DOM manipulation
  • Modify styles by adding classes
  • Animation Using CSS animation, enable GPU acceleration
  • Don’t use tables
  • You can take it out of the document stream, position: Absolute,fixed

JavaScript

  1. Compress, merge, obfuscate
  2. Use Async or defer
  3. Reduce the use of global variables and be careful with closures
  4. Using event Delegate
  5. Avoid for in loops
  6. Server-side rendering
  7. Reduce DOM manipulation

Check out the 35 Catch-22 rules at —- Yahoo

Browser cache

  1. Browser caching The browser caching mechanism is a mechanism for controlling file caching through cache-Control (or Expires) and Last-Modified (or Etag) fields in the HTTP header. Cache-control Specifies the local Cache validity period of a file. Last-modified indicates the Last update time of a file on the server.
  2. Web Storage is divided into sessionStorage and localStorage. The Storage size is 5MB (Cookies are 4KB).
  3. Web SQL Database, also known as HTML5 local Database, allows users to access local databases directly as easily as accessing local files. Currently, indexedDB, a new generation of front-end storage solution, has been abandoned
  4. HTML5 offline storage is based on the caching mechanism (not the storage technology) of a manifest file (Cache manifest file, suffix.appCache), which parses offline storage resources through the manifest. These resources are stored like cookies. Later, when the network is offline, the browser displays the data stored offline.

other

  1. Static files are stored on the CDN
  2. Avoid overwriting directions
  3. Use less iframe, block onLoad, and consume concurrency
  4. Upgrade HTTP to HTTP2.0

The next time an interviewer asks you, don’t just state the obvious

  • Browser caching mechanism