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

Defination of the essential properties of operating systems

Define the essential properties of the following types of operating sys-tems:  Batch  Interactive  Time sharing  Real time  Network  Parallel  Distributed  Clustered  Handheld ANSWERS: a. Batch processing:-   Jobs with similar needs are batched together and run through the computer as a group by an operator or automatic job sequencer. Performance is increased by attempting to keep CPU and I/O devices busy at all times through buffering, off-line operation, spooling, and multi-programming. Batch is good for executing large jobs that need little interaction; it can be submitted and picked up later. b. Interactive System:-   This system is composed of many short transactions where the results of the next transaction may be unpredictable. Response time needs to be short (seconds) since the user submits and waits for the result. c. Time sharing:-   This systems uses CPU scheduling and multipro-gramming to provide economical interactive use of a system. The CPU switches rapidl
Post a Comment
Read more

What is a Fair lock in multithreading?

  Photo by  João Jesus  from  Pexels In Java, there is a class ReentrantLock that is used for implementing Fair lock. This class accepts optional parameter fairness.  When fairness is set to true, the RenentrantLock will give access to the longest waiting thread.  The most popular use of Fair lock is in avoiding thread starvation.  Since longest waiting threads are always given priority in case of contention, no thread can starve.  The downside of Fair lock is the low throughput of the program.  Since low priority or slow threads are getting locks multiple times, it leads to slower execution of a program. The only exception to a Fair lock is tryLock() method of ReentrantLock.  This method does not honor the value of the fairness parameter.
Post a Comment
Read more