前段时间，我无意中看到了一个新框架：Fresh。宣称是下一代 Web 框架。它列举了很多功能亮点，随便看了几眼没太在意，但有一段话成功的吸引了我：

The single biggest architecture decision that Fresh makes is its usage of the islands architecture pattern. This means that Fresh applications ship pure HTML to the client by default. Parts of server-rendered page can then be independently re-hydrated with interactive widgets (islands). This means that the client is only responsible for rendering parts of the page that are interactive enough to warrant the extra effort. Any content that is purely static does not have related client-side JavaScript and is thus very lightweight.

简单理解就是：Fresh 使用了 Islands Architecture，程序响应给客户端的都是纯 HTML，然后，通过可交互的 widgets 对 SSR 的部分内容进行水化（re-hydrated），静态的部分不需要任何 JS 代码。—— 简直是完美！！

为何这么说呢？这还得从性能优化和 SSR 讲起...

近年来，在 Node.js 的推动下，前端技术大放异彩，告别“石器时代”，进入“工业时代”。随着前端项目复杂度的不断加深，工程化、规范化、自动化等主题，摆在了所有前端开发者的面前，而这些主题无不例外都是构建在以 Node.js 为基础的工具上的。

在最近的实践过程中，发现了不少好用的库。在这里集中整理，推荐给大家，帮大家省去一些搜索和试用的时间。

下面推荐的库大部分都是我使用过的，可能还有同类型更好的选择，欢迎大家补充。

1. 性能指标

在做性能优化之前，首先要明确相关指标。我们要带着明确的目标和方向去做优化，而不是随意的压压图片、加个预加载了事。

明确相关性能指标，也就是要明确：

• 衡量哪些性能指标？
• 为什么是这些指标？
• 这些指标该如何测量？
• 性能上，怎样算好，怎样算不好？

2023年8月，团队内部分享：《编写优美的代码》

本文来聊一个 flex 布局的小技巧 —— 绝对居中布局。这名字是我瞎起的，可能不是特别恰当，不过我讲完背景，大家就应该都清楚了。

背景

APP 顶部由上到下，一般是「状态栏」和「导航栏」。状态栏通常就是系统默认的样式，最多根据底色的深浅，把文字和图标切换为反色，保证用户可以清晰地看到时间等信息。但是导航栏，经常需要适配页面的视觉风格，特别是在一些「全屏 H5」中。比如下面这张图片：

@babel/preset-env 想必大家都很熟悉了，它会自动对代码进行转换，添加 polyfill。让我们可以在一定程度上，自由使用最新的语法特性，而不必担心浏览器的兼容问题。

但最近在对一个“老旧工程”进行性能优化的时候，发现引入的 core-js 体积比较大，更严重的是，多了预期之外的 polyfill。

前端性能优化的关键之一，就是避免长任务（Long Task），尽可能的将长任务拆分为若干个小的任务，使得浏览器可以响应用户操作等高优先级的事情。以往任务的拆分，最简单粗暴的方式就是使用 setTimeout，比如：

fun1()

setTimeout(() => {
  fun2()
}, 0)

这样可以确保 fun1 和 fun2 在两个独立的 Task 中（注意必须是 setTimeout 等 macrotasks，microtasks 不行）。这样虽然可以一定程度上解决问题，但是看着比较丑，逻辑也会被拆的很乱。

前段时间因为 Islands Architecture 的原因，了解了一下 Fresh，整体感觉还是不错的，设计思路很棒，简洁而高效。虽然还有部分功能缺失，目前也很难在企业级应用开发中使用，但是了解其基本功能和架构设计，对我们开阔思路、突破桎梏还是大有裨益的。所以，这里梳理一份快速入门的文档，分享给大家，希望多少能有些帮助。

本文来自 Preact 作者 Jason Miller 的博客

原文地址：https://jasonformat.com/islands-architecture/

我很难在网上找到这方面的参考资料，但今年在描述本文提到的这些方法时，听到这个名字被多次使用。据我所知，“Component Islands” 模式是由 Etsy 的前端架构师 Katie Sylor-Miller 在 2019 年的一次会议上提出的。

Islands Architecture 的总体思路非常简单：在服务端渲染 HTML 页面，并在高度动态的区域周围，注入占位符或插槽。这些占位符/槽包含了服务端渲染的 HTML 输出，来自其相应的小部件。它们表示的区域可以在客户端 “水合” 为小型的独立部件，重新使用其服务端渲染的初始 HTML。

原文地址：https://kentcdodds.com/blog/aha-programming

观看原作者的视频演讲: AHA Programming

DRY

DRY（Don't Repeat Yourself 的首字母缩写），是一条古老的软件开发准则，维基百科总结如下：

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system

系统中的每一部分，都必须有一个单一的、明确的、权威的表述