之后，对网络资源、事件、DOM 变动 进行监听，并对监听结果根据特定规则进行分析加权，得到一个首屏加载完成 的状态标识； ● 运行阶段，在首屏加载完成之后对配置平台下发的云端 JSON 文件进行解 析，对符合配置规则的资源进行 HTTP XHR 预加载，从而实现文件的预缓存 功能。 下图为预缓存的整体方案设计： 48 > 2021年美团技术年货 图 15 预缓存方案设计 编译阶段 编译阶段会扩展现有的发布流水线，在 流程进行优化，设计分平台打包方案： 图 21 分平台打包 ● 修改 flutter-cli，使其支持 –responsiveSystem 命令行参数； ● 我 们 在 flutter_tools 中 的 AST 分 析 阶 段 增 加 了 额 外 的 处 理：Respon- siveSystem 关键字的匹配，同时结合编译平台（PC 或 Mobile）来进行 AST 节点的改写； 前端 < 53 ● 去除无用 定，效果更好）。 2.1.4 视图树生成 将扁平的数据源转化为树状结构的 DSL，这个过程如果是人脑来做会怎么思考呢？ 先确定布局的整体结构是行布局或者列布局，然后再确定局部区域应该是什么布局结 构，最后组装起来形成视图树。这个过程与递归算法类似，因此我们采用了递归算法 前端 < 63 作为算法的主框架，同时引入了“横竖切割 + 布局结构 + 模型评估”三大利器。 利器一：横竖切割 生成

0. 写在前面 hello‑algo.com 4 本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注释、内容 注释、多行注释。 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.3. 在动画图解中高效学习 视频和图片相比于文字的信息密度和结构化程度更高，更容易理解。在本书中，知识重难点会主要以动画、图 B 是要明显优于算 法 C 的。对于以上情况，我们很难仅凭时间复杂度来判定算法效率高低。然而，即使存在这些问题，复杂度分 析仍然是评判算法效率的最有效且常用的方法。 2.2.3. 函数渐近上界 设算法「计算操作数量」为 ?(?) ，其是一个关于输入数据大小 ? 的函数。例如，以下算法的操作数量为 ?(?) = 3 + 2? function algorithm(n) { var a = } ?(?) 是个一次函数，说明时间增长趋势是线性的，因此易得时间复杂度是线性阶。 我们将线性阶的时间复杂度记为 ?(?) ，这个数学符号被称为「大 ? 记号 Big‑? Notation」，代表函数 ?(?) 的「渐近上界 asymptotic upper bound」。 我们要推算时间复杂度，本质上是在计算「操作数量函数 ?(?) 」的渐近上界。下面我们先来看看函数渐近上 界的数学定义。

目 录 致谢 介绍 前言 入门篇 导论 历史 基本语法 数据类型 概述 null，undefined 和布尔值 数值 字符串 对象 函数 数组 运算符 算术运算符 比较运算符 布尔运算符 二进制位运算符 其他运算符，运算顺序 语法专题 数据类型的转换 错误处理机制 编程风格 console 对象与控制台 标准库 Object 对象 属性描述对象 语言是一种“对象模型”语言。各种宿主 环境通过这个模型，描述自己的功能和操作接口，从而通过 JavaScript 控制这些功能。但是，JavaScript 并不是纯粹的“面 向对象语言”，还支持其他编程范式（比如函数式编程）。这导致几乎 任何一个问题，JavaScript 都有多种解决方法。阅读本书的过程 中，你会诧异于 JavaScript 语法的灵活性。 JavaScript 的核心语法部分相当精简，只包括两个部分：基本的语 还是值得学习，况且它的 入门真的不难。 JavaScript 的性能优势体现在以下方面。 （1）灵活的语法，表达力强。 JavaScript 既支持类似 C 语言清晰的过程式编程，也支持灵活的 函数式编程，可以用来写并发处理（concurrent）。这些语法特性已 经被证明非常强大，可以用于许多场合，尤其适用异步编程。 JavaScript 的所有值都是对象，这为程序员提供了灵活性和便利

本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注 释、内容注释、多行注释。 第 0 章 前言 hello‑algo.com 5 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 ，每一轮将一张扑克牌从无序部分插入至有序部分，直至所有扑克牌都有序。 图 1‑2 扑克排序步骤 上述整理扑克牌的方法本质上是“插入排序”算法，它在处理小型数据集时非常高效。许多编程语言的排序 库函数中都有插入排序的身影。 例三：货币找零。假设我们在超市购买了 69 元的商品，给了收银员 100 元，则收银员需要找我们 31 元。他 会很自然地完成如图 1‑3 所示的思考。 1. 可选项是比 某个任务的控制结构。在迭代中，程序会在满足一定的条件下重复执行某段 代码，直到这个条件不再满足。 1. for 循环 for 循环是最常见的迭代形式之一，适合在预先知道迭代次数时使用。 以下函数基于 for 循环实现了求和 1 + 2 + ⋯ + ? ，求和结果使用变量 res 记录。需要注意的是，Python 中 range(a, b) 对应的区间是“左闭右开”的，对应的遍历范围为 ?

Python 为准，例如使用 None 来表示“空”。 ‧ 本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注 释、内容注释、多行注释。 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 第 0 章 前言 hello‑algo.com 5 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文 ，每一轮将一张扑克牌从无序部分插入至有序部分，直至所有扑克牌都有序。 图 1‑2 扑克排序步骤 上述整理扑克牌的方法本质上是“插入排序”算法，它在处理小型数据集时非常高效。许多编程语言的排序 库函数中都有插入排序的身影。 例三：货币找零。假设我们在超市购买了 69 元的商品，给了收银员 100 元，则收银员需要找我们 31 元。他 会很自然地完成如图 1‑3 所示的思考。 1. 可选项是比 iteration」是一种重复执行某个任务的控制结构。在迭代中，程序会在满足一定的条件下重复执行某 段代码，直到这个条件不再满足。 1. for 循环 for 循环是最常见的迭代形式之一，适合在预先知道迭代次数时使用。 以下函数基于 for 循环实现了求和 1 + 2 + ⋯ + ? ，求和结果使用变量 res 记录。需要注意的是，Python 中 range(a, b) 对应的区间是“左闭右开”的，对应的遍历范围为 ?

Python 为准，例如使用 None 来表示“空”。 ‧ 本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注 释、内容注释、多行注释。 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 ，每一轮将一张扑克牌从无序部分插入至有序部分，直至所有扑克牌都有序。 图 1‑2 扑克排序步骤 上述整理扑克牌的方法本质上是“插入排序”算法，它在处理小型数据集时非常高效。许多编程语言的排序 库函数中都存在插入排序的身影。 例三：货币找零。假设我们在超市购买了 69 元的商品，给了收银员 100 元，则收银员需要找我们 31 元。他 会很自然地完成如图 1‑3 所示的思考。 1. 可选项是比 iteration」是一种重复执行某个任务的控制结构。在迭代中，程序会在满足一定的条件下重复执行某 段代码，直到这个条件不再满足。 1. for 循环 for 循环是最常见的迭代形式之一，适合预先知道迭代次数时使用。 以下函数基于 for 循环实现了求和 1 + 2 + ⋯ + ? ，求和结果使用变量 res 记录。需要注意的是，Python 中 range(a, b) 对应的区间是“左闭右开”的，对应的遍历范围为 ?

们提供学习材料和开 发工具。其次，它同样可供主管、CTO、讲师和猎头们深入探索前端开发实践。 本书内容偏向于 WEB 技术（HTML、CSS、DOM、JavaScript）和以这些技术为根基直接构 建而成的开源技术。书中引用和讨论的材料要么就是同类翘楚，要么就是解决问题的流行方 案。 本书不是一本囊括所有前端可用资源的综合纲领。其价值在于为恰好够用的分类信息搜罗简 洁、聚焦且符合时宜的甄选内容，以免在特别话题下钻了牛角尖。 Code 编辑器，这成为一种趋势。 jQuery 仍有热度，但使用率和关注度都在下滑。jQuery 3 已然发布 ，却无人问津。 Vue.js 理所应当地吸收更多追随者。 JavaScript 函数式编程和模式备受关注。 离线开发和渐进式 WEB 应用（PWA）步入主流。 微软发力。 基于 web 技术，使用 NW.js 和 Electron 开发 windows，OSX 和 linux 一样，它是万维网内容生产环节必不可少的三种技术 之一，被大多数网站所使用，并且在不需要使用插件的情况下被所有现代的浏览器所支 持。Javascript 基于原型并且把函数视为头等公民，因此是一种多范式的编程语言，支持 面向对象，命令式以及函数式编程风格。它有一个可被用来操作文字，数组，日期以及 正则表达式的 API，然而并不包含任何 I/O，因此像建网，存储或者图形工具之类的功能 就需要依赖它所在的开发环境。

变量的解构赋值 字符串的扩展 正则的扩展 数值的扩展 函数的扩展 数组的扩展 对象的扩展 Symbol Set 和 Map 数据结构 Proxy Reflect Promise 对象 Iterator 和 for...of 循环 Generator 函数的语法 Generator 函数的异步应用 async 函数 Class 的基本语法 Class 的继承 Decorator => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数 的 JavaScript 环境执行了。 配置文件 .babelrc Babel 的配置文件是 .babelrc ，存放在项目的根目录下。使用 Babel 的第一步， a[6](); // 10 上面代码中，变量 i 是 var 命令声明的，在全局范围内都有效，所以全局只有一 个变量 i 。每一次循环，变量 i 的值都会发生改变，而循环内被赋给数组 a 的 函数内部的 console.log(i) ，里面的 i 指向的就是全局的 i 。也就是说，所 有数组 a 的成员里面的 i ，指向的都是同一个 i ，导致运行时输出的是最后一 轮的 i

，这点是与 Java 语法 一致的。ECMAScript 语法区分大小写的规定适用于变量、函数名、运算符及其他一切代码。 比如变量 id 与 Id 是不同的；同样，函数 getElementById()与 getElementbyID()也是不同的，而 且 getElementbyID()是无效函数。 2.1.3 代码换行 ECMAScript 语法规定可以在文本字符串中使用反斜杠（\）对代码行进行换行。例如，下 （var s = i + j;），而表达式中的变 量“i”和“j”正是第 02～03 行代码中定义的，表达式运算的结果则会保存在变量“s”中； 第 05 行代码通过 console.log()函数向浏览器控制台输出调试信息（表达式变量“s”的运 算结果）。 运行测试【代码 2-1】所指定的 HTML 页面，并使用浏览器控制台查看调试信息，页面效 果如图 2.1 所示。在浏览器控制台中输出了【代码 s），并进行了初始化 赋值操作。注意，ECMAScript 语法规定可以在一行内定义多个变量，并允许初始化操作，数 据类型也可以不同； 第 03～04 行代码分别通过 console.log()函数向浏览器控制台输出调试信息（变量初始化的 数据内容）； 第 05 行代码通过表达式将变量“s”的数据内容赋给了变量“i”。注意这里的数据类型是 不一致的，如果是变量强类型的编程语言（C 语言和

本书部分放弃了编程语言的注释规范，以换取更加紧凑的内容排版。注释主要分为三种类型：标题注 释、内容注释、多行注释。 第 0 章 前言 www.hello‑algo.com 5 /* 标题注释，用于标注函数、类、测试样例等 */ // 内容注释，用于详解代码 /** * 多行 * 注释 */ 0.2.2 在动画图解中高效学习 相较于文字，视频和图片具有更高的信息密度和结构化程度，更易于理解。在本书中，重点和难点知识将主 ，每一轮将一张扑克牌从无序部分插入至有序部分，直至所有扑克牌都有序。 图 1‑2 扑克排序步骤 上述整理扑克牌的方法本质上是“插入排序”算法，它在处理小型数据集时非常高效。许多编程语言的排序 库函数中都有插入排序的身影。 例三：货币找零。假设我们在超市购买了 69 元的商品，给了收银员 100 元，则收银员需要找我们 31 元。他 会很自然地完成如图 1‑3 所示的思考。 1. 可选项是比 问 题时能够作出专业的反应和判断，从而提升工作的整体质量。举一个简单例子，每种编程语言都内置了排序 函数： ‧ 如果我们没有学过数据结构与算法，那么给定任何数据，我们可能都塞给这个排序函数去做了。运行顺 畅、性能不错，看上去并没有什么问题。 ‧ 但如果学过算法，我们就会知道内置排序函数的时间复杂度是 ?(? log ?) ；而如果给定的数据是固定 位数的整数（例如学号），那么我们就可以