Series Article Directory

knowledge points

11. Common image formats and usage scenarios

Common image formats include JPEG, PNG, GIF, WebP, and SVG, each of which has its own applicable usage scenarios:

JPEG (Joint Photographic Experts Group)：
- Usage scene: suitable for photos and pictures of real scenes, especially images with rich colors and rich gradients.
- Advantages: high compression rate, small picture files, and high image quality.
- Cons: Does not support transparency.
PNG (Portable Network Graphics)：
- Usage scenario: Applicable to pictures that require a transparent background, such as icons, logos, etc.
- Advantages: support transparent background and transparency, lossless compression.
- Disadvantages: Usually larger file size, less effective compression for photos and complex images than JPEG.
GIF (Graphics Interchange Format)：
- Usage scenarios: Suitable for simple animations, icons, and simple graphics.
- Advantages: Supports simple animation and can set transparency.
- Cons: Limited colors, not suitable for storing complex images or photos.
WebP：
- Usage scenario: It is suitable for most image types and can replace JPEG and PNG formats.
- Advantages: lossy and lossless compression, higher compression rate, smaller file size, support for transparency.
- Disadvantages: Poor compatibility with some browsers.
SVG (Scalable Vector Graphics)：
- Usage scenario: Suitable for vector graphics, such as icons, vector graphics, etc.
- Advantages: No matter zooming in or zooming out, the image quality remains the same, the file size is small, and it is suitable for responsive design.
- Cons: Not suitable for storing complex images or photos.

According to the characteristics of pictures and application scenarios, choosing an appropriate picture format can improve web page performance and user experience. During the development process, it is necessary to select the most suitable image format according to the actual situation, and combine optimization methods such as compression and lazy loading to make web page loading more efficient and smooth.

12. How to use webpack to optimize front-end performance?

Using webpack to optimize front-end performance can take the following measures:

Code compression and optimization: Use webpack's UglifyJsPlugin or TerserPlugin to compress and optimize JavaScript code, reduce file size, and improve loading speed.
Lazy loading and code splitting: Use webpack's dynamic import feature and code splitting function to lazily load modules that don't need to be loaded immediately on the page to reduce the initial file size.
Image optimization: Use image-webpack-loader to compress and optimize images, and use url-loader to convert images to base64 encoding to reduce the number of HTTP requests.
Cache control: Use webpack's file name hash or chunkhash to ensure that the file name changes when the file content changes, and use the browser cache mechanism to improve resource cache utilization.
Tree Shaking: Use the Tree Shaking feature of webpack to remove unused code and reduce the packaged file size.
CDN Acceleration: Use webpack's publicPath configuration to deploy static resources to CDN to speed up file loading.
Scope Hoisting: Use webpack's Scope Hoisting feature to reduce module wrapping code and improve code execution speed.
Use Webpack Dev Server: Use webpack-dev-server in the development environment to enable hot update and automatic refresh to improve development efficiency.
Use MiniCssExtractPlugin: Extract CSS as a separate file, avoid inlining CSS into HTML, and reduce file size.
Use HappyPack: Use HappyPack to parallelize tasks and increase build speed.
Use DllPlugin and DllReferencePlugin: Use DllPlugin to package third-party libraries separately to reduce build time.
Use cache: Use cache to store compiled results to speed up the build again.

Through the above optimization methods, the speed of webpack packaging and construction can be effectively improved, the file size can be reduced, the front-end performance can be optimized, and the user experience can be improved.

13. How to improve the build speed of webpack?

Improving webpack build speed is a very important optimization goal in front-end development. Here are some ways to increase the speed of webpack builds:

Use the latest version of webpack: Make sure to use the latest version of webpack, as each new version may bring performance improvements and optimizations.
Reasonably configure module parsing rules: In webpack configuration, you can optimize module parsing speed through the resolve.alias and resolve.extensions configuration items.
Use cache: Use webpack's cache function and enable cache: true in the configuration, so that compiled modules can be cached to reduce recompilation time.
Use HappyPack or thread-loader: Use HappyPack or thread-loader to process tasks in parallel, distribute tasks to multiple subprocesses, and speed up builds.
Optimize loader and plugin: optimize the configuration of loader and plugin, avoid invalid loader and plugin, and ensure that only necessary resources are loaded.
Use DllPlugin and DllReferencePlugin: Use DllPlugin to package third-party libraries separately to reduce build time, and use DllReferencePlugin to speed up dependency lookup.
Use Tree Shaking: Enable the Tree Shaking feature to remove unused code and reduce the packaged file size.
Use externals: Use the externals configuration to exclude third-party libraries from the scope of packaging and reduce the build size.
Use a cache directory: Use a cache directory to store intermediate and final build results, avoiding repeated builds of the same resources.
Split code: Use the code split function to split the code into multiple small pieces, load them asynchronously as needed, and optimize the initial loading time.
Use Scope Hoisting: Enable the Scope Hoisting feature, reduce module wrapping code, and improve code execution speed.
Use MiniCssExtractPlugin: Extract CSS as a separate file, avoid inlining CSS into HTML, and reduce build time.

Through the above optimization measures, the construction speed of webpack can be significantly improved, the development and deployment process of the project can be accelerated, and the efficiency of front-end development can be improved.

14. How to optimize the performance of the vue project

Performance optimization for Vue projects can take the following measures:

Use asynchronous components: Set the components that are not commonly used in the page as asynchronous components to reduce the initial loading time.
Use route lazy loading: Use Vue's route lazy loading feature to load the components corresponding to the route on demand, reducing the initial package size.
Use keep-alive: For frequently switched components, use keep-alive to cache component instances to reduce repeated rendering of components.
Use v-if and v-show: Reasonably use v-if and v-show to control the display and hiding of components and reduce unnecessary rendering.
Key using v-for: When using v-for, add a unique key to each element to improve the performance of list rendering.
Reasonable use of computed and watch: Avoid complex calculations in computed, and use watch to monitor data changes to perform asynchronous operations.
Optimize network requests: Merge requests, reduce the number of HTTP requests, and use CDN to speed up static resource loading.
Use image lazy loading: Use the image lazy loading library to defer the loading of images until they are about to enter the viewport.
Reduce package size: Compress code, remove unused code, optimize webpack configuration, and reduce package size after packaging.
Optimize list rendering: Use virtual scrolling technology to only render list items in the currently visible area to improve list rendering performance.
Use Web Workers: Use Web Workers to perform time-consuming tasks on background threads without blocking the main thread.
Reasonable use of v-if and v-show: v-if will not render the element when the condition is not met, and v-show just controls the display and hiding of the element.
Use asynchronous components: For components that are not commonly used in the page, you can use asynchronous components to load on demand and reduce the initial loading time.
Avoid unnecessary reactive data: Avoid setting large amounts of data as reactive data, use ref or reactive to avoid Vue listening to it.
Optimize computed attributes: Avoid complex calculations in computed, optimize the logic of computed attributes, and reduce unnecessary calculations.

Through the above optimization measures, the performance of the Vue project can be improved, the page loading speed can be accelerated, and the user experience can be improved.

15. How to optimize the loading of the project

Load optimization for projects can take the following actions:

Use asynchronous loading: Split unnecessary code and resources into asynchronously loaded modules, load on demand, and reduce initial loading time.
Use code splitting: Use tools such as webpack's code splitting function to split the code into multiple small pieces to achieve on-demand loading.
Compress code: Use compression tools to compress code, including JavaScript, CSS and HTML, to reduce file size.
Use CDN: Store static resources such as pictures and CSS files on CDN to reduce server pressure and improve loading speed.
Caching resources: Reasonably set the caching strategy and use caching to avoid repeated loading of existing resources.
Use lazy loading of images: Lazy loading of images defers the loading of images on the page until they are about to enter the viewport.
Use WebP image format: WebP format is a modern image format, which can greatly reduce the size of images and improve loading speed.
Use preloading: Use <link rel="preload">the tag to preload important resources, and load resources that may be used in advance.
Lazy loading of unimportant resources: Set unimportant resources to lazy loading, and load the core content of the page first.
Use font icons: Use font icons instead of image icons. Font icons can reduce file size and speed up loading.
Avoid rendering blocking: Put JavaScript at the bottom of the page or use the asyncor deferattribute to avoid blocking page rendering.
Use server-side rendering: For pages that require a lot of processing, consider using server-side rendering to increase the loading speed of the first screen.
Use a cache mechanism: For frequently requested data, use a cache to reduce the pressure on the server and the number of network requests.
Optimize resource loading order: Put critical resources at the head of the page and unimportant resources at the bottom of the page.
Use Gzip compression: Enabling Gzip compression on the server side can reduce the size of resource files and speed up transmission.

Through the above optimization measures, the loading speed of the project can be significantly improved and the user experience can be improved.

16. Image optimization

Image optimization is to reduce the size of image files, improve page loading speed and user experience. Here are some common image optimization tips:

Choose the right picture format: Choose the right picture format according to the content of the picture. The JPEG format is suitable for photos and complex images, the PNG format is suitable for transparent images and simple icons, and the WebP format is a modern and efficient image format, usually smaller than JPEG and PNG formats.
Compress pictures: Use compression tools to compress pictures to reduce file size. Common image compression tools include TinyPNG, ImageOptim, etc.
Use an appropriate resolution: Resize the image to an appropriate resolution, don't use an image that is too large.
Use image lazy loading: Image lazy loading can delay the loading of images in the page until they are about to enter the viewport, reducing the loading time of the page.
Use CSS Sprites: Merge multiple small icons into one image, display different icons through CSS background-position, and reduce the number of HTTP requests.
Use responsive images: According to the screen size of different devices, provide images of different sizes to avoid loading too large images on small screen devices.
Use image caching: Set an appropriate caching strategy to let the browser cache images and avoid repeated loading of existing resources.
Avoid Excessive Animations and GIFs: Animations and GIFs typically have large file sizes and should be used sparingly so as not to slow down page loads.
Use SVG images: For simple icons and vector images, consider using SVG images, a vector graphics format with a smaller file size.
Use image optimization tools: Use some image optimization tools and plug-ins, such as ImageOptim, TinyPNG, SVGO, etc., to automatically optimize image files.

Using the above techniques comprehensively, you can effectively optimize the pictures in the webpage, improve the page loading speed, and provide users with a better browsing experience.

17. Rendering optimization

Rendering optimization refers to improving the rendering performance of web pages in browsers through a series of technologies and methods to reduce page loading time and improve user experience. Here are some common rendering optimization tips:

Reduce the number of HTTP requests: Merge multiple small files into one, use CSS Sprites, icon fonts, etc. to reduce the number of requests for pictures and icons.
Use lazy loading: non-critical content such as pictures and videos can be loaded lazily, and only loaded when the user scrolls to the visible area, reducing the initial loading time.
Optimize CSS and JavaScript: Put CSS at the head and JavaScript at the bottom to reduce rendering blocking.
Avoid using multi-level nested DOM structures: reduce the number of DOM operations, simplify the DOM structure as much as possible, and avoid complex layouts.
Use CSS animations instead of JavaScript animations: Use CSS3 animation effects instead of JavaScript-implemented animations because CSS animations are more efficient.
Avoid unnecessary redrawing and reflow: Use attributes such as translate and opacity to trigger hardware acceleration to reduce redrawing and reflow.
Use Web Workers: Handle some computationally intensive tasks to Web Workers to avoid blocking the main thread.
Use cache: Reasonably use cache to cache commonly used resources and reduce repeated requests.
Use responsive layouts: Provide different layouts and resources for different devices to provide a better user experience.
Avoid overly large images: Use proper image compression and cropping to avoid overly large images and reduce loading time.
Reduce repeated rendering: Use shouldComponentUpdate or PureComponent to optimize repeated rendering of components.
Use front-end performance monitoring tools: Use tools to analyze page performance, identify bottlenecks and optimize.

Using the above rendering optimization techniques comprehensively can significantly improve the rendering performance of web pages, improve user experience and user retention rate.

18. First screen optimization

First-screen optimization refers to optimizing the loading speed of web pages, ensuring that the key content of web pages can be quickly presented on the first screen when users open the page, and improving the user's first-time access experience. Here are some common above-the-fold optimization tips:

Reduce the number of HTTP requests: Merge multiple small files into one, use CSS Sprites, icon fonts, etc. to reduce the number of requests for pictures and icons.
Use lazy loading: non-critical content such as pictures and videos can be loaded lazily, and only loaded when the user scrolls to the visible area, reducing the initial loading time.
Optimize the loading order of key resources: Put key resources (such as CSS, JavaScript) in the head to reduce the delay of the first screen rendering.
Compress resources: Compress HTML, CSS, JavaScript and other files to reduce file size and speed up downloading.
Use responsive images: According to the screen size of different devices, provide images of different sizes to avoid loading too large images on small screen devices.
Use font icons: Use font icons instead of image icons to reduce HTTP request and image loading time.
Avoid unnecessary redrawing and reflow: Use attributes such as translate and opacity to trigger hardware acceleration to reduce redrawing and reflow.
Use SSR (server-side rendering): Using server-side rendering can generate the content of the first screen on the server side, reducing the time for client-side rendering.
Use cache: Reasonably use cache to cache commonly used resources and reduce repeated requests.
Lazy loading of non-critical resources: Lazy loading of non-critical resources (such as advertisements, recommended content) and priority loading of key content.
Optimize the loading order of key resources: Ensure that key resources are loaded first when the page is loaded, reducing user waiting time.
Use preload: Use <link rel="preload">to preload key resources to download resources that may be used in advance.

Comprehensive use of the above first screen optimization techniques can significantly improve the loading speed of the first screen of the webpage and provide users with a better browsing experience.

19. Page style compatibility

Page style compatibility refers to ensuring that webpages can be correctly displayed and present the same style effect on different browsers and devices. Due to differences in the parsing and rendering of CSS by different browsers, as well as the different screen sizes and resolutions of different devices, there may be differences in the styles of web pages in different environments. Here are some common page style compatibility tips:

Use CSS Reset or Normalize: Introduce the CSS Reset or Normalize style library in the project, they can help eliminate the browser's default style differences, and make the page more consistent in different browsers.
Use Flexbox and Grid layout: Using Flexbox and Grid layout can realize page layout more conveniently, and has good compatibility, and is suitable for most modern browsers.
Use Autoprefixer: Use the Autoprefixer tool to automatically add browser prefixes according to the configuration, avoiding manually writing style prefixes for different browsers.
Pay attention to the support of CSS properties in different browsers: When writing styles, pay attention to the support of some CSS properties in different browsers, and you need to write compatibility styles in a targeted manner.
Testing and debugging: Test and debug the page style on different browsers and devices to ensure that the page can be displayed correctly in various environments.
Use CSS Polyfills: For older browsers that do not support new CSS features, you can use CSS Polyfills to simulate these features so that they can work properly on these browsers.
Use image format compatibility: For images, select an appropriate image format, such as WebP, JPEG, PNG, etc., according to the browser's support.
Use media queries: Use media queries to provide different styles for different devices based on their screen sizes and resolutions.
Detect browser feature support: Detect whether the browser supports certain features in the code, and if not, provide alternatives or downgrade processing.

Using the above style compatibility techniques comprehensively, the webpage can be rendered correctly on different browsers and devices, and a consistent user experience can be provided.

20. How does server-side rendering (SSR) optimize performance? What are its advantages and limitations?

Server-side rendering is a technology that generates web page content on the server side and directly returns the rendered HTML content to the client. Compared with traditional client-side rendering (Client-Side Rendering, CSR), SSR has some advantages and limitations:

Advantage:

SEO friendly: Since search engine crawlers can directly obtain the HTML content rendered by the server, SSR is more friendly to search engines, which is conducive to web page search engine optimization (SEO).
Faster first load time: SSR can generate full HTML content on the server side and return it directly to the client, so the first load of the page may be faster, especially for slower network connections or lower performance devices .
Better user experience: SSR can render part of the page content on the server side, so that the client can display the content faster after receiving the response, providing a better user experience.
Better performance: For some low-performance devices or poor network environments, SSR can reduce the workload of the client and improve page performance.

limitation:

Server pressure: SSR needs to be rendered on the server side, which will increase the burden and pressure on the server, especially in the case of high concurrent access, which may have a greater impact on server performance.
Complex deployment: SSR needs to run certain rendering logic on the server side, so for front-end development, deployment and maintenance may be relatively complicated.
Development cost: SSR requires developers to be capable of back-end development. For the front-end team, more development resources may need to be invested.
Potentially long first load time: While SSR can provide faster display of content on first load, if the rendering logic is complex, the server response time may be longer, resulting in a longer first load time.

Comprehensive consideration, SSR can optimize performance in some specific scenarios, provide better user experience and SEO effects, but it also needs to be selected and weighed according to specific project requirements and conditions.

The performance optimization part of the front-end interview (2) 10 small knowledge points per day

Table of contents

Series Article Directory

The performance optimization part of the front-end interview (1) 10 small knowledge points per day