的开销（优化后页面内存占用稳定为 100M 左右，与常规 Web 页面无异），同时在一定程度上提升了滚动性能。以商家学 院文章内容页为例，对比优化前后滚动 FPS ： 前端 < 33 优化前 FPS 优化后 FPS 34 > 2021年美团技术年货 可以看到，Flutter Web 页面滚动性能已得到较大提升，足以应对大部分业务场景。 但由于 Flutter Web 页面滚动过程 的布局约束，如何打破这样的约束，是解决滚动性能问题 的关键。 前端 < 35 ● 页面加载性能优化： 当前的页面加载性能仍有较大优化空间，需要对 Flutter 进行编译干预与优化（如按需分离 main.dart.js），减小资源包大小，有效提升 页面加载性能。 ● Flutter Web 基建：完善并优化开发、调试、编译、构建、部署链路，使得新 老项目能快速接入 Flutter key. return; } // Other codes ... } 上述代码选自 Framework 中的 RenderEditable 类，当 kIsWeb 变量为真，表示当 前应用运行在 Web 平台。受限于 Tree-Shaking 的机制原理，上述代码中，其它平 台的兼容逻辑即注释 Other codes 的部分是无法被剔除的，但这部分代码，对 Web 平台来说却是

占位符内容工具 测试工具 前端数据存储工具 (例如客户端的数据存储方案) 模块加载／打包工具 模块／包管理工具 托管工具 项目管理以及代码托管工具 协作与沟通工具 内容管理 托管／API 工具 后端即服务工具 离线工具 安全工具 构建工具 部署工具 4 1.7.38 1.7.39 1.7.40 1.7.41 网站／应用监控工具 JavaScript 错误报告／监控 性能工具 (例如客户端的数据存储方案) 模块加载／打包工具 Introduction 9 模块／包管理工具 托管工具 项目管理以及代码托管工具 协作与沟通工具 内容管理 托管／API 工具 后端即服务工具 离线工具 安全工具 构建工具 部署工具 网站／应用监控工具 JavaScript 错误报告／监控 性能工具 寻找工具的工具 下载 .pdf、.epub、或 .mobi 格式的电子书: 试、功能测试、用户测试和 A/B 测试）。 注意，如果职称名中有 “全栈” 或 “Web 开发” ，招聘者可能是用这些词来描述负责整体 web/app 开发的职位，也就是同时负责前端（可能包含设计）和后端的职位。 前端职称 19 前端开发者所使用的技术 图片来源: http://www.2n2media.com/compare-front-end-development-and-back-end-

重要了。并且，新兴的Node.js把JavaScript引入到了服务器端，JavaScript已经变成了全能型选 手。 JavaScript一度被认为是一种玩具编程语言，它有很多缺陷，所以不被大多数后端开发人员所重视。 很多人认为，写JavaScript代码很简单，并且JavaScript只是为了在网页上添加一点交互和动画效 果。 但这是完全错误的理解。JavaScript确实很容易上手，但其精髓却不为大多数开发人员所熟知。编写 alert(element); 7. }); 注意， forEach() 方法是ES5.1标准引入的，你需要测试浏览器是否支持。 Set 与 Array 类似，但 Set 没有索引，因此回调函数的前两个参数都是元素本身： 1. var s = new Set(['A', 'B', 'C']); 2. s.forEach(function (element, sameElement, set) 10. console.log(rest); 11. } 为了获取除了已定义参数 a 、 b 之外的参数，我们不得不用 arguments ，并且循环要从索 引 2 开始以便排除前两个参数，这种写法很别扭，只是为了获得额外的 rest 参数，有没有更好的 方法？ ES6标准引入了rest参数，上面的函数可以改写为： 1. function foo(a, b, ...rest)

JavaScript。如果不用，网站的 易用性和使用效率将大打折扣，无法成为操作便利、对用户友好的网 站。 对于一个互联网开发者来说，如果你想提供漂亮的网页、令用户满意的 上网体验、各种基于浏览器的便捷功能、前后端之间紧密高效的联系， JavaScript 是必不可少的工具。 近年来，JavaScript 的使用范围，慢慢超越了浏览器，正在向通用 的系统语言发展。 （1）浏览器的平台化 随着 HTML5 能，比如操作本地文件、操作图片、调用摄像头和麦克风等等。这使得 JavaScript 可以完成许多以前无法想象的事情。 （2）Node Node 项目使得 JavaScript 可以用于开发服务器端的大型项目，网 站的前后端都用 JavaScript 开发已经成为了现实。有些嵌入式平台 （Raspberry Pi）能够安装 Node，于是 JavaScript 就能为这 些平台开发应用程序。 （3）数据库操作 JavaScript V8，这拓展了 JavaScript 的应 用领域。 2009年，Node.js 项目诞生，创始人为 Ryan Dahl，它标志着 JavaScript 可以用于服务器端编程，从此网站的前端和后端可以使 用同一种语言开发。并且，Node.js 可以承受很大的并发流量，使得 开发某些互联网大规模的实时应用变得容易。 2009年，Jeremy Ashkenas 发布了 CoffeeScript

第2中写法则采用了方法链的方式将多个 then 方法调用串连在了一起，各函数也会严 格按照 resolve → then → then → then 的顺序执行，并且传给每个 then 方法的 value 的值都是前一个promise对象通过 return 返回的值。 下面是一个由方法1中的 then 用法导致的比较容易出现的很有代表性的反模式的例 子。 ✘ then 的错误使用方法 function jsonParse 函数的时候我们使用了 bind 进行绑定，通过使用这种偏函数 （Partial Function）的方式就可以减少匿名函数的使用。（如果在函数回调风格的代码 能很好的做到函数分离的话，也能减少匿名函数的数量） jsonParse.bind(null, callback); // 可以认为这种写法能转换为以下的写法 function bindJSONParse(error, 方法取得包装了XHR的promise对象和取消该XHR请求的方法 2. 在 timeoutPromise 方法中通过 Promise.race 让XHR的包装promise和超时用promise 进行竞争。 • XHR在超时前返回结果的话 a. 和正常的promise一样，通过 then 返回请求结果 • 发生超时的时候 a. 抛出 throw TimeoutError 异常并被 catch b. catch的错误对象如果是

表达式的使用范 围非常广泛，尤其在表单校验这个场景下更是不可或缺。这本小书用一个一个的小例子深入浅出地示 范了正则表达式的典型用法，值得一读。 — 大漠穷秋 我连续看了老姚在专栏的正则系列的前三篇，毫不犹豫就打赏了，而且顺藤摸瓜认识了老姚，没想到 老姚对学习本身研究颇深，当晚第一次聊天就是半宿。在本系列中，我印象最深的两句话是“正则表 达式是匹配模式，要么匹配字符，要么匹配位置”和“对于位置的理解，我们可以理解成空字符”， 且有迹可循！ — Jack Lo 老姚编写的JavaScript正则表达式系列文章通俗易通，虽然示例以JavaScript编写，但是对于正则表 达式的学习通用于其他语言。所以，不论您是前端还是后端工程师，通过阅读此迷你书都能获益。最 后，感谢老姚能够写出这一系列文章，让大家能够更轻松的理解和使用正则表达式。 — 程序猿DD 正则表达式是通用的技能，基础的东西永远绕不开。能在实战中进行总结，并形成专题，更是一种值

表达式的使用范 围非常广泛，尤其在表单校验这个场景下更是不可或缺。这本小书用一个一个的小例子深入浅出地示 范了正则表达式的典型用法，值得一读。 — 大漠穷秋 我连续看了老姚在专栏的正则系列的前三篇，毫不犹豫就打赏了，而且顺藤摸瓜认识了老姚，没想到 老姚对学习本身研究颇深，当晚第一次聊天就是半宿。在本系列中，我印象最深的两句话是“正则表 达式是匹配模式，要么匹配字符，要么匹配位置”和“对于位置的理解，我们可以理解成空字符”， 且有迹可循！ — Jack Lo 老姚编写的JavaScript正则表达式系列文章通俗易通，虽然示例以JavaScript编写，但是对于正则表 达式的学习通用于其他语言。所以，不论您是前端还是后端工程师，通过阅读此迷你书都能获益。最 后，感谢老姚能够写出这一系列文章，让大家能够更轻松的理解和使用正则表达式。 — 程序猿DD 正则表达式是通用的技能，基础的东西永远绕不开。能在实战中进行总结，并形成专题，更是一种值

是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现 有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是 否支持。下面是一个例子。 // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 上面的原始代码用了箭头函数，Babel ReferenceError let tmp; } 上面代码中，存在全局变量 tmp ，但是块级作用域内 let 又声明了一个局部变 量 tmp ，导致后者绑定这个块级作用域，所以在 let 声明变量前，对 tmp 赋值 会报错。 ES6明确规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的 变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报 上面代码报错，也是因为暂时性死区。使用 let 声明变量时，只要变量在还没有 声明完成前使用，就会报错。上面这行就属于这个情况，在变量 x 的声明语句还 没有执行完成前，就去取 x 的值，导致报错”x 未定义“。 ES6 规定暂时性死区和 let 、 const 语句不出现变量提升，主要是为了减少运 行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的 错误在 ES5 是很常

提供的排版建議，以及他開發的開源文件主題 Material‑for‑MkDocs 。 在寫作過程中，我閱讀了許多關於資料結構與演算法的教材和文章。這些作品為本書提供了優秀的範本，確 保了本書內容的準確性與品質。在此感謝所有老師和前輩的傑出貢獻！ 本書倡導手腦並用的學習方式，在這一點上我深受《動手學深度學習》的啟發。在此向各位讀者強烈推薦這 本優秀的著作。 衷心感謝我的父母，正是你們一直以來的支持與鼓勵，讓我有機會做這件富有趣味的事。 5. 完成找零，方案為 20 + 10 + 1 = 31 元。 第 1 章 初識演算法 www.hello‑algo.com 13 圖 1‑3 貨幣找零過程 在以上步驟中，我們每一步都採取當前看來最好的選擇（儘可能用大面額的貨幣），最終得到了可行的找零方 案。從資料結構與演算法的角度看，這種方法本質上是“貪婪”演算法。 小到烹飪一道菜，大到星際航行，幾乎所有問題的解決都離不開演算法。計算機的出現使得我們能夠透過程 1 章 初識演算法 www.hello‑algo.com 16 ‧ 整理撲克的過程與插入排序演算法非常類似。插入排序演算法適合排序小型資料集。 ‧ 貨幣找零的步驟本質上是貪婪演算法，每一步都採取當前看來最好的選擇。 ‧ 演算法是在有限時間內解決特定問題的一組指令或操作步驟，而資料結構是計算機中組織和儲存資料 的方式。 ‧ 資料結構與演算法緊密相連。資料結構是演算法的基石，而演算法為資料結構注入生命力。

递归调用函数会产生额外的开销。因此递归通常比循环的时间效率更低。 如图 2‑4 所示，在触发终止条件前，同时存在 ? 个未返回的递归函数，递归深度为 ? 。 第 2 章 复杂度分析 hello‑algo.com 23 图 2‑4 递归调用深度 在实际中，编程语言允许的递归深度通常是有限的，过深的递归可能导致栈溢出报错。 2. 尾递归 有趣的是，如果函数在返回前的最后一步才进行递归调用，则该函数可以被编译器或解释器优化，使其在空 间效率上与迭代相当。这种情况被称为「尾递归 tail recursion」。 ‧ 普通递归：当函数返回到上一层级的函数后，需要继续执行代码，因此系统需要保存上一层调用的上下 文。 ‧ 尾递归：递归调用是函数返回前的最后一个操作，这意味着函数返回到上一层级后，无需继续执行其他 操作，因此系统无需保存上一层函数的上下文。 以计算 1 + 2 + ⋯ + ? 为例，我们可以将结果变量 res 设为函数参数，从而实现尾递归。 ，求该数列的第 ? 个数字。 设斐波那契数列的第 ? 个数字为 ?(?) ，易得两个结论。 ‧ 数列的前两个数字为 ?(1) = 0 和 ?(2) = 1 。 ‧ 数列中的每个数字是前两个数字的和，即 ?(?) = ?(? − 1) + ?(? − 2) 。 按照递推关系进行递归调用，将前两个数字作为终止条件，便可写出递归代码。调用 fib(n) 即可得到斐波那 契数列的第 ? 个数字。