Series Article Directory

knowledge points

71. How to use CDN (Content Delivery Network) to speed up the loading of front-end resources? Which CDN services have you used in your project?

Using CDN (Content Delivery Network) can significantly speed up the loading of front-end resources, and reduce data transmission time and delay by distributing resources to server nodes closer to users. Here are some ways to use a CDN to speed up front-end resource loading:

Choose the right CDN provider: Choose a reliable CDN provider and decide according to its server distribution, performance, support and other characteristics.
Static resource hosting: Upload static resources (such as style sheets, scripts, and images) to CDN to ensure that resources can be quickly accessed globally.
Configure cache policy: Set appropriate cache policies on the CDN, such as cache time, cache control, etc., so that the client can reuse cached resources and reduce requests to the source server.
Compression and optimization: Before uploading resources to CDN, make sure to compress and optimize resources to reduce file size and improve loading speed.
DNS pre-analysis: In the head of the HTML document, use <link rel="dns-prefetch">tags to perform DNS pre-analysis to speed up CDN domain name resolution.
HTTPS support: Use the HTTPS support provided by the CDN provider to ensure that resources are transmitted in a secure manner.
Dynamic content caching: For some dynamic content, you can use the CDN provider's caching function to reduce server load and speed up the distribution of dynamic content.

I have used some CDN services in my project, including:

Cloudflare: Provides global CDN services, with functions such as performance optimization and security protection.
Fastly: Provides high-performance CDN services, suitable for large-scale and high-traffic applications.
Akamai: It is an established CDN provider with a wide range of global network nodes.
Amazon CloudFront: It is a CDN service provided by Amazon AWS, which is tightly integrated with other AWS services.

When choosing a CDN service, it needs to be evaluated based on project requirements, performance requirements and budget. Using CDN can significantly improve the loading speed of front-end resources, reduce latency, and provide a better user experience.

72. When dealing with large-scale front-end projects, how do you conduct code segmentation and modular management to ensure the effectiveness of teamwork and performance optimization?

When dealing with large front-end projects, code splitting and modular management are key strategies to ensure effective teamwork and performance optimization. Here's how I do it in my project:

Code splitting:

On-Demand Loading: Use dynamic imports (eg import()) to load modules on demand, split your project into smaller chunks, load only when needed, and reduce initial load time.
Routing level segmentation: According to the page routing, the code of different pages is divided into independent blocks, so that users only load the code required by the current page.
Third-party library segmentation: Separate third-party libraries and frameworks, take advantage of browser caching, and reduce users to download duplicate libraries.

Modular management:

Component-based development: Split the page into reusable components, build the page through the assembly of components, and improve development efficiency and code reusability.
Single Responsibility Principle: Make sure each module or component is responsible for only one function and avoid overly complex modules.
Module interface definition: Define clear interfaces and dependencies between modules, reduce coupling, and enable modules to be independently developed and tested.

State management:

Global state management: Use an appropriate state management library (such as Redux, MobX) to manage the global state of the application to ensure state synchronization between different modules.
Local state management: For local state, use React's useStateor useReducerto manage to avoid excessive expansion of global state.

Code specification and documentation:

Consistent Naming and Structure: Use a consistent naming convention and project structure to make code easier to understand and maintain for team members.
Documentation and comments: Write documentation and comments for important modules, components, and functions so that other team members can understand their functionality and usage.

Automate build and deployment:

Webpack or other build tools: Use build tools for code splitting, minification, and packaging to optimize code delivery.
Continuous Integration/Continuous Delivery: Set up automated build and deployment processes to ensure rapid delivery and deployment of new code.

Performance monitoring and optimization:

Performance testing: Use performance testing tools to monitor project performance metrics and identify potential performance issues.
Performance optimization: According to the results of the performance test, perform targeted performance optimization, such as reducing the number of requests, caching data, etc.

Combining the above strategies, when I deal with large-scale front-end projects, through code segmentation and modular management, I can ensure efficient collaboration among team members, reduce code redundancy, improve performance, and enhance project maintainability and scalability.

73. Talk about the impact of Viewport and responsive design on performance optimization in mobile web development. How do you handle adaptation issues on different devices?

In mobile web development, Viewport and responsive design play an important role in performance optimization. They can affect page rendering speed, layout adaptability, and user experience. Here's how they affect performance optimizations and how I approach adaptation on different devices:

Impact of Viewport:
Viewport refers to the area actually visible to the user in the browser. The Viewport on mobile devices is relatively small, so it affects the performance optimization of the following aspects:

Rendering performance: Using an appropriate Viewport setting can ensure that the page can adapt to screens of different sizes, thereby reducing unnecessary rendering and layout calculations.
Resource loading: By setting the width of the Viewport, the browser can correctly load images and resources that adapt to the screen size, avoid loading too large resources, and improve the loading speed.
CSS Media Queries: Use media queries to apply different styles according to the width of the Viewport, so that the page presents the best layout on different devices.

Impact of Responsive Design:
Responsive design is a design method that enables websites to adapt to different screen sizes and orientations on different devices. Its impact on performance optimization is mainly reflected in the following aspects:

User experience: Responsive design can provide a better user experience, and users can get a consistent and friendly interface on different devices, thereby improving user satisfaction.
Performance: Using technologies such as media query and elastic layout, the layout and style can be optimized on different devices, reducing unnecessary loading and rendering, thereby improving performance.
SEO: Responsive design helps maintain a unique URL for a website, reduces fragmentation of content and is good for search engine optimization.

Dealing with adaptation issues on different devices:
When dealing with adaptation issues on different devices, I took the following approach:

Flexible Layout: Use flexible layout and percentage units to create flexible layouts to ensure that pages can adapt to different screen sizes.
Media Queries: Use media queries to apply different styles to suit different screen sizes and orientations.
Image optimization: Use images of different sizes and resolutions, and select appropriate images to load through CSS or <img>tag attributes to improve image loading efficiency.srcset
Mobile-first design: Start designing for mobile devices and gradually add layout and functionality to ensure a good user experience even on smaller screens.
Testing and debugging: Test on various devices and browsers, use developer tools to simulate different devices, and ensure that the page works properly in different environments.

Combining the above influences and practices, Viewport and responsive design can significantly improve the performance and user experience of mobile web pages, while adapting to adaptation issues on different devices is also the key to ensuring that the page runs well in various environments.

74. The concept of font subsetting (Font Subsetting), have you tried using font subsetting (Font Subsetting) to reduce the size of font files?

Font subsetting is a technique for optimizing font file size by including only the characters actually used in the document, thereby reducing the size of the font file. This is especially useful in mobile and web applications to reduce load times and improve performance.

Font files usually contain the entire character set, but in practical applications, all characters are rarely used. Font subsetting technology allows you to generate a new font file based on the characters actually used, containing only the characters that appear in the document, thereby reducing file size.

I have tried subsetting fonts in my project to optimize font file size. Here are some relevant experiences:

Character analysis: First, analyze the characters actually used in the page, which can be identified by tools or scripts.
Font subsetting tools: Choose a suitable font subsetting tool, such as FontForge, Glyphs, pyftsubset, etc.
Generate Font Subset: Using the selected tool, generate a font subset file based on the characters actually used.
Validation and testing: Apply font subsets to the page to ensure text still displays correctly. Test, especially in different font sizes and browsers, to ensure font quality and display.
Caching and Performance: Consider caching strategies to ensure that font files are effectively shared across multiple pages to further improve performance.

By using font subsetting techniques, I have successfully reduced the size of font files, resulting in faster page loads and a better user experience. This is especially helpful when using custom fonts in mobile or web applications, reducing unnecessary network transfers and load times.

75. Please talk about Horizontal Scaling and Vertical Scaling in the front-end code, and how they affect the performance and scalability of the application.

Horizontal Scaling and Vertical Scaling are two main strategies for scaling applications under different load conditions. They are implemented and affected slightly differently in front-end applications:

Horizontal Scaling:
Horizontal scaling is the process of increasing the number of servers to handle increased load. This means deploying the application on multiple servers and distributing requests to those servers through a load balancer. Front-end applications are usually served by multiple servers, and each server is responsible for processing a part of the request.

Impact and advantages:

The overall processing capability of the system is improved, and more concurrent requests can be handled.
Increased system availability, when one server fails, other servers can continue to provide services.
It supports better horizontal expansion and is suitable for large-scale applications and high-concurrency scenarios.

Vertical Scaling:
Vertical scaling is to deal with the increase of load by increasing the hardware resources (such as CPU, memory, storage) of a single server. Front-end applications can handle larger loads by upgrading the hardware specifications of the server.

Impact and advantages:

The processing capacity of a single server is enhanced to handle more concurrent requests.
Management and deployment are relatively simple, and only one server needs to be maintained.
It is suitable for some small and medium-scale applications, or applications in the initial stage.

Performance and scalability impact:

Scale-out is better suited for large-scale load increases, providing better performance and scalability. However, it needs to consider data synchronization, state management and other issues.
Vertical expansion is relatively simple, but at a certain point hardware resources will reach the limit, limiting further expansion of the application. At the same time, a server failure may have a greater impact on the entire system.

In practical applications, the strategy of horizontal expansion or vertical expansion is usually selected according to the scale of the application, the load situation and the budget, or the combination of the two is used to achieve better performance and scalability. Front-end applications generally work together with the back-end to jointly handle system expansion and performance optimization.

76. How to avoid repeated logic and repeated requests in the front-end code to improve performance and maintain code quality?

Avoiding duplicate logic and duplicate requests in front-end code is a critical step to improve performance and code quality. Here are some ways to achieve this:

Modularization and Componentization:
Splitting code into modules or components, each module is only responsible for a specific function. This helps avoid duplication of logic and improves code reusability and maintainability. Use modular tools like ES6 modules or CommonJS to do it.
Function abstraction:
abstract commonly used and repetitive logic into functions so that they can be called when needed. This reduces code redundancy and makes code cleaner and easier to maintain.
Cache data:
Use local storage (such as LocalStorage or SessionStorage) to cache some commonly used data to avoid repeated network requests. This improves page load speed and user experience.
Request merging:
Merge multiple similar requests into one request to reduce unnecessary network overhead. For example, combine multiple API requests into one, or use GraphQL to combine multiple data queries.
Data normalization:
Extract duplicate data and manage it in a unified way to avoid repeating the definition of the same data in multiple places.
Use state management:
For the state of front-end applications, use appropriate state management tools (such as Redux, MobX, etc.) to ensure state consistency and avoid repeated requests and data inconsistencies.
Lazy loading:
Lazy loading of unnecessary content or components, and loading only when needed, reducing initial loading time and resource consumption.
Server-side data prefetching:
Get the required data in advance when needed, and cache the data to the front end to avoid multiple requests for the same data.
Merge and compress code:
use build tools (such as Webpack, Parcel, etc.) to merge and compress code to reduce file size and request times.
Regular code review:
Conduct regular code reviews to identify duplicate logic and requests, and ensure that the team notices and resolves these issues during the coding phase.

Through the above method, it is possible to effectively avoid repeated logic and repeated requests in the front-end code, improve performance, maintain code quality, and enhance the maintainability of the application.

77. Have you ever encountered the problem of power consumption on the mobile terminal? How do you use front-end optimization to reduce the application's battery consumption on the device?

Yes, the power consumption of the mobile terminal is an important consideration, especially in the front-end application, there may be some situations that cause the device battery to drain too quickly. Here are some of the things I do in terms of front-end optimization to reduce the drain on the device's battery:

Reduce network requests:
reduce unnecessary network requests, including reducing the number of requests and the amount of requested data. You can use techniques such as caching, request merging, and lazy loading to optimize network requests, thereby reducing network communication and power consumption of devices.
Throttling and anti-shake:
For some frequently triggered events (such as scrolling, touch), use throttling (Throttling) and anti-shake (Debouncing) technology to control the trigger frequency of events, avoid unnecessary calculation and processing, and reduce CPU usage and power consumption.
Animation Optimization:
Avoid complex animations that are GPU-intensive, especially in background tabs. Use CSS animations and transitions and avoid JavaScript-driven animations as much as possible.
Use Web Workers:
For some computationally intensive tasks, they can be processed in Web Workers to avoid blocking the main thread and reduce CPU usage and power consumption.
Lazy loading:
Only load the content in the visible area of the current screen, and delay loading the content in the invisible area to avoid unnecessary rendering and resource consumption.
Timer optimization:
avoid frequent use of short-interval timers, use appropriate timer intervals, and avoid unnecessary calculations and triggers.
Use hardware acceleration:
Reasonably use CSS3 animations and transitions, take advantage of hardware acceleration to optimize performance and reduce CPU usage.
Monitoring and optimization:
Use performance monitoring tools to analyze application performance and power consumption, identify bottlenecks and optimize them.
Front-end framework optimization:
Some front-end frameworks may introduce additional performance consumption, choose a suitable framework or library, and optimize it to reduce unnecessary calculation and rendering.

Through the comprehensive use of these methods, the front-end optimization can reduce the consumption of the application's battery on the device, improve the user experience, and also help to extend the battery life of the device.

78. Talk about your understanding of Web performance budget (Performance Budget). How do you set and monitor performance budgets to avoid performance degradation?

Web performance budget (Performance Budget) is a strategy for setting and monitoring website or application performance. It helps the team set and maintain a set of performance indicators during the development process to ensure that the project can maintain good performance at various stages and after release. performance level. Performance budgets help prevent performance degradation, ensuring users always have a fast and smooth experience.

Setting up and monitoring performance budgets involves the following steps:

Identify performance metrics:
Based on the needs of the project and user experience goals, select a set of key performance metrics such as page load time, time to first render, interaction latency, etc. These indicators should be closely related to user experience and can directly affect user satisfaction.
Set the threshold:
set a reasonable threshold for each performance indicator, that is, the performance budget. Thresholds should be determined based on the user's expected experience and the performance characteristics of the device. For example, the page load time is less than 3 seconds, the first rendering time is less than 1 second, etc.
Monitoring during development:
During the development process, use tools such as performance testing tools (such as Lighthouse, WebPageTest), browser developer tools, etc. to monitor the performance indicators of the project in real time. Ensure that each feature is developed within the performance budget.
Continuous integration and automated testing:
Integrate performance testing into the continuous integration process to ensure that performance testing is triggered every code commit. Automated testing can detect performance problems early and prevent them from accumulating later.
Code review and optimization:
During code review, apart from checking functionality and code quality, you should also focus on performance. Make sure team members stick to performance budgets and make timely optimizations if they are found to be over budget.
Monitoring and alarm:
In the online environment, continuously monitor performance indicators and set up an alarm mechanism. Once performance degradation exceeds expectations, timely measures are taken to repair it.
Periodic evaluation and adjustment:
Regularly evaluate whether the performance budget setting is still reasonable, and whether it needs to be adjusted based on user feedback and device changes. Align performance budgets with actual user needs.

Through the above steps, the performance budget can help the team continue to focus on performance during the development process, avoid performance degradation, and provide a quantifiable way to ensure that the performance of the project is always at an acceptable level.

79. When dealing with front-end caching, how to avoid cache expiration or premature failure to ensure that users always get the latest data?

In front-end caching, ensuring that data neither expires nor expires prematurely is a key balancing act. Here are some ways to avoid cache expiration or premature invalidation to ensure users always get the latest data:

Use an appropriate caching strategy:
Choose a caching strategy that suits your application needs, such as strong caching and negotiated caching. Strong caching allows the client to directly use the cached data within the validity period of the cache, while the negotiated cache verifies to the server whether there is updated data when the cache expires.
Control the cache expiration time:
set the appropriate Cache-Controland Expiresheader in the response header to control the expiration time of the cached data. Make sure the expiration time is long enough to reduce unnecessary requests, but not too long so that the latest data is fetched in a timely manner.
Version control:
Include version information in the URL of the resource, such as adding a version number or hash value to the resource path. When a resource changes, the version number changes accordingly, avoiding stale caches.
Update cache strategy:
Choose a cache strategy flexibly according to the importance and update frequency of data. For frequently changing data, you can use a shorter cache time, or use a negotiated cache strategy.
Reasonable cache cleaning mechanism:
regularly clean the cache to prevent the cache from occupying too much storage space. But make sure that the cleanup is not done so frequently that it affects performance.
Conditional Requests: Use conditional requests, such as and headers,
in the negotiation cache to interact with the server to check if the data is still valid.If-None-MatchIf-Modified-Since
Update notification:
Use push technology (such as WebSockets or server push) to notify the client of data changes in real time, thereby avoiding premature expiration of cached data.
Monitoring and testing:
regularly monitor the performance of the cache, test the effect of the cache, and ensure the consistency and correctness of the data.

Using these methods comprehensively can achieve a better balance in the front-end cache, avoid the problem of cache expiration or premature failure, and ensure that users always get the latest data.

80. Talk about the front-end cache strategy and cache invalidation mechanism. How do you ensure cache validity and consistency in your project?

Front-end caching strategies and cache invalidation mechanisms are an important part of optimizing performance and improving user experience. They help reduce repeated network requests, reduce server load, and provide faster loading times. The following are some common front-end caching strategies and cache invalidation mechanisms, and how to ensure the effectiveness and consistency of the cache in the project:

Front-end caching strategy:

Strong cache (Expires and Cache-Control): Set the expiration time of the resource. Before the expiration, the client directly uses the cache and does not initiate a request to the server. This is achieved by setting Expiresand Cache-Controlresponse headers, eg Cache-Control: max-age=3600.
Negotiation cache (Last-Modified and ETag): When the cache expires, the client verifies to the server whether the resource has been updated. Last-ModifiedThe server includes the and in the response header ETag, and the client verifies that the resource is still valid through the conditional request ( If-None-Matchand header).If-Modified-Since

Cache invalidation mechanism:

Manual invalidation: When the resource is updated, update the URL of the resource, such as adding a version number or hash value to the URL, so that the client can obtain the new resource.
Periodic expiration: Set an appropriate cache expiration time to ensure that the data expires after a period of time, forcing the client to re-acquire the latest data.
Server-side invalidation: When the data on the server changes, the client is notified of cache invalidation through some methods, such as setting a new one ETag, sending push notifications, etc.

Ensure cache validity and consistency:

Version control: Include version numbers, hash values, or timestamps in resource URLs to ensure that clients always request the latest resources.
Reasonable cache time: Set an appropriate cache expiration time to avoid caching data for too long, but don't set it too short to reduce unnecessary requests.
Update notification: Use push technology to notify the client of data changes to ensure that the cache expires in a timely manner.
Conditional Requests: Use the conditional request mechanism in the negotiation cache to verify to the server that the data is still valid when the resource expires.
Monitoring and testing: Use performance monitoring tools to monitor the effect of the cache, and regularly test the validity and consistency of the cache.

In the project, I usually choose the appropriate front-end cache strategy and cache invalidation mechanism according to the application requirements and the frequency of data changes. At the same time, use tools and techniques to monitor and test cache performance to ensure data validity and consistency, thereby providing a better user experience.

The performance optimization part of the front-end interview (8) 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

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

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

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

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

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

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