Skip to content

Latest commit

 

History

History
85 lines (49 loc) · 3.69 KB

0004.md

File metadata and controls

85 lines (49 loc) · 3.69 KB
Raw

《Ohbug 前端周刊》 第 4 期 - React 18 alpha 版发布

⬆️ 热点

React 18 发布计划

https://zhuanlan.zhihu.com/p/379154166

https://zhuanlan.zhihu.com/p/379072979

当 React 18 发布时，它将包含开箱即用的改进（如 automatic batching)，全新的 API（如 startTransition）以及内置支持了 React.lazy 的 全新 SSR 架构。

📝 文章

解读新一代 Web 性能体验和质量指标

https://juejin.cn/post/6844904168591736846

https://github.com/GoogleChrome/web-vitals

Core Web Vitals 是应用于所有 Web 页面的 Web Vitals 的子集，所有的站点开发者都应该关注一下，他们将在所有谷歌提供的性能测试工具中进行显示。每个 Core Web Vitals 代表用户体验的一个不同方面，在该领域是可衡量的，并反映了以用户为中心的关键结果的真实体验。

网页核心的性能指标应该是随着时间的推移而不断演变的。当前 2020 年主要关注用户体验的三个方面——加载、交互性和视觉稳定性:

  • Largest Contentful Paint (LCP): 衡量加载体验：为了提供良好的用户体验， LCP 应该在页面首次开始加载后的 2.5 秒内发生。
  • First Input Delay (FID): 衡量可交互性，为了提供良好的用户体验，页面的 FID 应当小于 100 毫秒。
  • Cumulative Layout Shift (CLS):衡量视觉稳定性，为了提供良好的用户体验，页面的 CLS 应保持小于 0.1。

[译] 为什么你应该使用 Picture 标签而不是 Img 标签

https://juejin.cn/post/6923840549170446343

picture 标签拥有更好的分辨率切换与媒体查询，当小屏幕使用更小的图片益于性能优化，高分屏使用 2x 图片益于美术设计。

并且可支持书写多种图片格式，对最新的图片格式 avif/webp 提供回退方案，因此可采用最佳图片格式。此处与构建工具一同使用为最佳实践。

仅使用 CSS 就可以提高页面渲染速度的 4 个技巧

https://blog.zhangbing.site/2020/12/28/improve-page-rendering-speed-using-only-css/

用户喜欢快速的网络应用，他们希望页面加载速度快，功能流畅。如果在滚动时有破损的动画或滞后，用户很有可能会离开你的网站。作为一名开发者，你可以做很多事情来改善用户体验。本文将重点介绍 4 个可以用来提高页面渲染速度的 CSS 技巧。

⌨️ 代码

docusaurus

https://github.com/facebook/docusaurus

Facebook 出品，快速搭建开源项目的文档网站。

  • Markdown 驱动
  • 使用 React 构建
  • 支持翻译
  • 支持 Algolia 搜索

leonsans

https://github.com/cmiscm/leonsans

这是一个用 JS 编写的 Sans Serif 半衬线字体。Leon Sans 允许动态更改字体粗细并在 HTML 5 的 Canvas 元素中创建自定义动画、效果或形状，点击查看动画效果。PS：这个字体是作者来庆祝他刚出生的婴儿 Leon 的哦

Screenity

https://github.com/alyssaxuu/screenity

一个强大的屏幕录制和标注的 Chrome 插件

react-loading

https://github.com/Summer-andy/react-loading

一款轻量、开箱即用并且支持按需加载的 React 动画组件库。

🕒 订阅

  • 🕒 每周一早上准时更新 (重新定义周一)
  • 👋 Github 和公众号同步更新

微信搜索 「Ohbug」 或者扫描二维码，即可订阅。