前端性能优化--元素类型和dom层级

展示相同布局,使用控制变量法,对比性能差距
1.
在这里插入图片描述
在这里插入图片描述
结论:用块级元素模拟行内元素时,会有性能浪费,所以能用行内元素的,就不要使用块元素(能用span就不用div)

2.在这里插入图片描述
结论:行内元素模拟块级元素时,性能基本一致

在这里插入图片描述
结论:相同布局下,多余的css布局属性会造成性能浪费

	   块级元素自带的换行比flex的column性能更高

4.在这里插入图片描述
结论:dom层级越少越好,渲染更快,代码体积更小

5.在这里插入图片描述
结论:给标签加多余类名不会影响性能,但是多余的css会影响渲染性能,具体是布局和样式 计算的时间增加了
可以加给标签加多余类名,但是会影响文件体积的大小,也会影响性能,但是从可维护性的角度来看,未尝不可

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

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

相关文章

Feign的原理及概念

1.什么是Feign Feign是Netflix开发的声明式、模板化的HTTP客户端,Feign可帮助我们更加便捷、优雅地调用HTTP API。Feign可以做到使用HTTP请求远程服务时就像调用本地方法一样的体验,开发者完全感知不到这是远程方法,更感知不到这是个HTTP请求…

3.美食推荐系统(Java项目springboot和vue)

目录 0.系统的受众说明 1 绪论 1.1研究背景 1.2研究现状 1.3研究内容 2 系统关键技术 2.1 Springboot框架 2.2 JAVA技术 2.3 MYSQL数据库 2.4 B/S结构 3 系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2经济可行性 3.1.3操作可行性 3.2 系统性能分析 3.3 系统功能分析 3.4系统…

c#笔记5 详解事件的内置类型EventHandler、windows事件在winform中的运用

为什么要研究这一问题? 事件和委托可以说是息息相关。 前面先解释了什么是委托,怎么定义一个委托以及怎么使用匿名方法来内联地新建委托。 事实上事件这一机制在c#的程序开发中展很重要的地位,尤其是接触了winform软件开发的同学们应该都知…

基于django的在线音乐网站设计/基于python的音乐播放系统

Django在线音乐网站设计 摘要:计算机网络如果结合使用信息管理系统,能够提高管理员管理的效率,改善服务质量。优秀的在线音乐网站设计能够更有效管理音乐资讯规范,帮助管理者更加有效管理音乐网站,可以帮助提高克服人工…

Linux驱动(一):环境搭建及介绍

目录 前言一、硬件配置及SDK包1.硬件核心芯片2.瑞芯微原厂SDK包 二、环境镜像文件的获取1.镜像文件的组成及启动流程2.获取环境所需的镜像文件2.1 uboot.img2.2 boot.img2.3 rootfs.img2.4 整体编译 三、镜像文件烧录 前言 自用自用自用,晚上睡觉前复盘用。当然&…

8个平面设计必备素材网站,免费下载。

平面设计师应该去哪里找免费可商用素材网站?我推荐这8个,赶紧收藏好。 1、菜鸟图库 菜鸟图库-免费设计素材下载 菜鸟图库是一个非常大的素材库,站内包含设计、办公、自媒体、图片、电商等各行业素材。网站还为新手设计师提供免费的素材&…

查看显卡cuda版本

1.命令行窗口 打开cmd,输入下列语句 nvidia-smi 如下图红框所示: 2.查看cuda版本,打开英伟达控制面板,桌面右键或者系统右下角,然后点击系统信息,之后点击组件

获取当前计算机的处理器架构platform.machine()

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 获取当前计算机的处理器架构 platform.machine() 选择题 关于以下代码的输出结果说法正确的是? import platform print("【执行】print(platform.machine())") prin…

成都高温限电:当电动汽车「无电可充」

8月末的成都,因为高温限电了。 近几日,成都市气象台连续发布了高温红色预警信号。据新华社报道,8月21日,四川电网用电负荷两次创下历史新高,最高达6797万千瓦,较去年最大用电负荷增长近13%,电力…

代码随想录day1数组/字符串总结

二分法 按左闭右闭的区间处理 适合已经完成排序的,找target数——减少暴力遍历 元素移动类题目 两种方法: 1、双指针 移动规则不同: 移动条件不同\fast一次跳两步,slow一次一步 适合解决元素移动/排序/查找 链表中找环 f…

打手机检测算法源码样本展示打手机检测算法实际应用场景介绍

打手机检测算法是一种利用计算机视觉技术来监测和识别人们在特定区域如驾驶舱、考场或其他敏感区域非法使用手机的行为。这种算法对于提高安全性和确保规则的遵守具有重要意义。以下是关于打手机检测算法源码及其实际应用的详细阐述: 1. 算法实现 - 深度学习框架&a…

【北森-注册安全分析报告-无验证方式导致安全隐患】

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

力扣134-加油站(java题解)

题目链接:134. 加油站 - 力扣(LeetCode) 前情提要: 因为本人最近都来刷贪心类的题目所以该题就默认用贪心方法来做。 贪心方法:局部最优推出全局最优。 如果一个题你觉得可以用局部最优推出全局最优,并…

源代码编译,Apache DolphinScheduler前后端分离部署解决方案

转载自神龙大侠 生产环境部署方案 在企业线上生产环境中,普遍的做法是至少实施两套环境。 测试环境线上环境 测试环境用于验证代码的正确性,当测试环境验证ok后才会部署线上环境。 鉴于CI/CD应用的普遍性,源代码一键部署是必要的。 本文…

【王树森】RNN模型与NLP应用(7/9):机器翻译与Seq2Seq模型(个人向笔记)

Machine Translation Data 做机器学习任务的第一步都是处理数据,我们首先需要准备机器翻译的数据。由于我们是学习用途,因此拿一个小规模数据集即可:http://www.manythings.org/anki/下面的数据集中:一个英语句子对应多个德语句子…

Sinc Function介绍

1、定义 Sinc函数全称:sine cardinal,也称作是sampling function(采样函数)。 2、分类 (1)归一化sinc函数: 这种定义在信号处理中被广泛采用,其中 x 是一个无量纲的变量,…

鸿蒙开发5.0【基于Swiper的页面布局】

场景一:Swiper页面支持自定义动画 方案: 给Swiper组件设置.nextMargin(50).prevMargin(50)属性。 给Swiper组件添加onChange事件,设置当前this.currentIndexindex,当currentIndex为首页或者尾页时,设置上一张以及下一…

生产环境中变态开启devtools(强制)

写到最前面 首先,你已经下载了google的插件【vue devtools】,不知道怎么下载,留言博主 如果你想看的项目中的vuetools插件打开是这样的 Vue.js is detected on this page. Devtools inspection is not available because it’s in product…

Unet改进14:添加SEAttention||减少冗余计算和同时存储访问

本文内容:在不同位置添加SEAttention注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 卷积算子是卷积神经网络(cnn)的核心组成部分,它使网络能够通过融合每层局部接受域内的空间和通道信息来构建信息特征。之前的广泛研究已经调查了这种关系的…

大模型之二十九-语音识别Whisper推理加速

在上一篇博客《大模型之二十八-语音识别Whisper进阶》中我们留了一个尾巴,就是在流式场景以及如何提升推理速度。 流式场景 流式场景分两种,一种是伪流式一种是真流式,伪流式就是bilibili或者YouTub,终端用户在观看视频的时候&a…