令你的网页速度大大提高

 更新时间:2016年9月20日 19:03  点击:1454

  很多朋友都用虚拟主机来做网站,将网页文件存放在虚拟空间上,但是页面内容一多,网站打开的速度就显得特别慢,如果您碰到这种情况,与其寻求更好的空间,不如通过优化网页代码来取得满意的速度。笔者总结了一些切实可行的方法,制作主页时,以下的方法可以令你的网页速度大大提高。

   一、记得帮页面减肥

  我们浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘,再用浏览器解释查看的。下载网页的快慢在显示速度上占了很大比重,所以,网页本身所占的空间越小,那么浏览速度就会越快。这就要求在做网页的时候遵循一切从简的原则,如:不要使用太大的Flash动画、视频、图片等。

   二、如没必要,尽量使用静态HTML页面

  众所周知,ASP、PHP、JSP等程序实现了网页信息的动态交互,运行起来的确非常方便,因为它们的数据交互性好,能很方便地存取、更改数据库的内容,使网站“动”起来,如:论坛、留言板等。但是这类程序必须先由服务器执行处理后,生成HTML页面,然后再“送”往客户端浏览,这就不得不耗费一定的服务器资源。如果在虚拟主机上过多地使用这类程序,网页显示速度肯定会慢,所以没有必要,请尽量使用静态的HTML页面。

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

  这是网页设计的问题了,很多站长为了追求页面统一对齐,将整个页面的内容都塞进了一个Table(表格)里,然后再由单元格td来划分各个“块”的布局,这种网站的显示速度是绝对慢的。因为Table要等里面所有的内容都加载完毕后才显示出来的,如果某些内容无法访问,就会拖延整个页面的访问速度。正确的做法是:将内容分割到几个具有相同格局的Table中去,不要全都塞到一个Table里。其实现在都WEB标准都提倡抛弃表格!

   四、将ASP、ASPX、PHP等文件的访问改为.js引用

  这在ASP、ASPX、PHP等程序设计时应该注意的,如果你要在静态的HTML页面里嵌入动态的数据,而这些动态的数据是由ASP、PHP等程序来提供的话,会使用以下的语句引用: < script src="http://image.ccidnet.com/ad_files/network_index.asp?orders=1">< /script>
 
这样的话,每次有一个人访问你的网站,服务器就要执行并处理一次network_index.asp文件,从数据库抽取相应的数据,再输出给网页显示,如果有几万个人同时访问,就要执行几万次,后果就可想而知。建议在这些程序中将数据动态生成到一个network_index.js文件中去,然后在首页通过
<script src="http://www.179job.com/ad_files/home_daohang/network_index.js"></script>
 
这样的代码来引用该network_index.js文件。这样,数据显示的任务就交给客户端的浏览器去做,不会耗费服务器的资源,显示速度自然就很快;前者所花的时间几乎是后者的几倍!
  五、使用iframe嵌套另一页面

  如果你要在网站上插入一些广告代码,又不想让这些广告网站影响速度的话,那么,使用iframe最合适不过了。方法是:将这些广告代码放到一个独立的页面去,然后在首页用如下的代码将该页面嵌入即可,这样就不会因为广告页面的延迟而拖了整个首页的显示,代码如下:

< iframe frameborder=0
   leftmargin=0
   marginheight=0
   marginwidth=0
   scrolling=no src="http://www.179job.com/pub/123.html"
   topmargin=0 width=700 height=440 >
< /iframe>
 
  其中http:

<html>

<head>
<script language=javascript>

minimizebar="minimize.gif"; //窗口右上角最小化“按钮”的图片
minimizebar2="minimize2.gif"; //鼠标悬停时最小化“按钮”的图片
closebar="close.gif"; //窗口右上角关闭“按钮”的图片
closebar2="close2.gif"; //鼠标悬停时关闭“按钮”的图片
icon="icon.gif"; //窗口左上角的小图标

function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr) //定义一个弹出无边窗口的函数,能数意义见下面“参数说明”,实际使用见最后的实例。
/*
------------------参数说明-------------------
fileName :无边窗口中显示的文件。
w     :窗口的宽度。
h     :窗口的高度。
titleBg :窗口“标题栏”的背景色以及窗口边框颜色。
moveBg :窗口拖动时“标题栏”的背景色以及窗口边框颜色。
titleColor :窗口“标题栏”文字的颜色。
titleWord :窗口“标题栏”的文字。
scr :是否出现滚动条。取值yes/no或者1/0。
--------------------------------------------
*/
{
var contents="<html>"+
"<head>"+
"<title>"+titleWord+"</title>"+
"<meta http-equiv="Content-Type" content="text/html; charset=gb2312">"+
"<object id=hhctrl type=application/x-oleobject classid=clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11><param name=Command value=minimize></object>"+
"</head>"+
"<body topmargin=0 leftmargin=0 scroll=no onselectstart=return false ondragstart=return false>"+
" <table height=100% width=100% cellpadding=0 cellspacing=1 bgcolor="+titleBg+" id=mainTab>"+
" <tr height=18 style=cursor:default; onmousedown=x=event.x;y=event.y;setCapture();mainTab.bgColor=""+moveBg+""; onmouseup=releaseCapture();mainTab.bgColor=""+titleBg+""; onmousemove=if(event.button==1)self.moveTo(screenLeft+event.x-x,screenTop+event.y-y);>"+
" <td width=18 align=center><img height=12 width=12 border=0 src=http:///htmldata/2005-03-27/"+icon+"></td>"+
" <td width="+w+"><span style=font-size:12px;color:"+titleColor+";font-family:宋体;position:relative;top:1px;>"+titleWord+"</span></td>"+
" <td width=14><img border=0 width=12 height=12 alt=最小化 src="http:///htmldata/2005-03-27/+minimizebar+" onmousedown=hhctrl.Click(); onmouseover=this.src="http:///htmldata/2005-03-27/+minimizebar2+" onmouseout=this.src=http:///htmldata/2005-03-27/"+minimizebar+"></td>"+
" <

  随着 Internet的不断发展壮大,Internet 上的网页制作成了一门新兴科学。网页中不可避免地包含着一定数量的图形,因为较多的图像在增加吸引力的同时能给访问者提供更多更直接的信息,同时图像也较少受计算机平台、地域和语种的限制,能使网页更多地显示出制作者的创造力。 

  虽然图像具有上述优势,但是由于图像是在Internet网络上传送,而Internet线路目前的传输速率还不理想,特别是国内大多数用户是通过慢速拨号连入本地的ISP,因此图像的大小在很大程度上影响着网页的下载时间,制作不好的图像文件下载时更会浪费Internet的带宽。

  由此可见我们在制作网页时优化图像的大小是非常关键的,优化后的图像也许仅仅减少了几千个字节,但当页面中不只是一幅图像,或不止一个用户且不止一次地访问该页面时,节省的下载时间和通道带宽将是巨大的。下面我们就浅谈一下制作网页时几种用来优化图形的常用格式。 

  GIF格式 

  GIF(Graphic Interchange Format图形互换格式)是为跨平台消费市场开发的,当时消费者还没有机会使用“高档”的图形卡,大多数计算机的图形颜色比256色还少,所以256色被作为可显示的最高数目。GIF也是Internet上使用最早、应用最广泛的图像格式。GIF格式储存8位/点至l位/点的图像。其原理是减少每点的存储位数以减小图像文件的大小,这就是我们通常所说的减色抖动dithering。准确地说,GIF减少了图像调色板中的色彩数量,从而在存储时达到减小图像文件大小 的目的。该调色板通常并非Windows本身提供的标准凋色板,而是图像优化处理后的调色板。

  现在假定我们制作一幅全色图像(用photoshop的术语就是“RGB模式”),原图为120k的“PSD格式”,准备作成一份GIF的文件之前,必须将它用一个相关的颜色图转换成为一个受限制的8位图像(用photoshop的术语说就是工作于“索引颜色模式”) 

  由表1可看出,保持图像尺寸不变的情况下减少图像中每点的色彩数可以减少图像文件的大小。 
尽管支持的颜色数目较少,GIF格式仍然因拥有一些Web上使用很广泛的特殊效果而留存至今。如:交错效果、透明颜色效果以及GIF89a(动画)效果。 

  交错 

  交错即图像下载时从模糊逐渐到清晰的过程。 

  当你查看一幅本地系统的图像时,通常图像都是一下子就全部显示出来而与用什么方式储存关系不大,但是在Internet网络上就不一样,当通过Internet慢慢地下载一个包括图像的文件,浏览器能边下载边显示收到的内容,此时就可以看到图像文件显示的顺序,GIF默认的存储图像顺序为从上到下、从左到右。当下载到一半时,只显示上半部图像。如果下载得慢而下半部图像是关键部位,则必须等待下半部图像的出现,这对用户来说是相当烦人的。 

  GIF允许图像进行交错处理,此时不再严格地从上到下、一行像素一行像素地显示,而且每隔八行处理一次,然后再填补其间的空隙直到清晰为止。下载过程好比是一幅粗线条的素描变成色彩分明的图像,交错后的GIF文件容量并不变化。这种效果处理主要用于处理一些尺寸比较大的图像。

  GIF89α 

  GIF89α提供的动画实际上由多幅GIF图像组成,浏览器软件以每幅GIF图像定义的时间间隔顺序显示,形成动画效果。 

  我们可以把动画分成以下三种常见的类型 : 

  第一种类型是由多幅内容不相干但具有相同尺寸的GIF图像文件组成的动画文件,在质量允许的情况下,采用上述方法把组成GIF89α动画的每幅GIF文件的色彩数尽可能减少,便可以做到缩小文件。 

  第二种类型,我们仔细观察可以发现大部分动画的第二幅图像只是在第一幅图像的某些区域有一定的变化,因此在第二幅图像中可以只保存不相同区域的内容,这样可以极大地缩小文件。 

  第三种类型是有固定背景的动画,这样只须保存第二幅图像的前景并设背景为透明就可以了。 

  对于第二种和第三种类型我们必须保证组成动画的每幅GIF图像都使用相同的调色板进行减色抖动,同时第二幅图像定位必须准确。 

  如果我们使用一幅200×100(宽×高)点阵作背景,用上面的三种方法分别制作一幅类似于霓虹灯效果的 GIF89a动画交替显示“图像”两个字,我们将会发现三种方法的显示效果完全一样,但用第三种方法优化的文件比用第一种方法优化的小50%(表2)。 

  JPEG格式 

  由Joint Photographic Experts Group提出并因此而得名,是在Internet上被广泛支持的图像格式,JPG支持16M色彩也就是通常所说的24位颜色或真彩色,其典型的压缩比为4:1。

< 1、转化网页为繁体版

  我想使网页既有简体版又有繁体版的,现在已经做好了简体版的了,请问如何把它们转化为繁体版的?

  答:Dreamweaver中就有转化的功能,选择“Modify→Page Properties”打开页面属
性窗口,在“Document Encoding”中选择“繁体Big5码”即可。但这种方法太麻烦,又不支持批量转化。推荐大家使用ConvertZ这个软件,它是一个用来转换GBK/Big5内码的小工具,支持大量文件批量转化及剪贴簿文字内容的转换等,可以到http://nj.onlinedown.net/soft/4376.htm下载。

  2、如何改变鼠标样式

  有些网页很特别,鼠标不是Windows常规的箭头,而是一些十字形、手形等。请问这个是如何制作的?

  答:在Dreamweaver打开CSS Style浮动窗口,按“+”号新建一个样式,OK后进入“Style Definition for xxx”窗口,选择最后一项“Extensions”,并选择右边“Visual Effect”下面的“Cursor”下拉框中的各个选项,即可实现鼠标的各种效果。

  3、如何制作表格虚线

  有些网页表格不是实线的,而是虚线,表格中好像只有实线的呀,请问如何制作表格虚线?

  答:你可以在表格背景中设置一个1×2的图,半黑半白,这样就可以。还有一个办法就是使用CSS,新建一个Style,选择“Redefine HTML Tag”,在下拉菜单中选择“Table”,在弹出对话框中的“Category”里选择“Border”,将Top、Left、Right、Bottom都设成1px,颜色设成你想要的边框的颜色。然后在“Style”下拉框里选择“Dashed”,点“OK”。这样所有的表格都变成虚线的了。

  如果你是一个网站的站长,有大量的文章要用同样的版式做成网页文件,你是否觉得用Dreamweaver或者Frongpage一页一页的制作太麻烦呢?下面这款软件可以帮上您的大忙,它可以根据设定好的版式,一次性的自动将大量文本文件转换成一个完整的网页,这样就可以省却自己手工制作的麻烦,有效的提高了效率。

  软件资料

  软件名称:王子网页转换小精灵
  软件版本:V1.1
  软件大小:516KB
  软件性质:免费软件
  支持平台:Win 9X /Win NT / Win 2000 / Win XP
  下载地址:新浪下载中心

王子网页转换小精灵(以下简称“小精灵”)是一款免费的绿色软件,解压缩后就可以使用。运行软件后界面(如图1),左边为要转换的文件列表,右边为功能按钮。


图1

  首先,把要转换的文件放到同一目录下,在主界面的左边设置好要转换文件的路径,选取好要转换的文件,若有多个文件要选取,可以配合Shift或者Ctrl键选取。在转换前,必须先进行转换的相关设置。点击主界面上写字板图标样的按钮,进入设置窗口。

  在设置窗口中提供了多种选项的设置,下面对每个选项进行具体的说明。

  一、转换类型设置

  小精灵在进行转换时,会根据文件类型有选择地进行转换。默认转换*.txt,*.rtf等文件,若有需要您可以自己增加转换类型,只要输入文件类型的扩展名后,点“增加转换类型”按钮即可。

  二、保存设置

  小精灵支持将转换后的文件保存为htm、html、asp和php后缀,在下拉框中相应的选取,这里以htm为例。点击浏览按钮,可以选择转换后文件的保存位置。

  三、特效设置

  转换后的文件,可以根据需要加入各种特效,以为您的网页增色。如果您要使用其他特效,还可以通过点“收集”按钮进行扩展,只要选择特效的源文件路径和特效名称即可。

  四、公共设置

  公共设置是最重要的设置,它直接关系到输出文件的效果。按要求分别在每个文本框中输入您的网页参数,并设置好图片、颜色、字体等即可(如图2)。


图2

SyntaxHighlighter.highlight();
[!--infotagslink--]

相关文章

  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • 美图秀秀怎么提高图片清晰度 提高图片清晰度教程

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下提高图片清晰度的具体教程,各位想知道具体操作步骤的使用者,那么下面就快来看一看小编分享的这一篇文章吧。...2016-09-14
  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程,抓取HTML,获取标题、描述、图片等信息,并去除HTML,希望对大家有所帮助。...2020-06-25
  • 站长必看:怎么提高广告主转换率

    第一:网站的访问速度,对浏览者来说,这点是非常之重要的,一般来讲,如果一个站点打开速度慢,过了4-5秒还没打开的话,基本上浏览者就会关闭,看下一条信息了,在此bnnet 建议网站首页...2017-07-06
  • 分析网页的几种加密技术

      现在专业性的网站越来越多,许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事,所以大家都想保护自己独创的...2016-09-20
  • $i++ ++$i 运行速度与区别

    关于$i++与++$i是什么区别了,下面来看看这些区别的分别。 <?php 方式一: $begin = time(); $i = 0; while(++$i < 10000) { $j = 0; while(++$j < 10000)...2016-11-25
  • 如何在网页中制作虚线表格

      在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题。  方法一:作一个1X2的图。   半黑半白,再利用表格作成线。这种方法虽然麻烦...2016-09-20
  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息,尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20
  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例,供大家参考学习。...2021-09-22
  • Illustrator设计细腻的网页纹理背景制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们带来的详细的设计细腻的网页纹理背景的制作教程,各位想知道具体制作步骤的,那么下面就快来跟着小编一起看看教...2016-09-14
  • 忠告:网页设计必须注意的29个问题

    当你在INTERNET这个信息的海洋中尽情遨游时,会发现许许多多内容丰富、创意新颖、设计独特的个人网页,不知道你见到这样漂亮可人的网页是否有点心动。一旦你具备了...2016-09-20
  • 哪款手机快充技术最快安全省心呢?全球TOP5手机快充速度对比

    目前来说,处理器芯片厂商一般都会内置快充技术方案。比如说主流的有高通家的Quick Charge 3.0、联发科的Pump Express Plus以及华为SuperCharge。哪款手机快充技术最快安全省心呢?下面为大家带来全球TOP5手机快充速度对比,来看看吧...2017-07-06
  • python 自动刷新网页的两种方法

    这篇文章主要介绍了python 自动刷新网页的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-20
  • 在网页上显示你Google Talk的在线状态

      一个英国人在自己的网站Jon Burrows上推出了一项服务:显示 Google Talk 的在线状态!   下面是先锋 JasonIT 的显示:   大家可以看见,显示有“GTAlk On-Lin...2016-09-20