资源加载

彩色等待资源,如图像和字体加载之前,捕捉一个快照. 当资源无法加载时,它会导致意外的UI更改.

快照的最大捕获时间为15秒. 如果资源未能在指定的时间内加载,那么chromecos将重试. 在多次重试之后,快照将被捕获,并显示一条警告消息.

避免外部资源

很难预测网络的稳定性,第三方主机的可靠性. 这些因素意味着外部资源可能无法预先加载并影响您的快照.

十博体育备用网址建议增加 资源到你的故事书 或者使用可靠的 占位符服务. 这也使您的构建运行得更快.

异步呈现

十博体育备用网址的浏览器监控网络活动发生时,你的故事呈现. 如果你的故事在Delay后呈现(i.e. 异步),十博体育备用网址没有办法告诉发生了什么. 因此,十博体育备用网址不能可靠地等待后续资源异步加载.

如果您知道异步呈现需要多长时间,您可以添加 Delay 避免在那之后进行快照. 但是很难可靠地设置网络资源将在其中加载的时间,因此您可能不得不在Delay中添加/减去秒.

十博体育备用网址正在研究如何为故事书和color添加一流的异步渲染支持. 让十博体育备用网址知道你是否需要这个功能聊天或 电子邮件.

浏览器差异

彩色尝试在十博体育备用网址支持的浏览器上呈现尽可能一致. 但是所有浏览器都有不同的功能,这里值得一提.

Chrome让十博体育备用网址可以完全访问网络api. 这意味着十博体育备用网址可以更准确地确认何时加载资源. 简而言之,你的快照更一致. 在Chrome, 十博体育备用网址通过故事书 JS API渲染你的故事, 然后观察网络活动, 在捕获快照之前等待静止(一段没有网络活动的时间).

Firefox和Internet Explorer已经内置了api来告知何时加载资产. 实际上,这些api没有Chrome那么微妙,可能会影响你的快照. 在Firefox和IE11中,十博体育备用网址浏览到一个呈现故事的故事书 URL,然后等待浏览器 “负载”事件 除了十博体育备用网址自己的启发式来确定故事何时完成渲染.

如果你的页面通过没有被加载事件(如AJAX /后台请求)获取的技术加载资源(如JS文件),上述行为可能会有所不同。.

加载自定义字体

当使用自定义字体时,浏览器可以决定在多个通道中呈现HTML. 他们这样做是为了加快第一次有意义的绘画的时间.

不幸的是,这种行为会导致您的故事在没有自定义字体的情况下呈现. 或者更糟,不一致地渲染. 这会触发你不得不一次又一次地接受的字体呈现变化. 这里有一些防止这种情况发生的方法.

十博体育备用网址A:预加载字体

十博体育备用网址建议您确保在渲染故事之前总是加载字体. 在中指定字体来预加载故事书中的字体 ./故事/ preview-head.html.

// ./故事/ preview-head.html

<link
  rel="预加载"
  href="/ /字体路径.woff2"
  as="font"
  类型="字体/ woff2"
  crossorigin="匿名"
/>
如果你正在从外部CDN服务加载字体(如谷歌字体或Adobe字体), 请注意,预加载的字体文件要与CSS中要求的字体匹配.

十博体育备用网址B:检查字体是否加载到装饰器中

这个替代十博体育备用网址使用浏览器的字体加载API和 isChromatic () 辅助函数,用于验证在彩色环境中加载字体.

/ /预览.js
进口 isChromatic  "彩色/ isChromatic";

if (isChromatic() && Docs.字体) {
  addDecorator((故事) => {
    常量 [isLoadingFonts, setIsLoadingFonts] = useState(真正的);
    useEffect(() => {
      承诺.所有([Docs.字体.负载("400 1em字体名称")]).然后(() =>
        setIsLoadingFonts()
      );
    }, []);

    返回 isLoadingFonts ?  : 故事();
  });
}

十博体育备用网址C:不要加载字体

作为最后的手段,您还可以通过设置禁用自定义字体 font-display:可选 在你的CSS中运行时.

友情链接: 1 2 3 4 5 6 7 8 9 10