1.svg

It’s basically a font family and each icon has a content that unicode browsers automatically find in the font

From the Png – > iconfont:

Advantages :1. Multiple ICONS, one set of fonts, reduce the amount and volume of multiple PNG images to multiple requests

2. Vector graphics, scalable, zoom in and out without distortion

3. Directly modify the CSS to change the color and size, PNG cannot change the color

Disadvantages: 1: common icon, multi-color may not work,2. Not conducive to SEO

Advantages of SVG over normal ICONS 1. XML syntax is better for SEO, and browsers can recognize tags and better read the content of ICONS 2. You can multicolor different paths with different colors

2. The flex layout

Flex layouts perform better than Float layouts

Implement a typical layout

3. Resource loading priority

Browser default load priority HTML load images first and then load

We can adjust the priority using preload prefetch

Preload: Let’s say we want to load important resources like 23 images or fonts first

<link rel='preload' href = 'img/product2.svg'>// This image will be loaded first and then other images will be loaded in advance without parsing<link rel='stylesheet' href = 'xx.css'>// It's always stylesheetCopy the code

We usually load fonts ahead of time, but we usually load them after the HTML because we don’t know how to load fonts before we parse the HTML

Prefetch: To load a resource to be used later in the idle time

<link rel='prefetch' href='product.font.css'>
Copy the code

The home page does not need product.font. CSS, but it will be used later, so we will load this XX. CSS when we have time at the end of the home page, and the priority is lowest

The home page

The CSS prefetch cache will be seen in a later page

Dynamic preload:

Manually create the Link tag, pre-load the IMG, and add it to the head

Then manually assign SRC to Image to realize the separation of loading and assignment

Note that module loading in Webpack also supports preload and prefetch

4. Pre-render pages

Similar SSR will parse the page in advance to create the tag content inside

Function:

Performance bottlenecks for large single-page applications: JS load parsing and execution

SSR: major issue sacrifice TTFB fix first paint because the parse logic is in the back end and this time the request file is bigger because the parse JS is not a separate div

5. Windowing improves list performance

This is the virtual list

Cons: Loading a large list affects performance with a lot of DOM inside the page, rendering and loading is slow

The virtual list will only have visible rows, not a large DOM

6. Use skeleton screens to reduce layout Shift

Avoid layouts that move when content is loaded later, triggering backflow and impacting the user experience

Custom placeholder of the same width and height for pre-positioning