HTML也加速

Web开发人员是否必须掌握复杂的组件技术才能加快HTML页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易。无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要。
1.明显HTML,暗渡“公用脚本”
减少Web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件,然后再在页面中按如下方式调用它:
<script src="myfile.js"></script>
这样,公用文件只需要下载一次,然后就进入缓冲区。等下次再次调用包含公用文件的HTML页面时,下载时间明显减少。
2.让样式表内容进入地下工作
CSS是HTML装扮器,一个漂亮的Web页面不可能没有它。HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于<style></style>间的样式控制代码提取出来,保存到单独的.css文件中,然后在HTML页面中以<LINK>标记或者@import标记的方式进行引用:
<style>
@import url("mysheet1.css");
</style>
请注意:
(1)css文件中无需包括<style>标记。
(2)@import和LINK标记要定义在HTML页面的HEAD部分。
3.宝贵内存节省两法
尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面,有2个需要注意的问题:
(1)使用同一种脚本语言:
HTML页面离不开脚本程序的支持,我们经常会在页面中嵌入多种脚本语言,比如javascript与VBScript。但是,这样的混合使用减慢了页面的访问速度。原因在于:要解释并运行多种脚本代码,就必须在内存中装载多种脚本引擎。所以,请尽量在页面中使用同一种脚本语言编写代码。
(2)巧用IFrame:
你使用过<IFRAME>标记吗?它可是一个非常美妙的功能。如果要在一个HTML文档中包含第2个页面的内容,通常的方法是使用<FRAMESET>标记。但是有了<IFRAME>,一切变得简单了。比如,开发一个文档预览页面,可以在左边放置一系列主题,在右边放置一个IFRAME,其中包含要预览的文档;当鼠标掠过左边的每一个主题链接时,就在右边建立一个新的IFRAME以预览文档。这样做,代码效率无疑是高效的,但同时导致了繁重的处理过程,最终是缓慢的速度。没关系,我们有办法:只使用单一的IFRAME。当鼠标指向一个新主题时,只需要修改IFRAME元素的SRC属性即可。这样,任何时间内只会有一个预览文档保留在内存。
4.择优选用动画定位属性
每天上网浏览页面,你一定会看到许多动画效果,比如一个可爱的小兔子在页面上来回地走动。实现这个效果的核心技术就是CCS定位。通常,我们是使用element.style.lef和element.style.top这两个属性来达到图形定位的目的。但是,这样做会产生一些问题: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
代码短小、速度却更快!
5.循环控制多个动画
说到制作动画效果,当然离不开定时器的运用。通常的方法就是使用window.setTimeout来不断地定位页面上的元素。但是,如果页面上有多个动画要显示,是不是就要设定多个定时器呢?答案是No!原因很简单:定时器功能将消耗掉大量宝贵的系统资源。可是我们仍能在页面上控制多个动画,技巧就是使用一个循环。在循环中根据不同的变量值控制相应动画的位置,整个循环中只使用一个window.setTimeout()函数调用。
6.Visibility快于Display
让图片时隐时现会创造很有趣的效果,有2种方法可以实现这个目的:
(1)使用CSS的visibility属性或者display属性。对于绝对位置元素,diaplay和visibility具有同样的效果。
(2)两者的区别在于:设置为display:none的元素将不再占用文档流的空间,而设置为visibility:hidden的元素仍然保留原位置。
但是如果要处理绝对位置的元素,使用visibility会更快。
7.从小处着手
编写DHTML网页的一个重要提示是:从小处着手。初次编写DHTML页面时,一定不要试图在页面中使用你了解到的全部DHTML功能。每次可以只使用一个单一的新特征,并且仔细地观察由此产生的变化。如果发现性能有所下降,就可以快速地找到为什么。
8.脚本的DEFER化
DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它,但是看完这里的介绍后,相信你就离不开它了。它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。
<SCRIPT DEFER>
function UsedLater()
{
//用户与页面交互操作时才使用到的函数
}
</SCRIPT>

<JAVA SCRIPT>
//立即要执行的脚本程序
document.write("<H1>Immediate Gratification<H1>");
</SCRIPT>
最后请注意两点:
(1)不要在DEFER型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。
(2)而且,不要在DEFER型脚本程序段中包括任何立即执行脚本,要使用的全局变量或者函数。
9.保持同一URL的大小写一致性
我们都知道UNIX服务器是大小写敏感的,但是你知道吗,Internet Explorer的缓冲区也是区别对待大小写字符串的。因此,作为web开发者,一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则,就会在浏览器的缓冲区中存放同一位置的不同文件备份,也增加了下载同一位置内容的请求次数。这些都无疑降低了web访问效率。所以请谨记:同一位置的URL,在不同页面中请保持URL字符串的大小写一致性。
10.让标记有始有终
自己编写或者查看他人的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>

时间: 2025-01-30 09:47:06

HTML也加速的相关文章

飞鱼星路由器TCP/IP优化加速

任何的网络都有一定的带宽,如果带宽占满了,那么我们就无法再获得更快的体验,这时很多人都会选择添加一条新的线路,或是增加原本的带宽,其实不然,可以通过TCP/IP优化加速来解决这个问题,本篇以飞鱼星路由器为例分析. 一.解决这个问题的一个方法是优化现有技术方案.许多网络流量仍然基于TCP/IP.TCP提供了可靠有序的数据包传输,大多数Web应用.电子邮件和文件传输都使用这种协议.可是,TCP的流管理算法并不先进:如果网络或接收端无法处理发送的传输速度,其表现是出现丢包.超时或乱序数据包过多等问题,

合理利用大数据 助力中国各产业加速发展

随着物联网的应用及智慧产业的爆发,"大数据"这个词汇再次高频度地出现在人们的视线中,围绕大数据做文章也相应催生出了农业大数据.工业大数据.健康大数据.旅游大数据等一批行业领域的大数据概念.作为各行各业智能化变革的重要组成部分,"如何利用大数据"成为传统企业和新兴互联网厂商争相涌入的新一片蓝海. 合理利用大数据助力中国各产业加速发展 智慧产业的应用简单来说,需要依托传感前端的智能感知或者数据采集,经过数据筛选.分析等处理,最终根据业务需求提供服务应用的一个过程.其中,

WebSphere反向投资者: 用于加速应用程序部署的选项

在每篇专栏文章中,"WebSphere 反向投资者"将回答问题.提供指导和讨论与 WebSphere 产品相关的基础主题,经常会给出与流行的看法相悖的经过实践验证的建议. 送给您的礼物 又到假日了,这意味着每个人都在忙着完成当年的项目.购物,以及各种各样的传统年终任务.所有这些活动可能意味着您会欢迎任何节省时间的技巧,因为您可能有太多的事情需要处理,但是却只有太少的时间去全部完成.为了尽自己的一份力量帮助您提高效率,我将在本月的专栏中花些时间提供一些用于加速 IBM WebSphere

win7系统开机加速全攻略

1分钟.两分钟还在闲你电脑开机慢吗?别老把电脑开机慢归结于电脑硬件不好,其实导致开机慢的原因很大一部分是因为软件的原因,今天系统之家小编给大家带来这篇文章就是要帮大家解决电脑开机慢的问题. Windows7系统开机加速方法: 1.禁用不需要的启动项 这一步的操作和XP 下完全一样,建议使用第三方软件来清理启动项,因为有的软件会自我隐藏,在系统自带的配置工具中是无法看到其启动的.不是Windows 7不给力,实在是现在的软件太流氓了,连个暴风影音也要开机启动,播放器有开机启动的必要么?另外,这里还

Magento加速利器——lazyload

  Magento的速度是令人头疼的问题,我现在介绍一种前端的加速方法.说到lazyload,相信很多人都不陌生,现在很多网站都已经用到这个技术,他可以延迟加载长页面的图片.对于Magento这样的商城网站的加速就很明显了.我今天说的这个lazyload是经过POPO改造的(强逼我给他加外连--).下面我放一些测试的数据,我正在做的一个网站的列表页. 很明显的就能看出差距.接下来写下用法: 首先加上jQuery,lazyload两段js. lazyload: (function($) { $.f

CDN加速:让内容离用户更近

在互联网+时代,人民越来越依赖互联网获取信息,生活服务,娱乐等.流畅的用户访问体验是所有互联网产品获得用户认可和长期发展的基本前提.但如今网页中包含的元素也越来越丰富,有大量的图片.Flash.动画等内容,文件下载的数据量也在飞速上升,加上网络游戏,网络视频,直播等需要高带宽的业务蓬勃发展,对服务器和网络带宽的压力越来越大.21世纪是讲究效率的时代,唯快不破,互联网领域还存在着一个八秒定律,指用户访问一个网站时, 如果等待网页打开的时间超过8秒,会有超过70%的用户放弃等待.网站访问速度的快慢给

Win8开机密码怎么取消 Win8开机加速教程

  小编用Win8系统也有近2年时间了,虽然是以启动速度快著称,但是开机后的锁屏以及开机密码,严重拖慢系统启动速度!所以就今天试试搞定他们,加快启动到桌面了.故,有了今天这文章"Win8开机密码怎么取消 Win8开机加速教程".无需任何第三方软件,手动全搞定!适合Win8/Win8.1. Win8开机加速图文教程 开机后最先看到的就是锁屏了,我们先来说说怎样去除锁屏.虽然他能显示时间,日期,甚至一些应用的通知消息,但这也不能吸引我多停留一秒. 这里需要用到注册表,我们打开搜索,输入 r

测试一下PHP官方的新一代PHP加速插件ZendOpcache的性能及配置

过程不表,都比较顺利 参考如下URL: http://www.lvtao.net/server/ZendOpcache.html 大家知道目前PHP的缓存插件一般有三个:APC.eAccelerator.XCache,但未来它们可能都会消失,因为PHP 5.5已经集成ZendOpcache,功能和前三者相似但又有少许不同,缓存速度据说比它们更快(注意:只是据说,我没测试过). 这几个PHP加速插件的主要原理都相同,就是把PHP执行后的数据缓冲到内存中从而避免重复的编译过程,能够直接使用缓冲区已编

成本、速度的决择-增加带宽、选择DDN,还是加速方案?

面对网络应用速度慢的问题,我们可以有多种解决办法,例如在本专题的典型案例应用剖析中,我们会发现,例如增加企业网络接入带宽.采用DDN专线.采用双线接入.广域网加速等.然而,对于一个特定网络应用来说,企业需要选择一种合适的解决办法,需要在成本.效率.效果等几个方面进行平衡. 因此,本文讨论的焦点是,企业对于互联网这个基础设施建设方式的选择背后的效能和成本的投资收益论,并为企业解决网络应用业务提供最优的方案. 一.选择第一步:认清企业应用互联网的业务类别与关键问题 要选择一种合适的网络应用速度慢的解

搜狗浏览器五级加速 堪比战神GT-R

两年前,德国纽柏林北环赛道刷新纪录,NISSAN GTR以7分26秒70的成绩一举超越保时捷997 GT2及纽博格林北环之王保时捷Carrera GT,远远抛离法拉利F430,此成绩为全球量产车的世界最高水准,进一步夯实了"公路战神"的名号. 而在互联网的世界里,完美的上网方式是搜狗高速浏览器不懈追求的极致,也是用户体验互联网速度与激情的终极梦想.用户通过浏览器实现对互联网的不断探索,而搜狗高速浏览器五级加速体系的设计,就如同浏览器界的GTR,搭载我们逛飚在互联网这条信息高速公路之上.