Small knowledge, big challenge! This article is participating in the creation activity of essential knowledge for programmers. This article also participates in the “Diggin Star Project” to win the creation gift package and challenge the creation incentive money

When I was optimizing my project, I found the page loading was slow. As a result, the main problem is that the size of the picture is too slow, and then I prepared to optimize it. I originally wanted to use WebP to optimize it, but this picture is no longer available to us. Then I looked at the optimization king in the industry and directly opened the home page of Taobao. Taobao’s first screen loading is very fast, then I went to look at his picture format:

This is a degraded image if you support WebP, if you don’t use JPG

Why do image degradation

There are many image formats such as JPEG, PNG, webP and so on. We often use webP format pictures, because webP format pictures have lossless compression and lossy compression mode and higher compression rate and other advantages. However, webP images also have disadvantages. Ios WebView and Internet Explorer do not support WebP. So we check to see if the browser supports WebP images, and if not, display images in other formats.

Demotion scheme

  • Lazy loading of HTML images
<div class="box"> <img Alt =""> </div> Copy the codeCopy the code
  • Check whether the browser supports the WebP
function isSupportWebp(cb) { let img = new Image(); img.src = webpPath; img.onload = function() { cb(true); } img.onerror = function() {cb(false) is triggered when the browser does not support the image format; }} Copy the codeCopy the code
  • Img Path Captured images for display
function LoadImg() { let img = document.getElementsByTagName('img')[0]; isSupportWebp(function(isSupport) { if(isSupport) { img.src = webpPath; } else { let index = webpPath.indexOf('_.webp'); if(index! =-1) { webpPath = webpPath.slice(0,index); } img.src = webpPath; }}); } Duplicate codeCopy the code
  • The complete code
<body> <div class="box"> <img alt=""> </div> <script> let webpPath = './img/O1CN01xYaPxM1CgQAujTNvy_!! 0-saturn_solar.jpg_220x220.jpg_.webp'; function isSupportWebp(cb) { let img = new Image(); img.src = webpPath; img.onload = function() { cb(true); } img.onerror = function() { cb(false); } } function LoadImg() { let img = document.getElementsByTagName('img')[0]; isSupportWebp(function(isSupport) { if(isSupport) { img.src = webpPath; } else { let index = webpPath.indexOf('_.webp'); if(index! =-1) { webpPath = webpPath.slice(0,index); } img.src = webpPath; }}); } LoadImg(); </script> </body>Copy the code

conclusion

Front-end performance optimization is always a never-ending topic, or it needs to be analyzed on a project-by-project basis. I will write ** “canvas performance optimization” and “developing a vscode plug-in from 0-1” **. Still in writing, have any question to the article, or where wrong place welcome to correct, I saw after affirmation will adopt, we next period goodbye 👋🏻