1.页面顺序

一个典型的web页面由于三个部分组成:html、css和JS。执行的顺序是:

在构造完HTML的dom结构时。触发DOMContentLoaded事件。

整个执行过程安装html的顺序来执行。

html->head->title->style->加载样式->解析样式->link->加载外部样式表->解析外部样式->script->加载外部脚本->解析外部脚本->执行外部脚本->body->div->body->div->加载脚本->解析脚本->执行脚本->img->script->加载脚本->解析脚本->执行脚本->加载外部图片文件->页面初始化完毕。

2.js解析顺序

   JS解析过程分为编译和执行两个过程,编译也叫预处理,JS解析器完成JS代码的预处理,使JS脚本代码转换成字节码。

   执行期间,JS解析器借助执行期环境将字节码生成机器码,并按照顺序执行。

整个JS解析过程:

 

其中,词法分析器和语法分析器是交错进行的。通常,每取一个词法记号,就将其送入语法分析器进行分析。

在JS解析过程中需要关注两个方面的问题。

2.1 词法作用域

JS的变量和函数作用域采用的是词法作用域,也就是说,JS的作用域在词法分析器的阶段就决定了,而不是在执行期间决定的,即作用域取决于原代码。

2.2 调用对象和作用域链接

函数执行过程,首页创建一个执行环境,在这个环境中创建一个调用对象。 调用对象保存函数所执行的局部变量,参数、嵌套函数、外部引用等等。

作用域链接是把多个嵌套函数的作用域连在一起,再这个过程中就有可能会有闭包,也有可能产生内存泄漏。

web页面的加载顺序的更多相关文章

  1. web.xml组件加载顺序

    在配置项目组件的过程中, 了解Tomcat加载组件顺序很有必要. 例如某些框架如Quartz的集群功能需要数据库的支持, 数据库的加载肯定要在框架组件加载之前. 经过查阅和Debug发现, web.x ...

  2. web相关文件加载顺序

    WEB相关文件的加载顺序   一. 1.启动一个WEB项目,WEB容器会先去读取它的配置文件web.xml,读取<context-param>和<listener>两个节点. ...

  3. web.xml文件加载顺序

    1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...

  4. web.xml 配置 加载顺序

    web.xml 的加载顺序是:context-param -> listener -> filter -> servlet . 过滤器执行顺序是根据filter-mapping ,不 ...

  5. java web项目启动加载顺序

    转载:https://www.cnblogs.com/writeLessDoMore/p/6935524.html web.xml加载过程(步骤):       1.启动WEB项目的时候,容器(如:T ...

  6. web工程中web.xml元素加载顺序以及配置实例

    简介 web.xml是web工程的配置文件,容器加载web工程时,会首先从WEB-INF中查询web.xml,并加载其中的配置信息,可以将web.xml认为是web工程的入口. web.xml中包含有 ...

  7. Asp.Net页面(母版页)加载顺序

    ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件不会 ...

  8. html页面元素加载顺序

    一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...

  9. jquery的 $(function(){ }) = $(document).ready(function(){ }) ,及页面的加载顺序

    document.ready和onload的区别:一.JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二.是onloa ...

随机推荐

  1. oracle-day1

    今天的学习内容是oracle产品的三种安装方式,还有使用dbca静默建库 oracle产品的三种安装方式分别为: 1.图形化(Java向导)安装引导 2.使用应答文件静默安装 3.直接将装好的orac ...

  2. iOS开发--利用MPMoviePlayerViewController播放视频简单实现

    一.MPMoviePlayerViewController和MPMoviePlayerController区分开,前者继承自NSObject,后者继承自UIViewController 二.MPMov ...

  3. 【BZOJ 3049】【USACO2013 Jan】Island Travels BFS+状压DP

    这是今天下午的互测题,只得了60多分 分析一下错因: $dis[i][j]$只记录了相邻的两个岛屿之间的距离,我一开始以为可以,后来$charge$提醒我有可能会出现来回走的情况,而状压转移就一次,无 ...

  4. 为什么OGNL表达式功能强大?

    1.OGNL能支持java运算符: 2.OGNL能从java对象中取值: 3.OGNL能调用java对象的方法:

  5. 用 phylomatic 软件生成的进化树

    用 phylomatic 软件生成的进化树 Phylomatic是在线软件,可以利用植物名录,按照APGIII的被子植物科的拓扑结构,生成进化树. 参考 张金龙博士 工作目录 setwd(" ...

  6. javascript要不要用来处理业务逻辑

    这个问题,我现在才明白该怎样描述这个已经困惑了我很久的问题,在公司做的项目中,js对于数据验证起到了很大的作用,但是这使得整个项目的业务逻辑变得零散,甚至混乱 现在公司里的项目就是这样的.现在再想想, ...

  7. CLR/.NET/C#/Visual Studio/ASP.NET各版本之间的关系(转)

    由于这篇文章记录的是2015年7月,那时.net core还是叫做.net core 5 名词定义 下列这些名词,写.NET 的人一定都不陌生,但你是否有真正理解呢?如果看了我的摘要文字说明还无法理解 ...

  8. Genymotion关于【启动后player.exe已停止运行】解决方案总结

    1. 你硬盘空间不足,或是暂存区不够,请少执行一些程序或关掉一些p2p的程序,或是到控制面板卸载一些不必要的程序.最好的建议是定期进行硬盘清理,确保不浪费多余空间 ---以上来源(http://www ...

  9. Android成长日记-ProgressBar的设计

    ProgressBar的关键属性 Android:max=”100” - ---最大显示进度 Android:progress=”50”----第一显示进度 Android:secondaryProg ...

  10. nand以及yaffs2

    用的是tiny210+1312的SDK,友善之臂给的文件系统居然有300多兆,烧写系统可是要人命了,那个等啊...所以,想着把系统给做小一点.和其他一样,我的知识仅限于理论阶段,嘿嘿.今天实践一下. ...