WebApi: XMLHttpRequest是怎么实现的？回调函数将一个函数作为参数传递给另一个函数，作为参数的函数就是回调函数同步回调回调函数callback在主函数main返回之前执行的执行过程：在当前执行上下文中执行回调函数异步回调回调函数callback在主函数main执行结束之后执行，callback并没有在主函数内部调用执行过程：第一种...

WebAPI: setTimeout如何实现setTimeout定时器，用来指定某个函数在多少毫秒之后执行，返回一个整数，表示定时器的编号。浏览器实现过程：创建延迟回调任务 DelayTask添加到延迟队列 delayed_incoming_queueProcessDelayTask函数，专门处理延迟执行任务，根据任务的创建时间和延迟时间计算出到期的任务，以此循环执行到期...

TCP协议：如何保证页面文件能被完整送达浏览器？FP(First Paint)：是指从页面加载到首次开始绘制的时长。网络加载速度直接影响FP指标。IP：计算机的地址，访问任何网站实际上只是你的计算机向另外一台计算机请求信息。传输过程：上层将含有“极客时间”的数据包交给网络层；网络层再将IP头附加到数据包上，组成新的IP数据...

浏览器中页面循环系统消息队列和事件循环单线程执行一次性任务事件循环在执行过程中，引入事件循环机制，能够接收并执行新的任务消息队列消息队列是一种数据结构，可以存放要执行的任务。符合先进先出线程间消息通信将任务添加到队列处理I/O线程中产生的新任务添加进消息队列尾部渲染主线程会循环从消息队列头部中读取任...

编译过程：编译器首先依次对源代码进行词法分析、语法分析，生成抽象语法树(AST)，然后是代码优化，最后再生成处理器能够理解的机器码。如果编译成功，则会生成一个可执行文件，如果编译发生语法或其他错误，编译器则会抛出异常，最后的二进制文件也不会生成。

V8工作原理栈空间和堆空间JavaScript是一种弱类型（支持隐式类型转换）的、动态（运行过程中需要检查数据类型）的语言。JavaScript数据类型BooleanStringNumberNullUndefinedSymbolBigIntObject内存空间代码空间栈空间原始类型的数据值都是直接保存在“栈”中，原始类型的赋值会完整复制变量值。栈的空间一般不会设置太大...

Javascript执行机制变量提升（Hoisting） {代码...} 调用栈 {代码...} 作用域 {代码...} 作用域链 {代码...} 词法作用域链 {代码...} 闭包 {代码...} This {代码...} 此文章为4月Day7学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪

HTTP请求流程HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础。浏览器端发起HTTP请求流程构建请求首先，浏览器构建请求行信息，构建好后，浏览器准备发起网络请求。查找缓存在真正发起网络请求之前，浏览器会先在浏览器中查询是否有要请求的文件。如果缓存查找失败，就会进入网络请求过程了。好处：缓解服务器...

今天我们再来看看“元”编程。那么，元编程中的“元”代表什么呢？“元”有“之上”或“超出一般限制”的意思。在 JavaScript 中，我们可以把元编程的功能分为几类：第一类是查找和添加对象属性相关的功能；第二类是创建 DSL 这样的特定领域语言；第三类就是可以作为代理用于对象的装饰器。今天，就让我们一一来看一下。

对于终端用户来说，它的体验会更顺畅，因为一般在 App 包下载安装的过程中，会一次性下载初始化的资源包，再加上加载过程的预处理，就减少了动态渲染的压力；

微服务是在 2011 年首次被提出的一种架构模式。在微服务的概念被提出之前，Web 服务的开发主要经历了 C/S 结架构和 SOA 结构两个阶段。下面我们先来看看 C/S 结构。C/S 结构C/S 结构的全称是“客户机和服务器结构（Client Server）”，这种结构可以算是 Web 开发中早期的系统架构之一了。当时，大多的 Web 开发依赖的是开...

在之前的课程中，我们提到过，用 JavaScript 写的程序不是在统一的环境中运行的。虽然我们知道现实中存在定义 ECMAScript 规范的组织 TC39，以及编写 HTML5 和 CSS 规范的组织 W3C（万维网联盟），但不同的浏览器厂商对 JavaScript 虚机的实现都会影响我们的程序在最终执行时的结果。虽然标准是存在的，但是执行这些标准...

JSX 的字面量则是通过角括号来分隔的。比如下面的 <h1 /> 标签就是一个简单的例子，通过这种方式，我们就创建了一个 React 的标题元素。

面对不同浏览器对 ES6 的支持程度的不一致，有两种处理的办法。一种是编译，一种是 polyfill。这两者没有明显的界限，但是大致的区别是编译会在运行前先将代码转化成低版本的代码，再运行。而 polyfill 则是在运行时判断浏览器是否支持一个功能，只有在不支持的情况下，才使用补丁代码；如果支持，就使用原生的功能。今...

我们看到无论是响应式编程框架 React，还是测试用的 Jest、Puppeteer 工具，亦或是做代码检查和样式优化的 ESLint、Prettier 工具，都离不开第三方库，而我们在之前的例子中，都是通过 NPM 下载和安装工具的。

在编程中 “lint” 这个术语指的是虽然可以运行，但从某种程度上不是最优的代码。这些代码可能引起潜在问题，如 bug、安全隐患，或者可读性问题。linter 是一种检测代码中是否含有问题代码的工具。linting 则是在代码上运行 linter 工具，然后修复代码、去除问题代码，直到 linter 不再报错的整个过程。lint 并不是 JavaSc...

性能指标对于 JS 应用的开发者来说，也可以参考类似的 Rail 指标。Rail（response, amination, idle，load）是响应、动效、空闲和加载这 4 个单词的缩写。下面，我们来分别看下它们所代表的意义。关于响应，原则是我们的应用应当在 50ms 内处理响应，并且在 50-100ms 内提供一个可见的响应；关于动效，如之前讲过的，在...

比较流行的框架：Mocha、Jest 和 Jasmine。这三个工具都基于断言函数（assertion functions）来帮助我们增加测试的可读性和可扩展性，也都支持我们了解测试进度和生成最终的测试结果报告，了解代码的覆盖率。

为了降低出现 XSS 漏洞的可能性，有一条重要的开发原则是我们应该禁止任何用户创建的未经过处理的数据传递到 DOM 中。而当用户创建的数据必须传递到 DOM 中时，应该尽量以字符串的形式传递。 类字符串检查我们可以通过多种方式在客户端和服务器上对数据进行检查。其中一种方法是利用 JavaScript 中的内置函数 JSON.parse...

在一个程序当中，可以有多个进程。在一个进程里，也可以有多个线程。内存在进程间是不共享的，而在线程里，是可以共享的。通过下图，你可以有更直观的理解。并发是同一时间段进行的任务，而并行是两个在同一时刻进行的任务。除非是多核 CPU，否则如果只有一个 CPU 的话，多线程本身并不支持并行，而只能通过线程间的切换...

为什么说组件化在前端，特别是基于 JS 开发的 React 框架中，有着非常重要的位置呢？一是它可以达到和桌面应用类似的功能二是这样节省了资源在我们的手机或是 PC 上的下载和存储三是因为这样可以让我们随时随地访问我们需要的内容，只要有网络，输入一个 URL 便可以使用在 React 中的组件化和我们通常了解的 Web Compone...

策略模式：核心思想是在运行时基于场景选择策略。下面，我们可以通过一个红绿灯程序来看一下这一概念的实现。在这个例子中，我们可以看到 交通控制（TrafficControl）就决定了运行时环境的上下文，它可以通过转换（ turn ）这个方法来切换不同的策略。红绿灯（TrafficLight）是一个抽象类的策略，它可以根据环境需要，延...

事件驱动两个主要的对象，一个是被观察对象 change observable，一个是观察者 observer。被观察对象会因为事件而发生改变，而观察者则会被这个改变驱动，做出一些反应。

核心思想是通过减少对象的创建数量来节约内存。实现方式主要是通过：优化重复、缓慢且低效地共享数据的代码与相关对象（例如应用程序配置、状态等）共享尽可能多的数据来做到最大限度地减少应用程序中内存的使用。在享元模式下，有 3 个核心概念：享元工厂、接口和具体享元。它们的关系如下图所示。内在数据（intrinic）...

代理设计模式:一个代理对象充当另一个主体对象的接口。与门面模式做对比:代理模式与门面模式不同，门面模式最主要的功能是简化了接口的设计，把复杂的逻辑实现隐藏在背后，把不同的方法调用结合成更便捷的方法提供出来。代理对象在调用者和主体对象之间，主要起到的作用是保护和控制调用者对主体对象的访问。代理会拦截...

在 ES6 之前，单例模式在 JavaScript 中除了状态管理，其实更经常被用来做封装和命令空间。而在 ES6 以后，JS 中已经加入了很多防止全局污染的手段；JavaScript 中的新加入的模块系统（modular system）使创建全局可访问的值更容易，而不会污染全局范围。单例模式主要用于在应用程序中共享一个全局实例。当你创建一个新...

Question:找零问题的核心是在几种不同面值如 1、5、10 分的硬币中，用最少的枚数凑出针一个需要找零的钱数。贪心（greedy）算法:它的核心逻辑是我们先选择面值较大的来找，再逐渐选小面额的。为什么这里是从大到小，而不是从小到大呢？因为通常面值越大，用到的数量就越少。

方案一：常量提前，简化计算在常量提前中，比较经典的优化就是常数折叠（constant folding），顾名思义，就是把常数加在一起，比如在下面的第一个例子中，我们把 3+5 的操作直接折叠为 8。在简化计算中，比较有代表性的例子就是强度折减（strength reduction）。比如在下面的第二个例子中，x+0 和 x 没有区别，就可以简...

图就是由边（edge）连接的节点（vertax），任何一个二分的关系都可以通过图来表示。编译流程：中间代码IR，也就是中间代码（Intermediate Representation，有时也称 Intermediate Code，IC）从概念层面看，IR 可以分为 HIR（Higher IR）、MIR（Middle IR）和 LIR（Lower IR），这几种高、中、低的中间代码的形式。

一个图就是由边（edge） 相连的节点（node） 组成的。通过一条线相连接的两个节点叫做相邻节点（adjacent vertices）。同时，我们可以把一个节点连接的数量叫做度（degree）。一个边也可以加权（weighted）。一条路径（path）就是一组相邻节点的序列。一条可以回到原点的路径是循环图（cyclic graph）。一个没有可以回到...