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"。
以上就是css性能优化的解决办法，希望对大家有所帮助。更多css学习指路：
本文教程操作环境：windows7系统、css3版，DELL G3电脑。
Copyright © 2019- net188.cn 版权所有 湘ICP备2022005869号-2
违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务