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

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

javascript 复制代码

  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 加载"优化，用于提升首屏渲染

工作原理

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

为什么这样做？

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

注意事项

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

建议

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

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