电信主站 网通分站
购买流程 付款方式 常见问题 在线提问 续租服务 购物车
用户名: 密 码: 忘记密码?
首 页
域名注册
虚拟主机
双线主机
服务器租用
VPS主机
企业邮局
代理专区
客服中心
虚拟主机行业资讯 虚拟主机评测对比 互联网最新动态 技术学院 站长资讯 在线教程 网站运营
搜索优化 服务器 网络编程 图形图象 站长之家 网页制作 操作系统
冲浪宝典 软件教学 视频通信 办公软件 邮件系统 网络安全 认证考试
您当前位置:西部数码->资讯中心-> 网页制作-> 心得技巧
利用html优化加快网页速度_心得技巧教程
作者:网友供稿 点击:0
  西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!虚拟主机可在线rar解压,自动数据恢复设置虚拟目录等.虚拟主机免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金!
文章页数:[1] 

     web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易。无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要。

     明显HTML,暗渡“公用脚本”

     减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件,然后再在页面中按如下方式调用它:

     <script src="http://www.knowsky.com/myfile.js"></script>

     这样,公用文件只需要下载一次,然后就进入缓冲区。等下次再次调用包含公用文件的html页面时,下载时间明显减少。

     让样式表内容进入地下工作

     CSS是HTML装扮器,一个漂亮的Web页面不可能没有它。HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于<style></style>间的样式控制代码提取出来,保存到单独的.css文件中,然后在HTML页面中以<LINK>标记或者@import标记的方式进行引用:

     <style>

     @import url("mysheet1.css");

     </style>


     请注意2点:1、.css文件中无需包括<style>标记;2、@import和LINK标记要定义在HTML页面的HEAD部分。

     宝贵内存节省两法

     尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面,有2个需要注意的问题:

     1、使用同一种脚本语言

HTML页面离不开脚本程序的支持,我们经常会在页面中嵌入多种脚本语言,比如JavaScript与VBScript。但是,不知你发觉没有:这样的混合使用减慢了页面的访问速度。原因在于:要解释并运行多种脚本代码,就必须在内存中装载多种脚本引擎。所以,请尽量在页面中使用同一种脚本语言编写代码。

     2、巧用IFrame

     你使用过<IFRAME>标记吗?它可是一个非常美妙的功能。如果要在一个HTML文档中包含第2个页面的内容,通常的方法是使用<FRAMESET>标记。但是有了<IFRAME>,一切变得简单了。比如,开发一个文档预览页面,可以在左边放置一系列主题,在右边放置一个IFRAME,其中包含要预览的文档;当鼠标掠过左边的每一个主题链接时,就在右边建立一个新的IFRAME以预览文档。这样做,代码效率无疑是高效的,但同时导致了繁重的处理过程,最终是缓慢的速度。

     没关系,我们有办法:只使用单一的IFRAME。当鼠标指向一个新主题时,只需要修改IFRAME元素的SRC属性即可。这样,任何时间内只会有一个预览文档保留在内存。

     择优选用动画定位属性

     每天上网浏览页面,你一定会看到许多动画效果。比如,一个可爱的小兔子在页面上来回地走动 ... 实现这个效果的核心技术就是CCS定位。通常,我们是使用element.style.left和element.style.top2个属性来达到图形定位的目的。但是,这样做会产生一些问题:left属性返回一个字符串,并且其中包含了度量单位(比如100px)。因此,要设定新的位置坐标,就必须首先对这个字符串返回值进行处理,然后才能赋值,象下面一样:

     dim stringLeft, intLeft

     stringLeft = element.style.left

     intLeft = parseInt(stringLeft)

     intLeft = intLeft + 10

     element.style.left = intLeft;

     你一定会感觉做这么点事情竟要编写这么复杂的代码,是否有更简洁的方法?当然有!请看这4个属性:posLeft、posTop、posWidth 和 posHeight,它们对应于相应字符串返回值的点数数值。好了,使用这些属性重新编写代码实现上面代码实现的功能:

     element.style.posLeft += 10

     代码短小、速度却更快!

     循环控制多个动画

     说到制作动画效果,当然离不开定时器的运用。通常的方法就是使用window.setTimeout来不断地定位页面上的元素。但是,如果页面上有多个动画要显示,是不是就要设定多个定时器呢?答案是No!原因很简单:定时器功能将消耗掉大量宝贵的系统资源。可是我们仍能在页面上控制多个动画,技巧就是使用一个循环。在循环中根据不同的变量值控制相应动画的位置,整个循环中只使用一个window.setTimeout()函数调用。

     Visibility快于Display

     让图画时隐时现会创造很有趣的效果,有2种方法可以实现这个目的:使用CSS的visibility属性或者display属性。对于绝对位置元素,diaplay和visibility具有同样的效果。两者的区别在于:设置为display:none的元素将不再占用文档流的空间,而设置为visibility:hidden的元素仍然保留原位置。

     但是如果要处理绝对位置的元素,使用visibility会更快。

     从小处着手

     编写DHTML网页的一个重要提示是:从小处着手。初次编写DHTML页面时,一定不要试图在页面中使用你了解到的全部DHTML功能。每次可以只使用一个单一的新特征,并且仔细地观察由此产生的变化。如果发现性能有所下降,就可以快速地找到为什么。

     脚本的DEFER化

     DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它,但是看完这里的介绍后,相信你就离不开它。它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。

 

     最后请注意两点:

     1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

     2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

     保持同一URL的大小写一致性

     我们都知道UNIX服务器是大小写敏感的,但是你知道吗:Internet Explorer的缓冲区也是区别对待大小写字符串的。因此,作为web开发者,一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则,就会在浏览器的缓冲区中存放同一位置的不同文件备份,也增加了下载同一位置内容的请求次数。这些都无疑降低了web访问效率。所以请谨记:同一位置的URL,在不同页面中请保持URL字符串的大小写一致性。

     让标记有始有终

     自己编写或者查看他人的HTML代码时,我们一定都遇到过标记有头无尾的情况。比如:

     <P>有头无尾标记举例
     <UL>
     <LI>第一个
     <LI>第二个
     <LI>第三个
     </UL>

     很明显,上面的代码中缺少三个</LI>结束标记。但是这并不妨碍它的正确执行。在HTML中,这样的标记还有一些,例如FRAME、IMG和P。

     可是请不要偷懒,请将结束标记写完整,这样做不仅使HTML代码格式规范,更可以加速页面的显示速度。因为Internet Explorer将不会花费时间判断和计算段落或者列表项目在哪里结束。

     <P>有头有尾标记举例</P>
     <UL>
     <LI>第一个</LI>
     <LI>第二个</LI>
     <LI>第三个</LI>
     </UL>

     OK,以上列举了有关加速HTML页面的10个处理技巧,描述这些很简单,但是只有真正领会并掌握其中的本质,并且举一反三,才会编写出更快、更好的程序。


文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!
相关主题
文章页数:[1] 
Google
热门文章
·填充图案的定义和创建_autocad教程
·提高网页下载速度的网页制作方法二则_心得技巧教程
·解密.htm.html.shtm.shtml的区别与联系_心得技巧教程
·介绍三种网页播放器好代码_心得技巧教程
·div不是万能膏药_心得技巧教程
·打开新的窗口与保住页面的referrer_心得技巧教程
·用vb设计更换屏幕保护的程序_visualbasic教程
·了解库搜索路径和命令搜索过程_autocad教程
·做web2.0网站可以参考的十九条规则_心得技巧教程
·robots.txt和robots meta标签_心得技巧教程

最新文章
·经典收藏:网页页面常用的特殊符号_心得技巧教程
·用html和css写出漂亮正规的blog_心得技巧教程
·网站页面的均衡规划与选择_心得技巧教程
·一个网友观点:两年以来使用div排版的经验_心得技巧教程
·photoshop制作“非主流”彩虹色调照片_photoshop教程
·禁止查看网页源代码方法总结_心得技巧教程
·左右图片循环滚动停顿一下后继续_心得技巧教程
·图片左右循环连续滚动代码,解决marquee的留白问题 _心得技巧教程
·zend framework 1.0正式版即将发布_php文摘
·网页中各度量单位的比较_心得技巧教程


 
 


版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!

特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
  打印  刷新  关闭
返回首页 |关于我们 | 联系我们 | 付款方式 | 创业联盟 | 虚拟主机 | 资讯中心 | 友情链接 | 网站地图

版权所有 西部数码(www.west263.com)
CopyRight (c) 2002~2006 west263.com all right reserved.
公司地址:四川成都市万和路90号天象大厦4楼 邮编:610031
电话总机:028-86262244 86263048 86263408 86263960 86264018 86267838
售前咨询:总机转201 202 203 204 206 208
售后服务:总机转211 212 213 214
财务咨询:总机转224 223 传真:028-86264041 财务QQ:点击发送消息给对方635483282
售前咨询QQ:点击发送消息给对方2182518 点击发送消息给对方241975952 点击发送消息给对方275026793 点击发送消息给对方408235859
售后服务QQ:点击发送消息给对方17708515 点击发送消息给对方307742704 点击发送消息给对方287976517 点击发送消息给对方363783715
《中华人民共和国增值电信业务经营许可证》编号:川B2-20030065号