Shulou(Shulou.com)06/01 Report--

This article mainly introduces the HTML+CSS front-end optimization skills, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Introduction:

For beginners who have just finished learning HTML+CSS, you who have just started to write code do not have the concept of front-end optimization, in fact, we will not only make some web pages, front-end optimization must also be injected into the code. Sometimes we will find some small differences, why some websites open particularly fast, and some websites open when there is a big whiteboard in front. Have you ever thought about what caused the difference? In terms of user experience alone, how long are you willing to wait to open a website? So the question is, front-end optimization, what should we do? How to speed up the response speed of the website?

In the following article, the source era Web front-end (http://www.itsource.cn) instructor will introduce some common practices and corresponding solutions to improve web page performance, so that you can have more confidence in your own products in dealing with front-end performance optimization in the future.

Web page content

Reduce the number of http requests

Most of the site response time is spent downloading web resources, which refer to images, CSS, JS, Flash, etc. Reducing the number of requests we are talking about here is the key to reducing response time.

In general, it can be divided into two categories:

One is to reduce the number of requests by simplifying page design.

Second, more complex scripts or CSS files on a web page can be put in multiple scripts or packaged in one file. The picture uses CSS Sprites (image flattening technology) to piece together multiple images into a picture, and then through CSS to control where the picture is displayed and where it is, so as to reduce the number of requests and the content of this piece.

Avoid page jumps

What is it to avoid page jumps? That is, when the client receives a jump reply from the server, the client sends the request again according to the address specified by the location in the server reply, that is to say, the 301redirection commonly used on SEO

For example:

Now I'm going to ask the students who visit the source code era to enter the source forum, which is how to realize the server-side 301 redirection.

RewriteEngine On

RewriteCond% {HTTP_HOST}! ^ www.itsource.cn$ [NC] / / this is the address requested by the client

RewriteRule ^ (. *) $http://bbs.itsource.cn/$1 / / this is the web page actually seen by the client.

Delayed loading

The deferred loading we are talking about here requires us to know what is the smallest content that the page initially loads, and the rest of the content can be implemented using deferred loading.

The most typical is that Javascript can delay the loading of content, this practice is to develop a web page to ensure that the page can display a normal page without javascript, and then delay the loading of scripts to achieve some advanced functional effects.

Load ahead of time

This method, contrary to the above method, means that some resources in the web page are loaded in advance, and it is divided into three categories:

1. Unconditional advance loading

This method is that when the web page is loaded, load some other content immediately. For example, Taobao will load some pictures after loading successfully.

two。 Conditional loading

Infer the content that needs to be loaded from the information entered by the user, such as Baidu search.

Load as expected

This is a bit taller, this situation is generally when the web page is redesigned, due to the user's access behavior, there is a cache of the old web page locally, while the newly designed website does not. Designers can pre-add some content that may be used in the new website in the old web page, so that the new web page will download some resources to the local first.

Reduce the number of DOM elements

If too many elements in the web page also affect the performance of the web page, and at the same time, it will also aggravate the loading of the web page and the execution of scripts, you can think about it, when we usually use JS, if we want to achieve some results, we have to find the relevant DOM elements before performing the relevant operations. If there are too many elements in our web page, will there be a very obvious jet lag? So reducing the number of DOM elements still affects the performance of the web page.

Divide content according to domain name

In many cases, when we look at other large websites, the address of the picture is not the same as the main domain name of the website, and we will use multiple domain names to store related resources, so why use it this way? In fact, browsers generally limit the number of download connections for the same domain name. Dividing the download content according to the domain name can indirectly increase the parallel download connection of the browser. It greatly improves the overall ability of the website to download resources. In order to achieve the role of optimizing performance.

Reduce the number of iframe

We talked about how to use iframe before, but in a real project, please pay attention to its advantages and disadvantages when using it.

Advantages:

Can be used to load slower content, and scripts can be downloaded in parallel

Disadvantages:

Using empty iframe content also consumes loading time and prevents the page from loading

Avoid 404

404 is a common failure to find server resources, one is: affect the user experience, open a page that returns useless information. Second, the web page needs to load an external script, and the result returns a 404, which not only blocks the download of other scripts, but also parses the downloaded content as Javascript.

CSS

Top the stylesheet

Because of the top-down loading mode of web content, putting the CSS style in the head of the web page as much as possible will make the web page seem to load faster, which is very important for the web page with more content, at least it will not make the user wait for a blank screen all the time. This kind of user experience is also quite good.

If we put the stylesheet at the bottom, there is a situation where browsers refuse to render downloaded pages because most browsers try to avoid redrawing when implemented. So this is also a key point.

Avoid CSS expressions

There are some basic CSS3 friends have always admired its strong ability to open, like to use some CSS expressions to dynamically set the CSS property, support in IE5~IE8, expressions will be ignored in other browsers.

The problem with other CSS expressions is that they are recalculated far more often than we thought, so we try to avoid using it to prevent excessive performance degradation caused by improper use.

Replace @ import with link tags

In the design of a web page, please try to use the link tag to refer to CSS and avoid using @ import to refer to it. The reason is very simple, you can understand that it is to put the CSS style at the bottom of the content in the page.

Picture

Optimize the image

In the production of web pages, we will find that pictures like banner are very slow to load, and also affect the speed of the website, ranging from hundreds of kilograms to a few megabytes. So is there any room for optimization for such a picture?

Today I would like to introduce to you a platform for picture optimization, which is the Zhitu network that designers often go to.

The difference between the original picture and the optimized (wisdom map) picture is more than 500 K. if for the website with more pictures, we use the pictures of the whole site to optimize it, then you can imagine how much traffic this is going to save! So I highly recommend these picture optimizations.

Avoid empty picture src

When using img tags, we try to avoid using empty image src, because empty image src will still cause the browser to send requests to the server, which is a complete waste of time and server resources. Especially when your website is visited by many people every day, the damage caused by this empty request can not be ignored.

Optimize CSS Sprite

Arrange pictures horizontally in Spirite, and increase file size by arranging them vertically.

Combining colors closer together in Spirite can reduce the number of colors. Ideally, less than 256colors are suitable for PNG8 format.

Do not leave a large gap in the middle of the Spirite image. While this does not increase the file size, it requires less memory for the user agent to extract the image into a pixel map.

Do not zoom the picture in HTML

Avoid using large images to achieve image size scaling to adapt to the page, if you need small pictures, just use small pictures. The reason is very simple, for different devices can achieve the best results, rather than load on the big picture, to achieve the overall effect, if it is a mobile phone end users, this is still quite large, after all, this is an era of talking about traffic.

Use small and cacheable favicon.ico

In general, corporate websites or webmasters like to add an icon file favicon.ico, whether you have a server or not, the browser will try to request this icon. So we need to make sure that this icon exists and that the file is as small as possible, preferably less than 1k to set a long expiration time.

Thank you for reading this article carefully. I hope the article "what are the HTML+CSS front-end optimization skills shared by the editor will be helpful to everyone?" at the same time, I also hope that you will support and pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.