—— 内核与引擎 主讲人与课程设计：耕耕 浏览器内核 主流浏览器内核 JavaScript 引擎 主流浏览器JavaScript 引擎 浏览器内核与JavaScript 引擎关系 最初内核的概念包括渲染引擎与JS引擎，目前习惯直接称渲染引擎为内核，JS引擎独立。 浏览器内核 渲染引擎 JavaScript引擎 最初状态 浏览器内核 渲染引擎 JavaScript引擎 目前状态 JavaScript引擎独立了 渲染引擎与JavaScript 引擎 渲染引擎：Rendering Engine，一般习惯将之称为“浏览器内核”，主要功能是解析HTML/CSS进 行渲染页面，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 JavaScript 引擎：专门处理JavaScript脚本的虚拟机、解释器，用来解释执行js代码。在早期内 核也是包含js引擎的，而现在js引擎越来独立了，可以把它单独提出来。 了，可以把它单独提出来。 总结：渲染引擎（浏览器内核）处理html/css，JavaScript引擎处理JavaScript代码，有js引擎的 地方就能解析js代码 浏览器 渲染引擎（内核） 解析html/css JavaScript引擎 解析JavaScript代码 JavaScript和java什么关系 JavaScript 在刚诞生的时候，它的名字叫 “LiveScript”。但是因为当时

在适配开始之前，我们要明确好先做哪些事情。先来回顾一下 Flutter 的三层结构： 在 Flutter 的架构设计中，最上层为框架层，使用 Dart 语言开发，面向 Flutter 业务 的开发者；中间层为引擎层，使用 C/C++ 开发，实现了 Flutter 的渲染管线和 Dart 运行时等基础能力；最下层为嵌入层，负责与平台相关的能力实现。显然我们要做的 是将嵌入层移植到鸿蒙上，确切地说，我们要通过鸿蒙原生提供的平台能力，重新实 将图像上屏。这个流程 的大部分工作都由框架层和引擎层完成，对于鸿蒙的适配，我们主要关注的是与设备 自身能力相关的问题，即： 4 > 2021年美团技术年货 (1) 如何监听设备的 VSync 信号并通知 Flutter 引擎？ (2) OpenGL/Vulkan 用于上 屏的窗口对象从何而来？ VSync 信号的监听及传递 在 Flutter 引擎的 Android 实现中，设备的 VSync VsyncWaiter 类调用 Android SDK 的 Choreographer.postFrameCallback 方 法， 再 通 过 JNI 一 层 层 传 回 Flutter 引擎消费掉此回调。Java 侧的 VsyncWaiter 核心代码如下： @Override public void asyncWaitForVsync(long cookie) { Choreographer

语言本身，虽然是一种解释型语言，但是在现代浏览器 中，JavaScript 都是编译后运行。程序会被高度优化，运行效率接 近二进制程序。而且，JavaScript 引擎正在快速发展，性能将越来 越好。 此外，还有一种 WebAssembly 格式，它是 JavaScript 引擎的中 间码格式，全部都是二进制代码。由于跳过了编译步骤，可以达到接近 强大的性能 导论 - 15 - 本文档使用 书栈(BookStack 可以承受很大的访问量。 JavaScript 是一种开放的语言。它的标准 ECMA-262 是 ISO 国 际标准，写得非常详尽明确；该标准的主要实现（比如 V8 和 SpiderMonkey 引擎）都是开放的，而且质量很高。这保证了这门语 言不属于任何公司或个人，不存在版权和专利的问题。 语言标准由 TC39 委员会负责制定，该委员会的运作是透明的，所有 讨论都是开放的，会议记录都会对外公布。 24 - 本文档使用 书栈(BookStack.CN) 构建 发出 HTTP 请求，为后来大行其道的 Ajax 应用创造了条件。 2000年，KDE 项目重写了浏览器引擎 KHTML，为后来的 WebKit 和 Blink 引擎打下基础。这一年的10月23日，KDE 2.0发布，第一次将 KHTML 浏览器包括其中。 2001年，微软公司时隔5年之后，发布了 IE 浏览器的下一个版本 Internet

i 其实都是一个新的变量，所以最后输出的是 6 。你可能会问，如果每一 轮循环的变量 i 都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本 轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的 变量 i 时，就在上一轮循环的基础上进行计算。 另外， for 循环还有一个特别之处，就是设置循环变量的那部分是一个父作用 域，而循环体内部是一个单独的子作用域。 如果要将一个已经声明的变量用于解构赋值，必须非常小心。 // 错误的写法 let x; {x} = {x: 1}; // SyntaxError: syntax error 上面代码的写法会报错，因为 JavaScript 引擎会将 {x} 理解成一个代码块，从而 发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才 能解决这个问题。 // 正确的写法 let x; ({x} = fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true 上面代码中，如果 String.fromCodePoint 方法有多个参数，则它们会被合并成 一个字符串返回。 注意， fromCodePoint 方法定义在 String 对象上，而 codePointAt 方法定义 在字符串的实例对象上。 字符串的遍历器接口 ES6为

DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 2 1.6.1.14 1.6.1.15 1.6.1.16 1.6 DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 学习可访问性相关知识 学习 web／浏览器 API 学习 JSON js (通常用于桌面应用) Electron (通常用于桌面应用) 基于 WEB 技术的原生应用 最终，前端开发者从 WEB 浏览器开发中得到经验，并可以脱离浏览器引擎环境编码。近来， 人们正在构思如何脱离 web 引擎，用 web 技术（比如 CSS 和 JS）来构建原生应用。 该环境的例子： NativeScript React Native 前端开发者是什么？ 12 注：

，每个语句以 ; 结束，语句块用 {…} 。但是，JavaScript 并不强制要求在每个语句的结尾加 ; ，浏览器中负责执行JavaScript代码的引擎会自动在每个语句 的结尾补上 ; 。 注意：让JavaScript引擎自动加分号在某些情况下会改变程序的语义，导致运行结果与期望不一致。 在本教程中，我们不会省略 ; ，所有语句都会添加 ; 。 例如，下面的一行代码就是一个完整的赋值语句： 会大大增加看懂代码的难度。遇到这种 情况，需要把部分代码抽出来，作为函数来调用，这样可以减少代码的复杂度。 以 // 开头直到行末的字符被视为行注释，注释是给开发人员看到，JavaScript引擎会自动忽略： 1. // 这是一行注释 2. alert('hello'); // 这也是注释 另一种块注释是用 /…/ 把多行字符包裹起来，把一大“块”视为一个注释： 1. /* 从这里开始是块注释 100) = ' + sum.apply(null, args)); 20. } else { 21. alert('测试通过!'); 22. } 前面我们讲到了JavaScript引擎有一个在行末自动添加分号的机制，这可能让你栽到return语句的 一个大坑： 1. function foo() { 2. return { name: 'foo' }; 3. }

这三者中任意一个字符，该怎么做呢？ 不能写成 [a-z]，因为其表示小写字符中的任何一个字符。 可以写成如下的方式：[-az] 或 [az-] 或 [a\-z]。 即要么放在开头，要么放在结尾，要么转义。总之不会让引擎认为是范围表示法就行了。 1.2.2. 排除字符组 纵向模糊匹配，还有一种情形就是，某位字符可以是任何东西，但就不能是 "a"、"b"、"c"。 此时就是排除字符组（反义字符组）的概念。例如 [^abc]，表示是一个除 其可视化形式是： JavaScript 正则表达式迷你书 3. 第三章 正则表达式括号的作用 | 第 27 页 对比这两个可视化图片，我们发现，与前者相比，后者多了分组编号，如 Group #1。 其实正则引擎也是这么做的，在匹配过程中，给每一个分组都开辟一个空间，用来存储每一个分组匹配到的 数据。 既然分组可以捕获数据，那么我们就可以使用它们。 3.2.1. 提取数据 比如提取出年、月、日，可以这么做： 点。 • 分支结构“试”的策略是：货比三家。这家不行，换一家吧，还不行，再换。 既然有回溯的过程，那么匹配效率肯定低一些。相对谁呢？相对那些 DFA 引擎, DFA 是“确定型有限自动 机”的简写。 而 JavaScript 的正则引擎是 NFA，NFA 是“非确定型有限自动机”的简写。 大部分语言中的正则都是 NFA，为啥它这么流行呢？ 答：你别看我匹配慢，但是我编译快啊，而且我还有趣哦。

这三者中任意一个字符，该怎么做呢？ 不能写成 [a-z]，因为其表示小写字符中的任何一个字符。 可以写成如下的方式：[-az] 或 [az-] 或 [a\-z]。 即要么放在开头，要么放在结尾，要么转义。总之不会让引擎认为是范围表示法就行了。 1.2.2. 排除字符组 纵向模糊匹配，还有一种情形就是，某位字符可以是任何东西，但就不能是 "a"、"b"、"c"。 此时就是排除字符组（反义字符组）的概念。例如 [^abc]，表示是一个除 其可视化形式是： JavaScript 正则表达式迷你书 3. 第三章 正则表达式括号的作用 | 第 27 页 对比这两个可视化图片，我们发现，与前者相比，后者多了分组编号，如 Group #1。 其实正则引擎也是这么做的，在匹配过程中，给每一个分组都开辟一个空间，用来存储每一个分组匹配到的 数据。 既然分组可以捕获数据，那么我们就可以使用它们。 3.2.1. 提取数据 比如提取出年、月、日，可以这么做： 点。 • 分支结构“试”的策略是：货比三家。这家不行，换一家吧，还不行，再换。 既然有回溯的过程，那么匹配效率肯定低一些。相对谁呢？相对那些 DFA 引擎, DFA 是“确定型有限自动 机”的简写。 而 JavaScript 的正则引擎是 NFA，NFA 是“非确定型有限自动机”的简写。 大部分语言中的正则都是 NFA，为啥它这么流行呢？ 答：你别看我匹配慢，但是我编译快啊，而且我还有趣哦。

Sort」是算法中“分治思想”的典型体现，其有「划分」和「合并」两个阶段： 1. 划分阶段：通过递归不断 将数组从中点位置划分开，将长数组的排序问题转化为短数组的排序问题； 2. 合并阶段：划分到子数组长度为 1 时，开始向上合并，不断将 左、右两个短排序数组 合并为 一个长排 序数组，直至合并至原数组时完成排序； Figure 11‑8. 归并排序的划分与合并阶段 11.5.1. 算法流程 「递归划分」从顶至底递归地 递归执行 1. 步骤，直至子数组区间长度为 1 时，终止递归划分； 「回溯合并」从底至顶地将左子数组和右子数组合并为一个 有序数组； 11. 排序算法 hello‑algo.com 174 需要注意，由于从长度为 1 的子数组开始合并，所以 每个子数组都是有序的。因此，合并任务本质是要 将两 个有序子数组合并为一个有序数组。 11. 排序算法 hello‑algo.com 175 Figure 观察发现，归并排序的递归顺序就是二叉树的「后序遍历」。 ‧ 后序遍历：先递归左子树、再递归右子树、最后处理根结点。 ‧ 归并排序：先递归左子树、再递归右子树、最后处理合并。 // === File: merge_sort.js === /* 合并左子数组和右子数组 */ // 左子数组区间 [left, mid] // 右子数组区间 [mid + 1, right] function merge(nums

hello‑algo.com 210 图 10‑6 二分查找重复元素的插入点的步骤 观察以下代码，判断分支 nums[m] > target 和 nums[m] == target 的操作相同，因此两者可以合并。 即便如此，我们仍然可以将判断条件保持展开，因为其逻辑更加清晰、可读性更好。 // === File: binary_search_insertion.js === /* 二分查找插入点（存在重复元素） sort」是一种基于分治策略的排序算法，包含图 11‑10 所示的“划分”和“合并”阶段。 1. 划分阶段：通过递归不断地将数组从中点处分开，将长数组的排序问题转换为短数组的排序问题。 2. 合并阶段：当子数组长度为 1 时终止划分，开始合并，持续地将左右两个较短的有序数组合并为一个较 长的有序数组，直至结束。 图 11‑10 归并排序的划分与合并阶段 第 11 章 排序 hello‑algo.com 237 mid] ）和右子数组（区间 [mid + 1, right] ）。 2. 递归执行步骤 1. ，直至子数组区间长度为 1 时，终止递归划分。 “合并阶段”从底至顶地将左子数组和右子数组合并为一个有序数组。需要注意的是，从长度为 1 的子数组开 始合并，合并阶段中的每个子数组都是有序的。 第 11 章 排序 hello‑algo.com 238 图 11‑11 归并排序步骤 观察发现，归并排序与二叉树后序遍历的递归顺序是一致的。