CSS optimization skills self-practice experience

1. Use css sprites.

The advantage is that the small images used in CSS can be merged into one large image, which reduces the requests to the server, reduces the server pressure, and speeds up page loading.

2. Merge multiple css files into a single css file.

Same benefits as css sprites

3. Use external CSS.

External CSS can be cached by browsers and is easy to maintain.

4. Put the css in the head.

You can refer to Yahoo's document http://developer.yahoo.com/performance/rules.html#css_top

5. Use link instead of import

Using import will slow down page loading. Moreover, the loading order in IE may be inconsistent with expectations, which will directly lead to display problems.

6. Use CSS abbreviations.

For example, use margin instead of margin-top.

7. Put similar styles together to avoid repetitive writing.

8. Reduce line breaks.

9. Delete the final semicolon.

10. Use single-line comments.

11. RGB color abbreviation.

12. Remove unnecessary units, such as px.

13. Delete unused styles.

It can reduce file size and shorten browser parsing and matching time.

14. Compress CSS files.

All of the above are very simple and there is no need to explain them in detail. Of course, some CSS compression tools have optimization functions.

<<: A guide to writing flexible, stable, high-quality HTML and CSS code standards

>>: WeChat applet implements search function and jumps to search results page

Detailed explanation of several examples of insert and batch statements in MySQL

CSS optimization skills self-practice experience

Detailed explanation of several examples of insert and batch statements in MySQL

Do you know how to use mock in vue project?

Installation and use of mysql mycat middleware

Web design tips on form input boxes

How to use vue3+TypeScript+vue-router

How to use dynamic parameters and calculated properties in Vue

Nodejs error handling process record

Vue3 realizes the image magnifying glass effect

React Hooks Detailed Explanation

Steps to transplant the new kernel to the Linux system

Recommend

Detailed explanation of Vue two-way binding

Detailed explanation of mktemp, a basic Linux command

Solution to Docker image downloading too slowly

Detailed explanation of how to find the location of the nginx configuration file

Call js function or js variable in html's img src="" to dynamically specify the image path

A brief discussion on the principle of React two-way data binding

Tutorial analysis of quick installation of mysql5.7 based on centos7

Windows Service 2016 Datacenter\Stand\Embedded Activation Method (2021)

Vue implements simple image switching effect

SQL-based query statements

Summary of the use of element's form elements

In-depth analysis of the diff algorithm in React

Simple tutorial on using Navicat For MySQL

Detailed explanation of common usage methods of weixin-js-sdk in vue

jQuery implements article collapse and expansion functions