foreword
The question of performance optimization is quite likely to be asked during the interview process, especially for interviewers with front-end development experience, they will basically be asked by the interviewer about performance optimization. But in the process of our project, the business may be relatively simple, not so complicated that it needs to be specially optimized, and the complex business may not be optimized. Might get stuck when asked (doesn't need to be optimized at all...). However, performance optimization is indeed an issue worthy of attention, and it does not mean that the business is complicated to a certain extent before it is specially optimized. I think having a good habit in the usual coding process, always thinking about how to write better, can also achieve an optimization effect.
How to optimize code
When it comes to optimization, some more official terms may come, such as:
-
Reduce HTTP requests: Combine and compress CSS, JavaScript files, use CSS Sprites or icon fonts to reduce image requests, and avoid unnecessary resource loading, thereby reducing page load time.
-
Use browser cache: Set appropriate cache headers so that the browser can load resources from the cache on the next visit, reducing repeated network requests.
-
Compressed resources: Compress transmitted CSS, JavaScript and HTML files using compression algorithms such as Gzip, reducing file size, thereby reducing bandwidth consumption and loading time.
-
Lazy loading: Delay loading unnecessary content on the page, such as images, advertisements, or other non-urgent resources, to speed up the initial page load.
-
Use asynchronous loading: Load JavaScript using asynchronous loading (eg
asyncand attributes) to ensure that the script does not block the parsing and rendering process of the page.defer -
Optimize images: use appropriate image formats (such as WebP), adjust image quality and size, and use responsive images to adapt to different screen sizes to reduce image loading time.
-
Minimize DOM operations: Reduce frequent operations on DOM, because DOM operations usually trigger rearrangement and redrawing, affecting page performance. Can be optimized using batch updates or virtual DOM.
-
Reduce rearrangement and redrawing: To avoid frequent style changes, you can reduce the browser's layout and drawing operations by merging changes, using CSS animations instead of JavaScript animations, etc.
-
Code Splitting: Split code into multiple modules or chunks, loaded on demand, to reduce initial load time, especially in larger apps.
-
Use CDN: Use a content delivery network (CDN) to distribute static resources, which can reduce network latency and speed up resource loading.
-
Remove unnecessary plugins and libraries: Regularly review and remove unused plugins, libraries, or features to reduce page complexity and load time.
-
Performance monitoring and analysis: Use tools such as Google PageSpeed Insights, Lighthouse, WebPageTest, etc. to monitor and analyze page performance, and optimize according to recommendations.
-
Server-side rendering (SSR) and pre-rendering: For some application scenarios, using server-side rendering or pre-rendering can generate some or all page content in advance, improving initial loading performance.
-
Use modern frameworks and technologies: Modern front-end frameworks such as React, Vue, etc. provide tools and technologies to optimize performance, such as virtual DOM, componentization, etc.
-
Optimize mobile performance: For mobile devices, consider using responsive design, mobile-optimized images and assets, and avoiding unnecessary actions and animations.
Of course, there are more than these. These methods must be the ones that can be thought of when it comes to optimizing performance optimization. In fact, in the usual business development, these are not used a lot. What I want to talk about is how to optimize the code as much as possible in the usual coding process:
daily habits
Avoid excessively nested DOM structure: Try to keep a shallow DOM structure and reduce the nesting of DOM elements, thereby improving rendering performance.
Avoid unnecessary repetitive code: try to avoid repeated logic and code blocks in the code, and consider encapsulating them as functions or components to reduce the amount of code and maintenance costs.
Layout with CSS Grid and Flexbox: Using modern layout techniques like CSS Grid and Flexbox makes it easier to create complex layouts with fewer extra DOM elements.
Utilize browser caching: Use appropriate caching strategies to make full use of the browser's caching mechanism to reduce repeated loading of the same resources.
Image lazy loading: For long pages or pages with a large number of images, you can use image lazy loading technology to load images only when they enter the viewport.
Minimize the use of JavaScript: Try to use HTML and CSS to achieve some effects and avoid excessive JavaScript operations, thereby reducing performance overhead.
Streamline third-party libraries: If you use a third-party library, only import the functions you actually need, avoid importing the entire library.
Reduce DOM query: Avoid repeatedly querying DOM elements in the loop, and query results can be cached to improve performance.
Lazy loading of non-essential scripts: Mark unnecessary scripts as lazy loading, so that the page can be rendered faster.
Use WebP images: If your browser supports it, use WebP images, which are usually smaller and load faster than JPEG and PNG.
Use font icons or SVGs instead of images: Font icons and SVG images are usually smaller than bitmap images and can be scaled without distortion.
Optimize routing: such as asynchronous loading of routing components. For single-page applications, optimizing routes can reduce unnecessary loading and rendering.
Anti-shake and throttling: Use anti-shake or throttling for some frequent operations.
Caching: Frequently switched components in vue use KeepAlive for caching. In react, such as memo, useMemo, useCallback, etc.
Use inline styles: For styles that only need to be used once on the page, consider using inline styles instead of external CSS files to reduce additional HTTP requests.
Use network prefetching and preloading: Use and to prefetch and preload resources that may be needed in the future during idle time.
**Virtual list:**Avoid large amount of data resulting in large amount of DOM operations.
**Cancel repeated requests:** Cancel the last unfinished request when the same interface is requested multiple times.
**loading loading:** For some interfaces that are really slow, use loading or skeleton screen.
**Uninstallation and cancellation: **When the component is uninstalled, cancel the listening of the event, cancel the timer in the component, and destroy some instances of the third-party library.
Summarize
In short, in the process of daily code writing, no matter whether the business is complex or not, it must be very good to develop good habits and solidified optimization ideas. It can save a lot of effort in troubleshooting bugs or subsequent maintenance.