2019-04-16

前端快爆

• Chrome 意欲实现原生自动 lazyload 功能，并支持 img 和 iframe 的 loading="lazy" 配置，该特性预计在 Chrome 75 中支持。🔗

点评：原生 lazyload 比起前端自己实现的 lazyload，更多会考虑到网速和手速的因素，会尝试去获取图片前 2k 以获取高宽进行布局占位，详见这篇文章。

• Chrome 意欲支持 Content-Security-Policy 返回头中的 report-to 指令，此指令相对 CSP 中前身指令 report-uri 额外支持了合并多个违规上报请求，保证消耗更少的流量和电量。此前 Edge 已经支持。🔗
• 介于多个网站利用传感器接口辅助生成访客指纹，Chrome Canary 将在站点调用传感器接口时弹出警告。此前 iOS 12.2 上的 Safari 默认禁止了这类行为。🔗
• Node.js 作者 Ryan Dahl 在 JS Fest 大会里介绍了 deno 的近况。deno 旨在解决 Node.js 中不安全、不好的 module 实现和历史包袱，希望为 JavaScript / TypeScript 提供一个更受控的脚本运行时环境，适用于诸如 Map Reduce 和 Serveless 形态的场景。目前 deno 启动时间比 Node.js 快 3 倍，但 I/O 时间还不太理想。deno 将在今年夏天发布 1.0 版本，届时将支持代码并行加载、TLS/SSL、远程模块的 lockfile 和调试功能。🔗

点评：I deno about all this

百宝箱

• MDX 是支持使用 JSX 和 markdown 混合编写文档的格式。
• react-three-fiber 是一个 Three.js 在 React 上渲染的工具，可以用 React 组件语法完成 WebGL 渲染。
• Formal 是一个 React Hooks 版本的 rc-form，集成了 React 表单组件通用的的非受控值缓存、值校验等功能。
• React Redux 7.0.0 正式版完成发布，使用 React Hooks 重写了 connect 方法，并让 Component 直接监听 store 变化以修正 React Redux 6.x 引入的性能问题，同时，新版本支持了 batch 接口以合并多个不同的 dispatch。🔗

点评：useRedux 接口还没有实现

编辑：承虎 & 审阅：一丝

2019-03-25

前端快爆

• V8 7.4 发布。此版本支持了 JIT-less 启动模式 、WebAssembly Threads 以及私有类成员属性语法 #field，并优化了函数形参实参数不匹配、原生访问器读写、流式解析等场景的性能表现。🔗

点评：Chrome 74 将带着 V8 7.4 内核一起正式发布，这么难看的语法已经快要被正式支持了

• Chrome 74 起，将试验性支持 kv-storage 作为一个标准库。标准库提案旨在提供不用下载即可使用的二方库，而 kv-storage 则旨在为 IndexedDB 提供简单的 kv 读取接口。🔗

点评：标准库提案是一个争议较大的提案，大家是不是觉得 std:jquery 和 std:lodash 更加重要？现在的搞法更像是 BOM 的模块化实现。

• [decorator ]() 提案再次大改，现在版本的 decorator 将提供 4 个基础方法函数 @wrap, @register, @expose 和 @initialize，并支持 decorator 的直接导入导出如 export decorator @logged。🔗

点评：不知道依赖 decorator 的那些库睡觉睡得踏实吗

百宝箱

• React Redux 发布了 7.0.0-beta 版本，在其中实现了 useRedux 接口，并解决了其 v6 版本带来的数据更新遍历 Provider 所有子树节点的性能问题。🔗

点评：为嘛不在 6.0 就提供了 Hooks 版本呢，原因在下面的专题部分有讲

• iodide 是 mozilla 提供的一个通过书写文档生成可视化网页的系统。🔗

点评：为什么看起来这么像是 markdown 版本的 jsbin

• Handtrackjs 是一款前端进行实时手势识别的库，基于 Tensorflow.js 并封装了训练数据。🔗
• React-Router 5 已经发布，Route 支持 array 作为 path 输入值了。🔗

点评：不过还是不支持 hooks

专题：React Hooks

React 一直在寻找更加贴合 UI 开发过程的心智模型，React Hooks 是他们最新的思路。编程方式的巨大变化下，已有的需求需要通过 React Hooks 重新解决。在 React Hooks 正式发布一个半月以后，我们将进行简单的回顾。

简述

• Hooks API

官方文档

• React Hooks 简述

对 React Hooks 要解决的问题、使用方式、带来的好处做了简要介绍

• 议 Function Component 与 Hooks

简述了 Function Component + Hooks 怎样替代掉 Class Component

• Function Component 和 Class Component 的区别

通过具体需求的例子，描述了 Function Component 和 Class Component 开发过程中主要的心智模型区别

实践

• useHooks

React Hooks 实践集锦站点，收集了很多易懂的 React Hooks 实现方式

• 怎么用 React Hooks 造轮子

对 React Hooks 的社区轮子进行了有效的分类，包括 DOM 副作用、动画、请求、表单、生命周期模拟、数据存储和原有库封装

• 如何实现 useInterval
• React Hooks 的闭包陷阱

前文比较了定时器需求中的 useState、useEffect、useReducer 和 useRef 的四种实现方式，正好遍历了主要的 React Hooks API。后文讲述了另一个定时器需求，比较了 useEffect、useLayoutEffect 和 useReducer 三种实现，解释了为何异步的 useEffect 会导致闭包变量读取问题

• 使用 React Hooks 请求数据的四种方式

进阶

• React Hooks 为何依赖调用顺序

本文从与 React Hooks 相抗的多个提案中抽取了 8 个主要问题，并进行了详尽的解释

• useEffect 完全指引

本文主要解释了 useEffect 的所有表现的内在原因，而在这个表现下我们如何利用第二参——React 无法 diff 两次 useEffect 的函数上下文，它的第二参数用于比对依赖的场景。

• useCallback 相关细节

简述了 useCallback 的适用场景和局限性

• 为何 React Redux 还没有支持 React Hooks?

本文主要解释了 React Redux 之前基于 Context 的 API 如何导致了性能问题，而这个性能问题如何阻碍了 React Redux Hooks 的出现的

编辑：承虎 & 审阅：一丝 & 霍雍 & 专题供稿：承虎
题图来源：https://hackernoon.com/react-hooks-usestate-using-the-state-hook-89ec55b84f8c

2019-03-18

前端快爆

• Chrome 73 发布，适配了 Mac 的深色模式，同时带来了可构造样式表（Constructable style sheets）、Signed HTTP Exchanges、Layout Jank API、String.prototype.matchAll、Object.entryies() 的逆向操作Object.fromEntries() 等诸多新特性。?

点评：需要注意的是，此前 Chrome 72 带来的 flex 高度问题，在该版本中得到了进一步修正。

• Node.js 基金会和 JS 基金会正式合并为 OpenJS 基金会。五个月前，两个组织就表达了他们合并的意图，在 13 日举办的 OpenSource Leadership Summit（开源领导力峰会）上正式宣布了这个结果。此次合并得到了包括谷歌，微软，IBM，PayPal 等 30 家企业支持。?

点评：这将有助于加速 JavaScript 和其生态系统中关键项目的发展。

• Chrome 74 的开发者工具中实现了 CSS filter()、background-image()、-webkit-mask-image() 函数的自动补全提示。?

• 点评：小编从该开发者的口中还打听到未来将会支持更多CSS 函数自动提示。

• Github 此前支持了 Draft PR 功能，用来标记该 PR 还未完成，暂时不需要进行 Review。此前通常我们会手动在 Commit 标题中标记「WIP」字样，用来表示：Work In Progress。?

点评：提交了 Draft PR 后，Merge pull request 按钮默认是灰色不可点击的，非常人性化。

• Sublime Text 3.2 正式发布，主要带来了全新的 Git 支持，更加直观的文件增删变化。?

点评：Sublime 老矣，尚能饭否？

优秀 Demo

• CSS 实现飞行的猫咪
• 聊天互动栏动画

专题：HTTP 简史

是的，无论你学不学得动，HTTP 协议已经要看到它第三个版本了，与此同时 HTTP/2 已经在互联网世界渗透了 30% 以上 [[1]](https://httparchive.org/repor... [[2]](https://w3techs.com/technolog...，站在这个时间点往回看，不同的 HTTP 版本各自在解决不同的问题，而这个发展历程正是我们想要梳理的。

通史

• HTTP 简史

简要介绍了 HTTP/0.9 发展到 HTTP/2 的历程。

• HTTP 协议流变

介绍了 HTTP 发展进程中各个提案和规范的关联和时序，从 HTTP/0.9 一直介绍到了 HTTP/3，文末附了一张谱系图，一目了然。

各代细节

• HTTP/1 缺点总结

HTTP/1 时代的设计缺陷都有哪些呢？本文介绍了队头阻塞、低效的 TCP 利用、臃肿的消息首部、受限的优先级设置。

• HTTP/2 协议翻译

RFC 7450 看不下去，细节太多？这里有一篇中文翻译。

• HTTP/2 详解 & HTTP/3 详解

标准的通俗版，分别介绍了 HTTP/2 和 HTTP/3 诞生以前的现状，再介绍到了它们的各个技术、扩展，如何影响到开发以及它的常见批评。

• HTTP 协议的链接管理

从链接管理这个角度，逐一介绍了截至 HTTP/2 中的短连接、持久连接、HTTP 管道、长连接和多路复用。

本期编辑：@壹丝，审阅：@承虎，专题供稿：@承虎。
题图来源：https://www.ionos.ca/digitalguide/hosting/technical-matters/the-most-important-http-status-codes-at-a-glance/

2019-03-12

前端快爆

• Flutter 1.2 于 MWC 会议发布。作为 Flutter 第一个功能更新版本，本次升级包括：稳定性与性能提升、现有小部件的视觉效果与功能升级、基于 Web 的开发者工具以及集成了同时发布的 Dart 2.2 提升了 Flutter 应用静态编译后的运行效率。🔗

点评：然而这个版本依然不支持选中文字复制。

• 据开发者透露，百度搜索全面接入百度小程序，搜索权重提升。除了自定义的小程序语法外，百度也与 Taro、WePy、mpvue 合作，可以做到多端统一开发，直接编译到百度小程序。与其它小程序最大的差异是，百度小程序可以设定 SEO 信息以及小程序页面到 H5 页面的映射关系以帮助百度爬虫抓取内容。🔗

点评：不得不说这是一个聪明的解决方案，百度陷入的信息孤岛会被小程序打通么？

• 干掉密码！W3C 批准 WebAuthn 成为 Web 标准。WebAuthn 允许用户通过多种方式，如生物识别、个人移动设备来进行身份认证。🔗

点评：微信和 FB 所代表的社交账号已经接近成为网络身份证，留给标准的时间不多了。

• 第5届CSS大会将于2019年3月30日在深圳科兴科学园举办，大会网站：https://css.w3ctech.com

点评：岁月如歌，那些年清除的浮动总在我眼前清楚地浮动。

全民目击

• 劳恩斯：汽车仿真配置器，一经发布便在 Reddit 上引起热议，得益于 WebGL 的良好应用，被网友称为最流畅的 3D 汽车配置工具。

专题：数据采集与统计

程序化地从用户处采集数据并加以分析可以帮助产品制定策略，帮助工程师诊断问题、找到性能瓶颈。下面是承虎准备的一系列文章，介绍了从数据采集到分析利用的方方面面。

综述：

• 把前端监控做到极致

本文是阿里的 Clue 前端监控平台负责人在 D2 上的分享，从采集、数据处理、分析、报警 4 个维度阐述了如何把前端监控做到极致。

• 大前端时代前端监控的最佳实践

本文是阿里云监控团队的彭伟春在 GMTC 上的分享，讨论了：单页应用下 PV 、首屏时间的重新界定，主动监控与现场还原，日志上报等最佳实践。

采集：

• Web 性能信息采集指南

对于性能信息，W3C性能工作组已经提供了一组 Performance API，能够详尽获取各阶段的数据加以利用。

• 苏宁用户行为采集体系的演变

本文仅介绍了苏宁用户行为采集团队在制定埋点规范、H5 与 native 日志打通、埋点无痕化、日志传输与日志安全上的一些探索过程和经验。

统计：

• 健壮地侦测异常

LinkedIn 的工程师分享了他们对异常值的判定方式——忽略假阴性而减少假阳性，并介绍了相关异常监控平台 ThirdEye 的处理方式——用样条回归方程侦测 Web 应用变慢的趋势，用符号检验找到持续性异常，用扫描统计以侦测最明显的一小时异常，用精准/最小发现时间模型来保证异常不多报和乱报，通过指标相关系数计算推测核心异常。

• 如何“不”去衡量延迟

在性能统计中，我们经常容易陷入统计学的陷阱中，本分享详细介绍了 95 percentile、99 percentile 及在此之上的平均值统计造成的结论错误——前端跨页请求数在逐年增加，请求越多则越可能经历大于 99 percentile 的值。视频介绍了更多数学计算结果和特定的统计方式如何造成了问题。

编辑：池冰 & 审阅：承虎 & 专题供稿：承虎 & 池冰

前端技术周刊 2019-03-04

前端快爆

• iOS 12.2 和 Safari 12.1 中包含了更新的智能跟踪预防模块，它将完全防止采用跨站追踪技术的第三方改变顶级域名中的 Cookie，只能在用户最后交互 30 天内通过 Storage Access API 完成 Cookie 读取；document.cookie 中创建的持久化 Cookie 将在 7 天后到期清除；此外，由于缺乏没有技术保障，do-not-track 请求头支持被废除。?

点评：针对常见的“这样的改变是否将会导致用户频繁登出”，官方建议是采用 secure 且 httpOnly 的 cookie 进行登录状态缓存。

• 在将来的 Webpack 5，将出现持久化的存储配置 cache: { type: "filesystem” } 以优化编译性能、实现 deterministic 类型的 chunkId 和 moduleId 以帮助客户端尽可能的缓存前端冷资源、支持针对 chunk 进行命名。?

点评：Webpack 配置工程师们，你们准备好了吗！

• npm 的安全问题近年有加重迹象，因此，npm 近期发文阐述了改变被广泛依赖的包的作者的安全危害——前有 event-stream 换作者致比特币失窃，后有 koa-router 挂牌卖库安全风险未知。作为契约的 semver 难以完成对 npm 包的约束，npm 因此希望和社区一起探讨优化此类问题的方案，有兴趣请点击这里加入讨论。?

百宝箱

• NSFW.js 是一个在前端检查是否有色情信息的库，可用于图片上传前筛查，基于 tensorflow.js。

点评：咦，停车啦？

• lit-element 是 Polymer 提供的简单能将 Class 包装成 Web Component 的库。

• Taro UI 2.0 发布，新增自定义主题功能，新适配了支付宝小程序、百度小程序，支持了包含日历组件的 11 个新组件。
• Cleave.js 是一个能够将 input 标签改装成能限制输入并格式化展现输入的库，有 React 和原生两个版本。

专题：React 性能优化

使用工具分析性能瓶颈

• Chrome Performance & 教程
• React DevTools
• why-did-you-update：在控制台查看触发 View 更新的原因

代码层面优化

• 利用 shouldComponentUpdate 和 PureComponent 避免过多 render function
• 不要直接改变 setState 数据
• 虚拟化长列表 & 常用库 react-virtualized
• 合理组织 React Component：React Component Patterns
• 在希望发生重新渲染的 DOM 上设置同级唯一 key 以触发重新渲染
• 尽量将 props 和 state 摊平，只传递 component 需要的 props，慎将 component 当作 props 传入

代码体积优化

• 使用 生产版本
• 使用 webpack-bundle-analyzer 可视化 webpack 输出文件的大小
• 使用动态 import，懒加载 React 组件
• 使用 Tree Shaking & 教程 & Tree Shaking 优化
• 使用 babel-plugin-import 优化业务组件的引入，实现按需加载
• 使用 SplitChunksPlugin 拆分公共代码
• 优化 Webpack 中的库
• 分析 CSS 和 JS 代码覆盖率

编辑：承虎 & 审阅：壹丝、冰块 & 专题供稿：麦梓
题图来源：https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained

2019-02-26 前端代码保护

前端快爆

• Vue 2.6 正式发布，带来了全新的 Slots（插槽）语法、异步错误处理、动态指令参数、编译警告位置信息、显式创建响应式对象、SSR 数据预抓取、可直接在浏览器中引入的 ES Modules 构建文件等特性，这一切都将更好的接轨未来的 3.0 版本。🔗

真的学不动了，小右哥求放过。

• Chrome 浏览器即将引入一个名为“Focus Mode”的新功能，该模式下会让你更加专注于网页内容的浏览，禁用一些无关打扰，比如关闭网页通知等。目前默认禁用，需要通过 「chrome://flags/#focus-mode」开启。🔗

点评：浏览器很多个，谷歌老大哥，上网不规范，亲人两行泪（什么破词，一点都不圆润，盘它！）

• Ionic React Beta 版发布，Ionic 是一个用于构建跨平台 Hybrid 移动应用程序的框架，现在开始提供 React 方式构建，目前大概已有 70 多个组件。🔗

这年头写个框架不支持 React 和 Vue 都不好意思拿出来。

• Node.js 11.10.0 发布，主要带来了 npm 6.7.0、response.writeHead 现在返回 response、新增 repl.setupHistory、引入客户端 「session」 事件等特性。🔗
• npm 企业版正式发布，主打安全性，目前主要有以下功能：可托管在 Kubernetes 集群中的专用单租户、提供公司专用的 companyname.npme.io URL、支持行业标准的 SSO 身份验证、基于角色的访问控制、在团队之间和团队之间共享包、可定制的协作和无缝 CI/CD 系统集成工作流程、通过“npm audit”告知用户已发现的漏洞。🔗
  

点评：cnpm 笑而不语。

• 微软发力，为 Chromium 的字幕添加 Windows 系统样式支持。🔗

点评：我软巨硬。

优秀 Demo

• CSS cubic-bezier() 动画
• ThreeJS 实现的钟摆效果
  
  

专题：前端代码保护

本期为 @叶兮 为我们带来的前端代码保护相关的文章。

• 介绍

  • 可信前端之路：代码保护：介绍了前端代码保护的意义以及手段。浏览器特性导致前端单纯的加密和解密强度并不高，容易被拦截。基于混淆的代码保护强度更高，但也只是增加破解的难度。

• 代码混淆

  • 使用 Esprima 进行代码混淆：生成 AST，设计自定义规则从而实现代码混淆 & Esprima 在线版。
  • JointJS。

• 虚拟机保护器：不是单纯在浏览器运行混淆后的代码，而是将源代码混淆后，用解释器对 bytecode 进行解释执行。每一个保护器的编译工具和解释器都是根据随机生成的编码重新生成。是目前在应用的性能开销最大，也是强度最高的一类代码混淆器。

  • LLVM 编译器防护
  • 小型虚拟机保护并逆向分析

• 调试保护

  • 防开发者调试：一个判断浏览器是否开启控制台的完美解决方案，开启则阻塞JS执行。

• 综合工具与逆向

  • Obfuscator:通过一系列基础的混淆将源代码转换为不可读内容，支持反美化、反调试、域名保护等。
  • 前端工程师如何反击爬虫 & 自定义字体混淆信息的自动化破解：前者是反击爬虫的综述，后者是使用 OCR 进行的相应破解。
  • JSNice、JSBeautifier。仅对基础的混淆起作用。支持转换变量名，去掉无用代码注入等。对于虚拟机保护器和调试保护无用。
  • 对 Google ReCaptcha 进行的逆向尝试：Botguard 有两部分，一部分是 UA 采集模块，另一部分是虚拟机解释执行保护。
  • VMProtect & VMAttack：前者是 Windows 系统上的代码保护工具，后者是针对 VMProtect 的伪源码还原，动静态分析。
  • 
    

本期编辑：@壹丝，审核：@承虎，专题供稿：@叶兮
题图来源：http://www.aspectestateagents.com.au/10-ways-to-protect-your-home-from-storm-damage/

前端技术周刊 2019-02-11

前端快爆

• Chrome 72 的安卓版正式启用了 Trusted Web Activity 功能，可以使得一个 PWA 应用能够在 Google Play Store 中得以被分发。 🔗

点评：了解一下国外怎么做轻应用的就行😂

• Firefox 66 将默认阻止所有音频和视频的自动播放，同时提供了用户选择是否自动播放的界面。🔗

• EcmaScript 2019 即将支持这些特性：Array.flat() 及Array.flatMap()、让对象也可以像数组一样用 for of 遍历的 Object.fromEntries 、单向清除空白符的 String.prototype.trimStart 及 String.prototype.trimEnd、可直接获得 Symbol 描述的 Symbol.prototype.description、省略 catch 回调形参的 try {} catch {}、修复 JSON 中 Unicode 边界问题的 Well Formed JSON 和 Subsume JSON、并修正了 Array.prototype.sort 和 Function.prototype.toString 的行为。🔗

点评：Chrome 73 开始这些就默认支持啦，可以先去试试。

• V8 7.3 发布，默认支持了异步的堆栈展现，WebAssembly 的启动 和 await 更快了、支持了 ECMA 2019 的新特性 Object.fromEntries 和 String.prototype.matchAll，Atomics.wake 重命名为 Atomics.notify。🔗

百宝箱

• React 16.8 发布，正式支持了 React Hooks。🔗

点评：Functional Component 党喜大普奔，Class Component 党面无表情，Vue 3 表示也要支持类似的思路

• Vue 2.6 发布，使用了更新的 Slot 语法（将与 3.0 一致）以支持动态 Slot 命名，支持了基于 Promise 的异步异常捕捉，允许直接使用 Vue.observable，支持了 serverPrefetch 钩子以允许在服务器端预渲染包含异步请求内容的组件。🔗
• flexsearch 是一个新一代的基于上下文进行全文搜索的库，相对同类库它可以轻松平衡内存消耗和搜索精确度，可在浏览器和 Node.js 端运行。

专题：Serverless

Serverless 是相对热门的体系架构思想，它拥有着快速迭代、部署简单、弹性缩扩容的特性，而把运维、部署的工作转嫁给平台来进行处理。
由于 Serverless 跟开源瓜葛相对较小，相关文章很容易沦为各个云服务的广告，这里尽量摘录平台无关的信息。

介绍

• Serverless 架构入门

本文较为直观地描述了 Serverless 与 Monolith、微服务在架构上的异同，最后从落地角度比较了利弊。

• Serverless 架构详解

针对 Serverless 的详尽介绍，包括 Faas 的状态管理、执行时间、延迟与冷启动、网关、工具链与开源的细节，并与 PaaS、容器化、NoOps 和存储过程服务进行了横向比较，最后则详述了利弊。

• Serverless 计算

相对于上一篇，本介绍更偏应用，也更精简。简要介绍了 Serverless 的多个方面并附上了文献。包含它的优势，在企业中的落地情况，适合领域，Serverless 与类似服务的简要对比，服务提供商，及相关文献汇总。

• Serverless 资源

主要是一个链接列表，集结了 Serverless 的云厂商服务与相关工具、资源。虽然全面，也暗藏了不少软文。

详细研究

• Serverless 计算对架构和开支的影响

17 年的论文，对 MindMup、Yubl 这 2 个早期介入 Serverless 架构的企业进行了案例分析，他们如何降低了 66% - 95% 的开支，最后讨论了 Serverless 将如何影响到软件体系架构的设计。

• Serverless：前进一步，后退两步

18 年的论文，描述了 AWS 上 Serverless 应用的主要困境：生命周期限制，I/O 瓶颈，缓慢的数据通信，没有完全为之定制的硬件，过度依赖云平台服务。

• Serverless：冷启动之战

针对 Serverless 的冷启动，本文详细测量了终端到终端的不同云服务、不同语言、不同大小包体的冷启动时间，并链接了冷启动相关的文章。另：如果你使用 Node.js，可以用 ncc 把项目打包成单文件以更快启动。

• Serverless 应用的 10 个安全风险

本文列举了相关安全风险：函数事件数据注入，鉴权漏洞，不安全的部署配置，过大的函数或角色权限，不充分的监控和日志，不安全的三方库，不安全的秘密信息存储，拒绝服务与资源耗竭，函数操作流控制，不正确的异常处理和冗余的异常信息。

• Serverless 计算工具：OpenLambda

OpenLambda 是面向研究者的 FaaS 开源架构，本论文详细描述了构建这样一个应用在本地数据嵌合、JIT 优化、包体管理、状态管理、资金消耗和可移植性的相关挑战。

编辑：承虎 & 审阅：胡伯 & 专题供稿：承虎

前端技术周刊 2019-01-28

前端快爆

• Firefox 65 发布，设置了 disabled 属性的元素也可以触发事件了，<script> 元素支持 referrerpolicy 属性了，实现了 CSS 环境变量 env() （Chrome 69，Safari 11 已支持），新支持了 WebP 格式的图片（Chrome、Edge 18 已支持）。?
• Safari 科技预览版 74 发布，fetch 接口支持 abort() 了，支持了 CSS Color Level 4 中定义的新 rgb()、 rgba() 语法，默认支持了 window.visualViewport，WebAuthn 和 WebRTC 有细节支持性变化。?
• Chrome 意欲实现 Priority Hints 以标识前端资源的优先级。?

点评：前端控制网络层又多一个工具。

• Node.js 11.7、11.8 接连发布，默认支持了 worker_threads 模块，支持了压缩格式 brotli，实验性支持了 Subresource Integrity Checks。?

点评：worker_threads 相比新开进程的方案更加轻量省内存，附赠说明文章一、二。

百宝箱

• 基于 Web Components 的 UI 框架 Ionic 4.0 发布，本代主版本基于 Angular，同时实验性支持了 React 和 Vue，同时支持 Web 和 PWA 应用。?

点评：Ionic 刚出来的时候，既没有预见 Angular 会被打趴下，也没有预见基于 WebView 的 Hybrid 开发在那个时代流畅度极难优化，现在的转型姗姗来迟。话说回来，基于 Web Components 技术依然是一个亮点。

• Mozilla 的物联网项目 Mozilla IoT 0.7 版本发布，支持摄像头和传感器等输入设备。?

点评：JavaScript 渗透进嵌入式开发了，就问同僚慌不慌。

• Software Galaxies 是一个把 npm 包的依赖关系可视化的项目。

点评：查看 demo 需要在墙外。感受到选择恐惧症的压力了吗。

专题：VSCode

VSCode 是当下最流行的前端编辑器。作为微软推出的现代编辑器，它已经在 GitHub 上开源, 使用 Electron 架构，代码编辑器层为 Monaco。

技术架构：

• VSCode 的 Why、How 和 What
• VSCode 源码解读
• VSCode 源码结构
• VSCode 源码中的算法与优化
• Electron 应用结构

定制开发：

• 定制化 IDE 选型笔记
• VSCode / Egret Wing 技术架构
• VSCode 插件开发全攻略

编辑：承虎 & 审阅：壹丝 & 专题供稿：自勉

2019-01-21

前端快爆

• 微软 Edge 开发者意图为 Chrome 实现 HTML Modules，该规范用来替代之前的 HTML Imports。其优点是基于 ES Modules，可以避免全局对象污染、脚本解析阻塞等问题。🔗
  

点评：举报，有人在「秀恩爱」！

<!- 早期的 HTML Imports ->
<link rel="import" href="myfile.html">

<!- HTML Modules ->
<!- module.html ->
<div id="blogPost">
    <p>Content...</p>
</div>
<script type="module">
    let blogPost = import.meta.document.querySelector("#blogPost")
    export {blogPost}
</script>

<!- blog.html ->
<script type="module">
    import {blogPost} from "module.html"
    document.body.appendChild(blogPost)
</script>

• Firefox 66 中，CSS grid-template-columns/rows 属性现在支持动画了。🔗

点评：Firefox 是第一个支持该特性的浏览器，其他浏览器应该会很快跟进，Demo

• Chrome Canary 73 的开发者工具实现了新的悬停工具，可以快速预览当前选中元素的一些 CSS 属性和对比度。🔗

点评：如果可以直接提示当前文本所实际使用的字体就更好啦。

优秀 Demo

• 纯 CSS 实现的滑块

• 五种 CSS 彩带效果

专题：跨端开发的三条路线

2018 年跨端开发对于选择恐惧症来说不是很友好。本刊秉持着一贯抵抗熵增的思路，为大家梳理了跨端开发的三条路线。

路线1: 重量级 App

重量级 App 的开发方式可以控制容器层。这条线路始整体发展思路是：在更动态化的同时，提升性能。参考：🔗

1. 原生开发：问题在于需要开发多端，开发效率和动态化能力弱

2. WebView 能力扩展：WebView 用于渲染，能力扩展通过桥接层，主要问题是性能差

   • 包括 PhoneGap、Cordova、Ionic、Xamarin 等

3. 跨平台桥接：桥接层同时负责渲染和能力扩展

   • React Native

     Facebook 开源，这条思路的开创者，主要问题是应用体积大、启动慢、双端接口不统一、稳定性差

   • Weex

     阿里开源，在 Vue 技术栈之上的类似方案

   • Hippy

     腾讯闭源，针对 React Native 的主要问题进行了优化

   • Picasso

     美团闭源，从介绍来看主要优化在于布局算法方面，附赠 PPT 一枚

4. Flutter：通过编译，取消桥接层，减少通信消耗

   Google 开源，利用 Dart 语言编译到原生

路线2: 轻量级 App

如果将对容器的控制权给出，挂载到更大平台如 Android 系统或超级应用，则是 18 年时兴的小程序或快应用了。

• 应用级别跨端

微信小程序、支付宝小程序、百度小程序 、淘宝轻应用等

• PWA

Google 主推，挂载于 Android 系统

• 快应用

厂商联盟主推，挂载于国产 Android 手机的系统，架构有参考 Weex，附 PPT

路线3: 开发方式整合

在上述两条线路的发展之下，前端兼容线再度陷入碎片化：安卓 App、苹果 App、Web、小程序、快应用……为了弥合这样的碎片化，一个可能性即是通过一套 DSL 来编译到各个不同端，这中间包含了多个公司不同方向的努力：

• Taro

京东开源，DSL 基于 JSX，通过 React Native 兼容原生开发

• Rax

阿里开源，DSL 基于 JSX，通过 Weex 兼容原生开发，附赠介绍一枚

• Mpx

滴滴开源，DSL 借鉴 Vue，支持微信、支付宝小程序

• mpVue

美团开源，DSL 借鉴 Vue，支持 Web 和美团小程序

• UniApp

DCloud 开源，DSL 借鉴 Vue，融合 mpVue 的小程序能力，通过 Weex 兼容原生开发

• Wepy

腾讯开源，DSL 借鉴 Vue，支持 Web 和微信小程序

本期编辑：@壹丝；专题供稿：@承虎、@龙笛。

前端技术周刊 2019-01-14

前端快爆

• Safari 第 73 个科技预览版发布，包括对 JSON 构造优化提案（Firefox 64、Chrome 72 已支持）、WebGPU 中基于 Metal Shading Language 的向量缓冲、globalThis 以及 JSON.stringify 中 BigInt 的支持，取消了对 <meta http-equiv=set-cookie> 的支持，WebRTC 有多处细节变化。?
• Blink 意欲实现 EventTiming API，用以监听响应事件消耗的时间。?
• ECMAScript Module（简称 ESM）的未来发展会是怎样的？Node.js 基金会成立了一个模块小组并规划了若干阶段，在第一阶段将构建最小功能集，完成浏览器兼容性、向下兼容性和 CommonJS 相似功能平移的定义。目前的 Node.js 11 的实验性版本并未完全支持目前的第一阶段草案定义，而在 2020 年 4 月份的 Node.js 12 正式发布时有望实现 ESM 的非实验性版本。?
• 第二届 SEE Conf 已于 2019 年 1 月 5 日 完成举行，分享资料已经完全放出。?

百宝箱

因被池冰吐槽这个栏目名字太土了，所以“瑞士军刀”改名叫做“百宝箱”。

• fbt 是一款由 Facebook 开源的国际化框架。
• Quicklink 是由谷歌开源的一种结合 Intersection Observer API 的预加载技术，能在强网络条件下有效提升后续链路网页的访问速度。
• Imgcook 为淘宝发布的将设计稿转化为前端页面的自动化工具。

专题：客户端存储

客户端存储（Client-side Storage）是一个通用术语，包含几个独立但相关的 API： Web Storage、Web SQL Database (已被废弃)、Indexed Database 等。每种技术都提供了在用户硬盘上而非通常存储数据的服务器存储数据的独特方式。这么做主要基于使 Web App 离线可用，并改善性能表现。

Indexed Database

Indexed Database API（简称 IndexedDB，以前称 WebSimpleDB）是 W3C 推荐的一项网页浏览器标准，是为提供一个具有索引的 JSON 对象集合的事务性本地数据库操作接口。W3C 于 2015 年 1 月 8 日发布了 IndexedDB 接口的最终建议。

• Indexed Database API 文档
• IndexedDB 的原生概念：有关 IndexedDB 的设计和结构的概述
• HTML5 indexedDB 前端本地存储数据库实例教程：实例加 DEMO 讲解 IndexedDB
• IndexedDB 打造靠谱 Web 离线数据库：图文案例详解 IndexedDB

localForage

Mozilla 开发的 localForage，使得离线数据存储在任何浏览器都是一项容易的任务，它提供强大并且简单好用的API 封装了 IndexedDB、WebSQL 和 localStorage。它的存储的数据类型不只是字符串，可以是数值、对象、布尔值、数组。

• localForage 文档
• localForage 项目地址
• 突破本地离线存储 5M 限制的 JS 库 localforage 简介

PouchDB

PouchDB 是受 Apache CouchDB 启发为 Web 设计的一款占用空间少的数据库。PouchDB 项目的目标是帮助开发者构建线上和线下都能很好地使用的 Web 应用程序，在应用程序离线的时候，可以将用户数据保存在本地，当恢复在线状态时，通过 CouchDB 和其他相兼容的服务器来同步这些数据。

• PouchDB API 文档
• PouchDB 项目地址
• 一个使用 PouchDB 分页的案例

编辑：承虎 & 审阅：壹丝 & 专栏供稿：抱血