前端css性能优化

前端css性能优化

1. 减少样式表数量和压缩文件大小:
通过合并多个样式表、删除未使用的样式、压缩样式表等方式来减少样式表数量和大小,从而减少网络请求和提高加载速度。

  1. 通常来说,样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。一般是样式表数量越少越好,但是如果样式文件偏大,也会影响加载速度,所以需要取舍。如果是大项目,应该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。

  2. 浏览器想要渲染出网页必须要先将CSS等文件下载下来,所有文件越小,那么就能够更快的下载和渲染,特别是在一些网络速度比较慢的场景下效果尤为明显。我们可以借助一些打包工具进行压缩,比如webpack、gulp/grunt、rollup等。

2. 不要嵌套过多复杂的选择器:使用尽可能简洁的选择器来匹配元素,避免使用过于复杂的选择器,可以减少匹配时间和提高渲染速度。

如下:
法2的写法,性能更高,因为css选择器是从右到左解析的,法2可以直接获取child,而法1需要先获取所有的child,再获取family下的所有child

/* 法1 */
.family .child {font-size: 14xp;
}
/* 法2 */
.child {font-size: 14xp;
}

3. 避免使用通配符*选择器:通配符选择器(*)会匹配所有元素,会消耗大量计算资源。尽可能避免使用通配符选择器,或者将其限制在具体的元素或类别上。

4. 使用ID选择器代替类选择器:ID选择器比类选择器更具体,匹配速度更快。在需要使用样式的地方,尽可能使用ID选择器代替类选择器。

5. 避免在全局范围内使用过多的类选择器:为了提高选择器的效率,可以限定类选择器的范围,避免在全局范围内使用过多的类选择器。

6. 减少全局选择器的使用:全局选择器会匹配文档中的每一个元素,因此会降低选择器的效率。应尽量避免使用全局选择器,而是限定选择器的范围。

7. 使用子选择器:子选择器的效率比后代选择器高,因为子选择器只会选择直接子元素,而后代选择器会选择所有后代元素。因此,应尽量使用子选择器来提高选择器的效率。

8. 使用类选择器代替标签选择器:类选择器比标签选择器的效率高。因此,应尽量使用类选择器来代替标签选择器,从而提高选择器的效率。

9. 避免使用@import:@import会阻塞页面的加载,影响浏览器的并行下载,并且会增加页面的请求次数。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道还有另外一个css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作,这就导致浏览器无法并行下载所需的样式文件。尽量避免使用@import,或者将其放在样式表的开头。

10. 避免使用过多的浮动和定位:浮动、定位元素不仅会影响其他元素的布局和渲染,也容易造成重绘与回流。如果使用过多的浮动与定位,会导致页面的渲染速度变慢。尽量避免使用过多的浮动与定位,或者使用其他布局方式代替。

11. 使用雪碧图:将多个小图标合并成一个大图,并使用CSS来控制显示区域,可以减少网络请求和提高加载速度。

12. 避免使用!important:!important会覆盖其他所有样式,会增加计算时间和降低渲染速度。尽量避免使用!important,或者将其限制在必要的地方。

13. 使用缩写属性:使用缩写属性可以减少样式表的大小,从而提高加载速度。例如,使用margin代替margin-top、margin-right、margin-bottom、margin-left。

14. 慎用一些需要浏览器计算的CSS属性:
如果某些CSS属性需要浏览器计算,那都是需要耗费一些性能的,比如box-shadow、border-radius、filter、透明度、:nth-child、calc等等,而且除了计算,这些属性也容易造成重绘和重排

如果非必要情况下可以不必使用这些属性,当然,大多数都是必要情况。

15. 利用继承减少代码量:
我们都知道CSS有一些属性是可以继承的,比如color,font-size,font-family等等,但是很多开发人员不注意这种细节,编写很多重复性代码,从而使得CSS文件变得比较大,影响加载速度。

16. 首屏关键css使用内联样式:
网站性能是留住用户的关键,那么网站首屏的加载速度更是关键的关键。

通常我们不会去写内联样式,因为这会造成代码维护困难,而且内联样式浏览器不会缓存的,每次刷新都会重新加载css。

但是,凡事都有两面性,内联CSS能够使页面渲染的开始时间提前,因为在HTML下载完成之后就能渲染了,不像link那样引用样式需要耗费更多时间。

那么,我们是否可以全部使用内联样式呢?答案是否定的,刚刚说了内联样式还是存在许多问题的,所以最好的解决办法就是:首屏关键CSS可以使用内联的形式。

17. 异步加载CSS:
CSS会阻塞渲染,在CSS文件请求、下载、解析完成之前,浏览器将不会渲染任何已处理的内容。

但是,有些CSS文件可能不是我们渲染必须的CSS文件,我们可以让它异步加载,从而提升渲染速度,比如下面两种异步加载CSS的方式:

  1. 使用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 );
    
  2. 修改link标签(有兼容性问题)

    <link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
    

    或者

    <link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
    

18. 不要为了速度而放弃了可维护性和可读性:
渲染速度很重要,但是我们在编码过程中,也需要注意代码的可维护性和可读性,比如,不能盲目的为了压缩样式文件的大小,写一些很简单的类名,如a,b,c,d等

19. 减少页面重排、重绘:
页面的重排重绘都会耗费浏览器性能,我们在非必要情况下应该避免,比如下面这些情况。

改变元素的内外边距
CSS伪类激活
能使用background-color,就尽量不要使用background
改变font-size和font-family
当然有些情况我们是不能避免重绘和回流的,我们视情况而定

21.将css文件放在页面最上面:
我们可以看到,大多数的html页面在用link引入外部css文件的时候,都是把css文件放在页面的顶部,即放在标签里面,那么,这样做的原因是什么呢?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- css放顶部 --><link rel="stylesheet" href="path/to/your/css/file.css">
</head>
<body><!-- 页面内容 -->
</body>
</html>

答案:可以让前端性能更优化

那么,为什么就可以让前端性能更加优化呢?这时,我们就需要先了解脚本和样式文件对页面渲染的影响。

浏览器从服务器获取文档并自上而下进行解析,在脚本文件不包含defer和async的情况下,会按照如下的规则进行解析:

  1. 解析html文档,遇到html标签时,构建DOM树
  2. 在解析html文档的时候,如果遇到外联的css文件或js文件,会阻塞html文档继续向下解析。
  3. css文件下载完毕之后,会构建 CSS Rule Tree,js文件下载完毕之后,会立即解析执行。
  4. 如果CSS Rule Tree先于DOM Tree生成,那么DOM Tree会在一边构建的同时一边结合CSS Rule Tree生成Rendering Tree(渲染树),渲染页面。
  5. 如果CSS Rule Tree后于DOM Tree生成,那么在构建完DOM Tree之后,会再结合CSS Rule Tree树,再次构建一遍,渲染页面,这就会导致重绘与回流,影响性能

从上面的规则中我们可以看到,我们css文件放在顶部,就可以先于DOM树生成CSS Rule Tree,DOM Tree就只会构建一遍,节省了时间,前端性能就得到优化。

当然,这个用法并不是绝对的,如果css文件比较大,下载时间较长,屏幕就会出现较长的白屏时间,用户体验不好。

20.其它优化小点:
去除空规则:{}
属性值为0时,不加单位
尽量少的去对标签进行选择,而是用class
尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素
属性值为浮动小数0.**,可以省略小数点之前的0
标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后
选择器优化嵌套,尽量避免层级过深

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/40907.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在 C++中,如何实现高效的多线程并发编程以处理大规模数据计算,同时避免常见的竞态条件和死锁问题?

在 C 中&#xff0c;可以使用以下几种方法来实现高效的多线程并发编程以处理大规模数据计算&#xff0c;并避免常见的竞态条件和死锁问题&#xff1a; 使用互斥锁&#xff1a;使用 std::mutex 类型的互斥锁来保护共享数据的访问。在访问共享数据之前&#xff0c;线程先要获取互…

二叉树 Leetcode 101 对称二叉树

二叉树 Leetcode 101 对称二叉树 Leetcode 101 要点&#xff1a;1.比较的是左右子树是否相同&#xff0c;不是节点的左右孩子&#xff1b; 2.左子树左右中遍历&#xff0c;右子树右左中遍历&#xff1b; 3.灵活递归。 /*** Definition for a binary tree node.* struct Tree…

【实验室精选】PFA反应瓶带鼓泡球 高效气体鼓泡 化学分析优选

PFA反应瓶带鼓泡球是一种特殊设计的实验室容器&#xff0c;它集成了鼓泡球和PFA&#xff08;全氟烷氧基&#xff09;材料的反应瓶&#xff0c;用于气体的鼓泡和液体的混合。以下是它的一些特点和用途&#xff1a; 特点&#xff1a; 鼓泡球设计&#xff1a;鼓泡球周围布满小孔&…

安装realsenseSDK2.0

1、创造工作空间并进入 mkdir ros_ws cd ros_ws/ 2、克隆librealsense git clone https://github.com/IntelRealSense/librealsense cd librealsense 3、安装依赖项 sudo apt-get install libssl-dev sudo apt-get install libusb-1.0-0-dev sudo apt-get install libudev…

界面材料知识

界面材料是用于填充芯片和散热器之间的空隙&#xff0c;将低导热系数的空气挤出&#xff0c;换成较高导热系数的材料&#xff0c;以提高芯片散热能力。参考下图 图片来源网上 热阻是衡量界面材料性能最终的参数&#xff0c;其中与热阻有关的有&#xff1a; 1、导热系数&#x…

从零开始学习SLAM(三)

旋转向量 #include <Eigen/Geometry> #include <Eigen/Core>AngleAxisd 类有几种构造函数&#xff0c;其中最常用的是&#xff1a; Eigen::AngleAxisd(const Scalar& angle, const Axis& axis);angle 是旋转的角度&#xff0c;通常以弧度表示。axis 是旋…

element-ui el-select选择器组件下拉框增加自定义按钮

element-ui el-select选择器组件下拉框增加自定义按钮 先看效果 原理&#xff1a;在el-select下添加禁用的el-option&#xff0c;将其value绑定为undefined&#xff0c;然后覆盖el-option禁用状态下的默认样式即可 示例代码如下&#xff1a; <template><div class…

【 VIPKID-注册安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …

黑马点评项目难点-动态代理,sychronized,@Transactional失效的情况

文章目录 难点1&#xff1a;synchronizesynchronized 的底层实现锁的具体操作举例说明结论 难点2&#xff1a;动态代理和Transactional失效问题Transactional 工作原理关键点示例分析正确的使用方式结论建议 难点所在代码块 Overridepublic Result seckillVoucher(Long voucher…

AI胡言乱语

复合矢量场在多维时空折叠过程中生成了高维拓扑映射&#xff0c;使得纳米级别的存储单元能够在低能耗状态下实现高效数据交换。基于相位调制的光子流动控制确保了全息影像的即时重构&#xff0c;同时动态适应不同频段的干扰信号&#xff0c;达到最佳信噪比。 异相态转化算法在…

基于Istio的多网关运行时:配置、部署和应用

1. 引言 Istio是一个开源的服务网格&#xff0c;主要应用于简化微服务架构中的服务间通信、提供强大的监控能力以及加强服务的安全管理。通过利用Sidecar模式部署的Envoy代理&#xff0c;Istio能够在几乎无需修改服务代码的情况下&#xff0c;实现服务发现、负载均衡、加密通信…

【LinuxC语言】管理者线程函数

文章目录 前言工作者工作流程函数实现实现原理函数代码概况总结前言 在并发编程中,管理者线程函数是一个重要的组成部分,它负责管理和调度工作线程。在Linux C语言环境下,我们可以使用POSIX线程库(pthread)来创建和控制管理者线程。管理者线程通常负责添加任务到任务队列…

WRF学习——使用CMIP6数据驱动WRF/基于ncl与vdo的CMIP6数据处理

动力降尺度 国际耦合模式比较计划&#xff08;CMIP&#xff09;为研究不同情景下的气候变化提供了大量的模拟数据&#xff0c;而在实际研究中&#xff0c;全球气候模式输出的数据空间分辨率往往较低&#xff08;>100Km&#xff0c;缺乏区域气候特征&#xff0c;为了更好地研…

有哪些在本地运行大模型的方法

前言 在本文中&#xff0c;我们将看到在本地运行任何 LLM 的不同方法 1/ LMStudio LM Studio 是一款桌面应用程序&#xff0c;用于在计算机上运行本地 LLM。链接&#xff1a;https://lmstudio.ai/ 2/ Ollama Ollama 是一款工具&#xff0c;可让您在机器上本地运行开源大型语…

vue项目静态图片下载

正常情况下只需要传入图片路径就可以进行下载 methods: {downs(path, name) {//必须同源才能下载var alink document.createElement("a");alink.href path;alink.download name; //图片名alink.click();},}, 但是当我们downs方法中直接传入"/assets/load/xx…

二、分布式软总线是如何高效的传输数据和任务的

分布式软总线在HarmonyOS中高效传输数据和任务主要依靠以下几个关键技术点和设计原则: 设备快速发现与连接: 利用多种通信技术(如Wi-Fi、蓝牙、有线连接等),结合广播、多播及服务发现协议,实现设备间的快速发现与稳定连接。这包括设备的唯一标识管理、网络条件自适应选择…

【pytorch14】感知机

单层感知机模型 对于单层的感知机&#xff0c;它的激活函数是一个sigmoid 对于符号的定义做一个规范化&#xff0c;输入层每一层进行一个编号 输入是第0层&#xff0c;上标0表示属于输入层&#xff0c;下标0到n表示一共有n个节点(这里严格来说应该是0~n-1&#xff0c;为了书写…

一站式广告监测新体验,Xinstall助你广告投放更精准

在这个移动互联网飞速发展的时代&#xff0c;App推广与运营成为了每个开发者与广告主关注的焦点。然而&#xff0c;面对琳琅满目的广告平台和复杂的投放环境&#xff0c;如何精准评估广告效果、优化投放策略&#xff0c;成为了摆在面前的一道难题。今天&#xff0c;我们就来聊聊…

Jemeter--关联接口压测

Jemeter–独立不变参接口压测 Jemeter–独立变参接口压测 Jemeter–关联接口压测 案例分析 比如&#xff1a;有个波次复核接口很慢&#xff0c;优化后需要压测。但是波次复核接口数据是由另外两个接口&#xff08;配单详情、内盒信息&#xff09;的数据组合而来&#xff0c;而…

排序题目:三个数的最大乘积

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;三个数的最大乘积 出处&#xff1a;628. 三个数的最大乘积 难度 3 级 题目描述 要求 给定一个整数数组 nums …