HTML页面中元素的加载、呈现和执行顺序是什么?

I found this nice post at kirupa.com, but I'd like to understand in deep the order of load, rendering and execution of elements like DOM, Scripts, CSS, Images, IFrames, etc.

我在kirupa.com上找到了这篇不错的文章，但是我想深入了解元素的加载顺序、渲染和执行，如DOM、脚本、CSS、图像、iframe等。

Until now I have understood the next order:

到目前为止，我已经理解了下一个命令:

1. DOM
2. DOM
3. JS (I am guessing does not matter JS is inline or external, if it is external I guess DOM load is interrupted until the JS is loaded, rendered and executed)
4. JS(我猜JS是内联的还是外部的都无所谓，如果是外部的，我猜DOM加载会被中断，直到JS被加载、呈现和执行)
5. internal CSS? (Or is it rendered together DOM load.)
6. 内部CSS ?(或者是一起呈现DOM load。)
7. external CSS
8. 外部CSS
9. external Images
10. 外部图像

According the article 'While external style sheets won't get loaded, both inline and external scripts will though.' but according MDM 'Stylesheet loads block script execution'. So scripts are loaded first but they are executed only after all css are available?

根据这篇文章，虽然外部样式表不会被加载，但是内联脚本和外部脚本都会被加载。但根据MDM“样式表加载块脚本执行”。所以脚本是先加载的，但是只有在所有css都可用后才执行它们?

I could think that order depends on the browser implementation or is there any standard to make this?

我可以认为顺序取决于浏览器的实现，或者有什么标准来做这个?

Does some expert would tell us the right order?

专家会告诉我们正确的顺序吗?

Thanks in advance!

提前谢谢!

1 个解决方案

#1

I believe the order is something like this:

我相信顺序是这样的:

1. Download HTML document
2. 下载HTML文档
3. Start HTML Parsing
4. 开始HTML解析
5. Start downloading external files (JavaScript, CSS, images) as they're encountered in the HTML
6. 开始下载在HTML中遇到的外部文件(JavaScript、CSS、图像)
7. Parse external files once they are downloaded (or if they are inline and don't require downloading)
   • if the files are scripts, then run them in the order they appear in the HTML
     • if they try to access the DOM right now, they will throw an error
     • 如果他们现在尝试访问DOM，他们将抛出一个错误
     • while they run, they will prevent any other rendering, which is why some scripts are put at the bottom of the body
     • 当它们运行时，它们将阻止任何其他呈现，这就是为什么有些脚本被放在主体的底部
   • 如果脚本的文件,然后运行他们的顺序出现在HTML现在如果他们试图访问DOM,他们将抛出一个错误而运行,他们将阻止任何其他呈现,这就是为什么一些脚本把底部的身体
   • for CSS files, save the style rules in order they appear in the HTML
   • 对于CSS文件，按照样式规则在HTML中出现的顺序保存它们
   • if they're images then display them
   • 如果它们是图像，就显示它们。
   • if the loading fails, then proceed without this file
   • 如果加载失败，则在没有此文件的情况下继续
8. 解析外部文件一旦下载(或如果他们是内联和不需要下载)如果脚本的文件,然后运行他们的顺序出现在HTML现在如果他们试图访问DOM,他们将抛出一个错误而运行,他们将阻止任何其他呈现,这就是为什么一些脚本把底部的身体对CSS文件,保存样式规则的顺序出现在HTML如果他们图像显示他们如果加载失败,然后在没有这个文件的情况下继续
9. End HTML Parsing
10. 最终的HTML解析
11. Create the DOM - including all the styles we have so far
12. 创建DOM——包括到目前为止所有的样式
13. Execute the DOMContentLoaded event when the DOM is fully constructed and scripts are loaded and run
    • happens even if all other external files (images, css) are not done downloading (from step 4)
    • 即使所有其他外部文件(图像、css)没有完成下载(从第4步)也会发生
    • in the Chrome F12 developer tools this is represented by a blue line on the Network view
    • 在Chrome F12开发工具中，这是由网络视图上的蓝线表示的
    • will start running anything you've added to this event, e.g. window.addEventListener("DOMContentLoaded", doStuff, true);
    • 将开始运行您添加到此事件的任何内容，例如窗口。addEventListener(“doStuff DOMContentLoaded”内,真实);
14. 执行DOMContentLoaded事件内当DOM完全构造和脚本加载和运行即使所有其他外部文件(图片、css)还没有完成下载(从步骤4)Chrome F12开发工具,这是由网络上的蓝线代表视图将开始运行任何你已经添加到这个事件,例如窗口。addEventListener(“doStuff DOMContentLoaded”内,真实);
15. Start painting the document to the display window (with any styles that have already loaded)
16. 开始将文档绘制到显示窗口(使用已经加载的任何样式)
17. Execute the window.onload event when all external files have loaded
    • in the Chrome F12 developer tools this is represented by a red line on the Network view
    • 在Chrome F12开发工具中，这由网络视图上的红线表示
    • this will start running the jQuery ready function $(document).ready(function(){ ... });
    • 这将开始运行jQuery ready函数$(document).ready(function(){…});
    • will start running any code you've added to this event, e.g. window.addEventListener("load", doStuff, true);
    • 将开始运行您添加到此事件的任何代码，例如窗口。addEventListener(“负载”,doStuff,真实);
18. 执行窗口。onload事件当所有外部文件都加载到Chrome F12开发人员工具中时，网络视图上的红线表示此事件将开始运行jQuery ready函数$(document).ready(function(){…});将开始运行您添加到此事件的任何代码，例如窗口。addEventListener(“负载”,doStuff,真实);
19. Re-paint the document, including any new images and styles
20. 重新绘制文档，包括任何新的图像和样式

Note that the execution order of scripts that are dynamically added to your page (by other scripts) is complicated and basically indeterminate. (See the answers here load and execute order of scripts)

注意，动态添加到页面(通过其他脚本)的脚本的执行顺序是复杂的，基本上是不确定的。(请参阅此处的答案并执行脚本命令)