让页面更加靠近效率的几条原则

mac2022-06-30  12

1.减少HTTP 请求次数 

终端用户大部分时间花在各种页面元素,如图像、 样式表、 脚本和动画等的下载上。图片、加载的样式等文件尽量小尽量少、尽量减少页面元素就意味着减少HTTP请求的次数,这也是快速显示页面的关键之处。

 最常见的方式有:

(1)一种方式是使用CSS精灵组合连续的小图标以达到减少HTTP请求次数的目的。

(2)一种方式是通过组合多脚本多CSS文件。

 最后是务必优化首页面的访问速度。

2.使用Content Delivery Network 内容分发网络

CDN服务提供商提供一种服务,基于网络远近来选择给具体用户服务的WebServer,缩短网络传输的距离。因此把静态内容分布到CDN减少了用户影响时间,同时切换到CDN的代码修改工作是很容易的,但能达到提高网站的速度。

3.增加Expires Header 

这个方法实质上是利用了本地浏览器的缓存功能,设置一个合理的缓存时间来缓存HTTP的头部信息,ASPNET使用Chcae类的方法可以实现。

4.压缩页面元素 

Gzip 是目前最流行及有效的压缩方法.客户端在HTTP请求中通过 Accept-Encoding 头来表明支持的压缩类型,如:Accept-Encoding: gzip 如果 WebServer(IIS、Apache)检查到Accept-Encoding 头,它会使用客户端支持的方法来压缩HTTP响应,会设置 Content-Encoding 头,如:Content-Encoding: gzip。大部分网站对HTML文件、脚本文件和样式表、XML和JSON 在内的文本信息进行压缩都是值得的。 图像文件不应该被压缩,因为它们本来就是压缩格式保存的,对它们进行压缩,不但浪费CPU,而且还可能增加文件的大小。

5.把样式表放在头上 

遵循HTM规范,把样式表放在 HEAD 中,可以提高界面加载速度,这个主要是顺序显示的问题。

6.把脚本文件放在底部 

把它们放在页面底部,这样一方面能顺序显示,不会因为脚本的加载阻塞页面的加载,另外可达到最大的并行下载。

7.避免CSS表达式 

CSS表达式功能是强大,其问题是其执行次数会比预想的要多得多,从而影响页面性能。

8.把JavaScript和CSS放到外部文件中

使用外部文件,会被浏览器缓存,不会增加页面的大小,同时又不增加 HTTP请求次数。因此一般来说,外部文件是更可行的方式。

唯一的例外是内嵌方式对主页更效。一般来说,在一个会话中,主页访问较少,因此内嵌方式可以取得更快的用户响应时间。

9.最小化JavaScript代码

最小化(两个流行的工具是 JSMin 和 YUI CompressorJavaScript)代码指在 JS 代码中删除不必要的字符,从而降低下载时间,混淆是最小化于源码的备选方式。作为混淆的一部分,函数名和变量名被替换成短的字符串,这使得代码更紧凑,同时也更难读,使得难于被向工程,Dojo Compressor (ShrinkSafe)是最常见的混淆工具。

最小化是安全的、直白的过程,而混淆则更复杂,而且容易产生问题。

10.删除重复的脚本文件 

一个避免重复的脚本文件的方式是使用模板系统来建立脚本管理模块。除了防止重复的脚本文件外,该模块还可以实现依赖性检查和增加版本号到脚本文件名中,从而实现超长的过期时间。

11.配置 ETags 

ETags 是用于确定浏览器缓存中元素是否与 WebServer 中的元素相匹配的机制,它是比 last-modified date 更灵活的元素验证机制。ETag 是用于唯一表示元素 版本的字符串,它需被包括在引号中。Web server 首先在 response 中指定 ETag: HTTP/1.1 200 OK < 03:03:59 2006 Dec 12> $224bc-4ab-457e$2$2” Content-Length: 12195 后来,如果浏览器需要验证某元素,它使用 If-None-Match 头回传 ETag 给 Web server,如果 ETag 匹配,则服务器返回 304 代码,从而节省了下载时间: GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com < 03:03:59 2006 Dec 12> $224bc-4ab-457e$2$2” HTTP/1.1 304 Not Modified ETags 的问题在于它们是基于服务器唯一性的某些属性构造的,如 Apache1.3 和 2.x,其格式是 inode-size-timestamp,而在 IIS5.0 和 6.0 下,其格式是 Filetimestamp:ChangeNumber。这样同一个元素在不同的 web server 上,其 ETag 是不一样的。这样在多 Web server 的环境下,浏览器先从 server1 请求某 元素,后来向 server2 验证该元素,由于 ETag 不同,所以缓存失效,必须重新下载。

因此,如果您未用到 ETags 系统提供的灵活的验证机制,最好删除 ETag。删除 ETag 会减少 http response 及后续请求的 HTTP 头的大小。微软支持文章描述了 如何删除 ETags,而在 Apache 下,只要在配置文件中设置 FileETag none 即可。

12.缓存 Ajax 

性能优化法则同样适用于 web 2.0 应用。提高 Ajax 的性能最重要的方式是使得 其 response 可缓存,就象“法则 3 增加 Expires Header”讨论的那样。以下其 他法则同样适用于 Ajax,当然法则 3 是最有效的方式:

13.避免重定向 

重定向功能是通过 301 和 302 这两个 HTTP 状态码完成的,

如: HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html 浏览器自动重定向请求到 Location 指定的 URL 上,重定向的主要问题是降低了 用户体验。 一种最耗费资源、经常发生而很容易被忽视的重定向是 URL 的最后缺少/,如访 问 http://astrology.yahoo.com/astrology 将被重定向到http://astrology.yahoo.com/astrology/。在 Apache 下,可以通过 Alias,mod_rewrite 或 DirectorySlash 等方式来解决该问题。

14.减少 DNS 查询次数 

DNS 用于映射主机名和 IP 地址,一般一次解析需要 20~120 毫秒。 为达到更高的 性能,DNS 解析通常被多级别地缓存,如由 ISP 或局域网维护的 caching server,本地机器操作系统的缓存(如 windows 上的 DNS Client Service), 浏览器。 的缺省 DNS 缓存时间为 30 分钟,Firefox 的缺省缓冲时间是 1 分钟。 IE 减少主机名可减少 DNS 查询的次数,但可能造成并行下载数的减少。避免 DNS 查 询可减少响应时间,而减少并行下载数可能增加响应时间。一个可行的折中是把 内容分布到至少 2 个,最多 4 个不同的主机名上。

 

转载于:https://www.cnblogs.com/GISZL/archive/2011/11/14/2248893.html

相关资源:JAVA上百实例源码以及开源项目
最新回复(0)