Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what are the interview questions about performance optimization". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Talk about your understanding of refactoring.

Website refactoring refers to the behavior that simplifies the structure, adds readability, and maintains consistency at the front end of the site without changing the external behavior. In other words, the website is optimized to maintain a consistent UI while expanding without changing the UI.

For traditional websites, refactoring usually includes the following aspects.

Change the table layout to DV+CSS.

Make the front end of the website compatible with modern browsers.

Optimize the mobile platform.

Optimize for search engines.

Deep-seated site refactoring should consider the following aspects.

Reduce coupling between code

Keep the code resilient.

Write the code strictly according to the specification.

Design extensible API.

Replace old frameworks, languages (such as VB)

Enhance the user experience.

Optimize the speed.

Compress front-end resources such as JavaScript, CSS, image, etc. (usually solved by the server).

Optimize the performance of the program (such as data reading and writing).

CDN is used to speed up resource loading.

Optimize JavaScript DOM.

Cache files from the HTTP server.

2. If there are a large number of pictures on a page (large e-commerce sites) and the page loads very slowly, what methods can be used to optimize the loading of these images so as to enhance the user experience?

For lazy loading of pictures, you can add a scroll bar event to the page to determine whether the picture is in the visual area or is about to enter the visual area, and load it first.

If it is a slide show, album file, etc., you can use the picture preloading technology to download the previous picture and the latter picture first for the current display picture.

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 encoded picture, and a specially compressed thumbnail will be loaded first to improve the user experience.

If the image display area is smaller than the true size of the picture, the image should be compressed first on the server according to the business needs. After the image is compressed, the size of the picture will be the same as that displayed.

3. Talk about performance optimization.

Performance can be optimized at the following levels.

Cache utilization: cache Ajax, cache using CDN, external JavaScript and CSS files, add Expires headers, configure Etag on the server side, reduce DNS lookups, etc.

Number of requests: merge styles and scripts, use CSS image wizard, load image resources outside the initial screen on demand, and load static resources late.

Request bandwidth: compress the file and turn on GZIP.

CSS code: avoid using CSS expressions, advanced selectors, and wildcard selectors.

JavaScript code: use a hash table to optimize search, less global variables, use innerHTML instead of DOM operations, reduce the number of DOM operations, optimize JavaScript performance, use setTimeout to avoid page loss of response, cache DOM node search results, avoid using with (with will create its own scope, increase the length of the scope chain), multiple variables declare merging.

HTML code: avoid empty src attributes such as pictures and iFrame. If the src attribute is empty, the current page will be reloaded, affecting speed and efficiency. Try to avoid writing the Style attribute in the HTML tag.

4. How to optimize the performance of mobile terminal?

The optimization method is as follows.

Try to use CSS3 animation and turn on hardware acceleration.

Use the touch event instead of the click event as appropriate.

Avoid using CSS3 gradient shadow effects.

You can use transform:translateZ (0) to turn on hardware acceleration.

Do not abuse Float, Float has a large amount of computation when rendering, so use it as little as possible.

Do not abuse Web fonts, Web fonts need to download, parse, redraw the current page, use as little as possible.

Rational use of requestAnimation Frame animation instead of setTimeout.

Reasonable use of attributes in CSS (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) to trigger GPU rendering. Overuse will increase the power consumption of mobile phones.

5. How to optimize the files of the website?

File merging and file compression can be done to minimize files; CDN managed files can be used for faster access; and multiple domain names can be used to cache static files.

6. Please name several ways to shorten the page loading time.

The specific methods are as follows.

(1) optimize the image

(2) choose the image storage format (for example, GIF provides fewer colors and can be used in 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 image. If there are a lot of pictures, the browser needs to constantly adjust the page. This affects not only the speed, but also the browsing experience. When the browser knows the height and width parameters, even if the picture cannot be displayed temporarily, it will make room for the picture on the page, and then continue to load the rest of the content, thus optimizing the loading time and improving the browsing experience.

7. What are the ways to improve the front-end performance of the website?

Sprite diagrams merge to reduce HTTP requests; compress HTML, CSS, and JavaScript files; use CDN to host static files; use localstorage cache and mainfest to apply cache.

8. What methods do you know to optimize performance?

The specific methods are as follows.

(1) reduce the number of HTTP requests, control the source code of CSS Sprite, JavaScript and CSS, and the size of pictures. Use web Gzip, CDN hosting, data cache and picture server.

(2) reduce the bandwidth waste caused by HTML tags through the frontend template JavaScript and data. Save the Ajax request result with variables in the frontend, and do not need requests each time you operate the local variables, thus reducing the number of requests.

(3) innerhTML is used instead of DOM operation to reduce the number of DOM operations and optimize JavaScript performance.

(4) when there are many styles to be set, set className instead of directly manipulating Style.

(5) reduce the use of global variables, cache the search results of DOM nodes, and reduce the read operations of Icano.

(6) avoid using CSS expressions, which are also called dynamic attributes

(7) preload the picture, put the stylesheet 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 fully downloaded, and the display speed is slower than the DIV+CSS layout.

9. List the Web performance optimization methods you know.

The specific optimization methods are as follows.

(1) compress the source code and image (JavaScript uses obfuscation compression, CSS carries out normal compression, JPG image is compressed to 50% / 70% according to specific quality, PNG image is compressed from 24 colors to 8 colors to remove some PNG format information, etc.)

(2) choose the appropriate picture format (JPG format is often used for the number of colors, but PNG format is rarely used. If you can judge by the server that the browser supports WebP, use WebP or SVG format).

(3) merge static resources (reduce HTTP requests)

(4) merge multiple CSS into one CSS, and combine the pictures into a sprite image.

(5) enable server-side Gzip compression (very effective for text resources).

(6) use CDN (share cache for public libraries).

(7) extend the cache time of static resources.

(8) place CSS at the head of the page and JavaScript code at the bottom of the page (to avoid blocking page rendering and leaving the page blank for a long time)

10. How do you optimize the performance of your code?

Use performance analysis tools to monitor performance, including static Analyze tools and runtime Profile tools (click the Product → Profile item in the Xcode toolbar to start).

For example, the running time of the test program, when the Time Profiler item is clicked, the application starts to run, which can get the distribution and percentage of time spent running the entire application. In order to ensure the authenticity of data analysis in the same usage scenario, a real machine must be used, because the simulator runs on Mac, and CPU on Mac is often faster than iOS devices.

11. How to optimize performance for CSS?

The specific optimization methods are as follows.

(1) using the display attribute correctly, the display attribute will affect the rendering of the page, so you should pay attention to the following aspects.

Width, height, margin, padding, and float should no longer be used after display:inline.

Float should no longer be used after display:inline- block.

Vertical-align should no longer be used after display:block.

Margin or float should no longer be used after display:table-*.

(2) do not abuse float.

(3) do not declare too much font-size.

(4) Units are not needed when the value is 0.

(5) standardize various browser prefixes and pay attention to the following aspects.

Browsers without prefixes should be placed last.

Only two kinds of CSS animation can be used (- webkit- without prefix).

Other prefixes include-webkit-,-moz-,-ms-, no prefix (Opera browsers switch to blink kernel, so-0-eliminated)

(6) avoid making selectors look like regular expressions. Advanced selectors are not easy to read and take a long time to execute.

(7) use id and class selectors to set styles as much as possible (avoid using the style attribute to set inline styles)

(8) use CSS3 animation as much as possible.

(9) reduce redrawing and reflux.

12. How to optimize performance for HTML?

The specific methods are as follows.

(1) for resource loading, demand loading and asynchronous loading

(2) the resources loaded for the first time do 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 can lead to 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 404or 500request to be sent.

13. How to optimize performance for JavaScript?

The specific methods are as follows.

(1) caching the selection and calculation of DOM.

(2) try to use event delegation mode to avoid batch binding events.

(3) use touchstart and touchend instead of click.

(4) rational use of requestAnimationFrame animation instead of setTimeOut.

(5) appropriate use of canvas animation.

(6) try to avoid modifying the view in high-frequency events (such as TouchMove, Scroll events), which will result in multiple renderings.

14. How to optimize the server side?

The specific methods are as follows.

(1) enable Gzip compression.

(2) extend the cache time of resources, set the expiration time of resources reasonably, and set a longer expiration time for some static resources that are not updated for a long time.

(3) reduce the size of cookie header information. The larger the header information is, the slower the resource transmission speed is.

(4) CDN can be used to accelerate images or CSS or JavaScript files.

15. How to optimize the server-side interface?

The specific methods are as follows.

(1) Interface merging: if a page needs to request data interfaces with more than two parts, it is recommended to merge into one to reduce the number of HTTP requests.

(2) reduce the amount of data: remove the unwanted data from the data returned by the API.

(3) caching data: cache data after the first request is loaded; for non-first requests, priority is given to the data requested last time, which can improve the response speed of non-first requests.

16. How to optimize script execution?

Improper handling of scripts will block page loading and rendering, so be careful when using them.

(1) write the CSS at the head of the page and the JavaScript program at the end of the page or in the asynchronous operation.

(2) avoid empty src of pictures and iFrame, etc., empty src will reload the current page, affecting speed and efficiency.

(3) avoid resizing pictures as much as possible. Resizing pictures means resizing pictures many times in pages, CSS, JavaScript files, etc. Resizing pictures many times will lead to multiple redrawing of pictures, affecting performance.

(4) avoid using DataURL in pictures as much as possible. DataURL images do not use the image compression algorithm, the file will become larger, and will have to be decoded before rendering, slow loading, time-consuming.

17. How to optimize rendering?

The specific methods are as follows.

By setting the Viewport meta tag by HTML, Viewport can speed up the rendering of the page, as shown in the following code.

(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 (use CSS animation within 5 elements and canvas animation with more than 5 elements (webGL can be used in iOS 8).

(4) for high-frequency event optimization Touchmove, Scroll event can cause multiple renderings.

Use requestAnimationFrame to listen for frame changes so that you can render at the right time, increase the interval between responding to changes, and reduce the number of redraws.

Use throttling mode (based on operation throttling or time-based throttling) to reduce the number of triggers.

(5) increase the speed of GPU and use the attributes in CSS (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) to trigger GPU rendering.

18. How to set up DNS cache?

After entering 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~120ms time.

The browser does not recognize the server IP until the DNS query is complete, so no data is downloaded. Based on performance considerations, ISP operators, LAN routing, operating systems, and clients (browsers) all have corresponding DNS caching mechanisms.

(1) positive IE cache 30min, which can be set through the DnsCacheTimeout key in the registry.

(2) Firefox is mixed with 1 min and configured through network.dnsCacheExpiration.

(3) in Chrome, configure the cache time by clicking the "set" → "option" → "Advanced options" and checking the "pre-extracted DNS to improve page loading speed" option.

19. When will resource access failure occur?

During the development process, it is found that many developers do not set icons, and the server-side root directory does not store the default Favicon.ico, resulting in request 404. Usually when you open Favicon.ico in the webview of App, the Favicon.ico is not loaded, but many pages can be shared.

If the user opens Favicon. Ico, the call will fail, generally try to ensure that the icon exists by default, the file as small as possible, and set a long cache expiration time. In addition, resources that cause failed requests due to cache expiration should be cleaned in a timely manner.

20. How to optimize jQuery performance?

The optimization method is as follows.

(1) use the latest version of jQuery class library.

Each new version of the JQuery class library will make Bug fixes and some optimizations to the previous version, as well as some innovations, so it is recommended to use the latest version of the jQuery class library to improve performance. It is important to note, however, that after changing the version, don't forget to test the code, after all, sometimes it is not fully backward compatible.

(2) use a suitable selector.

JQuery provides a wealth of selectors, which are the most commonly used functionality for developers, but using different selectors can also cause performance problems. It is recommended to use simple selector, such as I selector, class selector, do not nest I selector, and so on.

(3) use the jQuery object as an array.

The result obtained using the jQuery selector is a jQuery object. However, the jQuery class library will make you feel like you are using an array that defines the index and length. In terms of performance, it is recommended to use a simple for or while loop instead of $. Each (), which makes the code faster.

(4) every JavaScript event (such as click, mouseover, etc.) bubbles to the parent node. When you need to bind the same callback function to multiple elements, it is recommended to use the event delegate pattern.

(5) use join () to concatenate strings.

Use join () to concatenate long strings instead of "+" concatenating strings, which helps optimize performance, especially when dealing with long strings.

(6) make rational use of the data attribute in HTML5.

The data attribute in HTML5 helps to insert data, especially the front-end and back-end data exchange; the data () method of jQuery can effectively use the properties of HTML5 to automatically obtain data.

21. What methods can improve the CSS3 animation experience on mobile devices?

(1) make use of hardware capabilities as much as possible, such as using 3D deformation to turn on GPU acceleration, such as the following code.

-webkit-transform: translate3d,-moz-transform: translate3d,-ms-transform: translate3d, transform: translate3d

The animation fluency of an element moving 500X to the right through translate3d is significantly better than that achieved by using the left attribute, because the CSS animation attribute triggers the entire page rearrangement, redrawing, and reorganization. Paint is generally the most performance-intensive, so avoid using CSS animation attributes that trigger paint whenever possible.

If there is a flicker during the execution of the animation (which usually occurs at the beginning of the animation), you can handle it in the following ways.

-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, which often seriously affect the performance of the page, especially if both are used in the same element at the same time.

(3) remove animation elements from the document stream as much as possible to reduce rearrangement, as shown in the following code.

This is the end of position:fixed; position:absolute; 's "what are the interview questions about performance optimization"? thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.