在 CSS 中实现良好的性能有哪些技巧

发布时间：2023-10-17 09:44:34 所属栏目：语言来源：

导读：很多朋友都对“CSS中性能优化怎么样做，方法是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

1、内

很多朋友都对“CSS中性能优化怎么样做，方法是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

1、内联首屏关键CSS

性能优化有一个重要的指标，第一次有效绘制，即页面的主要内容出现在屏幕上的时间。

内部CSS可以提前浏览器开始页面渲染，因为HTML下载后可以渲染。应该只把渲染首屏内容所需的关键CSS连接到HTML。

2、异步加载CSS

第一种方式是使用JavaScript动态创建样式表link元素，并插入到DOM中。

// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
第二种方式是将link元素的media属性设置为用户浏览器不匹配的媒体类型，如media="print"，甚至可以是完全不存在的类型media="noexist"。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!