• 网站性能
    • 网站性能监测
      • 应用性能指数
    • 网站性能
      • 减少 HTTP 请求
    • 页面内部优化
    • 启用缓存
    • 减少下载量
    • 网络连接上的优化

    网站性能

    网站性能直接影响到了网站的响应时间、吞吐量等等,也是运维、开发一系列技术的体现。

    网站性能监测

    网站性能监测

    网站可用性是网站性能监测的重要指标之一,表示在一段时间内,网站处于“正常状态”的机率。

    • DNS 解析
    • 内存、硬盘等等
    • 网页打开速度

    应用性能指数

    Apdex 联盟,一个由众多网络分析技术公司和测量工业组成的联盟组织,它们联合起来开发了“应用性能指数”即“Apdex”(Application Performance Index),用一句话来概括,Apdex 是用户对应用性能满意度的量化值。它提供了一个统一的测量和报告用户体验的方法,第一次把最终用户的体验和应用性能联系在了一起。

    任务响应时间定义为:当用户操作(鼠标点击、输入、回车)开始到系统(客户机、网络、服务器)响应从而用户能继续这个过程所经过的时间。这些等待时间定义了应用程序的“响应度”。该指数是基于应用程序响应度的三个方面:

    • 满意:用户充分工作。这就是目标时间(T秒),即在此时间里用户的工作没有因应用程序的响应时间而受阻,如3秒。
    • 容忍:用户感觉到响应滞后,响应时间大于 T,但能继续这个过程,如3~12秒。
    • 挫折:响应时间大于 F 秒的性能是不能接受的,用户可能放弃这个过程。F 等于 T×4,在本例子中为12秒。

    网站性能

    针对网站性能优化领域,网上已经有相当多的总结,这里只罗列一些常见(我用过)的策略。

    减少 HTTP 请求

    从网上查找的情况分类来看,有下面的一些情况:

    • 合并 JavaScript 和 CSS。只是这种方式需要好好评估,因为合并过多的 JavaScript,可能会导致 JavaScript 文件过大。一个大的文件将增加 Load时间,导致不好的用户体验。
    • CSS Sprites。即将一个页面涉及到的所有零星图片都包含到一张大图中去。值得注意的是,像 Logo 这一类文件将不要加到里面去了。
    • 拆分初始化负载。将页面加载时需要的一堆 JavaScript 文件,分成两部分:渲染页面所必需的和其他的。页面初始化时,只加载必须的,其余的等会加载。
    • 划分主域。将资源划分的请求划分到几个不同的域上,来加速资源请求。

    对于我这样的懒人来说,我使用 Google 出品的 PageSpeed。它主要的功能是针对前端页面而进行服务器端的优化,对前端设计人员来说,可以省去优化 css、js 以及图片的过程。它可以对 CSS 和 JavaScript 压缩、合并、级联、内联,生成一个新的 Script 和 CSS 文件 。还有图像优化:剥离元数据、动态调整,重新压缩,如针对 Chrome 浏览器生成 WebP 文件。还可以推迟图像和 JavaScript 加载。

    页面内部优化

    HTML 页面内的优化的目的便是:尽快渲染出页面。常见的优化策略便是:

    • 将 CSS 放在顶部,即早点渲染出页面及其样式。
    • 将 JavaScript 放在底部。如果有后台渲染机制,那么就应该将 JS 放到页面底部来加速页面加载。如果是单页面应用,那么这个 JS 就应该在页面顶部。
    • 压缩 HTML。在我们写模板的过程中,一些判断可能会导致页面有过多的空格。压缩这些 HTML,可以稍微提高一下页面速度。

    这里的大部分内容都应该通过修改代码来完成。

    启用缓存

    前面的缓存一节里,我们说过了一些缓存的策略,我们再稍微提一下。

    • 后台优化,如数据库端缓存
    • 启用页面缓存,即应用层缓存

    减少下载量

    简单地来说,就是减少对服务器的请求:

    • 使用 CDN
    • 使用外部 JavaScript 和 CSS
    • 缓存:使用 gzip 压缩、添加 Expires 头、配置 ETag、使 AjaX 可缓存

    网络连接上的优化

    主要就是对域名到服务器进行优化,因此从方法上有:

    • DNS 域名解析加速
    • 减少 DNS 查找