浏览器加载web流程 - 如何优化首屏时间

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力！

下面这张图给大家略形象的解释了我们前端开发需要了解的浏览器加载的关键节点

• 总结一下
  • 1、几个load事件调用先后顺序 window.onload -> DOMContentLoaded -> load
  • 2、其中DOMContentLoaded代表首屏展示事件（如果你没有强制设置隐藏的话）、load事件代表全部非异步加载的资源全部就绪了。
  • 提高页面加载速度的技巧：
    • 减少非首屏必须的js和css加载，可以放入load后异步加载
    • load事件会等待页面所有资源加载完毕后才触发，所以类似img标签的图片资源加载过程是不影响DOMContentLoaded事件的触发的，但是只有当img全部加载完毕才会触发load,优化方法是img src使用默认一张统一的图片，然后在load事件后异步加载.