这是HTML页面中元素的加载，呈现和执行顺序？ [英] Which is the load, rendering and execution order of elements in a HTML page?

问题描述

我在kirupa.com 找到了这个不错的讯息，但我想深入了解

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.

到现在为止，我已经了解了下一个订单：

Until now I have understood the next order:

1. DOM


2. JS（我猜这不重要JS是内联或外部的，如果它是外部的我猜DOM载入中断，直到JS加载，呈现和执行）


3. 内部CSS？


4. 外部CSS


5. 外部图片

1. DOM
2. 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)
3. internal CSS? (Or is it rendered together DOM load.)
4. external CSS
5. external Images

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

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?

我可以认为顺序取决于浏览器的实现，还是有什么标准呢？

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?

！

推荐答案

我相信订单是这样的：

1. 下载HTML文档


2. 开始 HTML 解析


3. 开始下载外部文件


4. 下载外部文件（或者如果它们是内联且不需要下载），可以解析外部文件
   
   
   
   • 如果文件是脚本，则按照它们在HTML
     
     
     
     • 中显示的顺序运行它们DOM现在，他们会在运行时抛出错误
     
     
     • ，他们会阻止任何其他渲染，这就是为什么有些脚本放在正文的底部
     
     
     

1. Download HTML document
2. Start HTML Parsing
3. Start downloading external files (JavaScript, CSS, images) as they're encountered in the HTML
4. 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
     • while they run, they will prevent any other rendering, which is why some scripts are put at the bottom of the body

• 时执行 DOMContentLoaded 事件，即使所有其他外部文件css）未完成下载（从第4步开始）


• 在Chrome F12开发者工具中，这由网络视图上的蓝线表示


• 将开始运行您添加到此事件的任何内容，例如 window.addEventListener（DOMContentLoaded，doStuff，true）;

• happens even if all other external files (images, css) are not done downloading (from step 4)
• in the Chrome F12 developer tools this is represented by a blue line on the Network view
• will start running anything you've added to this event, e.g. window.addEventListener("DOMContentLoaded", doStuff, true);

• 这是由网络视图


• 上的红线表示的，这将开始运行jQuery ready 函数 $（document）.ready（function（）{...}）;


• 将开始运行您添加到此事件的任何代码，例如 window.addEventListener（load，doStuff，true）;

• in the Chrome F12 developer tools this is represented by a red line on the Network view
• this will start running the jQuery ready function $(document).ready(function(){ ... });
• will start running any code you've added to this event, e.g. window.addEventListener("load", doStuff, true);

请注意，动态添加到您的网页的脚本的执行顺序（通过其他脚本）是复杂的，基本上不确定。 （请参阅此处的解答加载和执行脚本顺序）

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)

这篇关于这是HTML页面中元素的加载，呈现和执行顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！