lovermeiy的博客

    沿着网络数据流路径来介绍 DOM 树是怎么生成的。然后再基于 DOM 树的解析流程介绍两块内容：第一个是在解析过程中遇到 JavaScript 脚本，DOM 解析器是如何处理的？第二个是 DOM 解析器是如何处理跨站点资源的？什么是 DOM    从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的，所以要将其转化为渲染引擎能够理解的内部结构，这个结构就是 DOM。在渲染引擎中，DOM 有三个层面的作用。从页面的视角来看，DOM 是生成页面的基础数据结构。从 JavaScr

    ES7 引入了 async/await，这是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰。    从其最底层的技术点一步步往上讲解，从而彻底弄清楚 async 和 await 到底是怎么工作的。    首先介绍生成器（Generator）是如何工作的，接着讲解 Generator 的底层实现机制——协程（Coroutine）；又因为 async/await 使用了 Generator 和 Promise

    在上一篇文章中我们聊到了微任务是如何工作的，并介绍了 MutationObserver 是如何利用微任务来权衡性能和效率的。今天我们就接着来聊聊微任务的另外一个应用 Promise，DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的，而且新的前端框架也使用了大量的 Promise。可以这么说，Promise 已经成为现代前端的“水”和“电”，很是关键，所以深入学习 Promise 势在必行。    本文我们就来重点聊聊 JavaScript 引入 Promise 的

    随着浏览器的应用领域越来越广泛，消息队列中这种粗时间颗粒度的任务已经不能胜任部分领域的需求，所以又出现了一种新的技术——微任务。微任务可以在实时性和效率之间做一个有效的权衡。基于微任务的技术有 MutationObserver、Promise 以及以 Promise 为基础开发出来的很多其他的技术。宏任务    页面中的大部分任务都是在主线程上执行的，这些任务包括了：渲染事件（如解析 DOM、计算布局、绘制）；用户交互事件（如鼠标点击、滚动页面、放大缩小等）；JavaScript 脚本执行事件；

    消息队列和主线程循环机制保证了页面有条不紊地运行。    异步回调是指回调函数在主函数之外执行，一般有两种方式：    第一种是把异步函数做成一个任务，添加到信息队列尾部；    第二种是把异步函数添加到微任务队列中，这样就可以在当前任务的末尾处执行微任务了。XMLHttpRequest 运作机制 function GetWebData(URL){ /** * 1:新建XMLHttpRequest请求对象 */ let xhr = new XMLHtt

    setTimeout就是一个定时器，用来指定某个函数在多少毫秒之后执行。它会返回一个整数，表示定时器的编号，同时你还可以通过该编号来取消这个定时器。    要执行一段异步任务，需要先将任务添加到消息队列中。不过通过定时器设置回调函数有点特别，它们需要在指定的时间间隔内被调用，但消息队列中的任务是按照顺序执行的，所以为了保证回调函数能在指定时间内执行，你不能将定时器的回调函数直接添加到消息队列中。    在 Chrome 中除了正常使用的消息队列之外，还有另外一个消息队列（定时器线程上的消息队列吧

    一个通用模式是使用消息队列。    IO 线程中产生的新任务添加进消息队列尾部；    渲染主线程会循环地从消息队列头部中读取任务，执行任务。    如果其他进程想要发送任务给页面主线程，那么先通过 IPC 把任务发送给渲染进程的 IO 线程，IO 线程再把任务发送给页面主线程。    消息队列机制并不是太灵活，为了适应效率和实时性，引入了微任务。...

要深入理解 V8 的工作原理，需要搞清楚一些概念和原理。编译器（Compiler）、解释器（Interpreter）、抽象语法树（AST）、字节码（Bytecode）、即时编译器（JIT）等概念，都是需要重点关注的。编译器和解释器按语言的执行流程，可以把语言划分为编译型语言和解释型语言。编译型语言在程序执行之前，需要经过编译器的编译过程，并且编译之后会直接保留机器能读懂的二进制文件，这样每次运行程序时，都可以直接运行该二进制文件，而不需要再次重新编译了。比如 C/C++、GO 等都是编译型语言。而由解释

支持隐式类型转换的语言称为弱类型语言，不支持隐式类型转换的语言称为强类型语言。把使用之前就需要确认其变量数据类型的称为静态语言。把在运行过程中需要检查数据类型的语言称为动态语言。JavaScript 是一种弱类型的、动态的语言。弱类型，意味着你不需要告诉 JavaScript 引擎这个或那个变量是什么数据类型，JavaScript 引擎在运行代码的时候自己会计算出来。动态，意味着你可以使用同一个变量保存不同类型的数据。在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是代码空间

    作用域链和 this 是两套不同的系统，它们之间基本没太多联系。    在对象内部的方法中使用对象内部的属性是一个非常普遍的需求。但是 JavaScript 的作用域机制并不支持这一点，基于这个需求，JavaScript 又搞出来另外一套 this 机制。    this 是和执行上下文绑定的。执行上下文主要分为三种——全局执行上下文、函数执行上下文和 eval 执行上下文，所以对应的 this 也只有这三种——全局执行上下文中的 this、函数中的 this 和 eval 中的 this。一

    其实在每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为 outer。当一段代码使用了一个变量时，JavaScript 引擎首先会在“当前的执行上下文”中查找该变量，如果在当前的变量环境中没有查找到，那么 JavaScript 引擎会继续在 outer 所指向的执行上下文中查找。我们把这个查找的链条就称为作用域链。在 JavaScript 执行过程中，其作用域链是由词法作用域决定的    词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以

变量创建分创建，初始化，赋值三个步骤。    故暂时性死区原理：在块作用域内，let声明的变量被提升，但变量只是创建被提升，初始化并没有被提升，在初始化之前使用变量，就会形成一个暂时性死区。    执行上下文包括 变量环境（含outer）、词法环境和this。函数内部不同声明的变量，在编译阶段会被存放到不同环境里面。Var声明的会放入变量环境中，let和const会放入词法环境中。查找变量时，优先在词法环境中搜索。执行上下文是唯一的，作用域链是不限的。编译并创建执行上下文的情况有以下三种：1、当 J

    由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。把这样的一个处理流程叫做渲染流水线。    按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。一、构建 DOM 树    浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。    输入内容：HTML 文件    处理过程：HTML 解析器解析    输出内容

从输入URL到页面展示需要浏览器进程、渲染进程和网络进程之间的配合。    浏览器进程主要负责用户交互、子进程管理和文件储存等功能。    网络进程是面向渲染进程和浏览器进程等提供网络下载功能。    渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。因为渲染进程所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对系统进行攻击，所以运行在渲染进程里面的代码是不被信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，

在浏览器中输入域名后会有怎样的HTTP请求流程呢?1、 构建请求    浏览器构建请求行信息（GET /index.html HTTP1.1），构建好后，浏览器准备发起网络请求。2、查找缓存    在真正发起网络请求之前，浏览器会先在浏览器缓存中查询是否有要请求的文件。当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求，而不会再去源服务器重新下载。这样做可以缓解服务器端压力，提升性能（获取资源的耗时更短了）。缓存是实现快速资源加载的重要组成部分。如果缓存

    在衡量 Web 页面性能的时候有一个重要的指标叫“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。影响 FP 指标的一个重要因素是网络加载速度。要想优化 Web 页面的加载速度，你需要对网络有充分的了解。而理解网络的关键是要对网络协议有深刻的认识，HTTP和 WebSocket都是基于 TCP/IP 的。    如何保证页面文件能被完整地送达浏览器呢？“数据包如何送达主机”“主机如何将数据包转交给应用”和“数据是如何被完整地送达应用程序”一、IP：把数据包送达目的主机  

点击 Chrome 浏览器右上角的“选项”菜单，选择“更多工具”子菜单，点击“任务管理器”，打开 Chrome 的任务管理器的窗口发现至少启动了 4 个进程。最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。而打开 1 个页面至少需要 1 个网络进程、1 个浏览器进程、1 个 GPU 进程以及 1 个渲染进程浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。渲染进程：核心任务是

自定义迭代器class Counter { // Counter 的实例应该迭代 limit 次 constructor(limit) { this.limit = limit; } [Symbol.iterator]() { let count = 1, limit = this.limit; return { next() { if (this.count <= this.limit) { return { do

数组在使用 Array 构造函数时，也可以省略 new 操作符。结果是一样的new Array(3) 、 Array(3) // 创建一个包含 3 个元素的数组Array 有两个 ES6 新增的用于创建数组的静态方法：from()和 of()。from()用于将类数组结构转换为数组实例，而 of()用于将一组参数转换为数组实例。Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值， Array.from( [1], x => x**2) // [2][1,

5.1 Datenew Date() //Fri Oct 30 2020 15:14:29 GMT+0800 (中国标准时间)new Date().getTime() //1604042080981new Date().toDateString() //“Fri Oct 30 2020”new Date().toTimeString() //“15:24:19 GMT+0800 (中国标准时间)”new Date().toUTCString() //“Fri, 30 Oct 2020 07:24: