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. ssh全屏退出的办法

    在使用ssh的时候遇到,不知道碰到哪里了,突然xshell就全屏了 解决方法 按下键盘 Alt+Enter就好了

  2. Gitlab的搭建

    从网上看了一大堆的资料,最终选定按照github上的文档来搭建,虽然本人英文不好,就这样看着 这个博客弯曲完全是拷贝过来的,只为了做个笔记 原文地址:https://github.com/gitlab ...

  3. elasticsearch和hadoop集成,gateway.type hdfs设置

    配置elasticsearch的存储路径为hdfs需要两步,安装插件 elasticsearch-hadoop,在联网的情况下在命令窗口运行:plugin -install elasticsearch ...

  4. javascript 数组实例

    在遍历数组时, 如果想要排除 null / undefined 和 不存在的元素时,代码如下: for ( var i = 0; i < a.length; i++ ){ //跳过null / ...

  5. mysql5.5的安装与配置(亲测版)

    mysql5.5.x的编译安装 说明:5.5和5.1差不多,只是在编译时增加了一个cmake,其他基本一样,mysql5.5默认编码是utf-8,在使用mysql5.5配置lnmp或者lamp后安装d ...

  6. 状态压缩 HDU 3182

    t组数据 n个汉堡 e的能量 接下来的2行 val    n个 得到的权 cost  n个 花去的能量 接下来n行 每行一个q  q个数字 代表这类汉堡做好要的前提  每个汉堡只能用一次 #inclu ...

  7. Json-遍历

    1.js遍历 var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13} ...

  8. [bzoj1984]月下“毛景树”

    Description 毛毛虫经过及时的变形,最终逃过的一劫,离开了菜妈的菜园.毛毛虫经过千山万水,历尽千辛万苦,最后来到了小小的绍兴一中的校园里.爬啊爬~爬啊爬~~毛毛虫爬到了一颗小小的" ...

  9. 为什么要用hibernate 与基于数据库表结构的项目开发

    最近开始学习hibernate,其实并不知道要学习什么,有什么用.后来问了一下同事,他就说快捷方便简单,很多事情不用自己做他会帮你做好,但是我觉得不应该是这样的,于是我就去搜了一下,就搜到了一篇帖子, ...

  10. UOJ264 【NOIP2016】蚯蚓

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...