执行效率3

1.优化CSS
CSS叠层样式表让网页加载起来更高效，浏览体验也得到提高。有了CSS，表格布局的方式可以退休了。

但有时我们在写CSS的时候会使用了一些比较罗嗦的语句，比如这句：


    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;


你可以将它简化为：


    margin: 10px 20px 10px 20px;


又或者这句：


    <p class="decorated">A paragraph of decorated text</p>
    <p class="decorated">Second paragraph</p>
    <p class="decorated">Third paragraph</p>
    <p class="decorated">Forth paragraph</p>


可以用div来包含：


    <div class="decorated">
    <p>A paragraph of decorated text</p>
    <p>Second paragraph</p>
    <p>Third paragraph</p>
    <p>Forth paragraph</p>
    </div>


简化CSS能去除冗余的属性，提高运行效率。如果你写好CSS后懒得去做简化，你可以使用一些在线的简化CSS工具：http://www.cleancss.com/
2、网址后加斜杠

有些网址，比如"www.kenengba.com/220"，当服务器收到这样一个地址请求的时候，它需要花费时间去确定这个地址的文件类型。如果220是一个目录，不妨在网址后多加一个斜杠，让其变成www.kenengba.com/220/，这样服务器就能一目了然地知道要访问该目录下的index或default文件，从而节省了加载时间。

3、标明高度和宽度

这点很重要，但很多人由于懒惰或其它原因，总是将其忽视。当你在网页上添加图片或表格时，你应该指定它们的高度和宽度，也就是height和width参数。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

下面是一个比较友好的图片代码：


    <img id="moon" height="200" width="450" src="/wz/UploadFiles_4653/200805/20080506052600816.png" alt="moon image" />


当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。
4.使用表格嵌套？
　在页面中建立复杂的结构，一般通过在页面中放置HTML表格来实现。如果要建立一个这样的页面：这个页面有一个顶部导航栏一个左边导航栏，一个右边的内容区。可以用一个两行两列的大表格来建立它。第一行中，合并两个列，然后插入一个顶部导航栏。第二行左边的列中，插入一个表格来显示导航按钮。右边的栏中，放置一个表格来实际内容。(见图一)这样嵌套的表格生成的代码是这样的：

　　＜TABLE BORDER="0"＞
　　＜TR＞
　　＜TD COLSPAN="2"＞＜!-- content for top nav bar --＞＜/TD＞
　　＜/TR＞
　　＜TR＞
　　＜TD ALIGN="LEFT" VALIGN="TOP"＞＜!-- content for left nav bar --＞＜/TD＞
　　＜TD ALIGN="LEFT" VALIGN="TOP"＞＜!-- content for body of page --＞＜/TD＞
　　＜/TR＞
　　＜/TABLE＞

　　但是，实际上，浏览器找到＜TABLE＞标签的时候并不是立刻把页面显示到屏幕上，除非它找到相应的结束标签＜/TABLE＞。所以，如果你的整个页面在一个表格里的话，在收到最后一个＜/TABLE＞之前，什么也不会显示出来，这样，这个页面将在整个文件全部下载以后才能被用户所看到。在页面数据量比较大的时候（比如搜索引擎的搜索结果），这个特性会导致暂时的停顿。为了防止出现这种情况，可以在制作的时候把页面分成许多小的表格。在每一个＜TABLE＞到相应的＜/TABLE＞这一部分HTML代码下载完的时候，浏览器就会把它显示出来。在访问者看来页面是渐渐的，一部分一部分，越来越多的出现在屏幕上的。感觉上，这样的页面显示速度比下载完整个文件再一次显示出来更快。

　　按照这个原则来研究前面的例子，应该把页面中整个的大表分成三个单独的表。用第一个表显示顶部的导航栏，调节它的宽度，使它足够容纳所有的内容，在一个＜TABLE＞＜/TABLE＞代码段中完成它。页面下半部分，左边第二个表排成一列。使用第三个表容纳实际内容。(见图二)因为每一个部分都是一个完整的表格，所以，每一部分代码下载后都会立刻被显示出来。这样，顶部和左边的导航栏将比页面的其它部分更显显示出来。用户会在这个时候想象页面开始下载，很快就能显示在屏幕上。这样比起让用户在较长时间内一直面对一个空白屏幕要好得多。

　　修改过的代码是这样的：

　　＜TABLE BORDER="0" WIDTH="100%"＞
　　＜TR＞
　　＜TD ALIGN="CENTER" VALIGN="TOP"＞＜!-- content for top nav bar --＞＜/TD＞
　　＜/TR＞
　　＜/TABLE＞
　　＜TABLE BORDER="0" ALIGN="LEFT"＞
　　＜TR＞
　　＜TD ALIGN="LEFT" VALIGN="TOP"＞＜!-- content for left nav bar --＞＜/TD＞
　　＜/TR＞
　　＜/TABLE＞
　　＜TABLE BORDER="0"＞
　　＜TR＞
　　＜TD ALIGN="LEFT" VALIGN="TOP"＞＜!-- content for page body --＞＜/TD＞
　　＜/TR＞
　　＜/TABLE＞

一般来说，一个表格需要其中的所有内容都下载完成才能显示出来，
在<table></table>中加入<tbody></tbody>的好处是：
这个标签可以控制表格分行下载，可以让其中的内容比网页中别的东东（如图片）先下载下来，这样可以让浏览者先看到网页的实质的内容，不用等那么久了。六、选择合适的图象格式

5.JPEG格式是网上非常流行的图像格式，它对于大型图像的压缩率特别高，而GIF格式则更适合小图像和艺术线条一类的图像。对于同样内容的4KB以下的图像文件，GIF格式比JPEG格式效果更好，如果不信，您可比较一下两种格式的小图像文件的大小和质量。