网页代码优化-加快网页显示速度十全十美终极方案!

最新推荐文章于 2024-10-21 11:49:03 发布

wangguoping

最新推荐文章于 2024-10-21 11:49:03 发布

阅读量301

点赞数

分类专栏：开发工具文章标签： CSS 浏览器 JavaScript 脚本 IE ViewUI

本文链接：https://blog.csdn.net/wangguoping/article/details/83778241

版权

开发工具专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、设置浏览器缓存，加快下次访问速度，在<head>与</head>之间加入以下代码：
<meta http-equiv="cache-control" content="public" />
如果不缓存，代码如下：
<meta http-equiv="cache-control" content="no-cache" />

2、网页插广告或部分内容显示慢，会导致整体页面的显示速度也变慢，加入下面的代码可以完美解决这个问题。以下代码同时兼容IE和FireFox等浏览器。

第一步，把这段代码放在你要放广告或其他加载速度比较慢的内容的网页位置：
<div id="myads"></div>

第二步：把下面这两段代码放到网页底部：
<div id="span_myads" style="display:none">
这里放上广告的JS代码或其他加载速度比较慢的内容。
</div>
<script type="text/javascript">
document.getElementById("myads").innerHTML = document.getElementById("span_myads").innerHTML;
document.getElementById("span_myads").innerHTML = "";
</script>

3、由于图片载入速度较文字慢，可以将不需要马上显示的图片，由浏览器后面再加载。
例如：把原代码<img src="images/picname.gif" width="图片的宽度" height="图片的高度" border="0" >
改为：<img id="picnamesrc" width="图片的宽度" height="图片的高度" border="0" >

然后,把以下代码放置在网页的后面：
<script type="text/javascript" language="JavaScript">
document.getElementById("picnamesrc").src="images/picname.gif";
</script>

4、应用CSS样式，缩小页面体积，由浏览器调用CSS文件。
例如：在<head>与</head>之间加入如下代码：
<link rel="stylesheet" type="text/css" href="styles/skin.css" media="all" />

5、调用js脚本，减小页面体积，由浏览器在后台下载js文件。
例如：<script type="text/javascript" src="js/add.js"></script>

6、减少http的请求：

不要在网站上放置过多http请求的东西(图像，脚本等等)，每个对象都会延迟加载。减少请求的方法：

(1)减少不必要的对象

(2)合并相应的css

<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />

合成一个后：

<link rel="stylesheet" type="text/css" href="/style.css" />

特别注明：对于js脚本文件，要根据需要和具体情况，一般不要合并成太大的js文件，要将不急需的js文件（如：设置首页、加入收藏夹等代码）放在网页后面调用。

7、记得帮页面减肥

浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘，再用浏览器解释查看的。下载网页的快慢在显示速度上占了很大比重，所以，网页本身所占的空间越小，那么浏览速度就会越快。

HTML网页代码减肥（免费免注册汉化版）工具下载地址：http://www.soqu.org/download/HTML.rar

8、不要将整个页面内容塞到一个Table中。

浏览器加载Table时要等里面所有的内容都加载完毕后才显示出来，如果某些内容无法访问，就会拖延整个页面的访问速度。正确的做法是：将内容分割成几个独立的Table中去，不要全都塞到一个Table里。

9、使用iframe嵌套另一页面

比如你要在网站插入一些站内通用内容或其他网站内容，又不想让这些内容影响速度的话，那么，使用iframe最合适不过了。例如要在网页上插入一些其它站点内容代码方法，在网页用如下的代码将该页面嵌入即可，这样就不会因为这些内容的延迟而拖了整个页面的显示，代码如下：

<IFRAME marginWidth=0 marginHeight=0 src="http://www.id5.cn/desktop/index.jsp?icpcode=bhc06" frameBorder=0 width=523 scrolling=no height=377 leftmargin="0" topmargin="0">< /IFRAME>

其中http://www.id5.cn/desktop/index.jsp?icpcode=bhc06是被引用文件的路径，width，height应设置成相应的值。

演示地址：http://www.soqu.org/id5.htm

10、将统计代码放置在网页的后面，避免统计影响了整个页面的显示速度。