Speed | show | page when arranging the layout of a Web page, one of the most common methods is to define the structure of the page with an HTML table. For example, suppose a Web page consists of a top navigation bar and two columns (columns) below it-the column on the left is a navigation bar, and the right column is the area where the content is actually placed. For such a page, we can use a two-line, two-column large table layout: In the first row, merge two columns and then place the top navigation table; In the second row, the left column has a table showing the navigation buttons, and the right column displays the actual contents of the page in a table. This form of nested table layout can be a very good effect.
To create such a page, we can use the following HTML code:
< TABLE border= "0" > < TR > < TD colspan= "2" ><!--the contents of the top navigation bar--></td ></tr > < T R > < TD align= "left" valign= "top" ><!--the contents of the left-hand navigation bar--></td > <td align= "ieft" valign= "Top" >& lt;!--page Content area--></td > </tr > </table >
If the browser finds a table tag in the page, it does not display the table until the corresponding end tag </table> is received. Therefore, if the entire page is placed in a large table, the entire page will not be displayed until the browser downloads the </table> tag of the large table. When a page with a lot of content is displayed (for example, search results or a product catalog on an E-commerce site), the delay display of the table results in a pause in the entire page display.
To avoid this, we should divide the page into smaller and separate table regions. In this way, the HTML code for each table is downloaded and the browser can immediately display it. For the viewer, the page will gradually show up in part and part of the screen. And more importantly, the page will begin to display more quickly on the screen than before waiting for the entire page to be downloaded.
For the example shown earlier, instead of using a single large table for the page layout, we use three separate tables: the first table displays the navigation bar at the top of the page so that it has enough width to display the page content and gives its <table ></table> tags to the Arrange the second table in the lower-left position of the first table, align the table to the left, and the last table to the right of the second table to place the page content. Since each part is now a separate table, the browser will display it as soon as it downloads any part of the code. As a result, the navigation bar at the top and left of the page will show up faster than the rest of the page. This avoids allowing the viewer to wait for a long time in front of a blank page, but gives him the impression that the page has already been downloaded and the entire page will immediately appear on the screen.
The modified layout code looks like this:
Just as closing the table tag as early as possible allows the browser to quickly display the data in the table, there are two other tags that can also increase the display speed in this way, which is the <option > tag used to make the list box and < LI for making unordered lists. > tags.
ASP programmers often want to access the database to get the data and then construct the list box with < OPTION > tag. Simply change the code to close the <option > tag, allowing the browser to display the page faster.
For example, the following code was originally used:
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.