对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

时间：2022-09-07 10:28:50

来自   https://blog.csdn.net/u011088260/article/details/79563315

 

最近在研究HTML页面中JavaScript的执行顺序问题。在JavaScript中，定义一个方法或者函数有很多方式，最常见的有2中，function语句式与函数直接量方式。

对于function语句式，解释器会优先解释。即加载了这个js文件后，会扫描一下所有的js代码，然后把该优先执行的东西先执行了，然后再从上到下按顺序执行。所以，定义的代码可以在执行的代码后边。就跟C#中的方法定义一样。解释器已经记住了这个方法，知道在内存中的哪里，用的时候直接去取就行了。

C#语言是，对象中的属性与方法具有优先的解释权，先放到内存中，之后哪里都可以用，所以没有先后顺序。这也是对象定义的时候，字段中不能有任何计算的原因。因为字段在优先解释的时候，只是为这个对象开辟内存空间，然后把值放入到内存空间。一个字段肯定不会用到另外的一个字段，因为字段定义的时候，是没有计算的。如果用到了另外一个字段，那肯定是有计算了，就报错了。

对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

但是函数直接量方式，地位跟一般的普通变量一样，没有优先解释权。是在正常的从上到下运行过程中，遇到了才在内存中分配地址。遇到之前，解释器里根本没这个东西，不知道是什么。所以下边的这个代码就会出错。

对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

接下来我们来看一个例子，一段代码。

  1. <html>
  2. <head>
  3. <script>
  4. test();
  5. </script>
  6. </head>
  7. <body>
  8. <div>HelloWorld</div>
  9. //HHHHHHHHHHHHHHHH
  10. </body>
  11. <script>
  12. functiontest()
  13. {
  14. alert('a');
  15. }
  16. </script>
  17. </html>

这段代码在页面中运行的时候是报错的。不是说function语句式定义的函数，在前边调用也可以吗？但是注意,调用与定义要在同一个script代码块中。在这个例子中，在不同的script语句块中，所有报错了。但是如果前边定义，后边调用，就可以。

现在来分析一下所有的这些CSS,HTML,JS文件的执行顺序。接下来仅仅是我自己的一些观点。

当浏览器向服务器发起一次请求之后，xxx.com,服务器会向浏览器返回字符串，即HTML代码。接下来的执行情况是这样的。浏览器会一点点的从头接收这些字符串，然后从<html>节点开始分析，从上到下，遇到<script>节点就开始执行JS代码，在此同时，也会一点点的加载HTML控件。（分析与执行JS代码与加载HTML控件是两个同时进行的线程）所以现在document.getElementById这个方法如果获取页面尾部的控件，很有可能为空，因为这时候还没有加载到。而且，在此同时，浏览器也在加载外部CSS文件，并且应用到相应的控件上。

在更新页面内容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的加载与执行过程的简单分析的更多相关文章

  1. 用 Flask 来写个轻博客 &lpar;28&rpar; — 使用 Flask-Assets 压缩 CSS&sol;JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

  2. JS性能优化——加载和执行

    JavaScript 在浏览器中的性能,可以认为是开发者所面临得最严重的可用性问题.这个问题因JavaScript的阻塞特性变得复杂, 也就是说当浏览器在执行JavaScript代码时,不能同时做其他 ...

  3. js dom元素加载完成执行

    //dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...

  4. JS脚本加载与执行对性能的影响

    高性能JavaScript-JS脚本加载与执行对性能的影响 在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 ...

  5. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  6. 【问题】Asp&period;net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  7. js中全局变量修改后的值不生效【jsp页面中各个js中内容的加载顺序】

    一个老项目中,一个jsp文件中有很多个js文件, 现在要在页面上的一个地方判断一个状态,因为一直找不到原来是在哪里修改的那个状态,所以决定不找了,而是在比较靠前引入的一个js中定义一个全局变量,然后在 ...

  8. SpringMvc架构下css、js、jpg加载失败问题

    SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在 ...

  9. 关于html，css，js三者的加载顺序问题

    <head lang="en"> <meta charset="utf-8"> <title></title> ...

随机推荐

  1. Java豆瓣电影爬虫——小爬虫成长记（附源码）

    以前也用过爬虫,比如使用nutch爬取指定种子,基于爬到的数据做搜索,还大致看过一些源码.当然,nutch对于爬虫考虑的是十分全面和细致的.每当看到屏幕上唰唰过去的爬取到的网页信息以及处理信息的时候, ...

  2. PHP设计模式&lpar;三&rpar;

    注册器模式 这种模式比较简单好理解,在PHP框架中会经常用到,在某些比较大的PHP框架中,会在初始化时将一些常用的类实例放在注册器中,实际是存在注册器类中的一个静态数组中,以后想去用它的话,直接根据名 ...

  3. C&num; WINFORM 捕获全局异常

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Thr ...

  4. Oracle错误——ORA-03113&colon;在通信信道文件的末尾 解决方案

    起源 今天跟往常一样,登陆PL/SQL,确登陆失败,出现一个错误"ORA-01034"和"ORA-27101"如图: 然后就就通过命令提示符去登陆Oracle, ...

  5. C&num; 封装微信的模板消息

    1.先新建一个类库,以方便以后移植到其他的项目上继续使用,如何新建类库就自己去百度了哈,这里就不描述了,若有不会的朋友请留言哈.标红了的都要注意下咯. 2.先看看WxTemplate这个类文件的代码 ...

  6. unity3d 第一人称脚本解释MouseLook

    using UnityEngine; using System.Collections; /// MouseLook rotates the transform based on the mouse ...

  7. leveldb源码分析--日志

    我们知道在一个数据库系统中为了保证数据的可靠性,我们都会记录对系统的操作日志.日志的功能就是用来在系统down掉的时候对数据进行恢复,所以日志系统对一个要求可靠性的存储系统是极其重要的.接下来我们分析 ...

  8. C语言再学习之 setjmp与longjmp

    前不久在阅读Quake3源代码的时候,看到一个陌生的函数:setjmp,一番google和查询后,觉得有必要针对setjmp和longjmp这对函数写一篇blog,总结一下. setjmp和longj ...

  9. Storm完整例子

    import backtype.storm.spout.SpoutOutputCollector; import backtype.storm.task.TopologyContext; import ...

  10. Web后台任务处理

    文章:.NET Core开源组件:后台任务利器之Hangfire Hangfire官网介绍:在.NET和.NET Core应用程序中执行后台处理的简便方法.无需Windows服务或单独的过程. 以持久 ...

相关文章