Loading too many images or too large resulting in a slow page loading problem; Too many images result in too many requests to the server. Too many images result in a long time for each request, resulting in a long wait.

A large number of picture loading optimization scheme

1. Separating image services from application services (from an architect’s perspective)

For the server, the image is always the most consumption of system resources. If the image service and application service are placed on the same server, the application server will easily crash due to the high I/O load of images. Therefore, when the website has a large number of image read and write operations, it is recommended to use the image server.

The browser has a limit on the number of concurrent requests to resources under the same domain name at the same time. Generally, the number of concurrent requests exceeds the limit, and the requests will be blocked. The maximum number of concurrent connections to HTTP1.1 and HTTP 1.0 for some major browsers is shown in the figure below

2. Image compression scheme

We can use some third-party software to compress, the resolution of the compression is unchanged, the naked eye does not distort; The pictures used in our project are basically compressed and uploaded.

3. Lazy loading of images

Image lazy loading simply means that during the page rendering process, images will not be loaded all at once, but will be loaded when needed, for example, when the scroll bar reaches a certain position, the event will be triggered to load the image. To optimize reflux, you can set placeholders first

Implementation Scheme 1

Document. The documentElement. ClientHeight / / get the document viewing area of the screen height. The documentElement. The scrollTop / / to get at the top of the browser window with a document at the top of the distance between, Element.offsettop // Gets the height of the element relative to the top of the documentCopy the code

If: clientHeight+scroolTop>offsetTop, then the image entered the viewable area, is requested.

Borrow a picture:The original link

Code implementation:

<script> var imgs = document.querySelectorAll('img'); Function getTop(e) {var T = e.offsetTop; while(e = e.offsetParent) { T += e.offsetTop; } return T; } function lazyLoad(imgs) { var H = document.documentElement.clientHeight; / / for viewing area highly var S = document. DocumentElement. The scrollTop | | document. The body. The scrollTop; for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src'); }}} window.onload = window.onscroll = function () {//onscroll() trigger lazyLoad(imgs); } </script>Copy the code

Implementation Scheme 2

GetBoundingClientRect ()// Gets the size and position of the elementCopy the code

As we scroll down, the bound. Top value gets smaller and smaller, so the distance between the image and the top of the viewable area gets smaller and smaller, so when bound. Top == clientHeight, the image is about to enter the viewable area. Then you need to request resources. That is, when bound.top<=clientHeight, the image is in the viewable area.

Code implementation:

var imgs = document.querySelectorAll('img'); Top <=clientHeight function isIn(el) {var bound = el.getBoundingClientRect(); var bound = el.getBoundingClientRect(); var clientHeight = window.innerHeight; return bound.top <= clientHeight; Function check() {array.from (imgs).foreach (function(el){if(isIn(el)){loadImg(el); } }) } function loadImg(el) { if(! el.src){ var source = el.dataset.src; el.src = source; }} window.onload = window.onscroll = function () {//onscroll() to trigger check(); }Copy the code

4. There are many small pictures

Sprite, font ICONS, Base64, etc., can be used to reduce the number of connections

5. Http2 resolves connection number limits

Http2 a site has only one connection. Each request is a stream, and each request is divided into multiple binary frames. Frames in different streams can be sent interleaved to achieve multiplexing. This solves the problem of connection number limits

2. Picture loading optimization scheme is too large

Transfer and render are slow

  1. If it’s an album or something you can preload, load the image before and after it when you show the current image
  2. When loading, you can load a thumbnail with a very high compression rate to improve the user experience. Click on it or load it to see a clear image
  3. Using progressive JPEGs improves the user experience

Refer to the article Baseline JPEG

Progressive JPEG Different storage methods

  1. If the display area is smaller than the actual size of the image, it can be compressed to the appropriate size on the server