前端首屏渲染性能优化小技巧

` export default defineNuxtPlugin(() => { if (process.client) { const optimizeCSSLoading = () => { const links = Array.from(document.querySelectorAll('linkrel="stylesheet"')) as HTMLLinkElement\[\]

  links.forEach((link) => {
    const href = link.getAttribute('href')
    if (!href) return
    
    if (href.includes('entry') && href.includes('.css')) {
      link.setAttribute('media', 'print')
      link.onload = function() {
        const linkElement = this as HTMLLinkElement
        linkElement.setAttribute('media', 'all')
      }
    }
  })
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', optimizeCSSLoading)
} else {
  setTimeout(optimizeCSSLoading, 0)
}

} }) `

plugins文件夹下创建async-css.client文件

vue3+ts+nuxt.js+sass+pina+vuetify+unocss+autoprefixer

这是一个用于优化 CSS 加载性能的 Nuxt 插件。 async-css.client.ts 实现了"异步 CSS 加载"优化，用于提升首屏渲染

工作原理

1. 查找入口 CSS 文件：查找所有包含 entry 和 .css 的样式表链接（通常是 Nuxt 生成的入口 CSS）。
2. 临时设置为打印媒体：将这些 CSS 的 media 属性设为 print，使其不阻塞渲染。
3. 加载完成后恢复：CSS 加载完成后，将 media 改回 all，样式生效。

为什么这样做？

• 问题：CSS 是渲染阻塞资源，会阻塞页面渲染，导致白屏。
• 解决：通过 media="print" 让浏览器异步加载，不阻塞渲染，加载完成后再应用样式。

注意事项

• 优点：减少首屏阻塞，提升 FCP/LCP。
• 风险：可能出现短暂无样式（FOUC），但通常不明显。

建议

如果遇到样式闪烁或加载问题，可以：

1. 移除该插件（删除文件）
2. 或调整逻辑，只对非关键 CSS 应用此优化