UI performance factors, ui performance factors

UI performance factors, ui performance factors

The maximum number of concurrent connections in the browser is generally between 4 and 6. First, we need to know the factors that affect the loading performance:

(1) The downloaded file is too large.

(2) Too many requests are sent

(3) The request is not timely

To address these factors, we generally consider reducing the number of requests:

(1) set cache events for static files

(2) Concise page design

(3) Merge files (html, JS, css, images ..)

A little more detail:

(1) On-Demand page loading (time-based loading)

• Load the basic static html framework first
• Then load css and render css.
• Finally, load the Js data obtained from the server and render it to the content area.

(2) Page Submission, asynchronous execution

• The server considers the page 'polling 'operation to avoid long waiting for the page.
• The Server caches data to avoid putting all the data on the page for processing.
• Simplify the object size. Do not return the complete backend object to the front-end.
• Cache static information, such as user login information, page help information...

(3) Multiple optimization solutions for page loading

• Avoid loading all the content at a time. Use 'multithreading 'and 'asynchrony'
• It is not displayed on the current screen. If it is not initialized, drag it to the current screen and load it.

Generally, css is loaded at the

Optimization Direction:

Merge scripts and style sheet css sprites for the number of requests, split the initialization load, and divide the main domain

Enable GZIP for requested bandwidth, streamline JS code, remove duplicate scripts, and optimize images

Cache uses CDN, external JS, and CSS to add Expire headers, Reduce DNS lookup, configure ETag, and enable AJAX to cache

Top of the page structure style and bottom of js to avoid page loading blocking and refresh the document stream output as soon as possible

Code validation prevents CSS expressions and redirection

YUI Compress compression tool-Simplified JS

Install the GZIP automatic compression function module on the server

CDN-content delivery network, which can be connected to nodes in real time based on network traffic, the Load Status and the distance to the user and the corresponding time will direct the user request to the service node closest to the user.

'Search-replace 'to achieve the division of the primary domain

In short, browser compatibility and UI performance must be considered for front-end development, and the user experience is important.