九州下载 - 系统安卓苹果手机游戏推荐下载网站!

当前位置:九州下载 > 建站问答 >

css性能优化的解决办法

时间:2023-02-25 13:54编辑:九州下载来源:www.wzjsgs.com

1、内联首屏关键CSS

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

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

2、异步加载CSS

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

//创建link标签
constmyCSS=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性能优化的解决办法,希望对大家有所帮助。

相关文章