035

2022/12/18 16:11

https://mp.weixin.qq.com/s/ixMp0Jqc_sfNMPDrCYnPPw

使用 CSS Houdini 可以在 CSS 中使用 JS 代码,类似在 CSS 中使用 canvas 画一些图案,但是是在 CSS 的生命周期中实现,所以可以获取到全局状态变量等。这个文章是实现了一种波浪的效果。

https://www.readmargins.com/p/doordash-and-pizza-arbitrage

之前听说类似的故事,餐厅没有加入外卖平台,但是用户却可以下单,这是平台私人行为,如果数据很好,它会拿着这个数据去餐厅要求加入,抽取费用。它们甚至会赔钱做这个测试,就是为了拿到更好的数据。

https://twitter.com/akella/status/1601169580055203846

简单介绍了下如何实现下面这种网站的方案。很酷的是,它的翻页效果是 WebGL 的视频,内容则全是 HTML + CSS 实现的。

https://emiozaki.com/works?type=grid

做的很好看的个人网站,风格像是手机上的漫画,切换做的十分丝滑。

https://calendar.perfplanet.com/2022/lcpfe/

LCP 会受到网络因素影响,如果要优化 LCP 为什么不直接优化减去网络因素的时间呢。

https://www.lydiahallie.io/blog/optimizing-webfonts-in-nextjs-13

字体的性能优化方案,手段主要是两个方面

  • 提前建立连接,提前字体资源请求
  • 使用 size-adjust 来保证字体切换中,页面的闪烁
  • next/font 可以帮助你更好的实现第一个方案