How to optimize the front interface of H5 + C3

Xiao Bian to share with you H5 + C3 how to optimize front-end interface, I hope you’ve read this article after the big harvest, let’s go explore it!


for optimizing Web front end is now a lot of people got the idea to do the comparison, is now a lot of people have to work. So how do we use HTML and CSS to better optimize the front-end of it? The following article for everyone to bring some front-end optimization tips, interesting together to understand.

Web Content

http request to reduce the number of

most of the site response time is spent on the download page resources, resource here means: pictures, CSS, JS , and Flash. We are here talking about reducing the number of requests to shorten the response time is a key point.

In general, be divided into two types:

First, to reduce the number of requests by simplifying the design of the page.

Second, the more complex the page script may employ multiple CSS files or scripts or packaged in a document which, using CSS Sprites image (picture MIX), the FIG makes up a plurality of images, and by CSS to control the position of this figure show what in any place, thereby reducing the number of requests, the contents of this one, we may be implemented with reference to the following Jingdong CSS positioning this piece.

to avoid the page jump

page jump to avoid what is it? That is, when the client receives the server’s reply to jump, the client sends a request again in the response server according to the address specified location again, also said, common 301 redirects

For example, the SEO:

I now want students to access the source code of the times, into the source code forum, which is a server-side 301 redirect implementation of

RewriteEngine On

RewriteCond% {HTTP_HOST} ! ^ $ [NC] // this is the address of the client request

ReWriterule ^ (. *) $ Http://$ [r = 301, l] // This is the page

delayed loading

We will talk about the delay in loading, we first know what the page is initially loaded, and the remaining content can be used to implement the implementation of delay loading.

The most typical is that JavaScript can delay the loading content. When this is the development of the web page, make sure the web page can also display the normal page effect when there is no JavaScript, and then complete some of the latency. Advanced functional effects.

In advance

This method, in contrast to the above method, that is, the resources in some web pages are loaded first, it is divided into three categories:

1 Unconditional advance loading

This method is to load some other content immediately when the webpage is loaded. If Taobao will load some pictures after the completion work

2 Conditional Load

Introduced the content you need to load, such as Baidu search according to the information input by the user.

H5+C3怎么优化前端界面 The expected loading

This is more than some, this is generally when the web is redesigned, due to the user’s access behavior, Locally, there is a cache of old webpages, and newly designed websites don’t, designers can use the content in advance in the old webpage, which may be used in this way, new pages will download some resources to the local.

Reduce the number of DOM elements

If there is too much element in the web page, it also affects the performance of the web page, and it will also increase the implementation of the webpage loading and script. You can think about it, usually use When JS, we have to achieve some effects, is it to first find the associated DOM element, then perform related operations. If there are too many elements in our web, do you have a very obvious time difference! So reducing the number of DOM elements, still affecting the networkPage performance.

According to the domain name division

Many times, when we view other large sites, the address of the picture is still different from the main domain of the website, and multiple domain names will be stored related resources. So why should I use this? In fact, the browser generally restricts the number of download connections to the same domain name. According to the domain name division, you can download the browser parallel to download. Greatly improve the overall download resource capability of the website. Thus the role of optimization performance.

Decreases the number of iframes

We told how to use iframe, but in the actual project, please pay attention to its advantages and disadvantages first.

Can be used to load the slower content, the script can download

disadvantages in parallel:

When using the iframe content is empty Consumption and load time and prevent page loading

Avoid 404

404 is a commonly found server resource, one is to affect the user experience, open a page that returns useless information. The second is that the web page needs to load an external script, and the result is returned to a 404, not only blocking other script downloads, downloading the content (404) client will also be parsed as JavaScript.



Since the content of the web page is loaded from the top, we will make the web page as much as possible in the Head of the web page. It seems that the loading speed is faster, it is very important for the webpage of content, at least let the user wait for a white screen, such a user experience is also quite good.

If we put the style sheet at the bottom, there is a case, the browser will refuse to render the downloaded web page, because most browsers work hard to avoid re-drawing. So this is also a key point.

Avoiding CSS expression

Some of the basic CSS3 friends have always admirmed its powerful two-way ability, hiUse some CSS expressions to dynamically set CSS properties, support in IE5 ~ IE8, and other browsers are ignored.

Other CSS expression problems is that it is re-calculated much more than what we think, so we still try to avoid using it to prevent excessive performance from unwinding.

With the LINK tag instead of @Import

In the design of the web page, try to use the link tab to reference the CSS, avoid using @Import to reference, the reason is simple, you can understand that it is The CSS style is placed on the bottom of the web page.

Optimized image

In the production of web pages, we will find that the picture of Banner is very slow, and it also affects the speed of the website. A few hundred k, the big man M. So exactly the picture there is no optimized space! ?

Today I introduce a picture optimized platform. It is the designer’s Hui

Everyone can see, original map and optimized (Zhitu) picture 500 K, if we are more than the website, we use the picture of the whole station to optimize, then you can imagine how much traffic is to save! So these pictures optimize I have to recommend it.

Avoid empty pictures SRC

We try to avoid empty pictures SRCs when using the IMG tag, because the empty picture src will still send the browser to request the server, so complete It is a waste of time and waste the resources of the server. Especially when your website is accessed by many people every day, this empty job cannot be ignored

Optimization CSS Sprite

Spirite horizontally arranged pictures, vertical arrangement increases the size of the file;

Spirite can reduce the color of the color than 256 colors in Spirite, and the ideal condition is below 256 colors to apply PNG8 format;

Do not in SpiriteThere is a large gap in the middle. Although this is not aware of the file size, it requires less memory to extract the picture as a pixel map for the user agent.

Do not zoom in the picture


to avoid using large maps to implement picture size zoom to accommodate the page, if you need a small picture, use a small picture directly. The reason is very simple, the best results can be made for different devices, rather than loading the big picture, to achieve the overall effect, if it is a mobile phone user, this is still quite big, after all, this is a traffic era.

Using small and cacheable Favicon.ico

General enterprise website or webmaster likes to add an icon file Favicon.ico, whether your server is still not, browser will try to request This icon. So we must ensure that this icon exists and the file is small, preferably less than 1k set a long expiration time


Finally, this paper mainly targets the primary entry web design person, this article Only about HTML, CSS, JavaScript, Images, etc. Of course, there are still other methods, we point out in the next article.

Of course, some of the standby front-end optimization tips are you get? Please don’t appear in your web page, or you really affect the user experience. After all, it is now the era of Web 2.0. If the user is dissatisfied with your webpage, it is the negation of the developer. So in order to make a better and better page, we will pay attention to these small details as much as possible.

After reading this article, I believe that you have a certain understanding of how H5 + C3 optimizes the front side interface. I want to know more related knowledge. Welcome to Tumi Yun Industry Information Channel, thank you for reading!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment