Shulou(Shulou.com)06/03 Report--

This article mainly talks about "what are the differences between Div and table". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the differences between Div and table"?

1: the difference between speed and loading mode

The difference between div and table is not speed, but loading mode. Speed can only refer to network speed. If the speed is fast enough, there is no difference:

The loading method of div is to load as soon as it is read. When you don't encounter it, you can load the contents of div as much as you read. The loading method of table is to load after completion. After encounter, the content in table is not loaded before reading, or when the transmission interrupts the _ (document.onload () event). This is because TABLE involves multi-row and multi-column problems, so only when all the content of TABLE is loaded, IE knows how to display it.

2: differences in web applications

If you add table at the beginning and end of the page, you must wait until the whole page has been read before loading

If you add div at the beginning and end of the page, there will be no effect.

Usability comparison of 3:DIV and Table layouts in large websites

DIV and TABLE do not have their own advantages and disadvantages, the so-called web standard only recommends the correct use of tags, such as: DIV is used for layout, while TABLE is originally converted to two-dimensional data. Letting TABLE do what needs to be done is not to say how awesome it is not to have TABLE on the page.

The advantage of using DIV for typesetting is that I don't say, everyone should be relatively clear. DIV is the standard and the trend of the times, but it doesn't mean that all pages are suitable for it.

Chinese portals are very different from foreign ones. Chinese netizens do not like pages with less information. YAHOO has a lot more content on Chinese pages, but the number of visits dropped so sharply after the last change to a concise page that it changed back in a few days. Officially, due to China's national conditions, it has created portals like Sohu and Sina.

Why isn't DIV right for them? I would like to explain them one by one from several aspects:

Simplify the code:

Everyone says that the layout of DIV simplifies the code, but the code saved by using DIV instead of TABLE is occupied by CSS (style), and these styles are mostly used to control the typesetting layout of DIV. Then you will say that CSS can be reused externally. To get the answer to this question, please read on.

Reusability and downloads:

The unified use of a .css stylesheet file can achieve the effect of once modification and site-wide modification, which makes the cost of maintenance lower. But please think from another angle, if all pages have to access a file when loading, then the number of daily downloads of this file, especially on the website platforms of Sohu and Sina, will reach hundreds of millions of times, which requires that there are a lot of front-end web servers behind to do support, and the cost of the background has virtually increased a lot. If the background support is not done well, then the page will appear blurred screen, and the previous work will be in vain. Many people will ask that the chances are too small. What we do is to avoid one or two accidents, if the accident happens, the consequences for the portal will be unimaginable.

HTTP Communications:

The unified stylesheet file is in the form of external calls, so that each time a single page is loaded, there will be an additional response to the server's http request server, which will consume a lot of the front-end web server. It turns out that css and js are written at the front end of the page for a long time (you can take a look at sohu and sina pages, most of them are in this form), not as a form of external calls, but also to avoid additional consumption to the server as far as possible.

Page caching:

Each page visited by the user will be saved in the browser cache for a certain period of time to ensure that the next time the user visits the page, the display speed of the page can be greatly improved. And each change will make the page re-download, for each externally imported style file is the same, if the CSS file is modified, then every page that visits the site will be re-downloaded, while the previous way of writing the style in the page, only the modified page needs to be re-downloaded.

Compatibility:

For CSS (stylesheet), not all browsers support CSS very well, for example, previous browsers of IE5 did not support CSS very well. Now there are not a small number of users who use previous versions of IE5 browsers, which makes it necessary to test different browser versions during the page production process to ensure compatibility, which virtually increases a lot of work (at least the developers I come into contact with take longer to make div pages than table pages).

Crosscutting and malleability:

Crosscutting-the traditional layout method divides the page into several blocks from top to bottom in order to make the page download faster, but this is often the case on pages that are laid out with DIV, because the number of content items in each middle column or other columns is not fixed, which leads to the absence of adaptive space on both sides of the column at the same time.

Above we are only talking about the usability of a technology in a certain area, not the technology itself.

Saying so much is not to say that the layout of DIV is bad, but that we should take a correct view of the role of Table in large content-based portals, rather than following others. The reason why the layout of DIV is not applied in large websites, it is not that the portal does not use DIV is that the technology is backward, is that the people inside are not forward-looking, but for a variety of reasons. The reason why NetEase adopts the DIV approach is that content is not their main direction. For other portals, such a decision will take time to verify. It's just that the time is not ripe yet.

4:DIV+CSS

Now I think that DIV + CSS is not as simple as the literal meaning, but has two inner meanings:

1, the separation of structure and performance, using DIV to complete the structure, using CSS to control the performance, which brings a lot of benefits, DIV streamlines the page and improves flexibility. Designers who are proficient in CSS can avoid repeated nesting of DIV, which greatly improves the page loading speed and the maintainability of the site.

2, choose DIV to cooperate with CSS reasons, the core of CSS is the "box model", and no tag can better interpret the essence of the "box model" than DIV, the structure of TABLE is too complex, and can not do this well, although TABLE+CSS is also a choice, but do not forget that DIV has another advantage, floating cascading, and the site layout with TABLE can not be verified by the W3C.

In fact, the benefits of DIV are far more than these, such as flexible layout, user-defined layout, DIV show incredible flexibility, and semantic structures are more friendly to search engines than TABLE, not to mention cross-platform applications. DIV+CSS provides us with an elegant and standardized technical framework that allows us to complete more and more beautiful pages with less repetitive work, thus improving the efficiency of the whole team, and even changing the long-standing problem that web designers and web programmers are unable to work at the same time.

At this point, I believe you have a deeper understanding of "what is the difference between Div and table". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.