Monch Lee ~

 时下火热的 Vue.js 3.0 从源码、性能和语法 API 三个大的方面对框架进行了优化。其中，在性能的优化中，对于源码体积的优化，主要体现在移除了一些冷门 Feature（比如 filter、inline-template） 并**引入了 Tree-Shaking 减少打包体积**。自从 [rollup](https://github.com/rollup/rollup) 提出这个术语以来，每每谈及打包性能优化，几乎都有 Tree-Shaking 的一席之地，所以了解 Tree-Shaking 的原理是很有必要的。 阅读完本文，你可以 Get 以下问题的答案， - 什么是 Tree-Shaking？Tree-Shaking 的发展历史？ - Tree-Shaking 的原理是什么？ - 什么是...

 一位不愿意透露姓名的顶级摸鱼工程师曾经说过，**学习 Promise 最好的方式就是先阅读它的规范定义**。那么哪里可以找到 Promise 的标准定义呢？ 答案是 [Promises/A+ 规范](https://promisesaplus.com/)。 假设你已经打开了上述的规范定义的页面并尝试开始阅读（不要因为是英文的就偷偷关掉，相信自己，你可以的），规范在开篇描述了 Promise 的定义，与之交互的方法，然后强调了规范的稳定性。关于稳定性，换言之就是：我们可能会修订这份规范，但是保证改动微小且向下兼容，所以放心地学吧，这就是权威标准，五十年之后你再去谷歌 Promise，出来的规范还是这篇 😂。 好的，让我们回到规范。从开篇的介绍看，到底什么是 Promise ？ > A promise represents the eventual result of an asynchronous operation. **Promise 表示一个异步操作的最终结果**。...

 2011年，Google 发布了 Android 4.0，在经历了 Cupcake，Donut，Froyo 等多个甜品名称版本的迭代后，安卓终结了 Symbian（塞班）的霸主地位，迅速占领了手机市场跃居全球第一。同年，腾讯发布了微信开始进军移动互联网，阿里也在 2013 年宣布 ALL IN 无线，随着智能设备的普及和移动互联网时代的到来，**响应式布局**这个词开始频繁地出现在 Web 设计和开发领域，作为一名优秀的前端攻城狮，**要将极致的用户体验和最佳的工程实践作为探索的目标** ): balabala... **所以，响应式布局，要学**。不仅要学，我们还要了解它的前世今生，前置知识，实现手段和原理，以便在实际应用时选取合适的技术方案。 阅读完本文，你将 Get 以下知识点， - 什么是响应式设计？ - 什么是像素，什么DPR？设备像素与CSS像素的区别是什么？ - EM，REM 的计算规则是什么？实际应用中如何选择？ - 什么是视口...

在最新的 [ECMAScript规范](https://tc39.es/ecma262/) 中，一共定义了 **7** 种数据类型， - 基本类型：String、Number、Boolean、Symbol、Undefined、Null - 引用类型：Object 基本类型是存储在 **栈（Stack）** 中的简单数据段，引用类型的值是存储在 **堆（Heap）** 中的对象。 数据类型的值存储在堆中还是栈中，取决于值的特性。基本类型占据的空间固定，存储在栈中按值访问，可以提升变量的查询速度。引用类型的值大小不固定，不适合存储在栈中，JavaScript中采取的做法是，将引用类型的值存储在堆中，同时在栈中存储值的访问地址，所以引用类型是 **按地址访问** 的。 ```js var arr = [1, 2, 3] // 引用类型的值其实就是存储在堆内存中的对象，访问方式为按地址访问，首先找到栈区中值的地址，然后沿着地址找到堆内存中对应的对象。 ``` 对于数据类型的判断，`JavaScript` 也提供了很多种方法，遗憾的是，不同的方法得到的结果参差不齐，下面列出了我所知道的所有的类型判断方法，如果有遗漏，欢迎在评论区补充。 ##...

# BFC > 全文约 3000 字，阅读完大约需要 6 分钟，配合示例食用更佳 `BFC`（Block Formatting Contexts），[块级格式化上下文](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)，是 `CSS` 中一个比较晦涩难懂的概念，下面我们尝试以通俗易懂的语言彻底地理解它。 ## 盒模型 `CSS` 盒模型描述了通过 `文档树中的元素` 以及相应的 `视觉格式化模型` 所生成的矩形盒子。简单来说，盒模型定义了一个 `矩形盒子`，当我们需要对文档进行布局时，浏览器的渲染引擎就会根据盒模型，将所有元素表示为一个个矩形的盒子，盒子的外观由 `CSS` 决定。 一个标准的盒子由四个部分组成，由内向外分别为：`内容`，`内边距`，`边框`，`外边距`：  **标准的盒模型中，内容区域的大小可以明确地通过 `width`，`min-width`，`max-width`，`height`，`min-height`，`max-height` 控制**，也就是说，通过 `CSS`...