Page interaction process

From the input URL to the page loading process:

  • The URL is first resolved by DNS (domain name resolution) to the corresponding IP address,
  • Then a TCP network connection is established with the server identified by the IP address.
  • An HTTP request is then sent to the server
  • After processing the HTTP request, the server presents the target data in the HTTP response to the client
  • The browser takes the target data and renders the page to the user, waiting to respond to the user’s actions.

It can be summarized as: 1. DNS resolution 2. TCP connection 3. HTTP request 4Copy the code

Front-end performance optimization

  • Front-end performance optimization points are as follows:

  • Among them DNS resolution and TCP network connection, front-end can do very limited. So HTTP request optimization is at the heart of our optimization.

Main optimization points of the front end:

1, WebPack performance tuning and Gzip principle optimization 2, browser caching mechanism and caching strategy 3, image optimization -- quality and performance balance 4, local Storage -- Cookie, Web Storage, IndexDB 5, CDN caching and back source mechanism 6, server rendering Operating mechanism of browser 8. DOM Optimization principle and practice 9. Event Loop and asynchronous update strategy 10Copy the code

Image optimization

Different picture formats

Size comparison: generally, PNG ≈ JPG >GIF transparency: PNG >GIF > JPG color richness: JPG > PNG >GIF compatibility: GIF ≈ JPG > PNGCopy the code

To optimize the image

1. Sprite Diagram (Sprite Diagram)

  • CSS Sprites, is a lot of small images made into a large image, and then used as a background image, positioning can be.
  • Advantages: Obvious: reduced HTTP requests.
  • Disadvantages: background positioning is more troublesome, in fact, is not a disadvantage.

** two, picture compression **

  • Image compression is very simple, is lossless compression.
  • Related knowledge can read the picture format specification
  • Recommend a compressed picture website – smart map: smart map compression good fast
1. Use PNG instead of GIF 2. Compress PNG 3. Compress GIF animation 5. Try using pNG8 6. Avoid AlphaImageLoader 7. Compress dynamically generated images 8. Make favicon smaller, cacheable 9. Using CSS spritesCopy the code

Three, the response picture

  • Whether on PC or mobile, there are many different sizes of images, and if you are working on a responsive website and mobile, then you need to consider the size of your images
  • Mobile screen resolution and size are too many, so you may need to load different sizes of images in different sizes, which saves the site traffic, as well as the efficiency of page rendering. Show the current device resolution and other images
  • If you want to see more, go to Devices

Use CSS definitions to load different background BG images

@media only screen and (max-width : 480px) {
    .img {background-image: url(bg-480.jpg); } } @media only screen and (max-width : 360px) { .img {background-image: url(bg-360.jpg);}
}
Copy the code

Img srcset and sizes

  • These two IMG attributes are HTML5 attributes and have browser compatibility issues
  • Srcset specifies the address and quality of the image. Sizes is used to set the size threshold of the image
  • For details of SRcset and SIZES, click here
<img class="img"  src="imgbg-320.jpg"
     srcset="imgbg-320.jpg 320w, imgbg-360.jpg 360w, imgbg-480px.jpg 480w"
     sizes="(max-width: 480px) 480px, 320px">
Copy the code

Four, base64

  • The base64 encoding size is slightly larger than the original image size, but reduces HTTP requests. It is usually four thirds the size of the original;

5. Lazy loading

  • Lazy loading also called lazy loading images, usually applied to image more web page, if the picture is more, a page and a page there are several screens, height or width page load for the first time, just show the picture of the viewing area (non-visual area using a picture of 1 * 1 placeholder images, CSS image size control), when the page scroll, Loading images into the visual area (by modifying the SRC) significantly increases page loading speed and reduces server stress with fewer concurrent image requests. Users can also save traffic if they only stay on the first screen. The way to do this is with a plug-in called Lazeload.

6. Icon font

  • If you’ve ever used The Fontawesome icon font, you can zoom in and out without any loss. You can change the color. If you add a class name, you can use the icon. The advantage… Vector & convenient to use, but the icon does not have a certain amount may not be needed, and the vector diagram may be the artist pressure is also relatively large, we just need to know how to use it, sometimes with ready-made ICONS to reduce the workload of the art students is also excellent. Take a look at a website dedicated to making icon fonts.

Seven, SVG

  • The advantages of SVG as a vector graphics may be that fonts are more limited in terms of style changes than iconFont, and font files are generally larger and less compatible. SVG can also be thought of as an image and is easy to use.

Eight, picture display optimization

  • First, fix the height and width of the outer div of the image. Then img is set to 100% (both width and height) and the background color is set so that it can be seen even if it is not displayed. Important, to set the image onload event, first set the image to display: None; Then when the image is onload, we load it out, and the transparency can be incremented while loading. The code looks like this (written by the vue project) :
** HTML code ** <img SRC ="picture" alt=""  style="display: none;" v-on:load="getSomething($event)"Var target = e.currenttarget; var target = e.currenttarget; target.style.opacity = 0; target.style.display ='block'
    var timer = setInterval(function() {target.style. Opacity = parseFloat(target.style. Opacity) + 0.01;if(parseFloat(target.style. Opacity) >= 0.98) {clearInterval(timer); }}, 30); }Copy the code