How H5+C3 optimizes the front-end interface-H5 Tutorial-php.cn

This time I will show you how to optimize the front-end interface of H5 C3. What are the precautions for optimizing the front-end interface of H5 C3. The following is a practical case, let’s take a look.

Optimizing the front-end of the website is something that many people care about now, and it is also a necessary task for many people now. So how do we use HTML and CSS for better front-end optimization? The following article brings you some tips on front-end optimization. If you are interested, let’s learn about it together.

Web content

Reduce the number of http requests

Most of the website response time is spent downloading web resources. The resources here refer to: images, CSS, JS, and Flash, etc. Reducing the number of requests we are talking about here is the key to shortening response time.

Generally speaking, it can be divided into two types:

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

Second, more complex scripts or CSS files on web pages can use multiple scripts or package them in one file. Images use CSS Sprites (image splicing technology) to combine multiple images into one image, and then use CSS to control the content of the image. Where to display the position of this picture, thereby reducing the number of requests. For the content of this section, you can refer to the CSS Positioning below on JD.com.

Avoid page jump

What is the purpose of avoiding page jumps? That is, when the client receives the jump reply from the server, the client sends the request again according to the address specified by the location in the server reply. In other words, the 301 redirect commonly used in SEO

For example:

Now I want students who visit the source code era to enter the source code forum. This is how to implement 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 [R=301,L]//This is the web page actually seen by the client

Lazy loading

The lazy loading we are talking about here requires us to first know what is the smallest content that is initially loaded on the web page, and the remaining content can be implemented using lazy loading.

The most typical one is that Javascript can delay loading content. This method is to first ensure that the webpage can display the normal page effect well without javascript when developing the webpage, and then complete some of it by delaying the loading script. Advanced functional effects.

Load ahead

This method is just the opposite of the above method, which means that some resources in the web page are loaded in advance. It is divided into three categories:

1. Unconditional early loading

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

2. Conditional loading

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

How H5+C3 optimizes the front-end interface

Loading as expected

This is a bit more advanced. This situation usually occurs when a web page is redesigned. Due to the user's access behavior, there is a local cache of the old web page, but the newly designed website does not. The designer can pre-add some of the cache to the old web page. The content may be used in the new website. In this case, the new web page will first download some resources to the local area.

Reduce the number of DOM elements

If there are too many elements in the web page, it will also affect the performance of the web page, and it will also increase the load of the web page and the execution of the script. You can think about it. When we usually use JS, if we want to achieve some effects, do we have to find relevant information first? DOM element, and then perform related operations. If there are too many elements in our web page, will there be a very obvious time difference? Therefore, reducing the number of DOM elements still affects web page performance.

Divide content based on domain name

Many times, when we look at other large websites, the address of the image is different from the main domain name of the website, and multiple domain names are used to store related resources. So why are they used in this way? In fact, browsers generally have restrictions on the number of download connections for the same domain name. Dividing download content based on domain names can indirectly increase the number of parallel download connections in the browser. Greatly improve the website's overall download resource capabilities. Thereby achieving the effect of optimizing performance.

Reduce the number of iframes

Before, we talked about how to use iframe, but in actual projects, please pay attention to its advantages and disadvantages when using it.

advantage:

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

shortcoming:

Using an iframe with empty content will also consume loading time and prevent the page from loading

Avoid 404

404 is a common server resource not found. First, it affects the user experience and opens a page that returns useless information. Second, an external script needs to be loaded into the web page, and a 404 is returned. This not only blocks the downloading of other scripts, but the client will also parse the downloaded content (404) as Javascript.

CSS

Pin style sheet to top

Since web content is loaded from top to bottom, we try our best to put CSS styles in the head of the web page to make the web page load faster. This is very important for web pages with a lot of content, at least it will not keep users waiting for a page. On a white screen, this user experience is also quite good.

If we put the style sheet at the bottom, there will be a situation where the browser will refuse to render the downloaded web page, because most browsers strive to avoid redrawing when implementing it. So this is also an important point.

Avoid CSSexpression

Some friends who are familiar with basic CSS3 have always admired its powerful opening ability and like to use some CSS expressions to dynamically set CSS properties. It is supported in IE5~IE8, and expressions will be ignored in other browsers.

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

Use link tag instead of @import

In the design of web pages, please try to use link tags to reference CSS and avoid using @import. The reason is very simple. You can understand that it is just to put the CSS style at the bottom of the content in the web page.

picture

Optimize images

In the production of web pages, we will find that images such as banners load very slowly, and also affect the speed of the website, ranging from a few hundred K to a few megabytes. So is there any room for optimization of such pictures? ?

Today I would like to introduce to you an image optimization platform, which is Zhitu.com

that designers often go to. As you can see, the difference between the original image and the optimized (Smart Image) image is more than 500K. If for a website with many images, we optimize all the images on the entire site, then you can imagine, this is How much traffic will be saved! So I highly recommend these image optimizations.

Avoid empty image src

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

Optimize CSS Sprite

Arrange images horizontally in Spirite, while arranging them vertically will increase the file size;

In Spirite, combining colors that are close together can reduce the number of colors. Ideally, it should be less than 256 colors in order to adapt to the PNG8 format;

Do not leave large gaps in the middle of the Spirit image. This does not increase the file size by much, 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 scale the image to fit the page. If you need a small image, just use a small image. The reason is very simple. It can achieve the best effect for different devices, instead of loading large images to achieve the overall effect. If it is a mobile phone user, this expense is still quite large. After all, this is a traffic-focused website. era.

Use small and cacheable favicon.ico

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

Summarize:

Finally, this article is mainly aimed at entry-level web designers. The content of this article only involves HTML, CSS, Javascript, images, etc. Of course, there are some other methods, which we will point out in the next article.

Of course, have you gotten some of the common front-end optimization tips mentioned above? Please do not have errors similar to this in your webpage, otherwise it will really affect the user experience. After all, this is the era of WEB2.0. If users are not satisfied with your webpage, that is Negative to developers, so in order to make better and more outstanding web pages, we pay as much attention to these small details as possible.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!