One of the biggest speed of web browser rendering speed optimization

Source: Internet
Author: User
Keywords Achieve

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Objective:

In order to realize the high speed of the website, it must be set up and arranged in every link. Once the site is slow to open, always, the webmaster will be the first time that the "server slow", in fact, after reading this chapter, you will find that perhaps the result is not entirely the case. The factors that affect the speed of Web sites vary widely, and servers are only a small fraction of the factors. A common situation, the same server, Web site and the open speed between the different, this and the site's production process has a considerable relationship; This section focuses on the optimization of site production process. We can roughly divide the factors that affect the speed of the network into five to optimize separately:

First, the server hardware configuration and settings;

Second, the server line and bandwidth;

Third, the user's computer configuration and settings;

Four, the user's line and the bandwidth;

V. Website production process.

We see that the impact of the speed factor is probably the five parts, and often many times, the server, the user's computer configuration and line properties are not selectable, so we this article does not discuss the bandwidth and server hardware problems. Focus on the site through the optimization of production technology to reach the site limit speed of the method and ideas, which is a lot of webmaster usually completely ignored.

Of course, improper programming also causes web pages to slow down. However, the types of programming and the operating environment are very different, the cause is also very complex, this chapter can not be described. My website Luzhou X2 as a Web site engine, because the design of the designer also did not fully consider the browser's rendering, so still not fully meet the following optimization project. However, if you are using HTML static generated CMS, such as DEDECMS, you can fully refer to the following optimization project to implement.

Browser Rendering speed Optimization:

The first thing to say is that the browser rendering a lot can not be demonstrated through intuitive testing, can only infer and observe the results to correct and solve, so, I summarized the method, not all conform to the actual principle. We learn CSS, at the beginning only pay attention to achieve results, never noticed the CSS rendering process, which caused a lot of unnecessary rendering waste. In the absence of any program under the influence of the page, if the site opened the card, open the machine slowly, open the process of showing the contents of the screen and then read again, click Not smooth, up and down drag the flower screen, the main reason for the heavy rendering.

1.CSS, must write in < head ></head >, lets the browser cache to all CSS first, also facilitates the browser to read the HTML structure to be able to render smoothly, if in < body ></body > A CSS style definition appears, and the browser renders the page again. affect the speed of Web page opening;

As for the < BODY > There is a redefinition of the style to render again, or once the style definition is again rendered, I do not have the means to confirm. However, this should be avoided as far as possible.

2. When the page document in a large number of needs to expand, the tree structure (tree-like directory), the most likely to appear CSS rendering problems. What we call unfolding, in fact, the Web page elements of the display and hidden, due to some of the browser design flaws, to expand a hidden element, actually consumes a lot, the reason may be display:none does not really hide the elements, most likely even the hidden layer, but the element attributes still need to render one at a time.

This situation, generally seen in the tree directory too much too complex time to appear, click a half-day does not unfold, the machine appears slowly.

3. As in the case of IBID., border:0 this property still renders the border style. So the correct writing should be: border:none, avoid meaningless rendering;

4.JS may also cause a heavy rendering, so we should try to integrate JS, and put all JS to the end of the page </body > before. If I remember correctly, even if JS in the page, most modern browsers will default to the final loading JS;

5. All pictures must specify the Width property, or the browser will render the page again. Just imagine, the browser does not know the picture is too wide, the browser can not for the picture on the page reservation specific location, while the HTML and CSS styles are also downloaded at the same time. Browsers obviously can not effectively organize the display results, only when the picture is completely downloaded to determine the high width of the picture, it is bound to cause the browser's re-rendering;

6. A small background image can also cause rendering difficulties. Let's imagine how many calculations are needed to fill the entire screen with a 1px-wide background image as a background. Therefore, we used to learn the "picture as small as possible", in fact, there is a misunderstanding;

7. Minimize the number of frames too much too fast flash,gif animation to decorate the Web page. This is almost fatal for Web page opening speed;

8. With fewer filters, filters can take up more machine resources and may also have many compatibility issues. Should be used with caution;

9. Use table structure as little as possible to layout. Because the Fw\ps can easily export a Web page file directly, so the old site is a table layout. Table has a widely criticized problem:< table > you will encounter </table > to fully display the content. If there is too much content in the table, the page will not appear for half a day. This is also one of the reasons for table layout being eliminated;

10.CSS Child Selector. CSS selectors cause a browser to filter and position the calculation, so many articles do not recommend using a child selector positioning style. If you can use. Div, try not to use. Nav ul li A. Div.

As for the rendering optimization of browsers, that's all I know at the moment. The next chapter will be for everyone a few main methods of server decompression: including picture format introduction and application and compression method; The actual application of CSS Sprite, server gzip settings, reduce the number of server requests introduced.

Hope the advertisement master correct, Supplement! Publish please reserve: http://www.luzhou6.com Luzhou net Night original.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.