让广告代码不再影响网页加载速度
一、现像：
当您在您的网站、论坛BLOG某个地方插入一些联盟的广告条或者一些带有统计功能的计数器后，会发现自己的网页有时打开会出现长时间的停顿，甚至卡住不动了。但如果把广告代码插入网页的最底部却不存在这个问题。这是怎么回事呢？
二、原因：
为什么会出现这种现像呢？我们先从我们网页的结构说起。我们制作网页时主要是通过PhotoShop来切片生成HTML页，就算是不用PhotoShop切片，我们也会在制作网页时大量地用表格来为网页中的各个元素定位。PhotoShop切片切出的HTML页，其实就是一个大大的表格，大表格中又有很多小的单元格或，这些单元格放着被切好的小图片，一些单元格我们还要向里面放文字，超链接等元素。
问题就出在表格上，大家都知道在HTML中与中夹着表格的内容。IE浏览器从服务器上下载HTML代码时是顺序进行的。只有读到时，才证明完整的一个表格被下载完毕，这个表格的内容才会显示出来，如果受到一些原因的影响迟迟不能被读到，就会引起表格里的内容迟迟不能显示出来，如果你的网页内容是个大表格的话，那么你的网页也同样会迟迟地出不来。
广告代码其实都是从其它网站引来的一些内容。不管这些内容是什么，它的来源不是您的网站。当然也不能保证这段引来内容的下载速度。当你在你的网页的与之间插入了广告代码后，由于广告代码引来的内容下载速度慢，导致顺序进行的HTML下载被卡在广告代码处，导致迟迟读不到。所以就算是你的网页下载速度再快也耐这些“外来户”无何。所以您的网页速度就被拖慢了。
三、解决
知道了问题的原因，解决起来自然有数了。我们可以利用一些变通的方法来解决这个问题。
如果您要在网页上加广告的话，您可以尝试以下操作
四、原理
知其然，也要知其所以然，为什么上述代码会加快速度呢？
其实很简单，我们利用一个<span>标签取代了<table>与</table>中的广告代码。由于这个<span>标签只是十来个字节的普通HTML本地代码，不会影响网页下载的速度。等整个表格下载完后，网站的内容已经显示出来了。再利用另一个<span>标签包住广告代码，等广告内容下载完成后，再利用JavaScript把下面包有广告内容的<span>标签中的内容，传递给上面那个取代原广告条位置<span>里面。再把下面的<span>内容清空。这样一来，“先显示网站内容再显示广告内容”就不会让网页速度减慢了。
五、局限性
由于一些技术原因，导至上述代码并不是在所有地方都能使用的。就我在制作“玉玺空间”时，就碰到一此。结果发现如果上面的<span id="span_myads"></span>被段落标记<p></p>包住时，这个代码在IE中就无法正常使用。提示“脚本错误：未知错误”。所以大家在做网页时不要利用段落符为广告条定位。
如果大家也碰到上述代码无法使用时，不妨自己解决一下，同样也欢迎给我留言共同解决。
六、后记
上述代码在IE、FireFoX浏览器下均可正常运行。
当您在您的网站、论坛BLOG某个地方插入一些联盟的广告条或者一些带有统计功能的计数器后，会发现自己的网页有时打开会出现长时间的停顿，甚至卡住不动了。但如果把广告代码插入网页的最底部却不存在这个问题。这是怎么回事呢？
二、原因：
为什么会出现这种现像呢？我们先从我们网页的结构说起。我们制作网页时主要是通过PhotoShop来切片生成HTML页，就算是不用PhotoShop切片，我们也会在制作网页时大量地用表格来为网页中的各个元素定位。PhotoShop切片切出的HTML页，其实就是一个大大的表格，大表格中又有很多小的单元格或，这些单元格放着被切好的小图片，一些单元格我们还要向里面放文字，超链接等元素。
问题就出在表格上，大家都知道在HTML中与中夹着表格的内容。IE浏览器从服务器上下载HTML代码时是顺序进行的。只有读到时，才证明完整的一个表格被下载完毕，这个表格的内容才会显示出来，如果受到一些原因的影响迟迟不能被读到，就会引起表格里的内容迟迟不能显示出来，如果你的网页内容是个大表格的话，那么你的网页也同样会迟迟地出不来。
广告代码其实都是从其它网站引来的一些内容。不管这些内容是什么，它的来源不是您的网站。当然也不能保证这段引来内容的下载速度。当你在你的网页的与之间插入了广告代码后，由于广告代码引来的内容下载速度慢，导致顺序进行的HTML下载被卡在广告代码处，导致迟迟读不到。所以就算是你的网页下载速度再快也耐这些“外来户”无何。所以您的网页速度就被拖慢了。
三、解决
知道了问题的原因，解决起来自然有数了。我们可以利用一些变通的方法来解决这个问题。
如果您要在网页上加广告的话，您可以尝试以下操作
程序代码
第一步：把这段代码放在你要放广告的网页位置：
| 以下是代码片段：<SPAN id=ad_01>广告载入中...</SPAN> 第二步：把这段代码放到页底: <SPAN class=spanclass id=span_ad_01> 这里放广告的JS代码或其他加载速度比较慢的内容都可以. </SPAN> <SCRIPT>ad_01.innerHTML=span_ad_01.innerHTML;span_ad_01.innerHTML="";</SCRIPT> |
程序代码
在同一页面有多个广告需要调用时，您只要修改代码中的红色部分，令每个广告的ID不同即可。
| 以下是引用片段： ………… <SPAN id=ad_01>广告载入中...</SPAN> ………… <SPAN id=ad_02>广告载入中...</SPAN> ………… <SPAN class=spanclass id=span_ad_01> /***** 广告内容一 *****/ </SPAN> <SCRIPT>ad_01.innerHTML=span_ad_01.innerHTML;span_ad_01.innerHTML="";</SCRIPT> <SPAN class=spanclass id=span_ad_02> /***** 广告内容二 *****/ </SPAN> <SCRIPT>ad_02.innerHTML=span_ad_02.innerHTML;span_ad_02.innerHTML="";</SCRIPT> |
四、原理
知其然，也要知其所以然，为什么上述代码会加快速度呢？
其实很简单，我们利用一个<span>标签取代了<table>与</table>中的广告代码。由于这个<span>标签只是十来个字节的普通HTML本地代码，不会影响网页下载的速度。等整个表格下载完后，网站的内容已经显示出来了。再利用另一个<span>标签包住广告代码，等广告内容下载完成后，再利用JavaScript把下面包有广告内容的<span>标签中的内容，传递给上面那个取代原广告条位置<span>里面。再把下面的<span>内容清空。这样一来，“先显示网站内容再显示广告内容”就不会让网页速度减慢了。
五、局限性
由于一些技术原因，导至上述代码并不是在所有地方都能使用的。就我在制作“玉玺空间”时，就碰到一此。结果发现如果上面的<span id="span_myads"></span>被段落标记<p></p>包住时，这个代码在IE中就无法正常使用。提示“脚本错误：未知错误”。所以大家在做网页时不要利用段落符为广告条定位。
如果大家也碰到上述代码无法使用时，不妨自己解决一下，同样也欢迎给我留言共同解决。
六、后记
上述代码在IE、FireFoX浏览器下均可正常运行。
文章录入：yixiaoer 责任编辑：yixiaoer
