The difference between div and table in speed, loading, web application, etc.
|
1: Differences in speed and loading methods The difference between div and table is not the speed, but the loading method. Speed can only refer to the network speed. If the speed is fast enough, there is no difference: The loading mode of div is to load as it is read. When it encounters <div> but not </div>, the content in div is loaded. The content is loaded as much as it is read. The loading mode of table is to load after completion. When it encounters <table> but before reading </table>, the content in table is not loaded, or it is loaded when the transmission is interrupted (document.onload() event). This is because TABLE involves multiple rows and columns. Therefore, only when all the content of TABLE is loaded, IE knows how to display it. 2: The difference in web applications <br />If you add a table at the beginning and end of the page, you must wait until the entire page is read before loading. If you add a div at the beginning and end of the page, there will be no effect. 3: Comparison of usability of DIV and Table layouts on large websites There are no advantages or disadvantages between DIV and TABLE themselves. The so-called web standard only recommends the correct use of tags. For example, DIV is used for layout, while TABLE is originally used to convert two-dimensional data. Let TABLE do what it should do, which does not mean that it is so great if TABLE does not appear on the page. The advantage of using DIV for typesetting is that I don’t need to explain it, but everyone should be clear about it. DIV is a standard and a general trend, but it does not mean that all pages are suitable for using it. There is a big difference between Chinese portals and foreign ones. Chinese netizens do not like pages with little information. The YAHOO page in China has a lot more content, and the last time it was changed to a simple page, the number of visits dropped so much that it was changed back after a few days. It is precisely because of China's national conditions that portals such as Sohu and Sina were created. Why is DIV not suitable for them? Let me explain one by one from several aspects: Simplified code: Everyone says that DIV layout simplifies code, but the code saved by using DIV instead of TABLE is occupied by CSS (styles), and most of these styles are used to control the layout of DIV. Then you may say that CSS can be reused externally. To get the answer to this question, please read on. Reusability and downloads: By using a unified .css style sheet file, you can modify the entire site with just one modification, which reduces maintenance costs. But please think about it from another perspective. If all pages have to access a file when loading, then the daily download volume of this file, especially on the website platforms of Sohu and Sina, will reach hundreds of millions of times. This requires a lot of front-end web servers to provide support, and the backend cost will also increase a lot invisibly. If the background support is not done well, the page will appear distorted and all the previous work will be in vain. Many people will ask, the probability of this happening is too small. What we do is to avoid one or two accidents from happening. If an accident happens, the consequences for the portal will be disastrous. HTTP communication: The unified style sheet file is in the form of an external call, so each time a single page is loaded, an additional HTTP request to the server will be made and the server will have an additional response, which will be a great consumption for the front-end web server. For a long time, CSS and JS were written on the front end of the page (you can look at the pages of Sohu and Sina, most of them are in this form), rather than as an external call, in order to minimize the increase in server consumption. Page Cache: Every time a user visits a page, it will be saved in the browser cache for a certain period of time to ensure that the page display speed can be greatly improved the next time the user visits the page. Each modification will cause the page to be re-downloaded, and the same is true for each externally imported style file. If the CSS file is modified, every page accessed on the website will be re-downloaded. The previous method of writing the style in the page only requires the modified page to be re-downloaded. compatibility: Not all versions of all browsers support CSS (style sheets) very well. For example, browsers before IE5 do not support CSS very well. Nowadays, there are many users who use browser versions earlier than IE5. This requires testing against different browser versions during page creation to ensure compatibility, which invisibly increases the workload (at least the developers I have come into contact with take longer to create a div page than a table page). Cross-cutting and ductility: Horizontal cutting - In order to make the page download faster, the traditional layout method divides the page into several blocks from top to bottom. However, this situation often occurs in pages that use DIV layout. Since the number of content items in the middle column or other columns of each block is not fixed, the columns on both sides do not adapt at the same time, resulting in blank space. Above we are only discussing the usability of a certain technology in a certain field, not the technology itself. Having said all this does not mean that the DIV layout method is bad, but that we should correctly view the role of Table in large content-based portals instead of blindly following others. The reason why the DIV layout method is not used in large websites is not that the portal does not use DIV because of backward technology or the people inside are not forward-looking, but it is determined by multiple reasons. The reason why NetEase uses the DIV format is because content is not their main focus. For other portals, such decisions will have to be verified over time. It's just that the time is not ripe yet. 4: DIV+CSS Now I think DIV + CSS is not as simple as the literal meaning, but has two inherent meanings: 1. Separate structure from presentation. Use DIV to complete the structure and CSS to control the presentation. This brings many benefits. DIV simplifies the page and improves flexibility. Designers who are proficient in CSS can avoid repeated nesting of DIVs, thereby greatly improving page loading speed and the maintainability of the site. 2. The reason for choosing DIV to cooperate with CSS is that 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 complicated and cannot do this well. Although TABLE+CSS is also an option, don’t forget that DIV has another advantage, floating stacking, and websites that use TABLE for layout cannot pass W3C verification. In fact, the benefits of DIV are far more than that. For example, flexible layout and user-defined layout, DIV shows incredible flexibility, and its semantic structure is more search engine friendly than TABLE, not to mention cross-platform application. DIV+CSS provides us with an elegant and standardized technical framework, allowing us to complete more and more beautiful pages with minimal repetitive work, thereby improving the efficiency of the entire team and even changing the long-standing problem of web designers and web programmers being unable to work synchronously. |
>>: JS generates unique ID methods: UUID and NanoID
Recommend
Add and delete table information using javascript
Getting Started with JavaScript JavaScript is a l...
Detailed example of MySQL subquery
Subquery Classification Classification by returne...
Setting up Docker proxy under CentOS 7 (environment variable configuration of Systemd service under Linux)
The Docker daemon uses HTTP_PROXY , HTTPS_PROXY ,...
Vue Element-ui table realizes tree structure table
This article shares the specific code of Element-...
mysql+mybatis implements stored procedure + transaction + multi-concurrent serial number acquisition
Database stored procedures DROP PROCEDURE IF EXIS...
10 ways to view compressed file contents in Linux (summary)
Generally speaking, when we view the contents of ...
Solve the problem of MySql client exiting in seconds (my.ini not found)
Problem description (environment: windows7, MySql...
How to fix the four sides of the table to scroll up, down, left and right
question: When I was doing project statistics rec...
Common shell script commands and related knowledge under Linux
Table of contents 1. Some points to remember 1. V...
Dynamically edit data in Layui table row
Table of contents Preface Style Function Descript...
JavaScript implements bidirectional linked list process analysis
Table of contents 1. What is a doubly linked list...
Complete MySQL Learning Notes
Table of contents MyISAM and InnoDB Reasons for p...
Vue+elementui realizes multiple selection and search functions of drop-down table
This article shares the specific code of vue+elem...
MySQL transaction autocommit automatic commit operation
The default operating mode of MySQL is autocommit...
jQuery+Ajax to achieve simple paging effect
This article shares the specific code of jquery+A...