record | chenfx

chenfx , record everything……


  • 首页

  • 归档

  • 站点地图

JavaScript执行环境二,闭包和执行上下文到底是怎么回事

发表于 2019-04-01 | 阅读次数:

在上一节了解了 JavaScript 执行中最粗粒度的任务:传给引擎执行的代码段。并且,我们还根据“由 JavaScript 引擎发起” 还是“由宿主发起”,分成了宏观任务和微观任务,接下来继续学习更细的执行粒度。

  • 闭包
  • 作用域链
  • 执行上下文
  • this 值

实际上,尽管这里的几个词语表示了不同的术语,但他们所指向的几乎是同一部分知识,那就是函数执行过程相关的内容;看下图(来自winter老师 ):

这里除了要理解函数执行过程的知识,对理清这些知识的概念也非常重要;所以先来看看有点儿复杂的概念:闭包。

阅读全文 »

JavaScript执行环境一,Promise里的代码为什么比setTimeout先执行

发表于 2019-03-30 | 阅读次数:

首先,如果我们是浏览器或者 Node 的开发者,我们该如何使用 JavaScript 引擎。
当拿到一段 JavaScript 代码的时候,浏览器或者 Node 环境首先要做的就是;传递给 JavaScript 引擎,并且要求它去执行;然而,执行 JavaScript 并非一锤子买卖,宿主环境当遇到一些事件时,会继续将一段代码传递给 JavaScript 引擎去执行,此外,我们可能还会提供 API 给 JavaScript 引擎;比如 setTimeout 这样的 API,它会允许 JavaScript 在特定的时机执行。
所以,我们应该形成一个感性的认知:一个 JavaScript 引擎会常驻于内存中,它等待着我们(宿主)把 JavaScript 代码或者函数传递给它执行。
在 ES3 和更早的版本中,JavaScript 本身没有执行异步的能力,这也就意味着宿主传递给 JavaScript 引擎一段代码,引擎就直接顺序的把它执行了,这个任务也就是宿主发起的任务。
但是在 ES5 之后,JavaScript 引入了 Promise;这样,不需要宿主环境的那排,JavaScript 引擎本身也可以发起任务了;通过 JSC 引擎的术语,我们把宿主发起的任务称为宏观任务,把 JavaScript 发起的任务称为微观任务。

阅读全文 »

HTML元信息标签,在head标签中可以写哪几种标签

发表于 2019-03-26 | 阅读次数:

在 HTML 语义部分章节中学习了语义标签,这些标签涵盖了日常开发中用到的多数标签,但是元信息类标签的重要性并不弱于语义类标签;所谓元信息,是指描述自身的信息,元信息类标签就是 HTML 用于描述文档自身的一类标签,它们通常出现在 head 标签中,一般不会在页面被显示出来;它多数情况下是给浏览器、搜索引擎等机器阅读的,有时候这些信息会在页面之外显示给用户,有时候则不会;下面一起看看元信息标签。

阅读全文 »

浏览器是如何工作的-阶段二

发表于 2019-03-20 | 阅读次数:

上一章最开始大概介绍了浏览器工作的6个阶段,而上一章对第一个部分通讯阶段进行了学习,也就是浏览器使用 HTTP 协议或者 HTTPS 协议,向服务端请求页面的整个过程;而这一章即阶段二主要从两个过程来学习:一是如何解析请求回来的 HTML 代码;而是 DOM 树是如何构建的。

解析代码

在上一章学习了 HTTP 的构成,但是在 Response 的 body 部分并没有具体的学习,这一章就会对 Response 的 body 部分进行学习处理; HTML 的结构不算太复杂,日常开发中需要的 90% 的“词”(词指编译原理的术语 token,表示最小的有意义的单元),种类大约只有标签开始、属性、标签结束、注释、CDATA节点几种。

实际上麻烦的是,由于 HTML 跟 SGML 的千丝万缕的联系,我们需要做不少的兼容处理;像“<?”和“<%”什么的也是必须要支持好的,报错了必须给出回应。

阅读全文 »

浏览器是如何工作的-阶段一

发表于 2019-03-15 | 阅读次数:

前端开发者平时与浏览器打交道的时间最多,可浏览器对前端开发者来说更多的是像一个神秘的黑盒子,我们仅仅知道它能做什么,而不知道它是如何做到的。事实上,了解了浏览器工作原理的大致过程,不仅对前端面试中的考点有一点帮助,它还会在实际的工作中进行辅助增强,学习了浏览器的内部工作原理和个中缘由,对于我们做性能优化、排查错误都有很大好处。

实际上,对浏览器的实现者来说,他们做的事情就是把一个 URL 变成屏幕上显示的网页,这个过程是这样的:

  1. 浏览器首先使用 HTTP 协议或者 HTTPS 协议,向服务端请求页面
  2. 把请求回来的 HTML 代码经过解析,构建成 DOM 树
  3. 计算 DOM 树上的 CSS 属性
  4. 最后根据 CSS 属性对元素逐个进行渲染,得到内存中的位图
  5. 一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度
  6. 合成之后再绘制到界面上

这里在从 HTTP 请求回来开始,这个过程并非一般想象中的一步做完再做下一步,它其实是一条流水线;从 HTTP 请求回来,就产生了流式的数据,后续的 DOM 树构建、CSS 计算、渲染、合成、绘制,都是尽可能地流式处理前一步的产出:即不需要等到上一步骤完全结束,就开始处理上一步的输出,这样我们在浏览网页的时候才会看到逐步出现的页面。

阅读全文 »
1…456…13
chenfx

chenfx

64 日志
13 标签
GitHub
Creative Commons
© 2016 — 2023 chenfx
由 Hexo 强力驱动
|
主题 — NexT.Gemini v5.1.3

渝公网安备 50010302001280号

渝ICP备16001477号-1