前端技术双周刊#24-2022.06.15

JavaScript & CSS

• JSON And The Stringification Oddities In JavaScript
  总结了JSON.stringify()在处理不同数据类型时的怪异行为，你是否深入了解过它呢？

• content-visibility 属性介绍及应用2篇：使用 content-visibility 优化渲染性能和 content-visibility 再探究，完美替代 Lazyload？
  content-visibility 是一个比较新的属性。和其它新的 CSS 属性一样，功能强大但是浏览器支持程度低。让我们来看看它有哪些应用场景？

• Building a button component
  实现一个按钮组件，需要考虑哪些方面，来看看有哪些是你没考虑到的

• The Best JavaScript & CSS Animation Libraries for UI Designers
  分析了9个最流行的动画库各自的优缺点，帮助你从中做选择

前端框架

• JavaScript Hydration Is a Workaround, Not a Solution
  在现代前端框架中，Hydration 一般指的是给 Server 返回的 HTML 添加交互的过程，它是在浏览器中执行的将静态 HTML 页面转为动态页面的技术。但是 Hydration 的过程和服务端渲染有一些重复工作，服务端渲染 HTML 依赖的信息并没有被浏览器充分利用起来。笔者从这个角度出发设计了 Qwik，以求更快的 Web 应用加载速度。

前端工程化

• Faster JavaScript Builds with Metro
  Metro 是一款用于 React Native 的 JavaScript 打包工具，Airbnb 用它替代 Webpack 编译 Web 页面。相比 Webpack，使用 Metro 在开发编译环节有80%的速度提升，在生产编译环节有55%的速度提升。Metro 的特色

拓展阅读

• 从 0 到 1，探究百亿流量验证下的 MVVM 框架设计
  KFive 团队出品《高性能 MVVM 框架设计与实现——San》，为你揭秘支撑百度搜索、Feed、小程序三大业务的 MVVM 框架设计。

• 深入浅出V8里的优化 - Smi 和 HeapNumber
  从细节入手，讲解 V8内部优化的具体实现

• 浅谈短链的设计

• What is Edge Compute?
  通俗易懂的边缘计算科普文

• What npm Can Learn from Go

• WebContainers 现在在桌面和 Android 上的 Firefox 中得到支持

开源工具

• pkg.land
  帮你在 NPM 上快速找到相似功能的包

• animate-css-grid
  animate-css-grid makes it easy to transition your CSS grid gracefully from one state to another. If the content of the grid changes, or if the grid or one of its children is updated with the addition or removal of a class, the grid will automatically transition to its new configuration.