三十二种提高网页加载速度的方法和技巧

　　十一、设置图像大小

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

　　十二、将 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 上的许多服务器上时，用户能够从离他们最近的服务器下载这些图像。此外，大多数 CDN 都在快速服务器上运行，因此无论服务器的加载速度如何，其响应速度都比小型的超载服务器快。

　　十八、对资产使用多个域来增加连接

　　CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域，因此无论何时加载一个页面，都很容易占满所有线程。因此，到其他资产的连接被延迟了。然而，您的浏览器能够打开新线程或到其他域的连接，这样，从另一个域加载的任何资产都可以与其他所有资产同时加载。

　　十九、在合适的时候使用 Google Gears

　　使用 Google Gears（参见 参考资料）是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序，但是也允许将页面元素持久化到用户的计算机上。因此，频繁加载但未进行更新的内容可以存储在 Gears 数据库中，该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有 next 请求都可以从数据库（而不是服务器）直接加载。

　　二十、使用 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 需要在浏览器与服务器之间大量通信。因此，如果您能够保持 Ajax 调用简短和准确，可以避免用户花费无止尽的时间来等待元素刷新或响应。

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

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

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

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

　　二十四、分析站点代码

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

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

　　检查孤立的文件和丢失的图像是一种明智之举。大部分 Web 开发人员都会检查错误的文件引用，但是这里仍然需要说明一下。丢失的文件容易引起各种问题，因为它们会导致 “The image/page cannot be displayed” 之类的错误消息。但是在网页速度优化方面，它们具有更大的缺陷：当浏览器寻找丢失的或孤立的文件时，它会消耗资源，这不可避免地会导致页面处理速度变慢。因此，请检查孤立或丢失的文件，包括拼写错误的文件名。

　　二十六、Sprites图片技术

　　Spriting是一种网页图片应用处理方式，它是将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用CSS技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用CSSSprites能很好地减少网页的http请求，从而大大的提高页面的性能。CSSSprites在国内很多人叫css精灵，很早就有了，在很多大型网站都有用到，特别是一些所有页面都存在的图标用得比较多，很好的提升加载速度。

　　二十七、延迟显示可见区域外的内容

　　为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容，为了避免页面变形，可以使用占位符标签制定正确的高度和宽度。比如WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候，不加载任何第一屏以下的图片信息，只有当用户把鼠标往下滚动的时候，这些图片才开始加载。这样很明显提升可见区域的加载速度，提高用户体验。

　　二十八、重新布置Call-to-Action按钮

　　其实这个和上面一条是差不多的，都是从用户体验速度着手，跳过了网页的整体加载速度。速度没变，只是让一些行为按钮提前，Call-to-Action按钮一般习惯设计在页面底部，这样的习惯对于用户来说并不总是好的，购买用户需要等到最下面加载出来才能点击下一步操作。可以调整CTA按钮的位置或使用滑动的图片按钮。很多大型购物网站的加入购物车就是这种类型。

　　二十九、删除FLASH页面或减少FLASH使用

　　如果没有特殊需要和目的尽量不用FLASH，特别对于要做SEO的网站，无论对网站打开速度还是用户体验、和搜索引擎的抓取来说都没有好处，如果确定要使用FLASH页面，建议在页面显示位置放跳过按钮，为迫不及待想进网站潜在客户提供进入网站的快速通道。

　　三十、将统计代码放在页面底部

　　将统计代码放在底部的好处在于，如代码出现不能正常用访部，不会因而拖延整个网站的打开速度。

　　三十一、多使用静态页面

　　有些内容可以静态化就将其静态页面，以减少服务器的负担。

　　三十二、网址后加斜杠

　　有些网址，比如"www.domain.com/seo"，当服务器收到这样一个地址请求的时候，它需要花费时间去确定地址的文件类型。如果seo是一个目录，不妨在网址后多加一个斜杠，让其变成www.domain.com /seo/，这样服务器就能清楚知道要访问该目录下的index或default文件，节省加载时间。

当前文章：三十二种提高网页加载速度的方法和技巧
文章出自：https://www.cdcxhl.com/news/34258.html

成都网站建设公司_创新互联，为您提供用户体验、静态网站、商城网站、Google、定制网站、定制开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联