代码之家 › 专栏 › 技术社区 › Basj

使用多个flexbox和图像图标时减少页面显示闪烁

flicker dom-events css html javascript

0

Basj · 技术社区 · 2 年前

我有一个HTML页面,它有很多用途 flexbox 和一些图标 div 使用CSS background-image 。

当在浏览器中打开HTML页面(即使是在本地,也不使用网络)时,会有一些小的闪烁(可能不到100毫秒,但仍然如此):

有些项目移动了几个像素(因为 柔性接线盒 居中)
一些图标需要几毫秒才能加载
字体加载需要几十毫秒,所以我们可以看到用默认字体(可能<50ms)显示的内容,然后用正确的字体显示( @font-face …)

如何要求浏览器只显示/显示HTML元素,如工具栏 <div class="header-toolbar"> 只有当它准备好以确定的方式100%绘制时(没有进一步的移动/闪烁)?

0 回复 | 直到 2 年前

1

2

IT goldman 2 年前

您可以对图像使用指定的宽度和高度。这也是根据谷歌的见解,以防止“布局转移”
至于字体,也许这会起作用

@font-face {
  font-family: "My Font";
  src: url("/fonts/My-Font.otf");
  font-display: block; /* Fix flickering */
}

或者这样:

<link rel="preload" href="assets/fonts/xxx.woff" as="font" type="font/woff" crossorigin>

图标是字体的一部分。也许确实根据@AlignItems的回答,它们的可见性默认设置为隐藏,然后在窗口上 load 事件,再次显示。
背景图像应该无关紧要。不要忘记设置回退背景颜色,这可能会防止某些闪烁。

2

Lorik 2 年前

如何要求浏览器只显示/显示HTML元素,如工具栏,只有当它准备好以明确的方式100%绘制时(而不需要进一步移动/闪烁)?

需要注意的一点非常重要:浏览器 不呈现 HTML/CSS异步!

问题不在于HTML/CSS的加载时间,而在于异步内容的加载时间(例如images/api调用等…)

要解决内容闪烁的问题,您有两个解决方案:

使用骨架装载器 。骨架加载程序是一种填充仍在异步加载的页面内容的方法,但不会丢失页面的布局,在这种情况下,这是您的问题。了解更多信息 here 。
减少加载时间 。如果你能减少异步数据的加载时间,你就可以让它基本上是即时渲染的,几乎没有注意到(即<20ms)的变化。当然,就用户体验而言,这仍然不是最好的解决方案,但它是最快的解决方案。减少加载时间的最佳方法之一是 compress images ,或 decrease your font family sizes 。

Here 是我发现的另一篇很好的文章,希望能进一步帮助你。祝你好运

3

1

AlignItems Barmar 2 年前

这种方法对我有效:

首先,添加 display: none; ( opacity: 0; 和 visibility: hidden; 也有效) <body> 。
生成两个函数:

function loaded() {
  // Change 'block' to default display value of your body element.
  document.querySelector('body').style.display = 'block';
}

requestAnimationFrame(loaded);

4

1

Andrew Kruglik 2 年前

也许你在找 window .加载:

.header-toolbar {
  visibility: hidden;
}

window.onload = function() {
const toolbar = document.querySelector('.header-toolbar');
toolbar.style.visibility = 'visible';
};

或者你可以使用一个特殊的加载程序,一些微调器,它会一直显示到window.load。

5

0

herrstrietzel 2 年前

如 @Lorik: 更好地关注减少布局变化。
因此,优化所有外部资产始终是个好主意。

另一种方法是 内联关键css 在HTML中。
Critical是指为初始页面视图(无需滚动)设置样式所需的所有css规则,也称为“折叠上方”内容。

这可能是一项棘手的任务,因为根据设备的视口大小,很难获得最终的关键css。

然而,你可能会找到一个体面的妥协 仅内联样式规则,例如主导航/工具栏 。

@font-face {
  font-family: MontserratWoff2;
  font-style: normal;
  font-weight: 900;
  src: url('https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvC73w5aXo.woff2') format('woff2');
}

.woff2{
  font-family:MontserratWoff2;
  font-weight: 900;
}

<style>
/** 
* critical css for main toolbar
* font subset: ABCDEFGHIJKLMNOPQRSTUVWXYZ.:;?! 
*/
@font-face {
  font-family: 'MontserratSubset';
    src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display:swap;
}
  
body{
  font-size:2vw;
}

a{
  text-decoration:none;
  color:inherit;
}

.flex{
  display:flex;
  justify-content:center;
  gap:1em;
  border:1px solid #ccc;
  padding:3em;
}

.header-toolbar a{
  text-transform:uppercase;
}

.icon{
  height:1em;
  margin-right:0.333em;
  transform:translateY(0.1em)
}
  
.subset{
  font-family:MontserratWoff2, MontserratSubset;
  font-weight: 900;
}
  
</style>

<div class="flex header-toolbar woff2 subset">
  <a href="#"><svg class="icon" viewBox="0 0 448 512"><use href="#icon-calendar" /></svg>Home</a>
  <a href="#"><svg class="icon" viewBox="0 0 512 512"><use href="#icon-circle-right" /></svg>About us</a>
  <a href="#"><svg class="icon" viewBox="0 0 512 512"><use href="#icon-circle-check" /></svg>Legal notice</a>
  <a href="#"><svg class="icon" viewBox="0 0 512 512"><use href="#icon-circle-left" /></svg>Privacy policy</a>
</div>

<p class="woff2">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>


<!-- hidden svg icon assets -->

<svg width="0" height="0">
  <symbol class="icon icon-calendar" id="icon-calendar" viewBox="0 0 448 512">
    <path d="M152 64H296V24C296 10.75 306.7 0 320 0C333.3 0 344 10.75 344 24V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H104V24C104 10.75 114.7 0 128 0C141.3 0 152 10.75 152 24V64zM48 448C48 456.8 55.16 464 64 464H384C392.8 464 400 456.8 400 448V192H48V448z"></path>
  </symbol>

  <symbol class="icon icon-circle-right" id="icon-circle-right" viewBox="0 0 512 512">
    <path d="M280.2 150.2C273.1 143.8 262.1 142.2 254.3 146.1S239.1 158.5 239.1 167.1l.002 56L152 224C138.8 224 128 234.8 128 248v16C128 277.3 138.8 288 152 288L240 287.1v56c0 9.531 5.656 18.16 14.38 22c8.75 3.812 18.91 2.094 25.91-4.375l96-88.75C381.2 268.3 384 261.9 384 255.2c-.3125-7.781-2.875-13.25-7.844-17.75L280.2 150.2zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z"></path>
  </symbol>

  <symbol class="icon icon-circle-check" id="icon-circle-check" viewBox="0 0 512 512">
    <path d="M335 175L224 286.1L176.1 239c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l64 64C211.7 341.7 217.8 344 224 344s12.28-2.344 16.97-7.031l128-128c9.375-9.375 9.375-24.56 0-33.94S344.4 165.7 335 175zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z"></path>
  </symbol>
  
<symbol class="icon icon-circle-left" id="icon-circle-left" viewBox="0 0 512 512">
    <path d="M360 224L272 224v-56c0-9.531-5.656-18.16-14.38-22C248.9 142.2 238.7 143.9 231.7 150.4l-96 88.75C130.8 243.7 128 250.1 128 256.8c.3125 7.781 2.875 13.25 7.844 17.75l96 87.25c7.031 6.406 17.19 8.031 25.88 4.188s14.28-12.44 14.28-21.94l-.002-56L360 288C373.3 288 384 277.3 384 264v-16C384 234.8 373.3 224 360 224zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464z"></path>
  </symbol>
</svg>

在上面的片段中,主导航可以立即呈现字体,而下一段将稍微延迟呈现。

将字体子集内联为数据url

除了使用更高效的 woff2 字体格式您还可以通过数据url为“关键字母”(在主导航中使用)添加一个子集字体。

这可能是一种合适的方法,尤其是当您的man导航只使用大写字母时。

您可以使用以下工具创建子集 transfonter
将字符/字形范围缩小为例如“ABCDEFGHIJKLMNOPQRSTUVWXYZ.:;?!”

缺点
显然,HTML的文件大小会增加。
因此,如果您将代码保持在纯HTML中,可读性也会受到影响。

另请参阅