对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
2021-06-15 03:02
YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
标签：get xxx width 出错 开始 忘记 优先执行 函数 依赖
最近在研究HTML页面中JavaScript的执行顺序问题。在JavaScript中，定义一个方法或者函数有很多方式，最常见的有2中，function语句式与函数直接量方式。
对于function语句式，解释器会优先解释。即加载了这个js文件后，会扫描一下所有的js代码，然后把该优先执行的东西先执行了，然后再从上到下按顺序执行。所以，定义的代码可以在执行的代码后边。就跟C#中的方法定义一样。解释器已经记住了这个方法，知道在内存中的哪里，用的时候直接去取就行了。
C#语言是，对象中的属性与方法具有优先的解释权，先放到内存中，之后哪里都可以用，所以没有先后顺序。这也是对象定义的时候，字段中不能有任何计算的原因。因为字段在优先解释的时候，只是为这个对象开辟内存空间，然后把值放入到内存空间。一个字段肯定不会用到另外的一个字段，因为字段定义的时候，是没有计算的。如果用到了另外一个字段，那肯定是有计算了，就报错了。
但是函数直接量方式，地位跟一般的普通变量一样，没有优先解释权。是在正常的从上到下运行过程中，遇到了才在内存中分配地址。遇到之前，解释器里根本没这个东西，不知道是什么。所以下边的这个代码就会出错。
接下来我们来看一个例子，一段代码。
HelloWorld//HHHHHHHHHHHHHHHH
这段代码在页面中运行的时候是报错的。不是说function语句式定义的函数，在前边调用也可以吗？但是注意,调用与定义要在同一个script代码块中。在这个例子中，在不同的script语句块中，所有报错了。但是如果前边定义，后边调用，就可以。
现在来分析一下所有的这些CSS,HTML,JS文件的执行顺序。接下来仅仅是我自己的一些观点。
当浏览器向服务器发起一次请求之后，xxx.com,服务器会向浏览器返回字符串，即HTML代码。接下来的执行情况是这样的。浏览器会一点点的从头接收这些字符串，然后从html>节点开始分析，从上到下，遇到
在更新页面内容HTML组件的，叫做UI Upate线程。
我的理解是，这些都是在同时进行的，但是加载HTML控件稍微快一些，CSS稍微慢一些，这就是为什么一个CSS复杂的页面，刚刚load的时候是布局混乱的，过一会就好了。因为那时候CSS还没有加载完全。
在加载HTML的同时，如果css没有加载下来，那么HTML标签中的class就不会起作用。如果CSS很大，那么一时半会不会加载下来，就会看到没有任何格式化的HTML文字。这时候就显示出inline html的好处了，在加载HTML的时候能够立即显示。当然这只是一个方面，也会造成的后果是HTML页面的加载慢，导致长时间白屏。
JS与CSS相互之间的影响也是有可能存在的。
JS 有可能会修改 DOM.典型的，可能会有 document.write. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS阻塞后续资源下载的根本原因。
JS的执行有可能依赖最新样式。比如，可能会有 var width = $(‘#id‘).width(). 这意味着，JS 代码在执行前，浏览器必须保证在此 JS之前的所有 css（无论外链还是内嵌）都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
(看到别人优秀的内容,由于对方不允许转载,所以留着私自看。供给自己，免得忘记的时候到处找，感谢对方)具体链接在下方
https://lifesinger.wordpress.com/2012/02/03/performance-impact-of-js-css-loading-order/
对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
标签：get xxx width 出错 开始 忘记 优先执行 函数 依赖
原文地址：http://www.cnblogs.com/Willie-WangLiang/p/7047547.html
上一篇：JS学习记录（补充二）
文章标题：对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
文章链接：http://soscw.com/index.php/essay/94046.html