Release 2023-01-19 Design System、Tailwind Rust RegExp、CSS Fallbacks for WebP background images with @supports、use querySelectorAll() with wildcards、Optimizing resource loading with Priority Hints、Painter、vite-plugin-legacy-qiankun · innocces/st

摘要

Design System
Tailwind Rust RegExp
CSS Fallbacks for WebP background images with @supports
use querySelectorAll() with wildcards
Optimizing resource loading with Priority Hints
Painter
vite-plugin-legacy-qiankun

Design System

![Design System PIC](https://blog-pic.deno.dev/2023-01-19/1674060267058-Design System.png)

Design System – Figma UI kit with dashboard templates

Tailwind Rust RegExp

tailwind 的作者公布了部分实验性的使用 rust 重写的 tailwind 的 benchmark

We've been exploring rewriting the code that scans all of your templates for Tailwind classes in Rust for better performance — fun to benchmark.

Still no idea what I'm doing so lots of room for improvement I'm sure, but this is extracting classes from 250 template files

CSS Fallbacks for WebP background images with @supports

CSS Fallbacks for WebP background images with @supports Blog

=.- 支持的浏览器直接 @supports. 不支持的可以 multibackground urls

use querySelectorAll() with wildcards

use querySelectorAll() with wildcards blog

CSS 选择器水真的很深

Optimizing resource loading with Priority Hints

Optimizing resource loading with Priority Hints blog

Priority Hints indicate the relative priority of resources to the browser. They can enable optimal loading and improve Core Web Vitals.

A few key areas where Priority Hints can help:

Boost the priority of the LCP image by specifying fetchpriority="high" on the image element, causing LCP to happen sooner.
Increase the priority of async scripts using better semantics than the current hack that is commonly used (inserting a <link rel="preload"> for the async script).
Decrease the priority of late-body scripts to allow for better sequencing with images.

首屏主图可以使用 fetchpriority="high" 来提升 LCP
脚本使用 preload