记一次 Webfont 优化
背景
在一个大型项目中,我们使用了一些自定义字体来实现特定的设计效果。但是,当页面加载时,这些字体会导致长时间的白屏,影响用户体验。我们需要对字体进行优化,以改进性能。
分析
我们首先使用 Chrome 开发者工具分析页面渲染情况。通过查看网络面板,我们发现字体文件大小较大,且每个字体文件都是单独请求的。由于 HTTP 请求的开销比较大,这会导致页面加载速度慢。
同时,我们也观察到:这些字体虽然是必要的,但它们并不是全局必须使用的,只有特定部分需要。因此,我们可以通过将字体文件延迟加载或按需加载的方式来提高性能。
优化
Subset 字体
在进一步优化之前,我们可以尝试压缩字体文件的大小。我们可以使用 Font Squirrel 等在线工具将字体子集化,仅包含我们需要的字符,并将字体格式转换为 WOFF2 格式,以减少文件大小。
按需加载
接下来,我们可以通过 JavaScript 控制字体的加载行为,使其仅在需要时才加载。例如,我们可以使用 FontFaceObserver 库来检测字体是否已加载完成,并在需要时将其应用到元素上。
----- ---- - --- --------------------------------- ------------------- -- - ------------------------------------------- ----------- -- - ----------------- ------- --------- ---
这段代码会等待 MyCustomFont 字体加载完成后,在 body 元素上添加一个 class,我们可以使用这个 class 来切换字体的可见性。
延迟加载
如果字体仅出现在某些交互行为中(例如:改变语言或选择主题),那么延迟加载字体可能是一个更好的选择。我们可以使用 IntersectionObserver API 监听元素是否进入视口,然后再异步加载字体。
----- -------- - --- ---------------------------- -- - --------------------- -- - -- ---------------------- - ----- ---- - --- --------------------------------- ------------------- -- - ------------------------------------------ --------------------------------- ----------- -- - ----------------- ------- --------- --- - --- --- -- ---------------- -----------------------------------------------------
总结
通过字体优化,我们可以提高页面性能和用户体验。本文介绍了以下方法:
- Subset 字体以减少文件大小。
- 按需加载字体以避免在页面加载时立即下载所有字体文件。
- 延迟加载字体以避免在用户不需要的情况下让字体影响加载性能。
在实践中,我们应该根据具体情况选择最适合我们项目的方法。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/39340