提高网页加载速度
设置css让浏览器加载更快
content-visibility: auto, 浏览器只渲染可视区域的布局,可视区域外的布局将被跳过，当用户往下滚动页面的时候，可视区域内的布局会即时排布。用户只感知到滚动条的变化
content-visibility: auto；
contain-intrinsic-size: 0 500px;
content-visibility、display、visibility 对比
- content-visibility: hidden; 告诉浏览器始终不渲染元素
- display: none; 隐藏元素并销毁渲染状态
- visibility: hidden; 隐藏元素并保存渲染状态
不同浏览器文本样式不一致
不同浏览器文本有点对不齐，这是因为字体的布局信息可能来自字体内部的各种不同位置，浏览器和操作系统使用的数值不一致。
一个新的css属性值告诉浏览器忽略这一切，而采用字体度量去覆盖。font metrics override descriptors，简称 f-mods。
font-family: some-font;
ascent-override: 73%;
descent-override: 25%;
line-gap--override: 2%;
在屏幕上显示文本最快的方法，是先使用默认字体直接显示，然后等到网络字体下载后，再切换字体，在字体切换的时候，可能会导致巨大的布局抖动。我们可以用 f-mods 解决这个问题
TODO: 搞个切换字体的Demo
@font-face{
font-family: some-font;
font-display: swap;
}
div{
font-family: some-font, "times new roman"
}
冻结前导航页面
在网页中点击链接，跳到新页面，再返回的时候，页面js重新加载，浪费性能。但是在最新的 Chrome中，Chrome会把上个页面冻结在内存里，在Android 的 Chrome 86，你可以用它进行跨源导航，而Chrome87 可以同源导航
addEventListener('pagehide', ({persisted}) => {
if (persisted) // 冻结耗时耗性能的功能
})
addEventListener('pageshow', ({persisted}) => {
if (persisted) // 重新激活耗时耗性能的功能
})
portal
<portal src="..."></portal>
一个新的 HTNL 元素，实现类型画中画的功能。和iframe不一样。点击 portal，不能点击portal里面的元素，而是点击整个portal元素.portal 是不可互动的
使用 portal 创建分享功能。TODO
preload 和 prefetch
改善页面性能，最快也是最简单的办法，通常是尽早加载重要的内容。预加载和预提取代码可以做到
<line rel="prefetch" as="document" href="/articles">
<line rel="preload" as="script" href="/bundle.a6bf3c.js">
quicklink，通过在空闲时间预取视口内链接来加快后续页面加载
参考
content-visibility: the new CSS property that boosts your rendering performance
