不同,它们被压缩为两个不同的标记。在下面的例子中,对于压缩程序来说,Important 类与 important 类是不同的,这意味着对于压缩程序,它们表示不同的对象,因此被分别压缩为两段不同的文本。
read this!
This will cost you some valuable load time
留意细节似乎无关紧要。但是当您优化文件时,所有细微的细节都应考虑在内。
(3)设置图像大小
与表格单元格、行和列一样,当您未明确设置图像大小时,浏览器需要执行计算来显示图像,这会降低处理速度。此外,在某些情形下,图像大小的计算结果可能不正确,因此图像会发生变形。
(4)将 CSS 图像映射用于装饰功能
使用图像映射代替多个图像,这是另一种缩短加载时间的方式,因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者,您可以使用某种名为 CSS sprites 的工具。CSS sprites 可帮助减少 HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用 CSS 来选择(通过调用某些位置和维度)用于特定元素的映射。
(5)尽可能延迟脚本加载
在前面提到过,移除完全不需要的 JavaScript 代码能够加快加载和处理速度。但是如果代码已经非常精简并且必须在页面中包含 JavaScript 代码的话,该怎么办?
在这种情形下,一种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。通常,浏览器只能(从同一个域)下载不超过两个并行对象,如果一个对象是一段 JavaScript 代码,那么在该脚本下载完之前,其他页面组件的下载将会暂停。如果将 JavaScript 代码放在页面底部,(在大多数情况下)它将在最后下载,这时所有其他组件都已下载完。
使用 Firebug 扩展跟踪加载缓慢的文件,你的 JavaScript 文件是下载最慢的文件。压缩 JavaScript 文件会有所帮助,但是仅仅这样可能还不够。你可以使用以下代码片段延迟 JavaScript 的加载:
var delay = 5;
setTimeout(”heavy();”, delay * 1000);
这段代码将对 heavy() 方法的调用延迟了 5 秒。您可以将这段代码与下面的技巧结合使用来延迟整个 JavaScript 文件的加载。
(6)按需加载 JavaScript 文件
要按需加载 JavaScript,使用 import() 函数,如清单3 所示。
清单3. 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);
(7)验证函数加载
也可以验证一个函数是否被加载,如果没有,加载 JavaScript 文件。为此,使用清单4 中的代码。
清单 4. 验证函数是否被加载
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)都支持它。
(8)优化 CSS 文件
如果经过适当优化和维护,CSS 文件不一定很大。例如,具有很多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件一样,您需要优化 CSS 文件,使其包含所需的所有内容,同时保持合理的大小。另外,使用外部文件代替内联定义来适应浏览器的缓存机制。
1、去除一些不必要的对象。
2、将临近的两张图片合成一张。
3、合并CSS文件
看看下面这段代码,需要加载三个CSS文件: 我们可以将其合成一个: 从而减少http请求。
(9)使用内容分布网络
内容分布网络(Content-distribution network,CDN)是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时,用户能够从离他们最近的服务器下载这些图像。此外,大多数 CDN 都在快速服务器上运行,因此无论服务器的加载速度如何,其响应速度都比小型的超载服务器快。
(10)对资产使用多个域来增加连接
CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域,因此无论何时加载一个页面,都很容易占满所有线程。因此,到其他资产的连接被延迟了。然而,您的浏览器能够打开新线程或到其他域的连接,这样,从另一个域加载的任何资产都可以与其他所有资产同时加载。
(11)在合适的时候使用 Google Gears
使用 Google Gears是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序,但是也允许将页面元素持久化到用户的计算机上。因此,频繁加载但未进行更新的内容可以存储在 Gears 数据库中,该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库(而不是服务器)直接加载。
安装 Gears 之后,获取 gears_init.js 文件,以便轻松访问 Gears 工厂和应用程序编程接口(API),将其保存为 gears_init.js,通过以下方式在您的代码中引用它:
要确定是否已安装 Gears,使用 清单 5 中的代码。
清单 5. 确定是否已安装 Gears
如果未安装 Gears,代码将向您提供下载 Gears 的 URL。
当所有元素都通过验证并且 Gears 已安装之后,您可以测试 Gears 的极其有用的数据库功能,使用 清单 6 中的 JavaScript 代码。
清单 6. 测试数据库功能
这段代码在您的计算机或服务器上创建一个本地数据库 db。如果表 Test 不存在,则创建一个,然后插入测试数据(Monkey! 和时间)。代码从数据库获取数据,并在浏览器中以警告的形式呈现出来。
想像一下可能发生的结果!
(12)使用 PNG 格式的图像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了:Portable Network Graphic (PNG) 是未来流行的格式。当然,您可以说 GIF 和 JPEG 已经消亡,或者 PNG 没有任何缺陷,但是所有事物都有各自的优缺点,PNG 以最佳的文件大小提供了出色的质量。因此,如果进行选择的话,应该尽可能使用 PNG 图像。
(13)保持 Ajax 调用简短、准确
当统称为 Asynchronous JavaScript + XML (Ajax) 的技术在两年前出现时,这些技术为处理页面请求和响应提供了一种革命性方法。然而,拨号用户可能从来没机会体验其真正的优势,因为在许多情形下,Ajax 需要在浏览器与服务器之间大量通信。因此,如果您能够保持 Ajax 调用简短和准确,可以避免用户花费无止尽的时间来等待元素刷新或响应。
进行一次较大的 Ajax 调用并在本地处理客户机数据
如果不能进行简短的 Ajax 调用,或者如果这些调用不能提供期望的结果,可以考虑一种替代方法:进行一次大的 Ajax 调用来获取所需的一切内容,然后让客户机在本地处理数据。通过这种方式,客户机只需等待一次(获取传入的数据),但是在此之后(当浏览器与服务器之间没有必要通信时),处理速度将更快。当然,还有大量 Ajax 优化技术,本教程无法一一列出。如果想要了解关于 Ajax 的更多信息,请查看参考资料。
(14)在沙箱中测试代码
还有一个经常被遗忘的常用技巧。尽管清醒的 Web 开发人员通常会在启动应用程序之前对其进行测试,但是有时候测试会使他们不那么重视维护任务,或者新功能添加得太快,并且未经过充分考虑或测试。结果,余下的脚本减缓了应用程序的速度。
如果您添加一项新功能,可以首先在沙箱里(完全脱离了应用程序的其余部分)进行测试,查看它作为单个函数的行为。通过这种方式,您可以反复检查,并分析性能和响应时间,无需考虑 Web 应用程序的其余部分。然后,当新功能的行为符合预期时,可以将其引入到应用程序的其余部分中,运行其他测试,保证功能本身的行为符合预期。
(15)分析站点代码
在许多场景中,自我反省是一个不错的建议。幸运的是,在开发过程中,我们可以使用工具来帮助反省,并尽可能客观地进行实践。像 JSLint这样的工具的价值是无法衡量的,尽管其站点宣称它 “可能令您备受挫折”,因为它向您提供了所有的潜在代码缺陷,这些缺陷不但使调试更加困难,而且可能导致更长的响应时间。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。
发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/211148.html原文链接:https://javaforall.net