前端开发 25种提高网页加载速度的方法和技巧

您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短80%。下面介绍二十五中网速方法和技巧。

一、使用良好的结构

可扩展HTML(XHTML)具有许多优势,但是其缺点也很明显。XHTML可能使您的页面更加符合标准,但是它大量使用标记(强制性的和标记),这意味着浏览器要下载更多代码。所以,事情都有两面性,尝试在您的网页中使用较少的XHTML代码,以减小页面大小。如果您确实不得不使用XHTML,试着尽可能对它进行优化。

二、不要使布局超载

坚持简约原则:少即是多。页面中充斥着各种类型的图像、视频、广告等,这大大违背实用性原则。

三、不要使用图像来表示文本

使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力,但是它们的加载速度很慢。此外,图像仍然不能由搜寻引擎直接索引,因此,使用图像进行导航不利于搜寻引擎优化(searchengineoptimization,SEO)。当无需图像就可以通过大量CSS技巧创建漂亮的按钮时,绝不使用图像来表示文本。

四、检查cookie使用情况

设置一个较早的expire日期或者根本不设置expire日期,会缩短响应时间。要在PHP语言中设置cookie的expire日期,使用以下代码:

这段代码设置cookieuserid,并将expire日期设置为自当前日期之后30天。

五、不要包含不必要的JavaScript代码,尽可能将其外部化

应该明智地使用JavaScript(仅在真正必要时才使用)并优化脚本的大小和速度。缩短JavaScript下载时间的另一种方式是使用外部文件,而不是包含脚本内联。这种方法也适用于CSS,因为浏览器会缓存外部化的文本,而(在HTML页面自身中)以内联方式编码的CSS或JavaScript每次都会随HTML一起加载。

六、尽可能避免使用表格

表格被用作网页的主要构建块,但是作为页面布局元素,使用表格现在被认为是糟糕的做法。有时候,您必须使用表格(并且它们被认为是显示表格数据的出色实践)。如果是这样,明确地指定表格单元格、行和列的宽度和高度,否则,浏览器必须执行许多操作来计算如何显示它们,这会降低页面加载速度。

七、删除任何不必要的元素

可能这是所有技巧中最显而易见的一个,但是它也是最容易忘记的一个技巧。如果您真正需要在网页上放置许多内容,考虑将网页分为2个、3个或更多的独立页面。

八、一些优化网页的技巧

可以使用许多方法来优化您的网页,包括压缩JavaScript文件,使用超文本传输协议(HypertextTransferProtocol,HTTP)压缩,以及设置图像大小。

九、压缩和缩小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文件。另一种减少压缩工作的技巧是使用小写形式的元素和类名。由于大小写敏感性,并且使用的是无损压缩,与不同,它们被压缩为两个不同的标记。

十一、设置图像大小

与表格单元格、行和列一样,当您未明确设置图像大小时,浏览器需要执行计算来显示图像,这会降低处理速度。

十二、将CSS图像映射用于装饰功能

使用图像映射代替多个图像,这是另一种缩短加载时间的方式,因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者,您可以使用某种名为CSSsprites的工具。CSSsprites可帮助减少HTTP请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用CSS来选择(通过调用某些位置和维度)用于特定元素的映射。

十三、尽可能延迟脚本加载

一种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。通常,浏览器只能(从同一个域)下载不超过两个并行对象,如果一个对象是一段JavaScript代码,那么在该脚本下载完之前,其他页面组件的下载将会暂停。如果将JavaScript代码放在页面底部,(在大多数情况下)它将在最后下载,这时所有其他组件都已下载完。

十四、按需加载JavaScript文件

要按需加载JavaScript,使用import()函数。

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文件。

验证函数是否被加载:

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请求都可以从资料库(而不是伺服器)直接加载。

二十、使用PNG格式的图像

GraphicInterchangeFormat(GIF)和JointPhotographicExpertsGroup(JPEG)图像格式都已过时了:PortableNetworkGraphic(PNG)是未来流行的格式。当然,您可以说GIF和JPEG已经消亡,或者PNG没有任何缺陷,但是所有事物都有各自的优缺点,PNG

以最佳的文件大小提供了出色的质量。因此,如果进行选择的话,应该尽可能使用PNG图像。

二十一、保持Ajax调用简短、准确

当统称为AsynchronousJavaScript+XML(Ajax)的技术在两年前出现时,这些技术为处理页面请求和响应提供了一种革命性方法。然而,拨号用户可能从来没机会体验其真正的优势,因为在许多情形下,Ajax需要在浏览器与伺服器之间大量通信。因此,如果您能够保持Ajax调用简短和准确,可以避免用户花费无止尽的时间来等待元素刷新或响应。

二十二、进行一次较大的Ajax调用并在本地处理客户机数据

如果不能进行简短的Ajax调用,或者如果这些调用不能提供期望的结果,可以考虑一种替代方法:进行一次大的Ajax调用来获取所需的一切内容,然后让客户机在本地处理数据。通过这种方式,客户机只需等待一次(获取传入的数据),但是在此之后(当浏览器与伺服器之间没有必要通信时),处理速度将更快。当然,还有大量Ajax优化技术,本教程无法一一列出。

二十三、在沙箱中测试代码

还有一个经常被遗忘的常用技巧。尽管清醒的Web开发人员通常会在启动应用程式之前对其进行测试,但是有时候测试会使他们不那么重视维护任务,或者新功能添加得太快,并且未经过充分考虑或测试。结果,余下的脚本减缓了应用程式的速度。如果您添加一项新功能,可以首先在沙箱里(完全脱离了应用程式的其余部分)进行测试,查看它作为单个函数的行为。通过这种方式,您可以反覆检查,并分析性能和响应时间,无需考虑

Web应用程式的其余部分。然后,当新功能的行为符合预期时,可以将其引入到应用程式的其余部分中,运行其他测试,保证功能本身的行为符合预期。

二十四、分析站点代码

在许多场景中,自我反省是一个不错的建议。幸运的是,在开发过程中,我们可以使用工具来帮助反省,并尽可能客观地进行实践。像JSLint(参见参考资源)这样的工具的价值是无法衡量的,尽管其站点宣称它「可能令您备受挫折」,因为它向您提供了所有的潜在代码缺陷,这些缺陷不但使调试更加困难,而且可能导致更长的响应时间。

二十五、检查孤立的文件和丢失的图像

检查孤立的文件和丢失的图像是一种明智之举。大部分Web开发人员都会检查错误的文件引用,但是这里仍然需要说明一下。丢失的文件容易引起各种问题,因为它们会导致「Theimage/pagecannotbedisplayed」

之类的错误消息。但是在网页速度优化方面,它们具有更大的缺陷:当浏览器寻找丢失的或孤立的文件时,它会消耗资源,这不可避免地会导致页面处理速度变慢。因此,请检查孤立或丢失的文件,包括拼写错误的文件名。

最后,想学习交流的可以一起讨论加web前端交流群:499538916