How does the front end optimize website performance?

  1. Reduce the number of HTTP requests

    When the browser communicates with the server, it communicates primarily through HTTP. There are three handshakes between the browser and the server, and each handshake takes a lot of time. In addition, different browsers have limited number of concurrent requests for resource files (different browsers allow concurrent requests). Once the number of HTTP requests reaches a certain number, there will be a waiting state for resource requests, which is very fatal. Therefore, reducing the number of HTTP requests can greatly optimize website performance.

    • CSS Sprites: Commonly known as CSS Sprites in China, this is a solution to reduce HTTP requests by combining multiple images into one image. You can access image content through CSS background properties. This scheme also reduces the total number of bytes in the image.

    • Merge CSS and JS files: There are many engineering packaging tools on the front end, such as Grunt, gulp, webpack, etc. To reduce the number of HTTP requests, you can use these tools to combine multiple CSS or JS files into a single file before republishing.

    • Using lazyLoad: commonly known as lazy loading, you can control the content on the web page in the beginning without loading, do not need to send requests, wait until the user operation really need to load the content immediately. This controls the number of one-time requests for web resources.

    • (1) Optimize the format and size of image resources

    • (2) Enable network compression

    • (3) Use browser cache

    • (4) Reduce redirection requests

    • (5) Use CDN to store static resources

    • (6) Reduce the number of DNS queries

    • (7) Compress CSS and JS content

  2. Controls the loading priority of resource files

    When the browser loads THE HTML content, it parses the HTML content from top to bottom. When it parses the link or script tag, it will load the corresponding link content of href or SRC. In order to display the page to the user in the first time, it needs to load the CSS in advance and not be affected by JS loading. In general, CSS is at the top and JS is at the bottom.

    1. Using browser Cache Browser cache is used to store network resources locally and wait for the next request for the resources. If the resources already exist, the server does not need to request the resources again and directly reads the resources locally.
    2. Reflow Reduction principle: Rearrangement is when changes to the DOM affect the geometry of the element (width and height). The browser recalculates the geometry of the element, invalidating the affected part of the rendering tree. The browser validates the visibility property of all other nodes in the DOM tree, which is why Reflow is inefficient. If Reflow is too frequent, CPU usage will rise sharply.

    Reduce Reflow, and if you need to add styles during DOM manipulation, use the add class attribute instead of manipulating styles via style.

    1. Reduce DOM manipulation
    2. Replace ICONS with IconFont

Common HTTP status codes

  • 200(“OK”) Everything is fine. The document in the entity body, if it exists, is a representation of a resource.

  • 400(“Bad Request”) client side problems. The document in the entity topic (if it exists) is an error message. Hopefully the client will understand the error message and correct the problem.

  • 500(“Internal Server Error”) problems with the service period. The document in the entity body, if it exists, is an error message. This error message usually does not help because the client cannot fix the problem on the server side.

  • 301(“Moved Permanently”) Send this response code when an action triggered by the client causes a change to the resource URI. In addition, this response code is also sent when the client sends a request to the old URI of a resource.

  • 404(“Not Found”) and 410(“Gone”) This response code is sent when the URI requested by the client does Not correspond to any resource. 404 is used when the server does not know which resource the client is requesting. 410 is used when the server knows that the resource requested by the client once existed but no longer exists.

  • 409(“Conflict”) Sends this response code when a client tries to perform an operation that causes one or more resources to be in an inconsistent state.

    SOAP Web services only use response codes 200(“OK”) and 500(“Internal Server Error”). The SOAP Server sends 500(“Internal Server Error”) whenever there is a problem with the data you send to the SOAP Server, a problem with the Server processing the data, or an Internal problem with the SOAP Server. The client can only know the cause of the error by looking at the SOAP document body, which contains the description of the error. The client cannot tell whether the request was successful by reading the first three bytes of the response.

What process does a web page go through from entering the url to rendering?

  1. Enter the url;
  2. Send the IP address to the DNS server and obtain the IP address of the Web server corresponding to the domain name.
  3. Establish TCP connection with web server.
  4. The browser sends an HTTP request to the Web server;
  5. The Web server responds to the request and returns data (or an error message, or a redirected new URL address) for the specified URL;
  6. The browser downloads the data returned by the Web server and parses the HTML source file.
  7. Generate DOM trees, parse CSS and JS, render the page until the display is complete;