前端微周刊（第10期）：W3C启动Web机器学习工作组、Core Web Vitals指标将影响Google搜索排名

zollero
857 阅读7分钟

“前端微周刊”每周五更新，为前端开发者提供技术相关资讯及文章

微信搜索订阅“前端微志”公众号

🗿 趣事

基于WebAssembly，在浏览器中玩超级马里奥64

浏览器中运行超级马里奥64

借助于WebAssembly的能力，将超级马里奥搬到了浏览中，让你在浏览器中，通过键盘即可玩这个游戏，支持游戏手柄。（第一次打开时，需要等待资源下载完毕）

📰 资讯

W3C启动Web机器学习工作组

W3C启动了Web机器学习工作组，成员有来自TensorFlow.js 核心团队的成员（Ping Yu）和Web神经网络API编辑（Ningxin Hu 和 Chai Chaoweeraprasit）等，将在未来把深度学习的标准带到Web端。

机器学习是人工智能的一个分支，且深度学习是机器学习的一个子领域，它通过大量的神经网络结构为web应用开启新的引人注目的用户体验。Web端机器学习的使用场景从视频会议提升到可达性提升的特性，基于云端的隐私提升解决方案等，新成立的工作组的重心是将这些和更多的使用场景在Web端成为可能。

Node.js v16发布

Node.js v16来了

Node.js发布第16个大版本更新，带来了一些新的能力和特性，包括：升级V8 JavaScript 引擎至9.0版本，预置Apple Silicon(M1)二进制文件，和一些稳定API等。

有一个有意思的点，Node.js 16中支持使用emoji作为import和exports的名称。如下代码：

// test.mjs
let a = 2;
export { a as "😁" }

// main.mjs
import { "😁" as b } from "./test.mjs"
console.log(b)

Node.js 16将在未来6个月作为当前发行版本，并在2021年10月晋升到长期支持（LTS）版本。值得注意的是，Node.js 12将继续保持长期支持到2022年四月，Node.js 14将保持长期支持到2023年，而Node.js 10将在本月底（2021年4月）走向生命周期的结束。想要看详细的发布计划和排期，可以查看Node.js Release Working Group repository。

Chrome 91 DevTools上新

Performance标签页下显示Web Vitals标识

在即将发布的Chrome 91中，DevTools将有以下主要内容的更新：

  • Performance面板显示Web Vitals信息的弹框
  • 在Elements面板中，显示CSS的scroll-snap标识
  • 新的Memory inspector，可检查ArrayBuffer以及Wasm的内存占用情况
  • Elements面板中，新的标识设置窗口，可设置显示或隐藏grid、flex、Ad和scroll-snap标识
  • Elements面板中预览图片的窗口，增加显示宽高比(aspect ratio)信息
  • Network面板增加条件按钮，可以配置Content-Ending
  • Styles面板能力增强，可查看CSS属性的值
  • ......

更多更新内容，请通过链接查看原文。

谷歌搜索排名影响因素将在五月到六月中旬更新

Core Web Vitals核心指标：加载速度、交互性和视觉稳定性

谷歌搜索团队在去年发布的页面体验排名，今年将在Google Search中上线，他们称之为“页面体验更新”。围栏帮助网站站长和内容发布商提前准备并提升他们的网页体验，公布了几个主要更新：

  • 今年六月中旬逐步启用
  • 主要包含三个Core Web Vitals指标：LCP、FID和CLS，还有一些其他新闻相关内容更新
  • Search Console中会新增一个Page Experience报告
  • Google Search对所有内容支持SXG(signed exchanges)

Vite官方中文文档上线

Vite 官方中文文档已经在前几日上线！🎉现在可以访问 cn.vitejs.dev 直达，也可以通过原站的“Lanugages → 简体中文”跳转访问。

Github官方发布新版本的VS Code主题：Github Themes

Github新主题预览

对标github.com官方的新主题：GitHub Light Default、GitHub Dark Default和GitHub Dark Dimmed已经上架VS Code，新的GitHub主题链接。

GitHub的经典版VS Code themes： GitHub Light和GitHub Dark仍可继续下载和使用。

📖 文章

Real-world CSS vs. CSS-in-JS performance comparison

近几年，CSS-in-JS相关的工具越来越流行，CSS-in-JS对页面性能的影响到底有多大，需要一个量化的指标来衡量。

作者选择了两类CSS-in-JS工具进行了对比，分别是build-time的Linaria和runtime的Styled Component。

明确一下概念，build-time是指所有的CSS代码在打包构建的时候，就会从JavaScript文件中拆出来，放到单独的CSS文件中，不会打包进最终的JS Bundle中，浏览器也是通过渲染单独的CSS展示样式。而runtime是指所有的CSS代码在打包构建的时候，会被打包进最终的JS Bundle中，页面在渲染JavaScript文件时，通过JavaScript文件来渲染CSS样式。

文中从网络、覆盖度、性能和用户行为交互等多个角度进行对比，最终得出结论：runtime下的CSS-in-JS方案对页面性能有明显的影响，主要是针对一些低端设备和网络服务较差的地区影响比较大。

鉴于此，作者建议使用build-time的CSS-in-JS工具或纯CSS的方案，不要使用runtime的CSS-in-JS工具。

Say Hello To CSS Container Queries

Media Query vs Container Query

在第7期的时候，我们介绍过Container Query，它是比Media Query颗粒度更小的Media Query，可以让我们针对元素级别使用媒体查询的能力。

由于Container Query适用的元素颗粒度更小，所以它可以按需针对个别元素设置单独的样式，解决一些Media Query在某些场景下无法解决的问题。

Best practices for cookie notices

Cookie Notice是指网站在加载时显示的Cookie使用提醒，并给出用户禁用、可选等操作，让用户可以自主选择是否为该网站启用获取Cookie的权限。

由于它通常在页面加载进程之前加载，潜在地影响广告和其他页面内容的加载。这些影响，分别体现在Largest Contentful Paint (LCP)、First Input Delay (FID)和Cumulative Layout Shift (CLS)等方面。

文中基于第三方Cookie Notice给出一些非完全最佳实践，大致包括：

  • 异步加载Cookie Notice脚本
  • 直接加载Cookie Notice脚本
  • 与Cookie Notice的域的链接建立前置
  • Cookie Notice预加载
  • 避免布局变动
  • 优化加载性能
  • ......

Overflow Issues In CSS

Overflow Issue是指页面在横向偶现滚动条，使得用户在横向上可以滚动，这种现象可能会被多种因素引起。

文中分析不同场景下Overflow Issue产生的原因，以及如何解决它们。还会介绍如何使用DevTools更简单地调试这种问题。

🛠 工具、插件

DevTools：显示页面的CSS使用纵览

CSS使用纵览页面

CSS Overview目前是DevTools的一个实验性特性，默认不开启。要想使用这个特性，打开DevTools，点击Settings -> Experiments -> 勾选 CSS Overview。

ReactFlow：构建图表和复杂交互编辑器

ReactFlow绘制流程图

ReactFlow是一个基于HTML元素节点（div和svg等）的应用，支持从绘制静态图表到复杂的可交互编辑器等多种场景。它一个比较大的亮点是基于React框架，可以灵活编码实现想要的特性。

Prisma：基于Node.js&TypeScript的ORM

Prisma是一个ORM（Object Relational Mapping）库，用来操作数据库，它是基于Node.js生态和TypeScript语法。

它的整体功能非常强大，且有配套的图形管理界面。目前，它已支持Next.js、GraphQL、NestJS、Express、Apollo和Hapi等框架或库，可以在你的项目中尝试一下。

Gitmoji

Gitmoji的图标示例

Gitmoji是一个规范化git commit信息的小工具，它可以使用emoji表情添加到git commit日志中，非常容易辨别本次commit的目的，只需要看下emoji表情即可明白commit的意图。

下面是一些示例的commit；

✨ (home, components): Add login button
✨ (home, components): Add login modal
🐛 (home, components): Resolve issue with modal collapses
🚚 (home): Move icons folder
✨ (newsletter): Add Newsletter component
✨ (navbar): Add navbar container
🔥 (navbar): Remove old navbar file
✅ (home): Add login test case
🎨 (home, component): Improve login modal
📦️ (npm): Add react-table
🔨 Update script start-server.js

Gitmoji还有各IDE（如VS Code 和 Atom）平台的插件，通过IDE使用起来更方便。

🥅 代码片段

使用box-shadow画月亮

使用CSS画月亮

.moon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: 22px 22px 0 0 black;
}

使用CSS画一个心❤

CSS画❤

.heart {
  position: relative;
  height: 160px;
  width: 100px;
  background: black;
  border-radius: 200px 200px 0 0;
  transform: rotate(45deg);
}
.heart::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 30px;
  height: 160px;
  width: 100px;
  background: black;
  border-radius: 200px 200px 0 0;
  transform: rotate(-90deg);
}

文章首发于微信公众号：前端微志。

想要第一时间收到文章推送，更有前端前瞻性技术分享，请微信搜索关注**“前端微志”**

avatar
文章
阅读
粉丝