• 技术文章 >Web开发 >css教程

    css性能优化的解决办法

    小妮浅浅小妮浅浅2021-07-05 09:41:35原创3497

    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学习指路:css教程

    本文教程操作环境:windows7系统、css3版,DELL G3电脑。

    专题推荐:css
    品易云
    上一篇:css中flex-basis的使用 下一篇:css中fraction如何使用

    相关文章推荐

    • css中Min()函数如何使用• css max函数调整字体• css clamp()函数是什么• css设置行间距的方法• css外边距margin是什么• css padding内边距的理解• css中Grid模块是什么• css Flex容器如何理解• css Flexbox布局的介绍• css Flex容器属性有哪些• css flex的排列方式• css中flex-basis的使用

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网