—— 内核与引擎 主讲人与课程设计：耕耕 浏览器内核 主流浏览器内核 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”。但是因为当时

多场景开发实践 Best practices of TypeScript and Dev in Alibaba TypeScript 陈仲寅（花名：张挺） 就职于 阿⾥里里巴巴淘宝技术部 MidwayJS 团队 zhangting@taobao.com @czy88840616 https://github.com/czy88840616 @czy88840616 MidwayJS 接⼝口时，需要写 JSDoc TS Node.js 测试靠⼈人⾁肉 Node.js Import TypeScript TS 我们都知道 TypeScript 的优势 12 3 类型描述 更更多的 Feature ⽀支持 ⾯面向接⼝口编程 TS 个⼈人开发⾯面向类型编码， 协作时⾯面向接⼝口编程 TS 开发时增加更更多接⼝口定义， 数据定义，参数定义 TS 跨协议转换 TS 体验不不同 Egg 解决的是 BFF 场景，⽽而淘宝有不不少全栈场景 js/ts ⽬目录混合 TS 体验不不同 Egg 解决的是 BFF 场景，⽽而淘宝有不不少全栈场景 class ⽤用法，⽆无法多继承 TS 杂糅的 app/ctx 合并机制 体验不不同 Egg 解决的是 BFF 场景，⽽而淘宝有不不少全栈场景 TS 第⼀一代设计 第⼀一代设计 TS 解决复杂度问题 尝试引⼊入 IoC

一款可以让大型 iOS 工程编译速度提升 50% 的工具 96 从预编译的角度理解 Swift 与 Objective-C 及混编机制 108 美团民宿跨端复用框架设计与实践 165 美团跨端一体化富文本管理技术实践 186 前端 | 2020 202 移动端 UI 一致性解决方案 202 美团外卖 Flutter 动态化实践 227 美团开源 Logan Web：前端日志在 在适配开始之前，我们要明确好先做哪些事情。先来回顾一下 Flutter 的三层结构： 在 Flutter 的架构设计中，最上层为框架层，使用 Dart 语言开发，面向 Flutter 业务 的开发者；中间层为引擎层，使用 C/C++ 开发，实现了 Flutter 的渲染管线和 Dart 运行时等基础能力；最下层为嵌入层，负责与平台相关的能力实现。显然我们要做的 是将嵌入层移植到鸿蒙上，确切地说，我们要通过鸿蒙原生提供的平台能力，重新实 将图像上屏。这个流程 的大部分工作都由框架层和引擎层完成，对于鸿蒙的适配，我们主要关注的是与设备 自身能力相关的问题，即： 4 > 2021年美团技术年货 (1) 如何监听设备的 VSync 信号并通知 Flutter 引擎？ (2) OpenGL/Vulkan 用于上 屏的窗口对象从何而来？ VSync 信号的监听及传递 在 Flutter 引擎的 Android 实现中，设备的 VSync

Web 前端领域，新的框架层出不穷，如此多的选择给开发者带来极大的 痛苦：学习难度如何？开发效率如何？运行性能如何？可维护性高吗？还有开发社区、发 展前景等因素需要考虑。评估任何一个框架不仅要看其优势，还要看它给开发者挖的坑有 多深。Angular 框架自最初的 AngularJS，迭代到最新的 Angular 5，其不变的最显著特征就 是其整合性。作为一个一体化框架，Angular 经过精心的前期设计，涵盖了开发中的各个 (Microsoft Certified Professional， 微软认证专家)等多项认证，而且还是一位多产的作家和技术评审员。十多年来，他为多家 意大利和国际杂志撰写了大量文章，与人合著了十多本关于各类计算机主题的书籍。 ■ ■ ■ 目 录 第 1 章 准备工作 .....................................1 路由在应用程序中进行导航，以及在应用程序的状态 发生变化时如何使 HTML 元素具有动画效果。 1.3 大量示例 本书包含大量示例。学习 Angular 的最好方法就是通过示例，本书已经将尽可能多的 示例打包进来。为使本书中的示例尽可能多，本书采用一个简单的约定来避免反复地列出 文件的内容。当在某一章中首次使用一个文件时，将列出该文件的完整内容，就像在代码 清单 1-1 中所示的那样。代码清单的标题中将包含文件的名称，以及应该在哪个文件夹中

SuperTeam / xqkuang 背景介绍 Web 开发效率⾼高 ⽀支持多平台 可动态发布 体验差 能⼒力力弱 Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 前终端⼀一体化 开发效率⾼高 ⽀支持双平台 可动态发布 能⼒力力强 体验好 Global Console... Global Method Hippy Buffer ⼆二进制传输协议，编解码性能更更好。 X5 V8 X5 团队特供 V8 引擎。 Hippy Layout iOS、Android 共享布局引擎， 纯 C 开发，只有 50kb。 项⽬目架构 Hippy SDK 采⽤用三层设计，其中： • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境；

闲⻥鱼 - 让你的闲置游起来 Flutter & Dart 全栈开发 三端⼀一体化编程的新⽅方式 闲⻥鱼 - 让你的闲置游起来 闲⻥鱼 - 让你的闲置游起来 陈新新 阿⾥里里巴巴 - 闲⻥鱼 • 腾讯、YY、阿⾥里里巴巴 • 20年年程序员 • 多端⼀一体化、⾳音视频通信、P2P⽹网络、区块链 • 多语⾔言 C/C++/Go/Java/Dart…… 闲⻥鱼 - 让你的闲置游起来 让你的闲置游起来 Flutter在闲⻥鱼应⽤用过程 基础调研 Google⽀支持 混合开发 详情⻚页 发布⻚页 更更多业务 内部版本 Alpha Beta Preview1 Preview2 闲⻥鱼 - 让你的闲置游起来 接近Native效果的UI和交互体验 多图列列表 评论盖楼 图⽂文 闲⻥鱼 - 让你的闲置游起来 Native组件 Native和Flutter混合开发 混合栈 BIZ - 1001 BIZ - 1002 BIZ - 1003 BIZ - 1004 Clients Developers Isolate隔离 单线程异步开发模型 HTTP访问 打包上传 多Isolate增强并发处理理能⼒力力 闲⻥鱼 - 让你的闲置游起来 本地测试 本地调⽤用远程服务 单次请求所有⽇日志回传 Dart Zone HTTP 闲⻥鱼 - 让你的闲置游起来 ⽆无冲突调试

Electron Vue项目实践 03 应⽤用介绍 瓦匠 瓦匠⼯工作台 ⼀一体化解决⽅方案 提⾼高开发效率 应⽤用介绍 背景概述 需求类型 CRUD⻚页⾯面 场景化⻚页⾯面 登录SDK，数据上报，权限系统，发 布系统等…… 新项⽬目 效率低，同质化，重复成本 核⼼心功能 应⽤用介绍 多⼯工程模板 ⼀一键集成SDK 快速⽣生成⻚页⾯面 接⼊入发布系统 DevOps H5、PC Electron Vue项目实践 项⽬目实践 Electron原理理 两个核心 Main-process Render-process 应⽤用架构选型 项⽬目实践 BrowserWindow 多窗⼝口 单窗⼝口 BrowserWindow BrowserWindow 业务1 业务2 适⽤用场景 IDE, IM等 业务1 业务2 特点：项⽬目协同开发，多任务处理理 适⽤用场景 ⼯工具，流程 Electron应⽤用 html CSS JS Node.js OS API 主进程，渲染进程 开发总结 资源⽂文件，安装包 调试 构建 发布 单窗⼝口、多窗⼝口 资源⽂文件 html CSS JS 渲染进程 单⻚页⾯面、多⻚页⾯面 Mac / Window / Linux Nginx / CDN 关注点 进程通信，内存管理理，版本管理理， 性能及Crash监控…… 兼容，DOM，组件、性能，……

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 模块系统 学习模块加载和打包工具 学习包管理工具 学习版本控制 学习构建及任务自动化技术 学习网站性能优化 学习测试 学习无头浏览器 学习离线开发 学习网络／浏览器／应用的安全 多平台开发学习 导向学习 前端课程 前端开发学习的起点 前端资讯、新闻站和播客 第三部分：前端开发工具 Doc/API 浏览工具 SEO 工具 原型设计和线框图工具 制图工具 3 1 DNS） 学习 HTTP/Networks（包括 CORS 和 WebSockets） 学习网页寄存（通称虚拟主机） 学习前端开发 学习用户界面／交互设计 学习 HTML 和 CSS 学习搜索引擎优化 学习 JavaScript 学习 Web 动画 学习 DOM、BOM 和 jQuery 学习网页字体 & 图标 学习可访问性相关知识 学习 web／浏览器 API 学习 JSON

[abc]，表示匹配一个字符，它可以是 "a"、"b"、"c" 之一。 JavaScript 正则表达式迷你书 1. 第一章 正则表达式字符匹配攻略 | 第 7 页 1.2.1. 范围表示法 如果字符组里的字符特别多的话，怎么办？可以使用范围表示法。 比如 [123456abcdefGHIJKLM]，可以写成 [1-6a-fG-M]。用连字符 - 来省略和简写。 因为连字符有特殊用途，那么要匹配 "a"、"-"、"z" 这三者中任意一个字符，该怎么做呢？ 不能写成 [a-z]，因为其表示小写字符中的任何一个字符。 可以写成如下的方式：[-az] 或 [az-] 或 [a\-z]。 即要么放在开头，要么放在结尾，要么转义。总之不会让引擎认为是范围表示法就行了。 1.2.2. 排除字符组 纵向模糊匹配，还有一种情形就是，某位字符可以是任何东西，但就不能是 "a"、"b"、"c"。 此时就是排除字符组（反义字符组）的概念。例如 [^abc]，表示是一个除 "1234", "12345", "12345"] 其中正则 /\d{2,5}/，表示数字连续出现 2 到 5 次。会匹配 2 位、3 位、4 位、5 位连续数字。 但是其是贪婪的，它会尽可能多的匹配。你能给我 6 个，我就要 5 个。你能给我 3 个，我就要 3 个。 反正只要在能力范围内，越多越好。 我们知道有时贪婪不是一件好事（请看文章最后一个例子）。而惰性匹配，就是尽可能少的匹配：

[abc]，表示匹配一个字符，它可以是 "a"、"b"、"c" 之一。 JavaScript 正则表达式迷你书 1. 第一章 正则表达式字符匹配攻略 | 第 7 页 1.2.1. 范围表示法 如果字符组里的字符特别多的话，怎么办？可以使用范围表示法。 比如 [123456abcdefGHIJKLM]，可以写成 [1-6a-fG-M]。用连字符 - 来省略和简写。 因为连字符有特殊用途，那么要匹配 "a"、"-"、"z" 这三者中任意一个字符，该怎么做呢？ 不能写成 [a-z]，因为其表示小写字符中的任何一个字符。 可以写成如下的方式：[-az] 或 [az-] 或 [a\-z]。 即要么放在开头，要么放在结尾，要么转义。总之不会让引擎认为是范围表示法就行了。 1.2.2. 排除字符组 纵向模糊匹配，还有一种情形就是，某位字符可以是任何东西，但就不能是 "a"、"b"、"c"。 此时就是排除字符组（反义字符组）的概念。例如 [^abc]，表示是一个除 "1234", "12345", "12345"] 其中正则 /\d{2,5}/，表示数字连续出现 2 到 5 次。会匹配 2 位、3 位、4 位、5 位连续数字。 但是其是贪婪的，它会尽可能多的匹配。你能给我 6 个，我就要 5 个。你能给我 3 个，我就要 3 个。 反正只要在能力范围内，越多越好。 我们知道有时贪婪不是一件好事（请看文章最后一个例子）。而惰性匹配，就是尽可能少的匹配：