This is the 9th day of my participation in the August More Text Challenge

preface

This paper will introduce some means of front-end performance optimization in detail based on the large screen project in the exhibition hall. This includes reducing the number of requests, lazy loading, caching, debounce functions, initializing load policies, and so on.

The content of the large screen is relatively rich, including a large number of ICONS, animation, map data, charts and so on.

What — What is front-end performance optimization

In the process from user access to complete display of resources in front of users, technical means and optimization strategies are adopted to shorten the processing time of each step so as to improve the speed of access and presentation of resources.

Why — Why do front-end performance tuning

In the process of building a web site, any details are likely to affect the site access speed, if you don’t understand performance optimization knowledge, many adverse factors of site access speed will form the accumulation, thus serious impact on the performance of web sites, causing the site to access speed slow, low user experience, eventually lead to loss of users.

Rule — The principle of front-end performance optimization

1. No bugs!

2, specific problems specific analysis, according to the actual situation according to local conditions

3. What are the stages from the time the browser sends a request to the time the page can be viewed?

Pretreatment – > DNS – > connections – > a request – > wait for a response — – > > accept data processing elements – > layout rendering

Vue project before construction

  • According to the interactive manuscript or visual manuscript, reasonably divided pages, generally according to the module and sub-module division;
  • Using route lazy loading, realize modularization and on-demand loading effect, optimize the performance of the first screen;
  • Extract common components, as far as possible from business isolation, such as filtering conditions;
  • Extract public methods in util.js, such as form validation encapsulation;
  • Extract more functional modules in the project, such as pop-up details;
  • Define interface protocol with background developers, combine modules as far as possible.

Vue project construction and completion

  • Enable ESLint validation to resolve errors and warnings in a timely manner;
  • Open the browser debugging window and view the resource information (including status, resource type, size, and elapsed time) obtained from analyzing HTTP requests after initiating web page Request requests in the Network. Network performance can be optimized according to this information. For example, you can view HTTP requests that return large resources or take a long time.
  • Open the browser debugging window, record and analyze all kinds of events in the life cycle of the website in the Timeline, so as to improve the performance of the running time of the website.
  • In the process of code writing, constantly consider whether modules can be optimized or common components can be extracted;
  • Timely code audit, improve code quality

Way — Optimization method (combined with project examples)

Reduce the number of requests

[Photo processing]

1. Sprite

CSS Sprite image is to integrate some images on the website into a single image, which can reduce the number of HTTP requests on the website, but when the integrated image is large, it will be slow to load at a time.

2, Base64

Embedding the content of the image in HTML in Base64 format reduces the number of HTTP requests. However, because Base64 encoding uses 8-bit characters to represent six bits of information, the encoded size is approximately 33% larger than the original value

3. Use font ICONS instead of images

The multi-dimensional layout and large screen design is more personalized, and there is no readily available font icon, so we still adopt the first Sprite image to reduce the number of HTTP requests for the left icon. Some control ICONS use font ICONS instead of images.

[Map slice processing]

Hmap requests HVT image data. The size of each HVT image is configurable when the HMAP Server desktop tool is used to cut images. The default value is 256. (Principle: multiply side length by 2, area is 4 times original)

Disadvantages: when the slice is large, the edge of the map is obviously jagged, which affects the visual effect.

After comprehensive tradeoff, we reduce the map data requests to 1/4 of the default amount by setting the slice size gridsize of 512.

Reduce redraw backflow

[Regular animation processing]

The animation effects of rule changes in this application can be implemented using CSS, and try to use CSS rather than JS implementation. If the regular flicker, the regular change is shown below.

In this animation, properties such as opacity and transform that do not trigger redrawing and backflow are used to reduce the redrawing and backflow frequency.

[Irregular animation processing]

Large screen head light effect and middle border light effect trace have broken line, so need to use JS to achieve. Use requestAnimateFrame to separate read and write operations, save all write operations for the next re-render, reduce redraw backflow, and optimize rendering.

Tell the browser window. RequestAnimationFrame () – you want to perform an animation, and required the browser until the next redraw calls the specified callback function to update the animation. This method takes as an argument a callback function that is executed before the browser’s next redraw.

[List scrolling]

Page scroll event (scroll) surveillance function, using the window. The requestAnimationFrame (), put it off until the next to render.

$(window).on('scroll', function() {   
    window.requestAnimationFrame(scrollHandler);
})
Copy the code

[Anti-shake treatment]

Map iot resource points and site points resources are huge, so only points within the visual range of the map are requested each time. Frequent zooming changes the visual range, constantly requesting data to render data. You need to do some shaking to limit the frequent firing of the request data method.

/** ** @param {function * wait */ function debounce(func, wait) { let timer = null return () => { if (timer) { clearTimeout(timer) timer = setTimeout(func, wait) } else { timer = setTimeout(func, wait) } } }Copy the code

Resource loading optimization

Lazy loading

It can be seen from Figure 1 that there are 200 early warning data in the early warning list module on the left of the early warning center, and each data has pictures. However, only 7 pieces of data are displayed during initialization. Undisplayed warning information is not loaded, which makes good use of server resources.

[Resource loading time]

When the large screen home page is initialized, there are many loading contents, among which the map occupies a large area. Therefore, the map should be loaded first, and the detailed animation should be loaded after the map rendering is finished, thus reducing the waiting time.

$on('25dmapLoaded', map => {this.startCanvasanim ()})Copy the code

[Using cache]

When switching from the early warning center to the object distribution control, it can be cancelled and returned to the distribution control center at any time during the construction of the distribution control task. At this time, the cached map is used without reloading the map.

conclusion

Performance optimization can not be done according to the rules, but needs to be based on the actual situation, specific analysis, comprehensive trade-offs. This paper describes the specific optimization analysis process through the example of a specific big-screen application project, hoping to give you some inspiration in project development and optimization.