一、实现 HTML 预加载技术与字体懒加载
1. HTML 预加载技术
在你的 web-admin 和 web-company 项目中，可以通过 <link rel="preload"> 标签在 index.html 里预加载关键资源（如字体、CSS、JS），提升首屏加载速度。例如：
<!-- 在 web-admin/index.html 或 web-company/index.html 的 <head> 中添加 -->
<link rel="preload" href="/src/assets/kai.woff2" as="font" type="font/woff2" crossorigin>
2. 字体懒加载
字体懒加载可以通过 CSS 和 JS 动态引入字体，减少首屏阻塞。以 web-company 的 kai.woff2 字体为例：
步骤一：移除原本在 CSS 里直接引入字体的方式
如果你在 globals.css 或其他 CSS 文件里有如下内容：
@font-face {
font-family: 'Kai';
src: url('../assets/kai.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
可以将其注释或删除。
步骤二：在 JS 里懒加载字体
在 main.ts 里添加如下代码：
// web-company/src/main.ts
if ('fonts' in document) {
const font = new FontFace('Kai', 'url(/src/assets/kai.woff2)', { style: 'normal', weight: 'normal' });
font.load().then(function(loadedFont) {
document.fonts.add(loadedFont);
document.body.classList.add('font-kai-loaded');
});
}
然后在 CSS 里：
body.font-kai-loaded {
font-family: 'Kai', sans-serif;
}
这样字体会在 JS 加载后才应用，实现懒加载。
二、问题
1. 问：你在项目中如何优化首屏加载速度？
答：
在本项目中，我通过 HTML 预加载技术（如 <link rel="preload">）提前加载关键资源，比如字体和主样式表，减少了首屏渲染阻塞。同时，针对字体资源，我实现了懒加载：通过 JS 动态加载字体文件，等字体加载完成后再应用到页面，避免了字体文件阻塞页面渲染。这些措施有效提升了用户的首屏体验。
2. 问：字体懒加载的原理是什么？你是如何在项目中实现的？
答：
字体懒加载的原理是：页面初始渲染时不立即加载字体文件，而是在 JS 里通过 FontFace API 动态加载，加载完成后再应用到页面。在本项目 web-company 端，我在 main.ts 里用 FontFace 动态加载 kai.woff2 字体，加载完成后通过添加 class 的方式切换字体，既保证了页面可用性，也优化了加载性能。
3. 问：如何选择哪些资源需要预加载？你在项目中是怎么做的？
答：
预加载的资源一般是首屏渲染必须的关键资源，比如主字体、主样式、首屏 JS。在本项目中，我分析了首页依赖的字体和样式，将 kai.woff2 字体和主样式表通过 <link rel="preload"> 方式预加载，确保它们能尽快被浏览器获取，提高了首屏渲染速度。
4. 问：你如何保证字体懒加载不会影响页面的可访问性和体验？
答：
为保证可访问性和体验，我在字体懒加载时，页面初始使用系统字体，等字体加载完成后再切换为自定义字体。这样即使字体加载较慢，用户也能正常阅读内容，不会出现“无内容”或“闪烁”现象。此外，利用 font-display: swap 也可以优化体验，但本项目主要采用 JS 动态切换 class 的方式。
5. 问：你在项目中遇到过哪些与资源加载相关的性能问题？如何解决的？
答：
在开发过程中，发现首页加载时字体文件较大，影响了首屏渲染。为此，我采用了字体懒加载和 HTML 预加载技术，减少了字体对首屏的阻塞。同时，合理拆分 JS 和 CSS，按需加载资源，避免了不必要的资源浪费。这些优化措施显著提升了页面加载性能和用户体验。
