Preface
The performance optimization part mainly examines the programmer's understanding of website performance optimization.
How to do a good job in performance optimization, which operations will cause performance optimization problems, what are the performance optimization indicators, etc., are all worthy of the programmer's attention
1. Understanding of reconstruction
Website refactoring refers to the behavior of simplifying the structure, adding readability, and maintaining consistency on the front end of the website without changing the external behavior. In other words, without changing the UI, optimize the website to maintain a consistent UI while expanding.
For traditional websites, refactoring usually includes the following aspects:
- Change the table layout to DIV+CSS.
- Make the front end of the website compatible with modern browsers.
- Optimize the mobile platform.
- Optimize for search engines.
In-depth website refactoring should consider the following aspects:
- Reduce coupling between codes
- Keep the code flexible.
- Write code in strict accordance with the specifications.
- Design an extensible API.
- Replace the old framework and language (such as VB)
- Enhance user experience.
- Optimize for speed.
- Compress front-end resources such as JavaScript, CSS, and images (usually resolved by the server).
- Optimize the performance of the program (such as data reading and writing).
- Use CDN to accelerate resource loading.
- Optimize JavaScript DOM.
- Cache files of the HTTP server.
2. If there are a large number of pictures on a page (large e-commerce website) and the page loads very slowly, what methods can be used to optimize the loading of these pictures to improve user experience?
-
For lazy loading of images, you can add a scroll bar event to the page to determine whether the image is in the visible area or is about to enter the visible area, and load first.
-
If it is a slideshow, album file, etc., picture preloading technology can be used, and the previous picture and the next picture of the currently displayed picture are downloaded first.
-
If the picture is a CSS picture, you can use CSS Sprite, SVG sprite, Icon font, Base64 and other technologies.
-
If the picture is too large, you can use a specially coded picture. When loading, a very small thumbnail will be loaded first to improve the user experience. For example, using Google's webp format image, the size of the WebP format image is 40% smaller than the JPEG format image under the same quality.
-
If the picture display area is smaller than the actual size of the picture, the picture should be compressed on the server side according to the business needs. After the picture is compressed, the picture size will be the same as the displayed picture.
3. Performance optimization issues.
Performance can be optimized at the following levels:
- Cache utilization: cache Ajax, use CDN , external JavaScript and CSS file cache, add Expires header , configure Etag on the server side , reduce DNS lookups, etc.
- Number of requests: Combine styles and scripts, use CSS image sprites, load image resources outside the initial first screen on demand, and delay load static resources.
- Request bandwidth: Compress files, open GZIP.
- CSS code: Avoid using CSS expressions, advanced selectors, and wildcard selectors.
- JavaScript code: Use hash tables to optimize search, use less global variables, use innerHTML instead of DOM operations, reduce the number of DOM operations, optimize JavaScript performance, use setTimeout to avoid page unresponsiveness, cache DOM node search results, avoid using with (with will Create your own scope, increase the length of the scope chain), merge multiple variable declarations.
- HTML code: Avoid empty src attributes such as pictures and iFrames. If the src attribute is empty, the current page will be reloaded, which will affect the speed and efficiency. Try to avoid writing the Style attribute in the HTML tag
4. How to optimize the performance of the mobile terminal?
- Try to use CSS3 animations and turn on hardware acceleration.
- Use touch events instead of click events as appropriate.
- Avoid using CSS3 gradient shadow effects.
- You can use transform: translateZ(0) to turn on hardware acceleration.
- Don't abuse Float. Float has a relatively large amount of calculation when rendering, so use it as little as possible.
- Do not abuse Web fonts. Web fonts need to be downloaded, parsed, and redrawn on the current page, so use them as little as possible.
- Reasonably use requestAnimation Frame animation instead of setTimeout.
- Properly use CSS properties (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL , Video) to trigger GPU rendering. Excessive use will increase the power consumption of the phone.
5. How to optimize the files of the website?
Files can be merged and compressed to minimize files; CDN can be used to host files, allowing users to access faster; multiple domain names can be used to cache static files.
Six, several ways to shorten the page load time.
The specific method is as follows.
(1) Optimize pictures
(2) Choose the image storage format (for example, GIF provides fewer colors, which can be used in some places where color requirements are not high)
(3) Optimize CSS (compress and merge CSS)
(4) Add a slash after the URL
(5) Mark the height and width of the picture (if the browser does not find these two parameters, it needs to calculate the size while downloading the picture. If there are many pictures, the browser needs to constantly adjust the page. This not only affects the speed, but also affects the browsing experience When the browser knows the height and width parameters, even if the picture cannot be displayed temporarily, the space for the picture will be vacated on the page, and then continue to load the subsequent content, thereby optimizing the loading time and improving the browsing experience).
Seven, improve the front-end performance of the website
The sprite map merges to reduce HTTP requests; compress HTML, CSS, and JavaScript files; use CDN to host static files; use localstorage cache and mainfest application cache.
8. Methods to optimize performance
(1) Reduce the number of HTTP requests, control the size of CSS Sprite, JavaScript and CSS source code, and images, and use web page Gzip, CDN hosting, data caching, and image server
(2) Through the front-end template JavaScript and data, reduce the bandwidth waste caused by HTML tags, save the Ajax request results with variables in the front-end, and each time the local variables are manipulated, no request is required, reducing the number of requests.
(3) Use innerHTML instead of DOM operations to reduce the number of DOM operations and optimize JavaScript performance.
(4) When there are many styles that need to be set, set the className instead of directly operating the Style.
(5) Use less global variables, cache the results of DOM node search, and reduce I/O read operations
(6) Avoid using CSS expressions, which are also called dynamic properties,
(7) Preload the picture, put the style sheet at the top, put the script at the bottom, and add a timestamp.
(8) Avoid using tables in the main layout of the page. The tables will not be displayed until the contents are completely downloaded. The display speed is slower than the DIV+CSS layout.
Nine, list some Web performance optimization methods
(1) Compress the source code and images (JavaScript uses obfuscated compression, CSS performs ordinary compression, JPG images are compressed to 50%~70% according to the specific quality, and PNG images are compressed from 24 colors to 8 colors to remove some PNG format information, etc.).
(2) Choose the appropriate picture format (the number of colors is mostly in JPG format, but rarely in PNG format. If it can be judged by the server that the browser supports WebP, use WebP or SVG format).
(3) Consolidate static resources (reduce HTTP requests)
(4) Combine multiple CSSs into one CSS, and combine pictures into Sprite images.
(5) Turn on Gzip compression on the server side (very effective for text resources).
(6) Use CDN (shared cache for public libraries).
(7) Extend the static resource cache time.
(8) Put CSS at the head of the page and put JavaScript code at the bottom of the page (so as to avoid blocking the page rendering and making the page appear blank for a long time)
10. For CSS, how to optimize performance?
(1) Use the display attribute correctly, the display attribute will affect the rendering of the page, so pay attention to the following aspects.
display:inline后不应该再使用 width、 height、 margin、 padding和float 。
display:inline- block后不应该再使用 float。
display:block后不应该再使用 vertical-align。
display:table后不应该再使用 margin或者float。
(2) Do not abuse float.
(3) Do not declare too much font-size.
(4) When the value is 0, no unit is required.
(5) Standardize various browser prefixes, and pay attention to the following aspects.
浏览器无前缀应放在最后。
CSS动画只用（ -webkit-无前缀）两种即可。
其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）
(6) Avoid making selectors look like regular expressions. Advanced selectors are not easy to read and take a long time to execute.
(7) Try to use id and class selectors to set styles (avoid using the style attribute to set inline styles)
(8) Try to use CSS3 animation.
(9) Reduce redrawing and reflow.
11. How to optimize performance for HTML?
(1) For resource loading, on-demand loading and asynchronous loading
(2) The resource loaded for the first time does not exceed 1024KB, that is, the smaller the better.
(3) Compress HTML, CSS, and JavaScript files.
(4) Reduce DOM nodes.
(5) Avoid empty src (empty src will cause invalid requests in some browsers).
(6) Avoid 30*, 40*, 50* request errors
(7) Add Favicon.ico. If the icon ico is not set, the default icon will cause a 404 or 500 request to be sent.
12. How to optimize performance for JavaScript?
The specific method is as follows.
(1) Selection and calculation of cache DOM.
(2) Try to use event delegation mode to avoid batch binding events.
(3) Use touchstart and touchend instead of click.
(4) Reasonably use requestAnimationFrame animation instead of setTimeOut.
(5) Use canvas animation appropriately.
(6) Try to avoid modifying the view in high-frequency events (such as TouchMove, Scroll events), which will cause multiple renderings.
13. How to optimize the server side?
The specific method is as follows.
(1) Enable Gzip compression.
(2) Extend the resource cache time, set the expiration time of the resource reasonably, and set the expiration time of some static resources that are not updated for a long time.
(3) Reduce the size of cookie header information. The larger the header information, the slower the resource transmission speed.
(4) Images or CSS and JavaScript files can be accelerated by CDN.
14. How to optimize the server-side interface?
The specific method is as follows.
(1) Interface merging: If a page needs to request more than two data interfaces, it is recommended to merge them into one to reduce the number of HTTP requests.
(2) Reduce the amount of data: remove unnecessary data from the data returned by the interface.
(3) Cached data: After the first load request, the data is cached; for non-first requests, the last requested data is used first, which can improve the response speed of non-first requests.
15. How to optimize the execution of scripts?
Improper script handling will block page loading and rendering, so be careful when using it.
(1) Write CSS at the head of the page, and write JavaScript programs at the end of the page or in asynchronous operations.
(2) Avoid empty src for pictures and iFrames, etc. Empty src will reload the current page, affecting speed and efficiency.
(3) Try to avoid resetting the picture size. Resetting the image size refers to resetting the image size multiple times in the page, CSS, JavaScript files, etc. Resetting the image size multiple times will cause multiple redraws of the image and affect performance
(4) Try to avoid using DataURL for pictures. DataURL images do not use the image compression algorithm, the file will become larger, and must be rendered after decoding, loading is slow and time-consuming.
16. How to optimize rendering?
The specific method is as follows.
(1) By setting the Viewport meta tag through HTML, Viewport can speed up the rendering of the page, as shown in the following code.
<meta name="viewport" content="width=device=width,initial-scale=1">
(2) Reduce the number of DOM nodes. Too many DOM nodes will affect the rendering of the page, so the number of DOM nodes should be reduced as much as possible.
(3) Use CSS3 animation as much as possible, reasonably use requestAnimationFrame animation instead of setTimeout, and use canvas animation appropriately (CSS animation for less than 5 elements, and canvas animation for more than 5 elements (webGL can be used in iOS 8)).
(4) Optimize Touchmove for high-frequency events, Scroll events can cause multiple renderings.
Use requestAnimationFrame to monitor frame changes so that you can render at the correct time, increase the time interval for responding to changes, and reduce the number of redraws.
Use throttling mode (based on operation throttling, or based on time throttling) to reduce the number of triggers.
(5) Improve the speed of GPU and use CSS properties (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) to trigger GPU rendering.
17. How to set up DNS cache?
After entering the URL in the browser address bar, the browser first needs to query the IP address of the server corresponding to the domain name (hostname), which usually takes 20 to 120 ms.
Before the DNS query is completed, the browser cannot recognize the server IP, so it does not download any data. Based on performance considerations, ISP operators, LAN routers, operating systems, and clients (browsers) will all have corresponding DNS caching mechanisms.
(1) IE caches for 30 minutes, which can be set through the DnsCacheTimeout item in the registry.
(2) Firefox is mixed for 1 min and configured through network.dnsCacheExpiration.
(3) In Chrome, click "Settings" → "Options" → "Advanced Options" in turn, and check the "Use pre-fetched DNS to improve web page loading speed" option to configure the cache time.
18. When will resource access failure occur?
During the development process, it was found that many developers did not set the icon, and the root directory of the server did not store the default Favicon.ico, which caused the request 404 to appear. Usually open Favicon.ico in the webview of the App, this Favicon.ico will not be loaded, but many pages can be shared.
If the user opens Favicon. ico in the browser, the retrieval will fail. Generally, try to ensure that the icon exists by default, the file is as small as possible, and set a longer cache expiration time. In addition, you should promptly clean up resources that have expired caches that cause the discovery request to fail.
19. How to optimize jQuery performance?
The optimization method is as follows.
(1) Use the latest version of the jQuery library.
Each new version of the JQuery library will fix bugs and some optimizations to the previous version, and will also contain some innovations, so it is recommended to use the latest version of the jQuery library to improve performance. However, it should be noted that after changing the version, do not forget to test the code, after all, sometimes it is not fully backward compatible.
(2) Use the appropriate selector.
jQuery provides a very rich selection of selectors. The selector is the most commonly used function by developers, but using different selectors can also bring performance problems. It is recommended to use simple selectors, such as i selectors, class selectors, and do not nest i selectors.
(3) Use jQuery objects as an array.
The result obtained using the jQuery selector is a jQuery object. However, the jQuery library will make you feel like you are using an array with a defined index and length. In terms of performance, it is recommended to use a simple for or while loop instead of $. each() to make the code faster.
(4) Every JavaScript event (such as click, mouseover, etc.) will bubble up to the parent node. When you need to bind the same callback function to multiple elements, it is recommended to use the event delegation mode.
(5) Use join() to concatenate strings.
Use join() to concatenate long strings instead of using "+" to concatenate strings. This helps to optimize performance, especially when dealing with long strings.
(6) Reasonably use the data attribute in HTML5.
The data attribute in HTML5 helps to insert data, especially the data exchange between the front and back ends; jQuery's data() method can effectively use HTML5 attributes to automatically obtain data.
20. What methods can improve the mobile terminal CSS3 animation experience?
(1) Use hardware capabilities as much as possible, such as using 3D deformation to turn on GPU acceleration, such as the following code.
-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0)；
The animation fluency of an element moving 500X to the right through translate3d will be significantly better than the animation movement achieved using the left property, because the CSS animation property will trigger the entire page to reorder, redraw, and reorganize. Paint is usually the most performance consuming. Avoid using CSS animation properties that trigger paint as much as possible.
If there is flicker during the execution of the animation (usually at the beginning of the animation), it can be handled as follows.
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden；
-ms-backface-visibility:hidden ;
backface-visibility:hidden；
-webkit-perspective：1000；
-moz-perspective：1000；
-ms-perspective：1000；
perspective：1000;
(2) Use box-shadows and gradients as little as possible. They often seriously affect the performance of the page, especially when they are used in an element at the same time.
(3) Keep the animation elements out of the document flow as much as possible to reduce rearrangement, as shown in the following code.
position:fixed；
position:absolute;