The difference between Div and table is introduced in the difference between speed and load and Web application, etc.

Source: Internet
Author: User
Tags http request browser cache advantage

div and table differences in all aspects of performance are obvious, such as speed and load mode differences, in the Web application of the difference, and so on, many, the following detailed finishing a bit, like friends can refer to, hope can help you better understand the difference between DIV and table

  1: Difference in speed and load mode

The difference between Div and table is not speed, but load mode, speed can only refer to the network speed, if the speed is fast enough, there is no difference:

The div is loaded in the form of read-and-load, encountering

didn't meet

.

The same time loading the contents of the Div, how much to read the load, the table load is completed after loading, encountered

, the contents of the table are not loaded until it is read, or the transmission is interrupted (Document.onload () event) because the table is involved in multiple rows and columns, so IE only knows what to show when all the contents of the table are loaded.

  2: Differences in Web applications

If the page ends with a table, you must wait for the entire page to read before loading

If the page has a div at the end, nothing affects

  Comparison of the availability of 3:div and table layouts on large Web sites

div and table itself does not have any advantages and disadvantages, the so-called web standards are recommended is the correct use of tags, such as: div for layout, and table is the two-dimensional data. Letting table do what you do is not to say how much a table is without appearing on the page.

The advantage of using div for typesetting is that I don't say, we should all be more clear. Div is the standard, is the general trend, but does not mean that all the pages are suitable for it to do.

China's portal and foreign has a very big difference, Chinese netizens do not like the page of less information, Yahoo to the Chinese page content on a lot more, and the last change to a concise page after the volume of the visit dropped so bad that in a few days and then changed back. Officially because of China's national conditions created Sohu, Sina such a portal.

  Why are div not for them? Here are a few ways to explain this:
Thin Code:

Everyone says DIV's layout is streamlined, but the code saved with Div instead of table is occupied by CSS (style), which is mostly used to control the layout of Div. Then you will say, CSS can be put on the external reuse ah, to get the answer to this question, please look down.

Reusability and Downloads:

Unified use of a. CSS style sheet file, can be modified once, the effect of total station modification, so that maintenance costs lower. But please think about it from a different angle, if all the pages in the load to access a file, that this file every day download, especially in Sohu, Sina website platform will reach hundreds of millions of times, which requires a lot of front end of the Web server in support, that the cost of the backstage has also improved a lot. If backstage support does not do well, then the page will appear the flower screen, before the work is in vain. A lot of people will ask, the odds are too small. Our work is to avoid these one or two accidents, if the accident happened, the consequences for the portal will be unthinkable.

HTTP communication:

The unified stylesheet file takes the form of an external invocation, so that each time a single page is loaded one more response to the server's HTTP request server will be a significant drain on the front-end Web server. And the original very long time is the CSS and JS written in the front page (you can see Sohu and Sina's page, most of them are in this form), rather than as an external call form, but also in order to avoid adding to the server consumption.

Page Caching:

Every time a user accesses a page, it saves a certain amount of time in the browser cache to ensure that the page will be displayed more quickly the next time the user accesses the page. Each modification will cause the page to be downloaded again, for each external imported style file is also so, if the CSS file changes, then visit the site every page will be downloaded again, and the previous style in the page to write the way, just modify the page need to be downloaded again.

Compatibility:

For CSS (style sheet) Not all versions of all browsers are supported very well, such as IE5 previous browsers for CSS support is not very good. And now using IE5 Previous version of the browser, a number of users, so that in the process of making the page to be tested for different browser versions to ensure compatibility, virtually also add a lot of work (at least I contacted the developer to make a div page than the standard time of the table page).

Crosscutting and ductility:

Crosscutting--traditional layout in order to make the page download faster, the page from top to bottom into several blocks, but often use div layout of the page will appear in this situation, because each of the middle bar or other columns of the contents of the column is not fixed on both sides of the column is not adaptive, and appear to leave White.

We're just talking about the availability of a technology in one area, not the technology itself.

So much is not to say that div this layout is not good, but that we should correctly look at table in the content based on the role of a large portal, rather than parrot. The reason for the layout of the div is not in the large Web site application, not to say that the portal is not using div is backward technology, is the inside of the people are not forward-looking, but a variety of reasons. The way NetEase uses div All is because content is not their main direction. For other portals, such decisions are validated by time. It's just that the timing isn't ripe yet.

  4:div+css

And now I think that div +css is not literally that simple, but has a twofold inner meaning:

1, structure and performance separation, with a div to complete the structure, with CSS control performance, so that the benefits are very many, Div streamlined the page, improve the flexibility. and proficient CSS designers can avoid the repeated nesting of Div, which greatly improve the speed of page loading, as well as the site can be maintained.

2, the use of Div to match the reasons for CSS, the core of CSS is "box model", and no one label can better than div interpretation of the essence of "box model", table structure is too complex, and can not be very good to do this, although TABLE+CSS is also a choice, But don't forget that div has another advantage, floating cascade, and Web sites that use table layouts are not validated by the consortium.

In fact, the benefits of Div are far more than these, such as flexible layout, user-defined layout, Div has shown incredible flexibility, and the rich semantic structure of the search engine friendliness is also higher than the table, not to mention cross-platform applications. DIV+CSS provides us with an elegant and standardized technical framework that allows us to work with the least amount of repetition to complete more aesthetically pleasing pages, thereby improving the efficiency of the entire team and even changing the long-standing inability of web designers and web programmers to sync.

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.