1,预解析的过程。

2,代码的执行过程。

预解析:程序在执行过程,会先将代码读取到内存中检查,会将所有的声明在此处进行标记,所谓的标记就是让js解析器知道这个名字,后面在使用这个名字的时候,不会出现未定义的错误,‘这个标记过程就是提升。

## 声明:

1,名字的声明,标识符的声明(变量的声明)

**  名字的声明就是让我们的解析器知道这个名字

**  名字并没有任何数据与之对应

2,函数的声明

**  函数声明包括两部分

**  函数声明与函数表达式的区别,函数声明是单独写在一个结构里面的,不存在任何语句,逻辑判断结构中

注:针对函数声明和函数表达式。新旧浏览器不一样。

### 又如下面的预解析执行过程

function f() {};

** 首先告诉解析器有这个函数名字的存在,该阶段与变量的名字声明一致

** 然后告诉解析器这个名字连接的函数体

### 下面代码的解析执行过程

报错:numb is not a function

分析过程:

1,预解析代码,提升名字

***首先提升名字 numb

***再提升函数名,但是 numb 已经存在,使用跳过,让名字与函数体对应

***预解析后只有一个名字 numb

2,开始执行代码,从第一句赋值语句开始

***numb 赋值为1

***覆盖了函数体

3,调用numb,由于numb是数字1,因此保错

*****************************************************************************************************************

执行结果:1,undefined

2,456

代码解析与执行过程:

***************************************************************************************************************************************************************

4,JavaScript单线程处理代码与事件过程

虽然JavaScript是单线程的,可是浏览器内部不是单线程的。你的一些I/O操作、定时器的计时和事件监听(click, keydown…)等都是由浏览器提供的其他线程来完成的。

如果想利用多线程处理一些耗时较长的任务,可以使用HTML5提出的Web Worker。

二、任务队列和事件循环

JS 是单线程的,但是却能执行异步任务,这主要是因为 JS 中存在事件循环(Event Loop)和任务队列(Task Queue)。

事件循环:JS 会创建一个类似于 while (true) 的循环,每执行一次循环体的过程称之为 Tick。每次 Tick 的过程就是查看是否有待处理事件,如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中,也就是每次 Tick 会查看任务队列中是否有需要执行的任务。

任务队列:异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同,如 onclick, setTimeout, ajax 处理的方式都不同,这些异步操作是由浏览器内核的 webcore 来执行的,webcore 包含上图中的3种 webAPI,分别是 DOM Binding、network、timer模块。

  onclick 由浏览器内核的 DOM Binding 模块来处理,当事件触发的时候,回调函数会立即添加到任务队列中。

  setTimeout 会由浏览器内核的 timer 模块来进行延时处理,当时间到达的时候,才会将回调函数添加到任务队列中。

  ajax 则会由浏览器内核的 network 模块来处理,在网络请求完成返回之后,才将回调添加到任务队列中。

主线程:JS 只有一个线程,称之为主线程。而事件循环是主线程中执行栈里的代码执行完毕之后,才开始执行的。所以,主线程中要执行的代码时间过长,会阻塞事件循环的执行,也就会阻塞异步操作的执行。只有当主线程中执行栈为空的时候(即同步代码执行完后),才会进行事件循环来观察要执行的事件回调,当事件循环检测到任务队列中有事件就取出相关回调放入执行栈中由主线程执行。

------此部分转载自v客学院吧的wrx3166

-------转载目的方便自己阅读

注:个人学习笔记

JS-预解析(提升)与代码执行过程的更多相关文章

  1. js 预解析

    前言 JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢? 事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了 ...

  2. JS预解析与变量提升

    预解析 JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的.JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程 预解析过程 ...

  3. JS预解析机制

    JS的预解析过程: 1,预解析 2,再逐行解读代码, 实例: ---------------------------- <script>        var name="xm& ...

  4. js预解析相关知识总结以及一些好玩的面试题

    js预解析的题像在做智力题一样有意思~ 预解析 预解析:在解释这行代码之前发生的事情——变量的声明提前了,函数的声明提前 console.log(num) ——未定义Num,结果是报错 var num ...

  5. {sharepoint}提升 SharePoint 代码执行权限

    提升 SharePoint 代码执行权限 关于如何提升 SharePoint 代码执行权限及相关知识介绍的文章我们园子里有很多, 这里给出其中两篇文章的链接,就不再啰嗦了. http://www.cn ...

  6. js 预解析以及变量的提升

    js在执行之前会进行预解析. 什么叫预解析? 预:提前 解析:编译 预解析通俗的说:js在执行代码之前会读取js代码,会将变量声明提前. 变量声明包含什么?1.var 声明 2.函数的显示声明. 提前 ...

  7. js代码执行过程

    一:first-blood:任何程序执行的第一步总是会先检查有没有语法错误,如果有,则直接抛出语法错误,直接跳出, 二:second-blood:预编译,预编译呢会有四个执行过程,1:创建执行期上下文 ...

  8. JS预解析

    1.在逐行读js代码前,解析器会先提取所有声明的var变量和函数 js解析器会先把脚本里所有var变量声明读一遍,但是它只读变量名字,不读变量值,一开始它会赋给所有读到的var变量一个[未定义]的值. ...

  9. javascript . 03 函数定义、函数参数(形参、实参)、函数的返回值、冒泡函数、函数的加载、局部变量与全局变量、隐式全局变量、JS预解析、是否是质数、斐波那契数列

    1.1 知识点 函数:就是可以重复执行的代码块 2.  组成:参数,功能,返回值 为什么要用函数,因为一部分代码使用次数会很多,所以封装起来, 需要的时候调用 函数不调用,自己不会执行 同名函数会覆盖 ...

随机推荐

  1. Gronwall型不等式

    Problem. Suppose $x(t)\in C[0,T]$, and satisfies $$\bex t\in [0,T]\ra 1\leq x(t)\leq C_1+C_2\int_0^t ...

  2. web全栈应用【爬取(scrapy)数据 -> 通过restful接口存入数据库 -> websocket推送展示到前台】

    作为 https://github.com/fanqingsong/web_full_stack_application 子项目的一功能的核心部分,使用scrapy抓取数据,解析完的数据,使用 pyt ...

  3. H5取经之路——添加hover实现特定效果

    一.鼠标指上后显示二维码,效果图如下: 鼠标未指上时: 鼠标指上后: 代码如下: .div1 .li2 .code_wexin{ width: 0px; height: 0px; position: ...

  4. HEAD FILE

    心血来潮做的沙雕Head,喜欢就拿去用吧,Explosion! HEAD //#pragma comment(linker, "/STACK:1024000000,1024000000&qu ...

  5. pythonのdjango

    Django(醤糕) 是基于MTV的框架 安装: pip3 install django 重要性:相当于出门带不带腿 创建工程 django-admin startproject [工程名称] 工程目 ...

  6. spring事务源码分析结合mybatis源码(三)

    下面将结合mybatis源码来分析下,这种持久化框架是如何对connection使用,来达到spring事务的控制. 想要在把mybatis跟spring整合都需要这样一个jar包:mybatis-s ...

  7. torch分类问题

    import torch from torch.autograd import Variable import torch.nn.functional as F import matplotlib.p ...

  8. const与#define相比有什么不同?

    C++语言可以用const定义常量,也可以用#define定义常量,但是前者比后者有更多的优点:● const常量有数据类型,而宏常量没有数据类型.编译器可以对前者进行类型安全检查,而对后者只进行字符 ...

  9. Linux安装与基本命令

    安装centos镜像 #下载地址https://www.centos.org/download/ http://isoredirect.centos.org/centos/7/isos/x86_64/ ...

  10. Accumulation Degree

    #include<cstdio> #include<cstring> #define INF 0x7fffffff using namespace std; ; inline ...