网页优化之表格使用及网页减肥

标签：网页,优化,表格,使用,减肥时间：2020年08月05日阅读次

表格是网页最重要的排版方式。

1.如果某个网页采用了大段的长篇文本，除了可以将一页文本分成多面，还可以考虑将文本置入不同表格中，这样不仅管理方便，也使得该页加载时每个表格内容依次加载，这样访问者就可以一边看已下载内容一边等待剩余部分加载，而不是等待很久之后才一齐加载出来。

例如：新浪新闻

2.表格之内套嵌太多表格也不利于页面加载，因浏览器是先加载完大表格之后再加载内嵌的小表格，因此内嵌表格会最终降低整页加载速度。

3.尽量采用XHTML标准，使用DIV代替表格。

具体方法是采用CSS里面的 FLOAT 属性，position 属性等定位

使用FLOAT 属性的例子。复杂三栏式版面

使用position 属性等定位。复杂版面设计.htm

网页减肥

代码设置不妥不仅延长网页加载时间，也严重影响蜘蛛程序对网页内容的抓取。通过对网页代码进行清减去掉臃肿杂乱的代码，减小网页文件大小，能够加快网页加载速度，让蜘蛛快速索引到重要内容。整个网页最好不要超过30K，文字内容最好5K-10K之间，Google 只对内容的前5000个字进行索引。

网页减肥重点涉及以下几个要点：

1.CSS 样式

网页制作应通过 CSS（层叠样式表单）来统一定制字体风格。例如：

<b style="color:red;font-size:16px;">潍坊网站建设</b>

----------------------

b { color:red;font-size:16px; } /*通用对象*/

#divmain {font-size:12px;} /* ID 对象 */

.red {color:red;}/* 定制类别 */

.red b {color:green;}/* 定制类别下的通用对象*/

</style>

<b>潍坊网站建设</b>

CSS 减肥示例文件把文字的字体、字号、颜色、背景色等统一起来，不用对每段文字单独进行格式定义，从而减少大量重复性标签。注意把所有css文件单独存放在命名为 css 的外部文件中。

语法： <link rel="stylesheet" type="text/css" href="/common/client.css">

作用的优先级：自身的style属性 > 页面的内部style对象 > 页面外部css文件。

2.JavaScript ：

1. 简化js中的函数名称和变量。

例如：Google，里面的函数名称只有 1 个或者 2 个字符。

2. 将网页的公共部分转换为脚本并存于 js 文件里。这样可以减少文件大小，加快下载速度，同时也方便管理。不过不能将导航等等优化的关键代码转换成 js，否则搜索引擎搜索不到。

转换方式：

原来：<h1>天天收藏夹</h1>

脚本：document.write(“<h1>天天收藏夹</h1>”);

例如：华军软件园源代码，将标题、导航等等都放着js文件里，将导航放在js里面就不太好

了。

3. 使用 base 标签：

Base 标签是一个全集控制的标签。

比如：

其中 http://wfwangluo.com/ 和 target=”_blank”: 多次重复，增加无用的代码。

修改为：

<head>

</head>

<body>

</body>

4. 慎用网页减肥工具

通常的网页减肥工具，对html减肥具有一定的破坏性，常常为了减肥将标签的后半个标签删除，

造成网页的不完整。

处理前：<table><tr><td>第一行</td></tr><tr><td>第二行</td></tr></table>

处理后：<table><tr><td>第一行<tr><td>第二行</table>

处理后 </td></tr> 被去掉了，使页面不完整。

5. 删除空格和回车

如果要更加苛刻的减肥，那最后一步就是删除空格了，还可以使文件大小下降很多。

不过删除空格后的页面由于没有阶梯排列，将很难读懂。

例子：百度首页的代码就非常紧凑。

上一篇：网页优化之图像优化和flash优化下一篇：网站优化之不同位置的网页优化