首页 > 其他分享 >css 渲染优化的方式

css 渲染优化的方式

时间:2023-04-24 11:57:47浏览次数:42  
标签:渲染 background 使用 优化 选择器 css 页面

1、加载性能优化:css压缩、css单一样式、减少使用 @import, 而建议使用link;

2、 选择器性能优化:

  • 避免使用通配规则 *
  • 尽量少的去对标签进行选择,而是用class
  • 不要去用标签限定ID或者类选择符:ul#nav,应该简化为#nav
  • 尽量少的去使用后代选择器,降低选择器的权重值
  • 考虑继承

3、渲染性能优化:

  • 尽量减少页面重排、重绘;
    关于:contain属性优化,可查看 https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain   、https://www.cnblogs.com/xiaonian8/p/14932371.html
  • 重排按照css的书写顺序:

  位置:positon、top、left、z-index、float、display

  大小:width、height、margin、padding

  文字系列: font、line-height、color、letter-spacing

  背景边框:background、 border

  其它:anmation、transition

  重绘:border、outline、background、box-shadow,能使用background-color,就尽量不要使用background;

  • 去除空规则:{};
  • 属性值为0时,不加单位;
  • 属性值为浮动小数0.**,可以省略小数点之前的0;
  • 准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后;
  • 不使用@import前缀,它会影响css的加载速度;
  • 充分利用css继承属性,减少代码量;
  • 抽象提取公共样式,减少代码量;
  • 选择器优化嵌套,尽量避免层级过深;
  • css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用;
  • 将css文件放在页面最上面

4、可维护性、健壮性

  • 将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性;
  • 继上一条,oocss也是提高css性能的途径之一,通过定义可复用的、语义化良好的基础类,然后添加到html中,这也是很多ui框架都在使用的一种方法,例如:class="btn btn-active btn-blue";
  • 样式与内容分离:将css代码定义到外部css中;
  • 容器与样式分离;

标签:渲染,background,使用,优化,选择器,css,页面
From: https://www.cnblogs.com/ducky-L/p/17348980.html

相关文章

  • 通过 css 控制 window.print 的样式
    打印页面隐藏打印按钮在button按钮加一个class样式class="print-button-container"调用window.print方法的页面加以下css<stylescopelang="scss">@mediaprint{.table-print-disable{display:none;}@page{/*纵向打印*/size:p......
  • 优化数字前端工作流的小脚本
    使用python编写了两个优化工作流的小脚本。在前端设计工作时,我的工作流是:初步规划端口(markdown)->初步rtl代码设计(verilog)->完整rtl代码设计(verilog)->输出最终端口(markdown)所以这里涉及两个可以自动化的步骤,一个是把我用markdown下画的表格使用脚本转化成verilog文件。另一个是......
  • CSS6大种选择器
    一、常用的css基本选择器(4种)1、标签选择器结构: 标签名{css属性名:属性值}作用:通过标签名,找到页面中所有的这类标签,设置样式注意:1.标签选择器选择的是一类标签,而不是单独的一个2.标签选择器无论嵌套关系有多深,都能够找到对应的标签<style>p{color:red;}......
  • 软件工程:阿姆达尔定律,性能设计和优化的指导原则
    hi,我是熵减,见字如面。在软件开发中,你是否做过性能的优化,譬如:有一个图片处理的程序,其中包含一个函数用于对图片进行滤镜处理。该函数中包含两个部分:一个可并行化的部分和一个串行部分。可并行化的部分用于对图片的每个像素进行计算,而串行部分用于对处理后的图片进行保存操作。......
  • HTML-CSS笔记
    HTML一、网页的基本结构和基础1、html基础<!doctypehtml><html> <head> <!--可以通过meta标签来设置网页的字符集,避免乱码的问题--> <metacharset="UTF-8"/> <title>网页的基本结构</title> </head> <body> <!-- 迭代 网页的版本......
  • 记录在vue3项目中使用wangeditor富文本编译器以及微信小程序中的渲染
    首先,管理后台中的使用npminstallwangeditor//f封装成了组件,以下是组件中的内容<template>  <divstyle="border:1pxsolid#ccc;maxwidth:600px">   <!--工具栏-->   <Toolbar    style="border-bottom:1pxsolid#ccc"    :......
  • 【开发工具】idea2023.1社区版设置优化,媲美旗舰版
    相信大家很多时候都是用旗舰版来开发,各种序列号破解包各种搞,但说不定哪天又失效了那天又爆泄漏隐私安全问题。随着idea的版本升级破解也不好搞了,所以我就直接用了社区版,经过一番折腾发现社区版一点不比旗舰版差,可能是我用到的功能比较少吧。一、配置全局1.1、配置软件配置1.2......
  • Java性能优化之序列化优化
    1、Java序列化及其缺陷Java提供了一种序列化机制,这种机制能够将一个对象序列化为二进制形式(字节数组),用于写入磁盘或输出到网络,同时也能从网络或磁盘中读取字节数组,反序列化成对象,在程序中使用。 JDK提供的两个输入、输出流对象ObjectInputStream和ObjectOutputStream,它......
  • 针对网络浮动版软件的许可证优化,解决许可证不够用的难题
    随着信息技术的发展和应用,越来越多的企业或组织需要使用各种专业或高效的软件来完成各种任务或项目。然而,购买软件许可证往往需要花费大量的资金和时间,并且还要考虑到软件使用者之间的协调和配合。为了解决这些问题,一种叫做网络浮动版软件(NetworkFloatingSoftware)的授权方式应运......
  • Google Chrome安装Mathjax插件在Github渲染LaTex公式
    打开chrome应用商店,搜索MathJax3PluginforGithub,安装插件,在阅读Github上的Markdown文件时会自动渲染LaTex公式。渲染前:渲染后:图片来源在Edge上没有找到在Github渲染LaTex公式的插件qwq......