Skip to main content

How to optimize website performance ? How does the browser render the page?

 1. From the user's point of view, optimization can make pages load faster, respond more promptly to user operations, and provide users with a more friendly experience.

2. From the perspective of service providers, optimization can reduce the number of page requests or reduce the bandwidth occupied by requests, which can save considerable resources.

In short, proper optimization can not only improve the user experience of the site but also save considerable resource utilization.

There are many ways of front-end optimization, which can be roughly divided into two categories according to the granularity. The first category is page-level optimization, such as the number of HTTP requests, non-blocking loading of scripts, and location optimization of inline scripts; the second category is code Level optimization, such as DOM operation optimization in Javascript, CSS selector optimization, image optimization, and HTML structure optimization, etc. In addition, for the purpose of increasing the input-output ratio, the various optimization strategies mentioned later are roughly arranged in the order of the input-output ratio from large to small.

Page-level optimization to improve website performance

1. JavaScript compression and module packaging

2. Load resources on demand

3. Use array-ids when using the DOM manipulation library

4. Cache

5. Enable HTTP/2

6. Application performance analysis

7. Use load balancing Solution

8. Consider isomorphism for faster startup time

9. Use index to speed up database queries

10. Use faster translation solution

11. Avoid or minimize the use of JavaScript and CSS to block rendering

12. A suggestion for the future ：Use service workers + stream

13. Image coding optimization


How does the browser render the page?

The rendering process is as follows:

1. Parse the HTML file and create a DOM tree.

From top to bottom, any style (link, style) and script (script) will be blocked (the external style does not block the loading of subsequent external scripts).

2. Parse CSS. Priority: browser default settings<user settings<external style<inline style<style style in HTML;

3. Combine CSS and DOM to build a Render Tree

4. Layout and drawing, repaint and reflow



Labels:

Comments

Post a Comment

Popular posts from this blog

40 Redis interview questions for 2021 - 2022

  Redis interview questions 1.What is Redis?. 2. What is the data type of Redis? 3. What are the benefits of using Redis? 4. What are the advantages of Redis over Memcached? 5. What are the differences between Memcache and Redis? 6. Is Redis single-process and single-threaded? 7. What is the maximum storage capacity of a string type value? 8. What is the persistence mechanism of Redis? Their advantages and disadvantages? 9. Redis common performance problems and solutions: 10. What is the deletion strategy of redis expired keys? 11. Redis recycling strategy (elimination strategy)? 12. Why does edis need to put all data in memory? 13. Do you understand the synchronization mechanism of Redis? 14. What are the benefits of Pipeline? Why use pipeline? 15. Have you used Redis cluster? What is the principle of cluster? 16. Under what circumstances will the Redis cluster solution cause the entire cluster to be unavailable? 17. What are the Java clients supp...
Post a Comment
Read more

8 common methods for server performance optimization

  1. Use an in-memory database In-memory database is actually a database that puts data in memory and operates directly. Compared with the disk, the data read and write speed of the memory is several orders of magnitude higher. Saving the data in the memory can greatly improve the performance of the application compared to accessing it from the disk. The memory database abandoned the traditional way of disk data management, redesigned the architecture based on all data in memory, and made corresponding improvements in data caching, fast algorithms, and parallel operations, so the data processing speed is faster than that of traditional databases. Data processing speed is much faster.       But the problem of security can be said to be the biggest flaw in the memory database. Because the memory itself has the natural defect of power loss, when we use the memory database, we usually need to take some protection mechanisms for the data on the memory in advance, such...
Post a Comment
Read more

Recursion-maze problem - Rat in the Maze - Game

  package com.bei.Demo01_recursion; public class MiGong {     public static void main(String[] args)  {         //First create a two-dimensional array to simulate the maze         int [][]map=new int[8][7];         //Use 1 for wall         for (int i = 0; i <7 ; i++) {             map[0][i]=1;             map[7][i]=1;         }         for (int i = 0; i <8 ; i++) {             map[i][0]=1;             map[i][6]=1;         }         //Set the bezel         map[3][1]=1;         map[3][2]=1;         //Output         for (int i = 0; i <8 ; i++) {             for (int j = 0; j ...
Post a Comment
Read more