如何在持续升级的项目中保持项目的高性能？如何更加准确的定位和解决性能问题？实际上，WPO的最主要目的是改善用户体验，而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的，而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式？接下来将一一介绍，本文集中介绍Page Load。

定义

        Page Load时间指的就是window.onload事件触发的时间。与DOM Ready时间相比，Page Load的时间往往要更靠后一些，因为Page Load不仅仅是HTML文档解析完毕还包括了所有资源加载所需要的时间，例如图片资源的加载、iframe的加载等。

用户体验

        大家可能觉得Page Load时间长一点无关紧要，实际上该指标从以下两方面影响着用户体验：

            (1). window.onload事件触发的时间(Page Load)也就是所有资源加载完成的时间，该时间越长意味着用户需要等待越久才能看见某些内容，例如图片，这些内容也许并不是最总要的，但这是一个完整页面的组成部分，这部分内容如果加载过慢，也会在一定程度上影响用户对页面完整性的体验。

            (2). window.onload事件在触发前，如果有资源正在加载，例如脚本、图片，则浏览器都会以某种方式告诉你正在加载资源。不同的浏览器有着不同的方式，例如IE6等非Tab浏览方式的浏览器会在状态栏给予进度提示，而例如Firefox等Tab类型的浏览器一方面会在状态栏给予提示，另一方面还会在Tab上显示加载中的状态。Page Load的时间越久，这些状态显示的时间也就越久，因此会影响用户对页面整体速度的体验。

影响因素

        (1) window.onload事件总是在DOM Ready之后才会触发，因此，DOM Ready指标的影响因素也都会影响Page Load。

        (2) 鉴于window.onload事件要等到所有资源加载完成后才会触发，因此资源加载的时间越长则Page Load的时间越长。如果没有任何外链资源，则Page Load时间与DOM Ready时间几乎是相等的，随着图片等资源的增加，Page Load与DOM Ready的差距也会越来越大。（外链脚本除外，因为外链脚本也同样会增加DOM Ready时间）

监控方式

        直接在window上注册onload事件即可。

优化方法

        (1) DOM Ready指标的优化方法

        由于影响DOM Ready指标的因素同样会影响Page Load，因此DOM Ready指标的优化方法同样也适用于Page Load，可以参考上一篇文章>>。

        (2) 减少资源请求数和请求时间&考虑window.onload后Lazy Load

        除此之外，更应该注意页面中外链资源的使用，尤其是图片等资源。对于图片一方面要减少请求数（合并），另一方面还要减少请求时间（压缩、缓存）。当然对于图片的优化，很多人可能都已经做过了，如果经过了合并、压缩以后，请求还是很多，图片还是很大该怎么办呢？建议使用Lazy Load，例如在用户可见或者产生交互的时候才进行加载。

        (3) 脚本在window.onload后加载

        此外，关于脚本的动态加载还想说明一点，在IE中，window.onload触发后再进行动态脚本加载的好处是：浏览器没有任何进度指示。也就是说可以在用户毫无察觉的情况下载入脚本，从而在某种程度上改善速度体验。在Firefox下，window.onload后加载脚本时，Tab上不再显示进度，仅仅在状态栏会有通知。

建议继续学习：

1. 从用户体验出发的性能指标分析-Start Render    (阅读：3373)
2. 从用户体验出发的性能指标分析-DOM Ready    (阅读：2041)