大家好，我是。 今天，我就带大家了解一下Chrome 115值得关注的新功能。
卷轴动漫
滚动驱动的动画是网站上非常常见的用户体验模式。 例如，当页面向前或向后滚动时，相应的动画也会向前或向后移动。
例如下图中这些比较常见。 页面底部的进度条随着滚动而变化：
此外，还可以使用页面滚动来驱动页面上的元素淡入和淡出：
新的滚动驱动动画规范定义了我们可以使用的两种新的时间线类型：
下面是一个代码示例，它使用匿名滚动进度时间线来创建固定在页面底部的阅读进度指示器。
<span style="display: block;background: url("https://mmbiz.qpic.cn/mmbiz_svg/5K48YNcpF3aMicIHocwnNRzA1ZTEjgxfibllLbacRSbbCwMBicXniaWcX9iaiaC0ILpTjkf5d3K5YiaHgp5FqsFMTcWd02HOWwiaQlT3/640?wx_fmt=svg") 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;width: 100%;margin-bottom: -7px;border-radius: 5px;"><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来创建滚动的进度时间线。 我们可以创建一个新的 ScrollTimeline 实例，它接受以下两个参数：
const tl = new ScrollTimeline({
source: document.documentElement,
});
要将其附加到 Web 动画，请将其作为时间轴属性传递并忽略任何持续时间属性。
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
});
以下是使用 JavaScript 创建阅读进度指示器的代码：
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显示多值句型
CSS Display Module Level 3描述了显示属性的多关键字句型，也可以称为“双值句型”或多值句型。
我们首先了解 CSS 的一件事是，有些元素是块级元素，有些元素是内联元素。例如或
默认是块级元素，并且是内联元素。 使用显示属性，我们可以在块和内联之间切换。 例如css 时间轴，要使标题内联，我们可以使用以下 CSS：
h1{
display:inline;
}
最近，CSS 添加了对 Grid 和 Flexbox 布局的支持。 为了使用这个布局，我们还使用了display属性的值——display:grid和display:flex。 只有当 display 的值发生变化时，子元素才会成为 Grid 或 Flex 元素，并开始响应 Grid 或 Flexbox 规范中的其他属性。 更改元素的显示值会更改其直接子元素的低级上下文。
但是，Grid 和 Flexbox 元素具有内部和外部显示类型。 外部显示类型描述元素是块级还是内联，内部显示类型描述容器中的子元素应如何表现。
因此，显示多关键字句型允许分别指定内部和外部显示类型。 简而言之，它允许我们编写：
display: block flex;
创建一个带有 Flex 子级的块级容器。
display: inline flex;
创建一个带有 flex 子元素的内联容器。
并且这个新句型也将向下兼容原来的单关键词句型。
围栏框架
我在去年的文章中介绍过，现在这个版本已经支持了。
在很多业务场景中，我们可能会使用iframe来嵌入一些智能推荐的广告。
我们的顶级网站可以读取iframe的src属性，这意味着顶级网站可以从广告的URL推断出访问者的兴趣信息，这在一定程度上泄露了用户隐私。
围栏框架是一项隐私沙箱倡议 (http://www.fencedframework.org/)，它建议顶级站点应该对其数据进行分区。
使用Fenced框架，我们仍然可以展示符合访问者兴趣的广告css 时间轴，但是顶级网站很难从框架的src属性中推断出用户兴趣信息，而该属性只有广告商知道。
一般用法和iframe一样，我们可以使用src属性来引入嵌入的内容：
<fencedframe src="conardli.html"></fencedframe>
此外，受防护的框架可以与其他隐私沙箱 API 结合使用，并且浏览器可以为受防护的框架生成不透明的 URL。
例如，使用 FLEDGE，浏览器可以生成 urn:uuid 来映射智能广告推荐的 URL：
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a" mode="opaque-ads" ></fencedframe>
只有嵌入在围栏框架中的广告商站点才能获取urn:uuid与URL的真实映射关系，顶级外部站点无法获取。
WebAssembly 编译限制
Chrome 已将主线程上同步 WebAssembly 编译的大小限制从 4KB 扩展到 8MB。 这无疑是一个巨大的改进，这要归功于 WebAssembly 运行时 V8 中的性能改进。
8MB限制是通过谷歌Pixel 1手机的性能测试确定的，该手机目前被认为是具有代表性的高端手机。 V8 或硬件的未来发展可能会进一步扩展此限制。 大于 8MB 的 WebAssembly 模块可以使用 WebAssembly.compile() 异步编译，也可以在 Worker 上同步编译。
并且大部分WebAssembly模块都可以直接在主线程的同步方法中编译，不需要异步或者使用Worker线程。
终于
