前端技术双周刊#12-2021.12.8

JavaScript

• requestAnimationFrame 执行机制探索
  本文通过对 requestAnimationFrame 的全方位解读带我们探索浏览器动画执行机制

• 重排、重绘、合成，你真的懂吗？
  本文主要介绍了重排、重绘、合成的基本概念、触发时机、影响范围以及其优化策略。

• 看向未来 - 近期 TC39 提案汇总
  TC39 提案汇总介绍，包含近半年全部已经落地的提案，以及近期有进展的尚未落地的提案。

• 图解 ESM
  随着浏览器支持越来越广泛，Vite 等编译工具的兴起，是时候回顾一下这篇讲解 ESM 的经典文章了。

Node.js

• Node.js 多进程/线程 —— 日志系统架构优化实践
  通过日志系统解密和解压缩优化实践作为引子，详细介绍了 Node.js 中多进程/多线程实现和通信方式

前端智能化

• 智能设计之布局详解
  本文先从用户注意力分布和设计原则的角度出发介绍了什么是好的布局设计，然后从实现角度介绍了当前主流的布局方式：基于约束的布局和 Auto Layout 布局。再引申出近年来出现的智能布局生成方法，包括一些成熟的可用数据集和训练模型，最后给出了可参考的布局评价标准。

设计工具

• Figma 自动布局指南
  Auto Layout 自动布局是 Figma 的核心卖点之一，可以解放设计师的大部分重复劳动。但是从技术角度来看，这不就是 Flexbox 吗？可以说这是技术赋能设计的一个典范，但反过来工程师也可以了解到怎么样把晦涩的技术思维转化为易用的产品功能。

端智能

• Paddle.js & PaddleClas 实战 ——『寻物大作战』AI 小游戏
  『寻物大作战』是一款基于 Paddle.js & PaddleClas 能力打造的 AI 小游戏，通过一套端到端的图像分类模型来实现物体识别的效果。所依赖的技术主要包含两大部分：百度飞桨图像分类套件 PaddleClas 和基于 JavaScript 的前端深度学习推理引擎 Paddle.js。对比采用网络传输数据至服务端进行推理的方案，性能优势显而易见，是一个更优的选择。

• 再添神器！Paddle.js 发布 OCR SDK
  PaddleOCR 是百度开源的超轻量级文字识别模型套件，提供了数十种文本检测、识别模型，旨在打造一套丰富、领先、实用的文字检测、识别模型/工具库，助力使用者训练出更好的模型，并应用落地。

开源产品

• Mitosis
  Mitosis 原本指细胞的有丝分裂，这里指的是一份组件代码，可以编译成多种不同的框架语言版本运行。可以在 Playground 这里体验

拓展阅读

• 2021 年 GMTC 全球大前端技术大会上有哪些值得我们关注？
  附gmtc内容和资料：https://gmtc.infoq.cn/2021/shenzhen/schedule

• 聊聊 vue 中的 keep-alive
  本文介绍了 Vue 中的内置组件组件以及组件的具体用法。同时也分析了组件的一些内部原理，以及作者对于 keep-alive 的运行的一些总结

• 图片加载异常兜底方案
  针对图片加载异常的情况给出了比较全面的解决方案

• 前端工程师应该为用户体验负责
  一些基础的交互体验常识，在新一代的前端开发中被大量忽视。比如点击反馈、边界异常处理、HTML 语义化。张鑫旭分析了产生这个困境的原因，以及解决方式。不过对于我们更多的意义在于提高这方面的意识，先有意识才能有行动

• 英伟达 AI 产品：打字生成图片
  英伟达最新的 AI 模型 GauGAN2，不仅能根据字词生成逼真风景照，还能实时用文字P图！创意满分！

• 容器并不能解决一切问题
  我们的行业在过去十年中取得了令人难以置信的进步，这在一定程度上要归功于 Docker、Docker Compose 和 Kubernetes 等技术。然而，我们仍在研究如何在我们所处的多样化环境中进行开发。