20 种提升网页速度的技巧.docx
- 文档编号:9491945
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:20
- 大小:345.81KB
20 种提升网页速度的技巧.docx
《20 种提升网页速度的技巧.docx》由会员分享,可在线阅读,更多相关《20 种提升网页速度的技巧.docx(20页珍藏版)》请在冰豆网上搜索。
20种提升网页速度的技巧
20种提升网页速度的技巧
您希望加快网页的加载速度吗?
了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短80%。
引言
不是所有人都能够使用高速Internet连接。
即使每个人都能够使用高速网络,也会因为各种各样的原因使您的Web应用程序看起来运行缓慢。
在这个宽带速度不断提高的时代,您应当关注一下页面加载时间。
将珍贵的页面加载时间缩短几秒,将更加珍贵的请求和响应时间缩短几毫秒。
您将为访问者创造一种更好的体验。
阅读完本文之后,您将能够较好地了解网页加载时间优化的基本知识。
您还能够使用工具和知识更好地识别和判断加载缓慢的页面部分和瓶颈。
先决条件
在理想情况下,您应该安装了MozillaFirefox。
您还应该大体了解Web开发。
本文涉及的主题并不复杂,但是如果您了解超文本标记语言(HypertextMarkupLanguage,HTML)、层叠样式表(CascadingStyleSheet,CSS)以及™编程语言等主题,那么在学习本文时将更加得心应手。
不需要使用集成开发环境(IDE),只需使用您喜爱的编辑器。
您必须在浏览器中启用了JavaScript。
另外,要学习与Firebug和YSlow相关的内容,您需要安装FirefoxWeb浏览器。
假设您没有宽带
许多人通过某种形式的宽带连接访问Internet,这些形式可能是DSL、网线、光纤或其他方法。
但是,无法使用这类技术的用户不得不使用拨号连接。
您一定已经忘记拨号上网是什么感觉了,但您可以试着回想一下网页逐行加载时的情形。
幸运的是,这些可怜的人们现在已经能够获得一些帮助。
您可以通过缩短加载页面的时间来改善他们的体验。
但是,拨号连接并不是降低加载和响应速度的惟一原因。
许多Web设计人员错误地认为高速Internet连接的到来会使网站性能优化变得没有必要。
这种观点是不对的。
例如,过去使用桌面软件执行的许多任务现在可以在线执行。
在Web应用程序中获得像桌面软件那样的高速响应体验非常困难,因此性能优化非常重要。
幸运的是,一些工具和最佳实践可用于缩短响应和加载时间,提供更加流畅的体验。
基本工具
对于所有与优化相关的任务,您必须使用工具来诊断瓶颈和识别问题。
现在在Web开发中使用最广泛的两个工具是Firebug和YSlow,它们都是开源、免费的Firefox插件。
Firebug
Firebug(参见 参考资料)是最流行的Firefox扩展之一,该应用程序能够使Web开发人员的工作更加轻松。
它包含许多非常有用的功能,比如:
∙JavaScript调试
∙JavaScript命令行
∙监视JavaScript性能和跟踪 XmlHttpRequests
∙登录Firebug控制台
∙跟踪
∙检查HTML元素和动态编辑HTML代码
∙动态编辑CSS文档
YSlow
YSlow(参见 参考资料)分析网页,并根据Yahoo!
起草的高性能网站规则(参见 参考),告诉您网页加载缓慢的原因。
YSlow是一个与Firebug集成的Firefox插件,因此您需要首先安装Firebug,然后才能安装和使用YSlow。
安装Firebug
两个Firefox扩展的安装过程都非常简单。
要安装Firebug,执行以下步骤:
1.打开Firefox,转到 Firebug主页。
2.安装最新版的Firebug。
3.如果Firefox配置为阻止弹出窗口,单击 Allow 允许打开安装窗口。
否则,单击 InstallNow。
4.重启Firefox。
您现在可以从Tools菜单访问Firebug。
可以在新窗口或现有窗口中打开Firebug(参见 图1)。
图1.Firefox起始页的FirebugHTML和Style视图
安装YSlow
安装Firebug之后,接下来安装YSlow。
为此,执行以下步骤:
1.打开Firefox,然后转到 YSlow主页。
2.安装插件,然后重启Firefox。
注意:
与许多其他Firefox扩展不同,YSlow不会自动启动。
必须首先激活它。
3.要激活YSlow,在状态栏右键单击其图标,然后单击 Autorun。
图2 显示了YSlow性能分析的结果。
图2.Firefox起始页的YSlow性能分析
常识:
牢记设计规则
令人惊讶的是简单的设计规则通常会被忽视,最终产生未经优化的、下载缓慢的网页。
牢记以下规则,页面的加载速度将会更快。
使用良好的结构
可扩展HTML(XHTML)具有许多优势,但是其缺点也很明显。
XHTML可能使您的页面更加符合标准,但是它大量使用标记(强制性的
所以,事情都有两面性,尝试在您的网页中使用较少的XHTML代码,以减小页面大小。
如果您确实不得不使用XHTML,试着尽可能对它进行优化。
例如,删除空格并采用严格的XHTML编码实践,提高下载和解析速度。
要严格执行XHTMLStrict规则,向文档中添加以下 doctype 语句:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0Strict与StrictHTML4.01是等效的,包含的属性和元素没有出现在HTML4.01规范的反对内容中。
记住,有两个标记能够在XHTMLTransitional中使用,但不能在XHTMLStrict中使用,例如:
∙
∙
∙
∙
∙
不要使布局超载
在博客(和新的站点)流行起来之前,让页面水平滚动甚至垂直滚动被认为是糟糕的实践。
页面越小,越难以(但并不是不可能)完好地填充屏幕。
现在,对于博客和内容驱动的网站,不时可以看到几百Kb大小的长页面。
是的,您需要填充更多空间,但是这并不意味着您必须使用大的背景图像、大量表格或者许多内容来填充。
坚持简约原则:
少即是多。
页面中充斥着各种类型的图像、视频、广告等,这大大违背实用性原则,因此,在增加页面的内容时请三思。
不要使用图像来表示文本
我们很少会控制字体在不同浏览器中的显示方式,与字体不同的是,图像总是精确地按照其设计方式来显示。
但这不能当作使用图像来表示文本的借口。
使用图像表示文本的最常见示例就是在导航栏中。
美观的按钮更加具有吸引力,但是它们的加载速度很慢。
此外,图像仍然不能由搜索引擎直接索引,因此,使用图像进行导航不利于搜索引擎优化(searchengineoptimization,SEO)。
当无需图像就可以通过大量CSS技巧创建漂亮的按钮时,绝不使用图像来表示文本。
一种适用于CSS样式的特定导航类型就是选项卡式导航,如 图3 所示。
图3.选项卡式导航
除了体积较小之外,这种实现导航的方式也更加符合Web标准。
遵循统称为 Web标准 的一组最佳实践的网站具有精简性、可访问性、搜索引擎友好性、适用性和基于CSS的特征。
清单1 和 清单2 中的代码以纯CSS/XHTML的形式实现基于选项卡的导航功能。
清单1.基于选项卡导航的CSS文档
#nav{
float:
left;
width:
100%;
background:
#E7E5E2;
font-size:
95%;
line-height:
normal;
border-bottom:
1pxsolid#54545C;
}
#navul{
margin:
0;
padding:
10px10px050px;
list-style:
none;
}
#navli{
display:
inline;
margin:
0;
padding:
0;
}
#nava{
float:
left;
background:
url("tableftK.gif")no-repeatlefttop;
margin:
0;
padding:
0004px;
text-decoration:
none;
}
#navaspan{
float:
left;
display:
block;
background:
url("tabrightK.gif")no-repeatrighttop;
padding:
5px15px4px6px;
color:
#FFF;
}
/*CommentedBackslashHackhidesrulefromIE5-Mac\*/
#navaspan{float:
none;}
/*EndIE5-Machack*/
#nava:
hoverspan{
color:
#FFF;
background-position:
100%-42px;
}
#nava:
hover{
background-position:
0%-42px;
}
#nava:
hoverspan{
background-position:
100%-42px;
}
清单2.基于选项卡导航的HTML代码
Link1 Link2 Link3 LongerLinkText Link5
检查cookie使用情况
cookie可能是很小的文件,但是浏览器仍然需要下载它们。
较大的cookie所需的下载时间更长,进而增加了浏览器加载网页的时间。
正因为如此,尽可能缩小cookie来最小化对浏览器响应时间的影响非常重要。
此外,设置一个较早的 expire 日期或者根本不设置 expire 日期,会缩短响应时间。
要在PHP语言中设置cookie的 expire 日期,使用以下代码:
php
$expire=2592000+time();
//Add30day’stothecurrenttime
setcookie(userid,“123rrw3”,$expire);
?
>
这段代码设置cookie userid,并将 expire 日期设置为自当前日期之后30天。
不要包含不必要的JavaScript代码,尽可能将其外部化
与cookie类似,JavaScript文件的下载也需要时间,这不可避免地会降低整个页面的加载速度。
因此,明智地使用JavaScript(仅在真正必要时才使用)并优化脚本的大小和速度。
缩短JavaScript下载时间的另一种方式是使用外部文件,而不是包含脚本内联。
这种方法也适用于CSS,因为浏览器会缓存外部化的文本,而(在HTML页面自身中)以内联方式编码的CSS或JavaScript每次都会随HTML一起加载。
要通过在HTML中引用CSS和JavaScript代码来外部化它们,可以使用具有以下形式的代码:
尽可能避免使用表格
表格被用作网页的主要构建块,但是作为页面布局元素,使用表格现在被认为是糟糕的做法。
有时候,您必须使用表格(并且它们被认为是显示表格数据的出色实践)。
如果是这样,明确地指定表格单元格、行和列的宽度和高度,否则,浏览器必须执行许多操作来计算如何显示它们,这会降低页面加载速度:
删除任何不必要的元素
可能这是所有技巧中最显而易见的一个,但是它也是最容易忘记的一个技巧。
我曾经提到过“少即是多”:
这不仅是为了真正吸引更广泛的用户,还意味着需要下载和处理的东西更少。
如果您真正需要在网页上放置许多内容,考虑将网页分为2个、3个或更多的独立页面。
一些优化网页的技巧
可以使用许多方法来优化您的网页,包括压缩JavaScript文件,使用超文本传输协议(HypertextTransferProtocol,HTTP)压缩,以及设置图像大小。
压缩和缩小JavaScript文件
JavaScript文件可能非常大,这意味着在某些情形中,它们的下载时间可能比所有其他组件下载时间之和还长。
解决此问题的一种方法是压缩JavaScript文件。
您可以使用GNUzip(gzip)来完成此任务,因为许多浏览器都支持这种压缩算法。
另一种替代方法是缩小文件。
这种方法删除代码中所有不必要的字符,比如制表符(tab)、新行和空格。
它删除代码中的注释和空白,进一步缩小文件大小。
外部和内部样式表都可以缩小。
两种最流行的缩小工具是JSMin和YUICompressor(参见 参考资料)。
使用HTTP压缩,并始终使用小写的div和类名
可以使用HTTP压缩来减少服务器与浏览器之间的通信量。
可以在Apache中配置HTTP压缩(.htaccess文件),或者可以将其包含到页面中(对于PHP,可以使用一个 HTTP_ACCEPT_ENCODING 选项)。
但是请注意:
不是所有浏览器都支持压缩。
即使是支持压缩的浏览器,压缩和解压缩都会加重处理器的负载。
要在Apache中启用地毯式(blanket)压缩(即压缩所有文本和HTML),使用以下命令:
AddOutputFilterByTypeDEFLATEtext/htmltext/plaintext/xml
另外,考虑一下您想要压缩的内容。
图像、音乐和视频在创建时已经进行了压缩,因此您可以将压缩对象限制为HTML、CSS和JavaScript文件。
另一种减少压缩工作的技巧是使用小写形式的
由于大小写敏感性,并且使用的是无损压缩,
在下面的例子中,对于压缩程序来说,Important 类与 important 类是不同的,这意味着对于压缩程序,它们表示不同的对象,因此被分别压缩为两段不同的文本。
留意细节似乎无关紧要。
但是当您优化文件时,所有细微的细节都应考虑在内。
设置图像大小
与表格单元格、行和列一样,当您未明确设置图像大小时,浏览器需要执行计算来显示图像,这会降低处理速度。
此外,在某些情形下,图像大小的计算结果可能不正确,因此图像会发生变形。
将CSS图像映射用于装饰功能
使用图像映射代替多个图像,这是另一种缩短加载时间的方式,因为同时下载图像的各个独立部分能够加快整个页面的下载进度。
或者,您可以使用某种名为 CSSsprites 的工具(参见 参考资料)。
CSSsprites可帮助减少HTTP请求的数量。
一个图像可以包含装饰或布置页面所需的所有图像元素。
您使用CSS来选择(通过调用某些位置和维度)用于特定元素的映射。
尽可能延迟脚本加载
我 在前面 提到过,移除完全不需要的JavaScript代码能够加快加载和处理速度。
但是如果代码已经非常精简并且必须在页面中包含JavaScript代码的话,该怎么办?
在这种情形下,一种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。
通常,浏览器只能(从同一个域)下载不超过两个并行对象,如果一个对象是一段JavaScript代码,那么在该脚本下载完之前,其他页面组件的下载将会暂停。
如果将JavaScript代码放在页面底部,(在大多数情况下)它将在最后下载,这时所有其他组件都已下载完。
使用Firebug扩展跟踪加载缓慢的文件,我敢打赌您的JavaScript文件是下载最慢的文件。
压缩JavaScript文件会有所帮助,但是仅仅这样可能还不够。
您可以使用以下代码片段延迟JavaScript的加载:
vardelay=5;
setTimeout("heavy();",delay*1000);
这段代码将对 heavy() 方法的调用延迟了5秒。
您可以将这段代码与下面的技巧结合使用来延迟整个JavaScript文件的加载。
按需加载JavaScript文件
要按需加载JavaScript,使用import()函数,如 清单3 所示。
清单3.import()函数
function$import(src){
varscriptElem=document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
//importwitharandomqueryparametertoavoidcaching
function$importNoCache(src){
varms=newDate().getTime().toString();
varseed="?
"+ms;
$import(src+seed);
}
验证函数加载
也可以验证一个函数是否被加载,如果没有,加载JavaScript文件。
为此,使用 清单4 中的代码。
清单4.验证函数是否被加载
if(myfunction){
//Thefunctionhasbeenloaded
}
else{//Functionhasnotbeenloadedyet,soloadthejavascript.
$import('
}
注意:
可以使用 defer 属性,但不是所有浏览器(包括Firefox)都支持它。
优化CSS文件
如果经过适当优化和维护,CSS文件不一定很大。
例如,具有很多独立类的CSS文件会影响下载速度。
与JavaScript文件一样,您需要优化CSS文件,使其包含所需的所有内容,同时保持合理的大小。
另外,使用外部文件代替内联定义来适应浏览器的缓存机制。
使用内容分布网络
内容分布网络(Content-distributionnetwork,CDN)是另一种缩短下载时间的好方法。
当您将静态图像放在Internet上的许多服务器上时,用户能够从离他们最近的服务器下载这些图像。
此外,大多数CDN都在快速服务器上运行,因此无论服务器的加载速度如何,其响应速度都比小型的超载服务器快。
对资产使用多个域来增加连接
CDN的另一个优势是它们是独立的域。
因为您的浏览器将并发连接的数量限制到一个单一的域,因此无论何时加载一个页面,都很容易占满所有线程。
因此,到其他资产的连接被延迟了。
然而,您的浏览器能够打开新线程或到其他域的连接,这样,从另一个域加载的任何资产都可以与其他所有资产同时加载。
在合适的时候使用GoogleGears
使用GoogleGears(参见 参考资料)是避免用户反复下载同一内容的另一种好方法。
Gears允许用户离线访问Web应用程序,但是也允许将页面元素持久化到用户的计算机上。
因此,频繁加载但未进行更新的内容可以存储在Gears数据库中,该数据库是一个SQLite3关系数据库管理系统。
对同一内容的所有 next 请求都可以从数据库(而不是服务器)直接加载。
安装Gears之后,获取gears_init.js文件,以便轻松访问 Gears工厂和应用程序编程接口(API),将其保存为 gears_init.js,通过以下方式在您的代码中引用它:
要确定是否已安装Gears,使用 清单5 中的代码。
清单5.确定是否已安装Gears
if(!
window.google||!
google.gears){
location.href="message>"
+"&return=
}
如果未安装Gears,代码将向您提供下载Gears的URL。
当所有元素都通过验证并且Gears已安装之后,您可以测试Gears的极其有用的数据库功能,使用 清单6 中的JavaScript代码。
清单6.测试数据库功能
vardb=google.gears.factory.create('beta.db');
db.open('database-test');
db.execute('createtableifnotexistsTest'+
'(Phrasetext,Timestampint)');
db.execute('insertintoTestvalues(?
?
)',['Monkey!
',newDate(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 20 种提升网页速度的技巧 提升 网页 速度 技巧
![提示](https://static.bdocx.com/images/bang_tan.gif)