This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
When loading
1. Reduce HTTP requests.
80% of the response time on the Web front end is spent downloading images, styles, scripts, and other resources.
An HTTP request goes through a complex process: DNS lookup – TCP handshake (three-way handshake) – browser sending HTTP request – server receiving the request – server processing the request and response results – browser receiving the request – TCP disconnecting (four-way wave).
Because an HTTP request to the above and a series of complex process, it is still without considering factors under the condition of the network environment, so when the request is more long, this is directly reflected in the performance of the consumption, which is why to multiple small merged into one big file, reduce the important reason for the number of HTTP requests.
The new HTTP2 feature MultiPlexing can solve this problem effectively if the server supports HTTP2.
2. Use server-side rendering.
Client rendering goes through the following process: get the HTML file – get the JS file as needed – run the file – generate the DOM – insert the DOM into the HTML – finally render the page. Server-side rendering process: Just get the identification and parsing HTML file. Server-side rendering is also a great way to enhance SEO on your site.
3. Use CDN for static resources.
What is a CDN: Content delivery network. It is a collection of Web servers distributed across multiple geographic locations. As we all know, when the server is farther away from the user, the delay is higher. CDN is to solve this problem by arranging the server in multiple locations, so that users are closer to the server and shorten the request time.
4. Write CSS headers and JS bottoms.
We know that CSS and JS block the rendering of a page, and if these files take a long time to load and parse, the page will appear blank, which is often referred to as the white screen problem.
Then why CSS can be put in the head: because if you load HTML first and then load CSS, users will see the page is no style at the first time, the site will be very ugly, user experience will be very unfriendly.
Of course, JS can also be put in the header: just add defer or async properties to it to download asynchronously and defer execution.
About the difference between defer and Async:
script: Loading and execution are synchronous and sequential, with no compatibility issues, but can block DOM rendering, possibly resulting in a long white screen.script defer: Asynchronous download, delayed execution, will be executed after the entire page is parsed, delayed scripts are sequential, but there are compatibility problems.script async: asynchronous download, delayed execution, but not guaranteed to wait for the entire page parsing after the execution, it is out of order, this is also more suitable for Baidu or Google analysis does not rely on other scripts such library, compatibility problems.
5. Font ICONS instead of pictures.
Font icon is vector image, no distortion, font icon file is also small, can also set font size/color properties, more convenient and flexible use.
6. Use HTTP caching.
The cache is for the second request, and the cache is mainly in memory and hard disk.
HTTP caching is mainly divided into strong caching and negotiated caching.
- Strong caching: There is no need to request the server before the expiration date, like the expiration date of the drink, the status code is gray 200.
- Negotiation cache: The browser and the server negotiate through the identifier. If the identifier matches, the browser directly reads the cache. If the identifier does not match, the browser returns a new resource with the status code 304.
For more details, see what the front end needs to know about browser caching (that is, HTTP caching) in another small editor’s article.
7. Image optimization.
(1) Lazy loading of pictures. The principle is not to set the image path, only when the image into the viewable area to set.
Method 1: IntersectionObserver Method 2: El.getBoundingClientRect () Method 3: IntersectionObserver method Native JS judgment specific details can refer to the article lazy loading instructions Vue3 custom instructions -10 common practical instructions, with detailed explanation, quickly take to collect!!
(2) picture compression quality. In fact, 60%~100% quality pictures are usually indistinguishable. (3) Replace some image effects with CSS3 styles and animations. Small triangles, small arrows, some simple GIFs, because the quality of the code is usually a fraction or a tenth of the quality of the image. (4) Sprite can be used for some ICONS.
8. Other tricks
(1) Use Webpack to split the code and extract the public file to prevent the main file from being too large, resulting in slow loading on the first screen. (2) Third-party libraries can extract independent files separately, and UI framework components can be loaded on demand. (3) Reduce the redundant code converted from ES6 to ES5. (4) compress JS and CSS code. (5) Delete useless code console/alert/ annotation etc. (6) Enable GZIP.
The runtime
1. Avoid large DOM elements and deep tessellation
A large number of DOM elements and a DOM hierarchy with deep inlays can cause HTML parsing to be slow, and we should try to avoid unnecessary DOM elements and deep inlays.
You can obtain the DOM count for a page using the following API:
document.getElementsByTagName('*').length
Copy the code2. Reduce backflow and redraw.
Redrawing does not necessarily cause redrawing.
(1) When changing the style of JS, it is best not to write the style directly, but to replace the class to change the style. (2) When JS manipulates the DOM, DOM elements can be removed from the document stream, either with hidden elements (display: None) or document fragments.
3. Reduce the complexity of CSS selectors.
! Important > Inline Style > ID > Class > Tag name and pseudo-class > * > Inheritance > Default
CSS selector priority algorithm: 1. If there is an inline style, then A = 1, otherwise A = 0; 2. The value of B is equal to the number of occurrences of the ID selector; 3. The value of C is equal to the total number of occurrences of class selectors and attribute selectors and pseudo-classes; The value of D is equal to the total number of occurrences of label selectors and pseudo-elements.
The universal selector (*) has no priority value (0,0,0,0).
4. Use flex Xbox
Using Flex layouts gives better performance, although compatibility is a bit poor, but it is the way of the future and is supported by modern browsers.
5. Animate with new properties like Transform.
Animating effects are achieved using properties such as Transform, opacity, filter, will-change, which do not trigger backflow and redraw. They are handled separately by a separate synthesizer and enable hardware acceleration, i.e., GPU acceleration.
6. Use event delegates.
Event delegate can process a kind of event program uniformly by using the principle of bubbling.
7. Anti-shake and throttle.
Anti – shake: input box real-time search, page trigger resize event. Throttling: Scroll events.
8. Do not override the original method.
JS code, no matter how optimized, is not as good as native methods, which are written in the underlying language and have more performance advantages.
At this point, this article is finished, sa Hua Sa hua.
I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.