Front-end designer --- optimizes page loading speed

I. Optimization from the script:

Delete unnecessary comments in Javascript. concise code optimization is a good habit that must be developed, try not to add the function call directly to the HTML tag <Div onclick = ""> This usage is not recommended. Try to use js to dynamically add, reduce tag contamination, and improve code reusability.

Merge similar JS Code or directly encapsulate it into a function, which improves code reusability and saves the Script Loading time.

Introduce the jquery plug-in lazy load written in Javascript, which can delay loading images on long pages. Images outside the visible area of the browser are not loaded until the user scrolls the page to their location. For example, I use the delayed Loading Function of this image in my blog.

Defer attribute in script

If the defer attribute is added during script writing, the browser does not need to process the script immediately when downloading the script, but continues to download and parse the page, this will improve the download performance.
There are many such cases. For example, you have defined many JavaScript variables, or (. INC) has written a lot of scripts to be processed, so you may wish to add the defer attribute to these scripts to improve performance.

Ii. Optimization starting with HTML tags:

Some default attributes of HTML tags can be omitted. For example, <input type = "text"> you do not need to write them. The default attribute of input is text. For example, <form method = "get"> can be omitted because the default attribute is get.

The complete and accurate definition and declaration of the character set in

Iii. Optimization starting with CSS:

In the CSS style of the label, if the height and width of the IMG label are set in advance, the calculation of the image size will be omitted when the browser loads the page, thus improving the page loading speed.

Directly use CSS tools such as sass and compass to reduce code redundancy.

Integrate CSS code: for example, margin-left: 0px; margin-Right: 10px; margin-top: 20px; write margin: 20px 10px 0 0;

Sprite integrates similar images to reduce the number of page requests to attach images.

Define the image size in advance to reduce the time for calculating the image size during the loading process.

Select an image in the appropriate format: we usually use jpg png or GIF.

 

Front-end designer --- optimizes page loading speed