H5 + C3 how to optimize the front-end interface

This time to bring you H5 + C3 how to optimize the front-end interface, H5 + C3 optimization of the front-end interface of the considerations are, the following is the actual case, take a look together.

For the optimization of the front-end of the website is now a lot of people are more on the things, but also now a lot of people must work. So how do we use HTML and CSS to better front-end optimization? The following article brings you some front-end optimization tips, interested in one to understand.

Page content

Reduce $ [NC]// This is the address of the client request

RewriteRule ^(. *)$ /$1 [R=301,L]//This is the actual web page that the client sees

Delayed Loading

The delayed loading we're talking about here requires that we first know what the web page initially loads minimally, and the rest of the content can be implemented using delayed loading.

The most typical is Javascript can be delayed loading content, this practice is to develop the web page first to ensure that the web page in the absence of javascript can also be very good to display the normal page effect, and then through the delayed loading of scripts to complete some of the advanced functionality of the effect of the practice.

Early loading

This method, just the opposite of the above method, that is to say, the first early loading of some of the resources in the web page, which is divided into three categories:

1. Unconditional early loading

The method is that when the web page is loaded, and then immediately go to load some other content, such as Taobao will be loaded after the success of the loading of the picture will be loaded after some of the pictures are collocated together

2. Conditional loading

Based on user input to infer what needs to be loaded, such as Baidu search.

Loading with anticipation

This is a bit more lofty, this is usually the case when the web page is redesigned, due to the user's access behavior, there is a local cache of the old web page, while the newly designed website does not have it, and the designer can pre-include some of the old web page by adding some of the content that may be used in the new website, in which case the new web page will download some resources locally first.

Reduce the number of resources available to the user.

Reducing the number of DOM elements

If there are too many elements in a web page, it also affects the performance of the web page, and also increases the loading of the web page and the execution of the scripts. If we have too many elements in the web page, is not there will be a very obvious time difference! So reducing the number of DOM elements still affects web page performance.

According to the domain name of the division of content

Very often, we view other large-scale website, the address of the picture and the main domain name of the site is not the same, will use multiple domain names to store the relevant resources, so why use it this way? In fact, the browser is generally on the same domain name to limit the number of download connections, according to the domain name to divide the download content, you can indirectly increase the browser parallel download connections. Greatly improve the overall download resource capacity of the site. Thus, the role of optimizing performance.

Reducing the number of iframes

Previously, we talked about how to use iframes, but in the actual project, when we use it, please pay attention to its advantages and disadvantages.

Advantages:

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

Disadvantages:

Using iframes with empty content also consumes load time and prevents the page from loading

Avoiding 404

A 404 is a common failure to find a server resource. experience by opening a page that returns useless information. Second, the web page needs to load an external script, the result returns a 404, not only blocking the download of other scripts, download the content back (404) the client will also be treated as Javascript to parse.

CSS

Putting stylesheets on top

Because of the way web content loads from the top down, putting CSS styles in the head of the page as much as possible will make the page appear to load faster, which is very important for pages with a lot of content, or at least won't keep the user waiting for a white screen, which is also a good user experience.

If we put the stylesheet at the bottom, we are in a situation where the browser refuses to render a page that has already been downloaded, because most browsers try to avoid redrawing it when they implement it. So again, this is a priority.

Avoiding CSS expressions

There are some basic CSS3 guys who have always admired its powerful two-way capabilities, and like to use some CSS expressions to dynamically set CSS properties, which are supported in IE5~IE8, and ignored in other browsers.

The problem with other CSS expressions is that they are recalculated far more often than we think, so we try to avoid them to prevent too much performance overhead caused by improper use.

Use the link tag instead of @import

When designing web pages, try to use the link tag to refer to CSS, and avoid @import for the simple reason that you can just put CSS styles at the bottom of the content on the page.

Pictures

Optimizing images

In the production of web pages, we will find that the banner of this type of pictures loaded up very slowly, but also affect the speed of the site, less a few hundred K, the larger a few M. So in the end, there is no optimization of the image space!

Today I would like to recommend a picture optimization platform, it is the designers often go to the wisdom of the map network

As you can see, the original and optimized (wisdom of the map) picture, a difference of more than 500K, if the picture is more websites, we will be the whole site of the picture is used to optimize, then imagine how much traffic this is to save ah! So these picture optimization I want to strongly recommend.

Avoid empty image src

When we use the img tag, try to avoid using empty image src, because empty image src will still make the browser to send a request to the server, which is a complete waste of time, and a waste of server resources. This is a complete waste of time and server resources. Especially if your site is visited by many people every day, the damage caused by such empty requests cannot be ignored

Optimizing CSS Sprite

Arranging images horizontally in Spirite and vertically increases the file size;

In Spirite, combining closer colors together reduces the number of colors, and the ideal situation is to be lower than 256 colors so that the PNG8 format can be used;

Don't leave large gaps in the middle of your Spirite images. This does not increase the file size, but it requires less memory for the user agent to decompress the image into a pixel map.

Don't scale images in HTML

Avoid using large images to implement image scaling to fit the page; if you need small images, just use small images. The reason is very simple, for different devices can do the best effect, rather than loading on the big picture, to achieve the overall effect, if it is a cell phone users, this overhead is still quite large, after all, this is a talk about the flow of the times.

Use a small and cacheable favicon.ico

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

Summary:

Finally, this article is mainly for the beginner web designers, the content of this article only involves HTML, CSS, Javascript, images and other content, of course, there are a number of other methods, we pointed out in the next issue of the article We'll point them out in the next installment of this article.

Of course, some of the front-end optimization tips mentioned above you get? Please do not appear in your web page with such similar errors, or really affect the user experience, after all, now is the era of WEB2.0, if the user is not satisfied with your web page, that is the developer of the negative, so in order to make a better and better web page, we pay attention to as many as possible to these small details.

I believe that after reading this article case you have mastered the method, more exciting please pay attention to Gxl net other related articles!

Recommended reading:

The use of H5 links

The use of text formatting in H5

H5 + C3 + JS to achieve floor jumping effects