今天帶大家一起來了解一下 Chrome 115 值得關(guān)注的新特性。
滾動動畫
用滾動驅(qū)動的動畫是網(wǎng)站上非常常見的用戶體驗(yàn)?zāi)Ｊ?，比如?dāng)頁面向前或向后滾動時，對應(yīng)的動畫也會向前或向后移動。
比如下面圖中這種比較常見的，頁面頂部的進(jìn)度條隨著滾動而變化：
另外還可以依靠頁面滾動來驅(qū)動頁面上的元素淡入淡出：
一項(xiàng)新的 Scroll-driven Animations 規(guī)范定義了兩種可供我們使用的新時間線類型：
-
Scroll Progress Timeline: 鏈接到滾動容器沿特定軸的滾動位置的時間線。 -
View Progress Timeline: 鏈接到特定元素在其滾動容器內(nèi)的相對位置的時間線。
下面是一個代碼示例，它使用匿名的滾動進(jìn)度時間軸創(chuàng)建固定在頁面頂部的閱讀進(jìn)度指示器。
<body>
<div id="progress"></div>
你好，code 嘴巴嘟嘟
</body>
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#progress {
position: fixed;
left: 0; top: 0;
width: 100%; height: 1em;
background: red;
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: scroll();
}
另外我們也可以使用 JavaScript 來創(chuàng)建一個滾動進(jìn)度時間線，我們可以創(chuàng)建一個新的 ScrollTimeline 實(shí)例，它接受以下兩個參數(shù)：
- source：對要跟蹤其滾動條的元素的引用,用于 document.documentElement 定位根滾動條。
- axis：確定要跟蹤的軸，與 CSS 變體類似，可接受的值為 block、inline、x、y。
const tl = new ScrollTimeline({
source: document.documentElement,
});
要將其附加到 Web 動畫，可以將它作為時間軸屬性傳遞，并省略任何 duration 屬性。
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
});
下面是使用 JavaScript 來創(chuàng)建閱讀進(jìn)度指示器對應(yīng)的代碼：
const $progressbar = document.querySelector('#progress');
$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
{
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
fill: 'forwards',
timeline: new ScrollTimeline({
source: document.documentElement,
}),
}
);
CSS display 多值語法
CSS Display Module Level 3 描述了 display 屬性的多關(guān)鍵字語法，也可以稱為 “雙值語法” 或 “多值語法”。
我們最開始學(xué)習(xí)的 CSS 之一就是一些元素是塊級元素，一些元素是內(nèi)聯(lián)元素。例如
或
默認(rèn)是塊級元素， 是內(nèi)聯(lián)元素。使用 display 屬性，我們可以在塊和內(nèi)聯(lián)之間切換。例如，要使標(biāo)題內(nèi)聯(lián)，我們可以使用以下 CSS:
h1{
display:inline;
}
最近，CSS 又相繼支持了 Grid 和 Flexbox 布局。要使用這些布局，我們也要使用 display 屬性的值 —— display:grid 和 display:flex。只有當(dāng) display 的值改變時，子元素才會成為 Grid 或 Flex 元素，并開始響應(yīng)Grid或 Flexbox 規(guī)范中的其他屬性。改變元素的 display 值會改變其直接子級的格式化上下文。
但是，Grid 和Flexbox元素有內(nèi)部和外部的 display 類型。外部的 display 類型描述元素是塊級還是內(nèi)聯(lián)，內(nèi)部的顯示類型描述容器中的子元素應(yīng)該如何表現(xiàn)。
因此，display 多關(guān)鍵字語法允許分別指定內(nèi)外兩個 display 類型。簡單來說，它允許我們這樣寫:
display: block flex;
創(chuàng)建一個塊級容器，具有 Flex 子元素。
display: inline flex;
創(chuàng)建一個內(nèi)聯(lián)容器，具有 Flex 子元素。
而這個新語法也會向后兼容以前的單關(guān)鍵字語法。
Fenced Frames
在很多業(yè)務(wù)場景中，我們可能會使用 iframe 去嵌入一些智能推薦的廣告。
我們的頂級站點(diǎn)可以讀取到 iframe的 src 屬性，這就意味著頂級站點(diǎn)可以從廣告的 URL 推斷有關(guān)訪問者興趣的信息，這在一定程度上就泄露了用戶隱私。
Fenced frames 是一項(xiàng)隱私沙盒提案（https://github.com/WICG/fenced-frame），它建議頂級站點(diǎn)應(yīng)該對數(shù)據(jù)進(jìn)行分區(qū)。
使用 Fenced frames ，我們依然可以顯示與訪問者興趣相匹配的廣告，但頂級站點(diǎn)是無法從 frame 的 src 屬性中推斷出用戶的興趣信息的，這個信息只有廣告商知道。
常規(guī)的用法和 iframe 一樣，我們可以用 src 屬性來引入一個嵌入的內(nèi)容：
<fencedframe src="conardli.html"></fencedframe>
另外 Fenced frames 可能會和其他的 隱私沙盒 的 API 來配合使用，瀏覽器可能會為Fenced frames 生成一個不透明的 URL 。
例如，配合 FLEDGE，瀏覽器可以生成一個 urn:uuid，來映射智能廣告推薦的 URL：
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a" mode="opaque-ads" ></fencedframe>
只有在 Fenced frames 內(nèi)部嵌入的廣告商的站點(diǎn)才能獲取到 urn:uuid 和 URL 的真實(shí)映射關(guān)系，外部的頂級站點(diǎn)是獲取不到的。
WebAssembly 編譯限制
Chrome 將主線程上同步 WebAssembly 編譯的大小限制從 4KB 擴(kuò)展到了 8MB。這無疑是一個巨大的提升，得益于 WebAssembly 運(yùn)行時 V8 的性能改進(jìn)。
8MB 限制是通過對 Google Pixel 1 手機(jī)的性測試確定的，該手機(jī)目前被認(rèn)為是具有代表性的低端手機(jī)。V8 或硬件的未來發(fā)展可能會進(jìn)一步的擴(kuò)展這個限制。大于 8MB 的 WebAssembly 模塊可以使用WebAssembly.compile()異步編譯，也可以在 Worker 上同步編譯。文章來源：http://www.zghlxwxcb.cn/news/detail-610664.html
而大部分的 WebAssembly 模塊都可以在主線程的同步方式直接編譯，而不需要異步或借助 Worker 線程。文章來源地址http://www.zghlxwxcb.cn/news/detail-610664.html
到了這里，關(guān)于Chrome 115 有哪些值得關(guān)注的新特性？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
