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

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

165 + Big Data and Artificial intelligence ( AI ) terms and terminology Glossary

  Latest and most comprehensive big data/artificial intelligence terms & terminology in English (highly recommended for collection) for years 2021 and 2022   A  1.  Apache Kafka:  named after the Czech writer Kafka, used to build real-time data pipelines and streaming media applications. The reason it is so popular is that it can store, manage, and process data streams in a fault-tolerant manner, and it is said to be very "fast". Given that the social network environment involves a lot of data stream processing, Kafka is currently very popular.
Post a Comment
Read more