专栏首页大数据-数据人生前端技术提高页面加载速度

前端技术提高页面加载速度

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

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

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

四、检查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 一起加载。

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

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

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

九、压缩和缩小 JavaScript 文件 您可以使用 GNU zip (gzip) 来完成此任务,因为许多浏览器都支持这种压缩算法。另一种替代方法是缩小文件。这种方法删除代码中所有不必要的字符,比如制表符(tab)、新行和空格。它删除代码中的注释和空白,进一步缩小文件大小。外部和内部样式表都可以缩小。两种最流行的缩小工具是 JSMin 和 YUI Compressor。

十、使用 HTTP 压缩,并始终使用小写的 div 和类名 可以使用 HTTP 压缩来减少服务器与浏览器之间的通信量。可以在 Apache 中配置 HTTP 压缩(.htaccess 文件),或者可以将其包含到页面中(对于 PHP,可以使用一个 HTTP_ACCEPT_ENCODING 选项)。但是请注意:不是所有浏览器都支持压缩。即使是支持压缩的浏览器,压缩和解压缩都会加重处理器的负载。要在 Apache 中启用地毯式(blanket)压缩(即压缩所有文本和 HTML),使用以下命令: AddOutputFilterByType DEFLATE text/html text/plain text/xml

另外,考虑一下您想要压缩的内容。图像、音乐和视频在创建时已经进行了压缩,因此您可以将压缩对象限制为 HTML、CSS 和 JavaScript 文件。另一种减少压缩工作的技巧是使用小写形式的

元素和类名。由于大小写敏感性,并且使用的是无损压缩, 与 不同,它们被压缩为两个不同的标记。

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

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

浏览器构造页面的原理,当浏览器从服务器接收到了HTML文档,并把HTML在内存中转换成DOM树,在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE,就会再发1个request去请求CSS或image,然后继续执行下面的转换,而不需要等待request的返回,当request返回 后,只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.

并行、分段加载外部 script Parallel script loading (并行加载)是加速网站页面加载最有效的方法之一。因为古代的浏览器(aka IE)很多都不支援 parallel scripting loading,它们加载外部 script 时是一个完成后才开始下载另一个,而不是像图片一样同时下载多个文件,即出现上图情况:所有在该 script 之后的文件下载都被挡在后面了 (blocking)。因此出现了 n 多个小技巧解决这个问题。

* Script DOM Element
* XHR Eval
* XHR Injection
* Script in frame
* Script Defer
* Document.write Script tag (IE only)

不同方法有不同特征,如对跨域名的支援、执行顺序、浏览器状态等。当中 Script DOM Element 是最流行的的方法,亦都支援最多的 browsers。各种方法的优劣可参考 Loading Scripts Without Blocking 一文。当中 Script DOM Element 是最流行的做法,唯在 IE 下并不保证可按次序执行。顺带一提,jQuery 的 getScript() 貌似也是用此方法。

新推出的 browsers 已经开始支援 parallel script loading,包括 IE8, FF3.5, Safari 4, Chrome 2 等。但 parallel scripting loading 除了可以解决 blocking 问题外,应用得宜还可以有 progressive enhancement 的作用,developer 可决定各档案下载的时机。

例如 Google docs 会在工具列未完全下载完之前,会先显示一个 view only 的版本。直至工具列完全加载后,才转成编辑状态。

外部JS会阻塞所有内容的呈现 嵌入式的JS会阻止其后内容的显示 当CSS后面跟着嵌入的JS的时候,该CSS就会出现阻塞后面资源下载的情况

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在Linux下如何使用shell操作数据库

       我们一般在Windows下采用客户端连接数据库,也有直接在Linux下连接数据库的。但是,当我们想对数据库进行自动化管理的时候,比如:想通过shell脚本...

    幽鸿
  • 2.2 搜索就是所有

    刚刚情人节过去,也想来一篇数据分析的实例。别黑我,别恶心我。从网上找了一份2000W的数据,粗略处理后,导入MySql,试着看看MySql这2000W数据的效果...

    幽鸿
  • Oracle笔记

    1.Oracle内容介绍:   (1)基本部分:oracle基本使用、用户管理、表管理   (2)高级部分:表的查询、权限和角色、函数、PL/SQL编程、数...

    幽鸿
  • 浅谈 Web 图像优化

    前端优化有很多,图像优化也是其中的一部分。无论是渐进增强还是优雅降级,图像优化成为了开发上不可忽视的一部分。 知其然,须知其所以然 图像优化的前提是需要了解图像...

    企鹅号小编
  • 010HTML页面加载和解析流程详细介绍

    上善若水.夏
  • Cloudflare的HTTP/2优化策略

    https://blog.cloudflare.com/better-http-2-prioritization-for-a-faster-web/

    LiveVideoStack
  • 揭秘Agent Tesla间谍木马攻击活动

    近日,亚信安全截获多个垃圾邮件的攻击活动,这些攻击活动使用的邮件附件通常是伪装成系统镜像ISO文件(亚信安全检测为Mal_GENISO)以及RAR和LZH压缩文...

    FB客服
  • 坚定地使用 CSS Custom Properties

    好久没译文,最近看到这篇 Getting Hardboiled with CSS Custom Properties。觉得不错,翻译出来给大家。现在 CSS 新...

    企鹅号小编
  • Markdown 编辑器指南

    Markdown 是一种轻量级标记语言。语法简单明了,浏览本篇指引文章,学会使用markdown,就可以开始写文章了。markdown编辑器采用左边纯markd...

    小芭乐
  • 前端各种优化

    1.  请减少HTTP请求   基本原理:   在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突...

    前朝楚水

扫码关注云+社区

领取腾讯云代金券