DCL是最重要的网站性能指标之一，我们要优化它，越小越好。最佳实践之一就是使用defer，async标签给script元素。让这些脚本可以在后台下载。第二，我们要优化渲染阻塞的stylesheets.
Window的load事件
我们已经知道JavaScript可以阻塞DOM树的生成，带其他外部文件不行，比如CSS，图片，视频等等。
DOMContentLoaded事件记录了DOM树完成构造并且可以安全访问的时间点。window.onload记录了当外部的css和其他文件被下载完成的时间点。
在上面的例子中， rendering.html 文件有一个外部CSS文件在head中，它要花5秒被下载。因为它在head中，所以FP和FCP是在5秒后发生的。这个css文件会阻塞渲染，看不到任何东西。
在那之后，我们有个图片元素，大概需要10秒去下载，所以浏览器仍然继续在后台下载这个文件，并且继续进行DOM解析和渲染。
接下来，我们有3个JavaScript文件，他们将花3秒，6秒，9秒去下载。更重要的是，他们不是async的，这就意味着总共需要18秒顺序执行下载。而且直到前一个被下载并执行完成后，后面一个才会继续下载执行。尽管如此，我们的现代浏览器似乎采用了新的策略，更高效地下载了它们，所以总共用时9秒左右。因为最后一个文件下载会影响DCL， 所以DCL发生在9.1秒。
这时仍然有其他外部资源在下载，就是那张图片，它仍然在后台下载，大概花了10秒下载完成了，所以window.load事件在10.2秒被触发，意味着整个页面加载完成。
以上就是浏览器的整个渲染过程，希望可以帮助大家理解它的原理，也希望大家可以批评指正错误，一起讨论学习。
文章来自互联网，如有侵权请点此提交删除
文章来自互联网，如有侵权请点此提交删除
