web页面的加载顺序
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 调用对象和作用域链接
函数执行过程,首页创建一个执行环境,在这个环境中创建一个调用对象。 调用对象保存函数所执行的局部变量,参数、嵌套函数、外部引用等等。
作用域链接是把多个嵌套函数的作用域连在一起,再这个过程中就有可能会有闭包,也有可能产生内存泄漏。
@7X%ZOEE}$J85DT1H[%1.png)
@7X%ZOEE}$J85DT1H[%1.png)
@7X%ZOEE}$J85DT1H[%1.png)
web页面的加载顺序的更多相关文章
- web.xml组件加载顺序
在配置项目组件的过程中, 了解Tomcat加载组件顺序很有必要. 例如某些框架如Quartz的集群功能需要数据库的支持, 数据库的加载肯定要在框架组件加载之前. 经过查阅和Debug发现, web.x ...
- web相关文件加载顺序
WEB相关文件的加载顺序 一. 1.启动一个WEB项目,WEB容器会先去读取它的配置文件web.xml,读取<context-param>和<listener>两个节点. ...
- web.xml文件加载顺序
1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...
- web.xml 配置 加载顺序
web.xml 的加载顺序是:context-param -> listener -> filter -> servlet . 过滤器执行顺序是根据filter-mapping ,不 ...
- java web项目启动加载顺序
转载:https://www.cnblogs.com/writeLessDoMore/p/6935524.html web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:T ...
- web工程中web.xml元素加载顺序以及配置实例
简介 web.xml是web工程的配置文件,容器加载web工程时,会首先从WEB-INF中查询web.xml,并加载其中的配置信息,可以将web.xml认为是web工程的入口. web.xml中包含有 ...
- Asp.Net页面(母版页)加载顺序
ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件不会 ...
- html页面元素加载顺序
一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...
- jquery的 $(function(){ }) = $(document).ready(function(){ }) ,及页面的加载顺序
document.ready和onload的区别:一.JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二.是onloa ...
随机推荐
- oracle-day1
今天的学习内容是oracle产品的三种安装方式,还有使用dbca静默建库 oracle产品的三种安装方式分别为: 1.图形化(Java向导)安装引导 2.使用应答文件静默安装 3.直接将装好的orac ...
- iOS开发--利用MPMoviePlayerViewController播放视频简单实现
一.MPMoviePlayerViewController和MPMoviePlayerController区分开,前者继承自NSObject,后者继承自UIViewController 二.MPMov ...
- 【BZOJ 3049】【USACO2013 Jan】Island Travels BFS+状压DP
这是今天下午的互测题,只得了60多分 分析一下错因: $dis[i][j]$只记录了相邻的两个岛屿之间的距离,我一开始以为可以,后来$charge$提醒我有可能会出现来回走的情况,而状压转移就一次,无 ...
- 为什么OGNL表达式功能强大?
1.OGNL能支持java运算符: 2.OGNL能从java对象中取值: 3.OGNL能调用java对象的方法:
- 用 phylomatic 软件生成的进化树
用 phylomatic 软件生成的进化树 Phylomatic是在线软件,可以利用植物名录,按照APGIII的被子植物科的拓扑结构,生成进化树. 参考 张金龙博士 工作目录 setwd(" ...
- javascript要不要用来处理业务逻辑
这个问题,我现在才明白该怎样描述这个已经困惑了我很久的问题,在公司做的项目中,js对于数据验证起到了很大的作用,但是这使得整个项目的业务逻辑变得零散,甚至混乱 现在公司里的项目就是这样的.现在再想想, ...
- CLR/.NET/C#/Visual Studio/ASP.NET各版本之间的关系(转)
由于这篇文章记录的是2015年7月,那时.net core还是叫做.net core 5 名词定义 下列这些名词,写.NET 的人一定都不陌生,但你是否有真正理解呢?如果看了我的摘要文字说明还无法理解 ...
- Genymotion关于【启动后player.exe已停止运行】解决方案总结
1. 你硬盘空间不足,或是暂存区不够,请少执行一些程序或关掉一些p2p的程序,或是到控制面板卸载一些不必要的程序.最好的建议是定期进行硬盘清理,确保不浪费多余空间 ---以上来源(http://www ...
- Android成长日记-ProgressBar的设计
ProgressBar的关键属性 Android:max=”100” - ---最大显示进度 Android:progress=”50”----第一显示进度 Android:secondaryProg ...
- nand以及yaffs2
用的是tiny210+1312的SDK,友善之臂给的文件系统居然有300多兆,烧写系统可是要人命了,那个等啊...所以,想着把系统给做小一点.和其他一样,我的知识仅限于理论阶段,嘿嘿.今天实践一下. ...