基于 Web Vitals 的前端性能优化实践
2023-10-17 · 12,846 chars · 65 min read
1. 性能指标
在做性能优化之前，首先要明确相关指标。我们要带着明确的目标和方向去做优化，而不是随意的压压图片、加个预加载了事。
明确相关性能指标，也就是要明确：
- 衡量哪些性能指标？
- 为什么是这些指标？
- 这些指标该如何测量？
- 性能上，怎样算好，怎样算不好？
Awesome Command-line Utilities
2018-07-09 · 2,831 chars · 15 min read
近年来，在 Node.js 的推动下，前端技术大放异彩，告别“石器时代”，进入“工业时代”。随着前端项目复杂度的不断加深，工程化、规范化、自动化等主题，摆在了所有前端开发者的面前，而这些主题无不例外都是构建在以 Node.js 为基础的工具上的。
在最近的实践过程中，发现了不少好用的库。在这里集中整理，推荐给大家，帮大家省去一些搜索和试用的时间。
下面推荐的库大部分都是我使用过的，可能还有同类型更好的选择，欢迎大家补充。
Fresh 快速入门
2022-09-12 · 3,167 chars · 16 min read
前段时间因为 Islands Architecture 的原因，了解了一下 Fresh，整体感觉还是不错的，设计思路很棒，简洁而高效。虽然还有部分功能缺失，目前也很难在企业级应用开发中使用，但是了解其基本功能和架构设计，对我们开阔思路、突破桎梏还是大有裨益的。所以，这里梳理一份快速入门的文档，分享给大家，希望多少能有些帮助。
Islands Architecture
2022-08-02 · 1,751 chars · 9 min read
本文来自 Preact 作者 Jason Miller 的博客
我很难在网上找到这方面的参考资料，但今年在描述本文提到的这些方法时，听到这个名字被多次使用。据我所知，“Component Islands” 模式是由 Etsy 的前端架构师 Katie Sylor-Miller 在 2019 年的一次会议上提出的。
Islands Architecture 的总体思路非常简单：在服务端渲染 HTML 页面，并在高度动态的区域周围，注入占位符或插槽。这些占位符/槽包含了服务端渲染的 HTML 输出，来自其相应的小部件。它们表示的区域可以在客户端 “水合” 为小型的独立部件，重新使用其服务端渲染的初始 HTML。
CSS 奇技淫巧 —— 绝对居中布局
2023-07-10 · 1,104 chars · 6 min read
本文来聊一个 flex 布局的小技巧 —— 绝对居中布局。这名字是我瞎起的，可能不是特别恰当，不过我讲完背景，大家就应该都清楚了。
背景
APP 顶部由上到下，一般是「状态栏」和「导航栏」。状态栏通常就是系统默认的样式，最多根据底色的深浅，把文字和图标切换为反色，保证用户可以清晰地看到时间等信息。但是导航栏，经常需要适配页面的视觉风格，特别是在一些「全屏 H5」中。比如下面这张图片：