前端技术双周刊#7-2021.9.29

JavaScript

• Index Signatures in TypeScript
  深入讲解了 TypeScript 的 Index signature 类型{ [key: string]: string }，并且对比了和Record<Keys, Type>的区别

• 页面卡死问题分析
  记录了因 JavaScript Array 中存放了过多的元素，落入 V8 Array.prototype.shift() 实现的性能悬崖，导致打开某业务时卡死问题的完整分析过程。问题定位分析方法和刨根问底的钻研精神值得学习

• postTask：React的杀手锏被浏览器原生实现了？
  scheduler.postTask 是 Chrome 实现的优先级调度 API，提前了解一下。这里查看原文 Building a Faster Web Experience with the postTask Scheduler

低代码

• Microsoft Power Fx 概述
  Microsoft Power Fx 是一门面向低代码场景设计的语言。它是一种强类型、声明性、一般用途的函数式编程语言。Microsoft Power Fx 的创建是为了更好的辅助非专业开发人员，因此这门语言被设计的足够简单，希望这门语言可以同时服务于专业与非专业开发者

• 设计稿自动生成代码方案的探索
  业内主流的代码生成方案有两种，一种是通过深度学习模型训练，从图片或草图直接生成代码；另一种是基于设计工具（如 Sketch、Figma 等）源文件，解析出图层信息转化成 DSL 并生成代码。本文基于第二种思路重点讲了如何把扁平的无规则数据转化为树状的结构化数据进而生成代码的方法

拓展阅读

• Node.js Garbage Collection Explained
  Node.js 垃圾回收详解

• React 框架运行时优化方案的演进
  本文详尽的介绍了 React 最近几年来从 15~18 几个大版本的底层架构演进，强烈推荐！

• 图解 React 源码系列
  用大量配图的方式, 致力于将 React 原理表述清楚

• JavaScript 中的货币计算
  介绍了货币计算过程中的注意事项，推荐 npm 上可以用于货币计算的工具包 Dinero.js, Currency.js, 和 Numeral.js

• 腾讯企鹅辅导 H5 性能极致优化
  以企鹅辅导的核心项目为例子，详细的讲解如何针对项目进行性能优化，对页面的加载速度、渲染速度进行优化，主要是分析的十分细致

• 线性代数的几何意义
  讲解了线性代数基本运算的几何含义，并通过结合 CSS transform 用法帮助大家理解和学习

• 研发效能度量的难点和反模式
  “成功大都相似，失败各有不同”。 本文分析了研发效能度量的难点和常见的“反模式”

• 聊一聊加班严重时要如何自我提升
  加班太多没时间学习是一个伪命题。对于程序员来说，持续的学习能力是很必要的

开源工具

• Sucrase
  又一个 Babel 的替代者，性能甚至优于 swc。但是缺点也比较明显，仅支持现代浏览器和 Node.js 近期版本，这也是它比较快的原因

• grex
  复杂的正则不会写？需要查半天文档一次次调试？或许可以试试 grex，它能够通过输入的测试用例推导出你想要的正则表达式！

• Web to Desktop framework comparison
  它将目前市面上主流的 Web 桌面应用框架进行了对比，包括端的支持程度、构建后包大小、内存占用等方面，帮你快速找到最合适的框架！

产品设计

• 渐进式披露：交互设计领域独有的设计方法论
  一篇关于渐进式披露（Progressive Disclosure）的设计原则介绍

编辑：希达 审阅：胖总&Mr.Q&三水清