登录
首页 >  文章 >  前端

JS延迟加载CSS的实现方法

时间：2026-04-15 13:27:30 479浏览 收藏

在网页性能优化中，延迟加载非关键CSS是显著缩短首屏加载时间的有效策略——本文详解了三种实用的JavaScript实现方式：通过动态创建并插入link元素，在页面加载完成、用户滚动或定时触发时按需引入样式；结合rel="preload"预加载资源再切换为stylesheet以兼顾优先级与渲染控制；同时强调必须严格区分关键与非关键样式，规避布局偏移，并兼顾浏览器兼容性，让CSS加载真正“聪明”起来。

在css中如何用JavaScript延迟加载样式

在网页性能优化中，延迟加载CSS是一种有效减少首屏加载时间的方法。虽然CSS通常是通过link标签直接引入的，但你可以使用JavaScript来动态控制样式表的加载时机，从而实现延迟加载。

1. 动态创建link元素

最常用的方式是通过JavaScript创建一个标签，并将其添加到页面的中。这样可以推迟样式表的实际请求时间。

示例代码：

function loadCSS(href) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = href;
  document.head.appendChild(link);
}

// 页面加载完成后延迟加载非关键CSS
window.addEventListener('load', () => {
  loadCSS('/styles/non-critical.css');
});

2. 设置加载条件或时间延迟

你也可以结合用户行为（如滚动、点击）或定时器来触发CSS加载，避免一开始就下载所有样式。

例如，延迟3秒加载某个样式：

setTimeout(() => {
  loadCSS('/styles/lazy-theme.css');
}, 3000);

或者等用户滚动页面后再加载：

window.addEventListener('scroll', function onScroll() {
  loadCSS('/styles/extra-layout.css');
  window.removeEventListener('scroll', onScroll); // 只加载一次
});

3. 预加载提示（可选优化）

如果你希望浏览器提前发现资源但不立即应用样式，可以先用rel="preload"预加载，之后再切换为stylesheet。

function preloadAndLoadCSS(href) {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'style';
  link.href = href;
  link.onload = () => {
    const style = document.createElement('link');
    style.rel = 'stylesheet';
    style.href = href;
    document.head.appendChild(style);
  };
  document.head.appendChild(link);
}

这种方式能提升加载优先级感知，同时控制实际渲染时机。

注意点：
  • 确保延迟加载的是非关键CSS（如主题、动画、非首屏组件），否则会影响用户体验。
  • 动态加载的样式可能引起页面重绘或布局偏移，建议提前预留结构或使用占位样式。
  • 考虑低版本浏览器兼容性，避免在不支持动态插入link的环境中出错。
基本上就这些方法，核心就是用JavaScript控制link标签的插入时机，灵活实现按需加载。

到这里，我们也就讲完了《JS延迟加载CSS的实现方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>