前端里那些你不知道的事儿之 【window.onload】
💡
原文中文，约7800字，阅读约需19分钟。
📝
内容提要
本文讨论了页面加载总时长的影响因素，包括开发时性能优化、编译时性能优化、加载时性能优化和运行时性能优化。重点介绍了window.onload对页面加载总时长的影响，以及异步加载脚本、动态加载资源、图片懒加载/预加载、接口请求、样式和脚本加载、多媒体资源和字体资源加载等情况下的影响。总结来说，图片、多媒体资源、字体资源、网络接口请求、样式和脚本加载都会影响页面加载总时长。
🎯
关键要点
- 页面加载总时长受多种因素影响，包括开发时、编译时、加载时和运行时的性能优化。
- window.onload 是监控页面加载总时长的重要 API，影响页面加载的整体时长。
- DOMContentLoaded 事件与 window.onload 的区别在于前者只需 DOM 加载完成，后者需所有资源加载完成。
- 使用 async 和 defer 属性异步加载脚本仍会影响页面加载总体时长。
- 动态加载脚本和样式资源会导致 onload 事件延后，影响页面加载时长。
- 图片的懒加载和预加载会影响页面加载时长，即使不插入 DOM，图片请求仍会发出。
- 普通接口请求不会直接影响页面加载时长，但后续的 DOM 操作可能会导致延迟。
- 多媒体资源的加载会影响 onload 时长，尤其是视频和封面图的加载。
- 样式资源的加载会影响 render tree 的生成，从而延迟页面的整体加载时长。
- 字体资源的加载会影响 onload 时长，未使用的字体不会发出请求。
- 总结影响 onload 的因素包括图片、多媒体资源、字体资源、网络接口请求、样式和脚本加载。
➡️
