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

尊重原创:http://blog.csdn.net/wxzking/article/details/4089384


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

一、使用良好的结构
可扩展 HTML (XHTML) 具有很多优势。可是其缺点也非常明显。XHTML 可能使您的页面更加符合标准,可是它大量使用标记(强制性的 <start> 和 <end> 标记),这意味着浏览器要下载很多其它代码。所以,事情都有两面性,尝试在您的网页中使用较少的 XHTML 代码。以减小页面大小。

假设您确实不得不使用 XHTML。试着尽可能对它进行优化。

二、不要使布局超载
坚持简约原则:少即是多。

页面中充斥着各种类型的图像、视频、广告等。这大大违背有用性原则。

三、不要使用图像来表示文本
使用图像表示文本的最常见演示样例就是在导航栏中。美观的button更加具有吸引力,可是它们的载入速度非常慢。此外。图像仍然不能由搜索引擎直接索引。因此。使用图像进行导航不利于搜索引擎优化(search engine optimization。SEO)。当无需图像就能够通过大量 CSS 技巧创建美丽的button时,绝不使用图像来表示文本。

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

<?php 
 $expire = 2592000 + time(); 
 // Add 30 day’s to the current time 
 setcookie(userid, “123rrw3”, $expire);
?

>

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

五、不要包括不必要的 JavaScript 代码,尽可能将其外部化
应该明智地使用 JavaScript(仅在真正必要时才使用)并优化脚本的大小和速度。缩短 JavaScript 下载时间的还有一种方式是使用外部文件,而不是包括脚本内联。

这样的方法也适用于 CSS。由于浏览器会缓存外部化的文本。而(在 HTML 页面自身中)以内联方式编码的 CSS 或 JavaScript 每次都会随 HTML 一起载入。

六、尽可能避免使用表格
表格被用作网页的主要构建块。可是作为页面布局元素,使用表格如今被觉得是糟糕的做法。有时候。您必须使用表格(而且它们被觉得是显示表格数据的出色实践)。

假设是这样。明白地指定表格单元格、行和列的宽度和高度,否则。浏览器必须运行很多操作来计算怎样显示它们。这会减少页面载入速度。

七、删除不论什么不必要的元素
可能这是全部技巧中最显而易见的一个,可是它也是最easy忘记的一个技巧。

假设您真正须要在网页上放置很多内容。考虑将网页分为 2 个、3 个或很多其它的独立页面。

八、一些优化网页的技巧
能够使用很多方法来优化您的网页。包含压缩 JavaScript 文件,使用超文本传输协议(Hypertext Transfer Protocol。HTTP)压缩。以及设置图像大小。

九、压缩和缩小 JavaScript 文件
您能够使用 GNU zip (gzip) 来完毕此任务,由于很多浏览器都支持这样的压缩算法。还有一种替代方法是缩小文件。这样的方法删除代码中全部不必要的字符,比方制表符(tab)、新行和空格。它删除代码中的凝视和空白,进一步缩小文件大小。外部和内部样式表都能够缩小。

两种最流行的缩小工具是 JSMin 和 YUI Compressor。

十、使用 HTTP 压缩,并始终使用小写的 div 和类名
能够使用 HTTP 压缩来降低server与浏览器之间的通信量。

能够在 Apache 中配置 HTTP 压缩(.htaccess 文件)。或者能够将其包括到页面中(对于 PHP,能够使用一个 HTTP_ACCEPT_ENCODING 选项)。可是请注意:不是全部浏览器都支持压缩。即使是支持压缩的浏览器。压缩和解压缩都会加重处理器的负载。要在 Apache 中启用地毯式(blanket)压缩(即压缩全部文本和 HTML)。使用下面命令:
AddOutputFilterByType DEFLATE text/html text/plain text/xml

另外,考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩,因此您能够将压缩对象限制为 HTML、CSS 和 JavaScript 文件。还有一种降低压缩工作的技巧是使用小写形式的 <div> 元素和类名。因为大写和小写敏感性。而且使用的是无损压缩,<header> 与 <Header> 不同。它们被压缩为两个不同的标记。

十一、设置图像大小
与表格单元格、行和列一样。当您未明白设置图像大小时,浏览器须要运行计算来显示图像,这会减少处理速度。

十二、将 CSS 图像映射用于装饰功能
使用图像映射取代多个图像,这是还有一种缩短载入时间的方式。由于同一时候下载图像的各个独立部分能够加快整个页面的下载进度。或者,您能够使用某种名为 CSS sprites 的工具。CSS sprites 可帮助降低 HTTP 请求的数量。

一个图像能够包括装饰或布置页面所需的全部图像元素。您使用 CSS 来选择(通过调用某些位置和维度)用于特定元素的映射。

十三、尽可能延迟脚本载入
一种提升页面下载速度的潜在方式是将脚本放在页面的底部。使页面载入更迅速。通常,浏览器仅仅能(从同一个域)下载不超过两个并行对象。假设一个对象是一段 JavaScript 代码,那么在该脚本下载完之前,其它页面组件的下载将会暂停。假设将 JavaScript 代码放在页面底部,(在大多数情况下)它将在最后下载,这时全部其它组件都已下载完。

十四、按需载入 JavaScript 文件
要按需载入 JavaScript,使用 import() 函数。


import() 函数:    
function $import(src){
  var scriptElem = document.createElement('script');
  scriptElem.setAttribute('src',src);
  scriptElem.setAttribute('type','text/javascript');
  document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

// import with a random query parameter to avoid caching
function $importNoCache(src){
  var ms = new Date().getTime().toString();
  var seed = "?

" + ms; 
  $import(src + seed);
}

十五、验证函数载入
也能够验证一个函数是否被载入,假设没有。载入 JavaScript 文件。

 
验证函数是否被载入:    
if (myfunction){
  // The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
  $import('http://www.yourfastsite.com/myfile.js');
}

注意:能够使用 defer 属性。但不是全部浏览器(包含 Firefox)都支持它。


十六、优化 CSS 文件
假设经过适当优化和维护,CSS 文件不一定非常大。

比如。具有非常多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件一样,您须要优化 CSS 文件,使其包括所需的全部内容。同一时候保持合理的大小。另外。使用外部文件取代内联定义来适应浏览器的缓存机制。

十七、使用内容分布网络
内容分布网络(Content-distribution network。CDN)是还有一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的很多server上时。用户可以从离他们近期的server下载这些图像。

此外,大多数 CDN 都在高速server上执行,因此不管server的载入速度怎样,其响应速度都比小型的超载server快。

十八、对资产使用多个域来添加连接
CDN 的还有一个优势是它们是独立的域。由于您的浏览器将并发连接的数量限制到一个单一的域,因此不管何时载入一个页面。都非常easy占满全部线程。因此,到其它资产的连接被延迟了。然而。您的浏览器可以打开新线程或到其它域的连接,这样,从还有一个域载入的不论什么资产都可以与其它全部资产同一时候载入。

十九、在合适的时候使用 Google Gears
使用 Google Gears(參见 參考资料)是避免用户重复下载同一内容的还有一种好方法。Gears 同意用户离线訪问 Web 应用程序,可是也同意将页面元素持久化到用户的计算机上。因此,频繁载入但未进行更新的内容能够存储在 Gears 数据库中。该数据库是一个 SQLite3 关系数据库管理系统。

对同一内容的全部 next 请求都能够从数据库(而不是server)直接载入。

二十、使用 PNG 格式的图像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了:Portable Network Graphic (PNG) 是未来流行的格式。当然,您能够说 GIF 和 JPEG 已经消亡,或者 PNG 没有不论什么缺陷,可是全部事物都有各自的优缺点,PNG 以最佳的文件大小提供了出色的质量。因此。假设进行选择的话。应该尽可能使用 PNG 图像。

二十一、保持 Ajax 调用简短、准确
当统称为 Asynchronous JavaScript + XML (Ajax) 的技术在两年前出现时,这些技术为处理页面请求和响应提供了一种革命性方法。然而。拨号用户可能从来没机会体验其真正的优势,由于在很多情形下,Ajax 须要在浏览器与server之间大量通信。

因此,假设您可以保持 Ajax 调用简短和准确,可以避免用户花费无止尽的时间来等待元素刷新或响应。

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

假设不能进行简短的 Ajax 调用,或者假设这些调用不能提供期望的结果,能够考虑一种替代方法:进行一次大的 Ajax 调用来获取所需的一切内容,然后让客户机在本地处理数据。通过这样的方式。客户机仅仅需等待一次(获取传入的数据)。可是在此之后(当浏览器与server之间没有必要通信时),处理速度将更快。

当然,还有大量 Ajax 优化技术。本教程无法一一列出。

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

另一个经常被遗忘的经常使用技巧。虽然清醒的 Web 开发者一般会在启动应用程序之前对其进行測试,可是有时候測试会使他们不那么重视维护任务,或者新功能加入得太快,而且未经过充分考虑或測试。

结果,余下的脚本减缓了应用程序的速度。假设您加入一项新功能,能够首先在沙箱里(全然脱离了应用程序的其余部分)进行測试,查看它作为单个函数的行为。

通过这样的方式,您能够重复检查,并分析性能和响应时间,无需考虑 Web 应用程序的其余部分。

然后。当新功能的行为符合预期时,能够将其引入到应用程序的其余部分中,执行其它測试。保证功能本身的行为符合预期。

二十四、分析网站代码
在很多场景中,自我反省是一个不错的建议。

幸运的是。在开发过程中,我们能够使用工具来帮助反省。并尽可能客观地进行实践。像 JSLint(參见 參考资源)这种工具的价值是无法衡量的,虽然其网站宣称它 “可能令您备受挫折”。由于它向您提供了全部的潜在代码缺陷,这些缺陷不但使调试更加困难,并且可能导致更长的响应时间。

二十五、检查孤立的文件和丢失的图像
检查孤立的文件和丢失的图像是一种明智之举。大部分 Web 开发者都会检查错误的文件引用。可是这里仍然须要说明一下。丢失的文件easy引起各种问题,由于它们会导致 “The image/page cannot be displayed” 之类的错误消息。

可是在网页速度优化方面,它们具有更大的缺陷:当浏览器寻找丢失的或孤立的文件时。它会消耗资源。这不可避免地会导致页面处理速度变慢。

因此,请检查孤立或丢失的文件,包含拼写错误的文件名称。

http://www.ibm.com/developerworks/cn/web/wa-speedweb/?S_TACT=105AGX52&S_CMP=tec-csdn



原文地址:https://www.cnblogs.com/mfrbuaa/p/5259658.html