作者：京东科技孙凯
一、前言相信很多前端开发者在做项目时同时也都做过页面性能优化，这不单是前端的必备职业技能，也是考验一个前端基础是否扎实的考点，而性能指标也通常是每一个开发者的绩效之一。尤其马上接近年关，页面白屏时间是否过长、首屏加载速度是否达标、动画是否能流畅运行，诸如此类关于性能更具体的指标和感受，很可能也是决定着年底你能拿多少年终奖回家过年的晴雨表。
关于性能优化，我们一般从以下四个方面考虑：
开发时性能优化
编译时性能优化
加载时性能优化
运行时性能优化
而本文将从第三个方面展开，讲一讲哪些因素将影响到页面加载总时长，谈到总时长，那总是避免不了要谈及window.onload，这不但是本文的重点，也是常见页面性能监控工具中必要的API之一，如果你对自己页面加载的总时长不满意，欢迎读完本文后在评论区交流。
二、关于window.onload这个挂载到window上的方法，是我刚接触前端时就掌握的技能，我记得尤为深刻，当时老师说，“对于初学者，只要在这个方法里写逻辑，一定没错儿，它是整个文档加载完毕后执行的生命周期函数”，于是从那之后，几乎所有的练习demo，我都写在这里，也确实没出过错。
在MDN上，关于onload的解释是这样的：load事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与DOMContentLoaded不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。该事件不可取消，也不会冒泡。
后来随着前端知识的不断扩充，这个方法后来因为有了“更先进”的DOMContentLoaded，在我的代码里而逐渐被替代了，目前除了一些极其特殊的情况，否则我几乎很难用到window.onload这个API，直到认识到它影响到页面加载的整体时长指标，我才又一次拾起来它。
三、哪些因素会影响window.onload本章节主要会通过几个常用的业务场景展开描述，但是有个前提，就是如何准确记录各种类型资源加载耗时对页面整体加载的影响，为此，有必要先介绍一下前提。
为了准确描述资源加载耗时，我在本地环境启动了一个用于资源请求的node服务，所有的资源都会从这个服务中获取，之所以不用远程服务器资源的有主要原因是，使用本地服务的资源可以在访问的资源链接中设置延迟时间，如访问脚本资源