As a front-end developer, I am in charge of the information flow service in the company, providing services for five major mobile phone manufacturers and various major APPS. The daily requests are calculated by hundreds of millions. In addition, we have also made SSP and DSP, which are similar to Baidu advertising Alliance and Tencent Dian.com. Contact should know, so the front optimization has always been my headache problem, not only should pay attention to user experience, balancing benefits at the same time, sometimes have to sacrifice some of the user experience, but as a thoughtful front end, or try to avoid, hoping to classmates and engaged in the same study, few words said, is to share my performance optimization, What is wrong knowledge point, troublesome everybody points out criticism.

  • I’ll start with the basic Yahoo catch-22 — the 35 golden Rules of thumb developed by Yahoo’s front-end performance team

Most of the front-end optimizations are covered in Yahoo’s catch-10, but if you’re interested in js optimizations, check out the
High-performance javascriptThe book goes into great detail. https://segmentfault.com/a/1190000008481413

  • Picture optimization for Web front-end optimization

Media Queries Call the hd background image

With the rapid development of domestic mobile phones, more and more retina displays are used. If there is a picture and two mobile phones, one is a normal screen and the other is a HD screen, the bitmap in the HD screen will be enlarged and the picture will become blurred on the same screen size.

If devicePixelRatio is equal to 1(the minimum value), then it is common display. If devicePixelRatio is greater than 1(usually 1.5 or 2.0), Then it’s a high-definition display. At this time, we can let the UI prepare two sets of pictures, or even three sets of pictures, images of different pixels using media query combined with devicePixelRatio can distinguish between ordinary display and hd display, and give the following CSS design scheme:

.css{/* Use the image */ background-image: url(img_1x.png) for common display (device pixel ratio < 1.3); } @media only screen and (-webkit-min-device-pixel-ratio:1.5){.css{/* HdSCREEN (device pixel ratio:1.5 or greater); url(img_2x.png); }}Copy the code

You can also use less or sass

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")
Copy the code

If you save time and high versatility, just like we are the server with nginx image processing, want to cut what size of the picture itself, we provide a scaling and custom size cutting method, address after concatenation string on the line.

http://image.uczzd.cn/12046251381056834816.jpg?id=0&from=export&width=800&height=600
Copy the code

  • Use WebP, a new generation of image formats that are smaller, faster and stronger

WebP is a new image format launched by Google in 10 years, and it was first applied in Google products. The official version of Android Studio 2.3 released by Google includes the update of WebP support. In actual measurement, WebP format is reduced by about 20% compared with 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.


Compared with other picture formats, WebP occupies the least space when the naked eye can not distinguish the difference of picture quality. At present, major Internet companies at home and abroad have begun to apply this picture format. Such as Meituan



To achieve the first is to judge, that is, to identify whether the source browser of a single visit supports webP format, followed by execution, if the browser supports, then replace the original image with webP format, and return. If not, the original format is displayed. http://caniuse.mojijs.com/Home/Html/item/key/webp/index.html



In the identification phase, we have two methods:

1. The Server processing


  • Check browser support status using UAString

As long as there is a request, the server can get your User-agent information, through the browser classification, support webP in the white list, do not support for the blacklist. If it is a whitelist, the webP image is returned. Otherwise, the original image is displayed. The advantage of this method is that it only needs to maintain the whitelist regularly, and the logic is simple. The disadvantage is that it is not extensible, not testable, UA judgment will be inaccurate.


  • Read cookies planted by JavaScript to determine browser support

Another way the Server handles this is by reading cookies planted by JavaScript. The advantages of this approach are stable performance, faster access, and no pressure to switch. However, the disadvantage is that the static page will lead to users switching browsers can not update, picture service failure. For example, when A user requests A page using webP supported browser A, the cached static pages all use WebP images. However, when the user accesses A web page using browser B that does not support WebP, an error message will appear indicating that no image is requested.


  • Client processing

Client processing is a processing mode provided by Meituan Cloud for the main site of Meituan. In this processing mode, after the beacon WebP request is sent by the browser, the webP support status is determined by detecting its loading condition, and then the browser writes a cookie. After reading the browser cookie to determine whether webP is supported, the next operation can be performed.


2. There are also two ways to replace pictures:

  • The Server process

While server-side processing has the advantage of being transparent to downstream developers, the disadvantage is that the number of static pages cached doubles.

The replacement is as follows:

  1. The function that generates the URL (such as $deal->getImageUrl) implements the substitution directly by running the function
  2. For Varnish’s static page, it first identifies the browser request header type and then caches one and two copies of each of webP and traditional JPG for processing. Then make the substitution where the URL was generated.
  • Client processing

In the client side processing can be better to cope with the situation of static page, mainly for lazy loading (not the first screen) picture processing, directly through the modification of lazy loader to achieve. There is no particularly good way to load images that are not lazy. Currently, you can replace the path to process.

Client processing effect is actually good, meituan page more than 90% of the pictures are lazy loading, basically can meet the needs. For most users, using Client processing for WebP transformation is a good choice.

  • Tracking data accurately

Since the picture is mentioned, I can’t help but mention some tracking Pixel. Almost all websites will collect data and report statistics. In particular, we do SSP, DSP advertising this need to obtain for example

  • User’s browser, operating system, resolution, etc.
  • User browsing behavior records, such as click behavior, purchase behavior, etc.
  • The duration of the user’s stay in APP and WEB, and whether the user is active

The data always tell the truth. The data proves what is possible. For example, cross-border e-commerce friends of Facebook advertising will use Facebook Pixel(Pixel tracking) to obtain accurate data of each link. In this way, after tracking the data, we can increase the sales after advertising, which is the best effect, which is not good, and then through multiple data comparison, reasonable adjustment and optimization of advertising.

Domestic Sogou, Baidu, 360 and Sina all use this tracking Pixel method, which actually uses 1px images and splines the information parameters you need in the image address suffix. When the browser requests any resources, it will send the data of the current system, such as browser information and operating system information, as HTTP request headers. They can count them.

Why not use JS to request statistics?

Not all pages support JS! The implementation mechanism of NoJSStats is one of the ways to obtain click stream data in website analysis — Web Beacons, that is, embedding a transparent 1-pixel image in the page, when the page is viewed, the image will be requested to load, and then the request log of the image will be recorded in the backend server log. This allows you to obtain logging.


For example, Baidu:

This is a picture baidu 1 px address: http://wn.pos.baidu.com/adx.php?Copy the code

var url = ["//eclick.baidu.com/se.jpg?"."type=fatalError"."data=1220"."mes=" + encodeURIComponent(e)].join("&"), img = new Image; Img. SRC = URL Baidu splices many parameters in the address bar, and the back end generates corresponding data reports according to the image suffix.Copy the code

                                                                                                    

This article cites the webP method provided by @Meituan cloud, thank you.