Monch Lee ~

[堆（Heap）](https://en.wikipedia.org/wiki/Heap_(data_structure)) 是一种特殊的树，广泛应用于排序，搜索，优先级队列，求中位数等场景，接下来我将带你一起系统地学习，从原理，实现到应用全面地深入 “堆” 这个数据结构。 正式开始之前，你可以先思考一个问题， **如何在包含 10 亿个搜索关键词的日志文件中，快速获取到热门榜 Top 10 的搜索关键词呢？** 这个场景在如今搜索引擎的热门搜索排行榜上非常常见，而我们接下来要介绍的 “堆” 这个数据结构就可以解决这个问题。 ## 堆的定义 在介绍堆的定义之前，我觉得有必要先带你回顾下相关的一些知识， - **二叉树**：一种非线性表数据结构，每个节点最多有左、右两个子节点； - **完全二叉树**：除了最后一层，其他层的节点个数都是满的，最后一层的节点都靠左排列； - **时间复杂度**：衡量算法执行效率的一种方式，我们一般用 [大 O 复杂度表示法](https://baike.baidu.com/item/%E5%A4%A7O%E8%A1%A8%E7%A4%BA%E6%B3%95/1851162) 来表示，定义为 $T(n) = O(fn)$，其中...

虽然标准中写的 `==` 十分复杂，但是归根结底，类型不同的变量比较时 `==` 运算只有 3 条规则： - `undefined` 与 `null` 相等； - 字符串和 `bool` 都转为数字再比较； - 对象转换成 `primitive` 类型再比较，如果转换后与右边类型相同，不再转为数字

滑动窗口算法框架， ```js function slidingWindow(s, t) { // 利用哈希表（JavaScript 中可以用 Map 或空对象）记录目标字符串和窗口内字符串中字符的出现次数 var need = {}, window = {}; // 初始化哈希表，need 默认从 1 开始计数，window 默认从零开始计数 for (var char of t) {...

二分查找的一些技巧： ```js function binarySearch(nums, target) { var left = 0; var right = nums.length - 1; while (left

 抛开封面图，我们先以 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 的一句话作为开端， 对于使用过基于类的语言 (如 Java 或 C++) 的开发人员来说，JavaScript 有点令人困惑，因为它是动态的，并且本身不提供一个 `class` 实现。虽然在 ES2015/ES6 中引入了 `class` 关键字，但那只是语法糖，**JavaScript 仍然是基于原型的**。 那么到底什么是原型？ ## 原型 我们先用构造函数创建一个实例对象， **其实理解原型，就是理解构造函数，实例对象和原型对象之间的关系**， ```js function Engineer(name) { this.name = name...

 这是 **源码拾遗系列** 的第一篇文章，阅读完本文，下面的问题会迎刃而解， - Axios 的适配器原理是什么？ - Axios 是如何实现请求和响应拦截的？ - Axios 取消请求的实现原理？ - CSRF 的原理是什么？Axios 是如何防范客户端 CSRF 攻击？ - 请求和响应数据转换是怎么实现的？ > 全文约两千字，阅读完大约需要 6 分钟，文中 Axios 版本为 0.21.1 我们以特性作为入口，解答上述问题的同时一起感受下 Axios...

目前世界上使用率最高的浏览器是 [Chrome](https://www.google.com/chrome/)，它的核心是 [Chromium](https://www.chromium.org/chromium-projects/)（Chrome 的开发实验版），微软的 [Edge](https://www.microsoft.com/en-us/edge) 以及国内的大部分主流浏览器，都是基于 Chromium 二次开发而来，它们都有一个共同的特点：**多进程架构**。 当我们用 Chrome 打开一个页面时，会同时启动多个进程， (Chrome 使用了由 Apple 发展来的号称 “地表最快” 的 [Webkit](https://webkit.org/) 排版引擎，搭载 Google 独家开发的 [V8](https://v8.dev/) Javascript 引擎) **高性能的 Web 应用的设计和优化都离不开浏览器的多进程架构**，接下来我会以 Chrome 为例，带你了解多进程架构。 ##...

**“从输入 URL 到页面展示” 是一个极其复杂的过程**。 要完整地解释这一过程，你需要了解浏览器的[多进程架构](https://github.com/campcc/blog/issues/36)，网际协议(Internet Protocol，IP)，数据包协议(User Datagram Protocol，UDP)，传输控制协议(Transmission Control Protocol，TCP)，超文本传输​​协议(HyperText Transfer Protocol，HTTP)，域名系统(Domain Name System，DNS)，HTTP请求流程，导航流程，渲染流程等一系列网络协议、原理和流程。 **知识体系的建立是一个循序渐进的过程，没有捷径，更无法一蹴而就**，接下来的专栏文章里我将带你完整地探索这一过程。当然，我不打算从数据包和协议开始，因为那太枯燥了，相反，**渲染流程**是一个很不错的开端。 思考一下，我们编写的 HTML，CSS，JavaScript 文件，是如何转化为下面的页面的？ 我们知道，**HTML 的内容是由标记和文本组成**，标记也称为**标签**，它是 Web 语义化的基础；CSS 叫做**层叠样式表，是由选择器和属性组成**，通过它我们可以对 HTML 进行布局，设置样式；而 JavaScript 是一门脚本语言，我们可以用它创建动态更新的内容，控制多媒体，动画等等， 想要将上述的文件最终呈现为页面，浏览器需要经历一系列复杂的处理流程，如果把整个流程看作一个**渲染流水线**，按照渲染的时间顺序，流水线包括：**构建 DOM 树，样式计算，布局，分层，图层绘制，光栅化，合成**，...

你是否对 JavaScript 中的**执行上下文**、**词法环境**、**变量环境**，**变量对象**、**活动对象**、**作用域链**、**闭包**、**提升**、**this**，**执行栈**等概念有很多困惑，或者了解其中的一些但总觉得一知半解？那是因为脱离了环境，零散的概念本身就晦涩难懂，一位不知名的前端攻城狮说过，**理解零散概念的最好方式就是想办法建立知识体系，把它们全部串联在一起**，而上述的概念都是围绕下面这个问题， **一段 JavaScript 代码到底是如何执行的 ？** 🤔 ```js var name = 'Monch Lee~' var sayName = function () { console.log(name) } function sayName() { console.log(name) var name = 'Pony...