阅读 472

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

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

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

🗿 趣事

基于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作为importexports的名称。如下代码:

// 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面板中,新的标识设置窗口,可设置显示或隐藏gridflexAdscroll-snap标识
  • Elements面板中预览图片的窗口,增加显示宽高比(aspect ratio)信息
  • Network面板增加条件按钮,可以配置Content-Ending
  • Styles面板能力增强,可查看CSS属性的值
  • ......

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

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

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

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

  • 今年六月中旬逐步启用
  • 主要包含三个Core Web Vitals指标:LCPFIDCLS,还有一些其他新闻相关内容更新
  • 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 DefaultGitHub Dark DefaultGitHub Dark Dimmed已经上架VS Code新的GitHub主题链接

GitHub的经典版VS Code themesGitHub LightGitHub Dark仍可继续下载和使用。

📖 文章

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

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

作者选择了两类CSS-in-JS工具进行了对比,分别是build-timeLinariaruntimeStyled Component

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

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

鉴于此,作者建议使用build-timeCSS-in-JS工具或纯CSS的方案,不要使用runtimeCSS-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.jsGraphQLNestJSExpressApolloHapi等框架或库,可以在你的项目中尝试一下。

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 CodeAtom)平台的插件,通过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);
}
复制代码

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

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

文章分类
前端
文章标签