前终端统⼀一⽅方案 Hippy-Vue 设计和实现 腾讯 / QQ 浏览器器 SuperTeam / xqkuang 背景介绍 Web 开发效率⾼高 ⽀支持多平台 可动态发布 体验差 能⼒力力弱 Native 开发效率低 ⽆无法跨平台 发布复杂 体验好 能⼒力力强 传统移动端开发模式，⽆无法满⾜足业务精细化运营需求，急需寻找⼀一种⾼高性能、跨平台、动态发布的开发解决⽅方案。 ⽅方案。 前终端⼀一体化 开发效率⾼高 ⽀支持双平台 可动态发布 能⼒力力强 体验好 Hippy 简介 腾讯 Hippy 动态运营解决⽅方案由 Hippy SDK 与 Hippy 管理理平台 组成： • Hippy SDK 是⼀一套多端统⼀一的开发框架，它能通过 JavaScript ⾼高效率地开发出：跨平台（安卓/iOS/ Web）、⾼高性能的原⽣生应⽤用，尤其适合需要快速迭代⼜又追求⾼高性能的产品。 内核团队提供⽀支持 项⽬目架构 Hippy SDK 采⽤用三层设计，其中： • JavaScript 层：提供业务代码运⾏行行时的前端上下⽂文环境； • Native Framework 层：负责前终端通讯与 JavaScript VM，并提供 Native 相关模块； • Portable UI 层：提供基础 UI 组件与布局计算框架，并负责渲染⾄至⽬目标平台； Layout/Style Hippy

的开销（优化后页面内存占用稳定为 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)

Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上 应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和当 前活跃实例的 message property 保持一致”。 为了让用户和应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在实例中定 义的方法： 1.

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

学到这里就算是开始踏入AntD的门，然后我们还得学习一下常用的一些操作，例如Mock。 针对与Mock他大致就是用来模拟数据的，为什么会有它的出现呢？因为现在前后端开发基本是分离 ，但是数据结构一般都会先定好，在日常开发中，为了前端的进度不受到后端的影响，常用Mock来 虚拟数据来模拟后端发来的请求。 本文只是简单的介绍一下Mock的使用，如果要详细学习请自行百度 Mock基本格式 export default {

'[name][chunkhash:8].js', path: __dirname + '/dist' }, plugins: [ + new CleanWebpackPlugin() }; 避免构建前每次都需要⼿手动删除 dist 使⽤用 clean-webpack-plugin ·默认会删除 output 指定的输出⽬目录 CSS3 的属性为什什么需要前缀？ Trident(-ms) Geko(-moz) module:包含loader的sourcemap source map 类型 基础库分离 ·思路路：将 react、react-dom 基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ·⽅方法：使⽤用 html-webpack- externals-plugin 利利⽤用 SplitChunksPlugin 进⾏行行公共脚本分离 Webpack4 内置的，替代CommonsChunkPlugin插件 ]/, priority: -10 } } } } }; · async 异步引⼊入的库进⾏行行分离(默认) · initial 同步引⼊入的库进⾏行行分离 · all 所有引⼊入的库进⾏行行分离(推荐) 利利⽤用 SplitChunksPlugin 分离基础包 test: 匹配出需要分离的包 module.exports = { optimization: { splitChunks:

7.3.1 1.7.3.2 1.7.4 1.7.4.1 1.7.4.1.1 1.7.4.2 1.7.5 1.7.5.1 1.7.5.2 1.8 1.8.1 1.8.2 ⽬录 前⾔ Electron简介 应⽤举例 安装 基本使⽤ 打包和部署 python⽀持 ⼼得 开发 Web技术 Log⽇志 打包 制作app的Logo asar files electron-builder github.io 离线下载阅读 跨平台桌⾯应⽤框架：Electron PDF 跨平台桌⾯应⽤框架：Electron ePub 跨平台桌⾯应⽤框架：Electron Mobi 版权说明 前⾔ 3 此电⼦书教程的全部内容，如⽆特别说明，均为本⼈原创和整理。其中部分内容参考⾃⽹络，均已备 注了出处。如有发现侵犯您版权，请通过邮箱联系我 admin 艾特 crifan.com ，我会尽快删除。谢谢 crifan.com，使⽤署名4.0国际(CC BY 4.0)协议发布 all right reserved，powered by Gitbook最后更 新： 2021-01-17 00:08:40 前⾔ 4 Electron简介 Electron概述 所属技术领域： 跨平台的桌⾯端应⽤开发 谁开发的： Github 旧称： Atom Shell 历史 2013年作为构建G

源的TypeScript以及ChakraCore JavaScript引 擎。 TypeScript: 高效可扩 展的JavaScript开发 体验 狼叔 Qunar前端架构师，某科技公司前CTO，StuQ 明星讲师，Node.js 技术布道者，Node全栈公 众号运营者，演进经历丰 富，gitc，giac，vuejs，iweb，oracle code等 多次500+以上演进 更了不起的Node 法。开发一个Node框架，需 要考虑哪些安全方面的问 题？相信你会得到一些答 案。 张小春 小春现任摩拜科技前端负责人，之前滴滴公共 前端团队负责人，再之前的最近的经历主要在 豌豆荚，喜好前端，也做过后端和客户端，出 版过2本前端读物，包含 《vue.js权威指南》 等，作为分享嘉宾最近参与了 2016 SDCC 中 国软件开发者大会 以及最近的全球首届 vueconf 等技术分享大会 Google Chrome 团队提 出 PWA 概念并实现相关技 术之后，成功地引起并持续 性受到前端业界的关注。本 次分享将介绍 PWA 技术的 业务实践经验与问题分析。 张成文 张成文，前IMWEB团队成员，对现代前端技术 体系有较深的理解，曾参与腾讯课堂、手Q会 员，吃喝玩乐，now直播等多项业务，具有较 丰富架构经验，著有书籍《现代前端技术解 析》 React组件的运行质