一些你可能不知道的前端小优化- ̗̀(๑ᵔ⌔ᵔ๑)

前言

以前写css和html和一些原生DOM操作,感觉写完就完事了。从来没有考虑过一些性能优化的问题,刚好最近学完了浏览器的事件循环和浏览器的工作流程。今天大家分享一些我刚学习到的前端小优化。

浏览器的工作流程

浏览器的渲染过程大致分为以下几个阶段:

  1. HTML解析:将HTML文档解析成DOM树。
  2. CSS解析:将CSS规则解析成CSSOM树。
  3. 合成渲染树:DOM树与CSSOM树结合,生成渲染树
  4. 布局计算:根据渲染树计算每个节点的几何位置和尺寸,形成布局树。
  5. 绘制阶段:将布局树转换为实际像素,绘制到屏幕上。

这一系列步骤高效协作,最终将静态的HTML和CSS代码转化为用户可见的动态页面。
这意味着css的复杂度是会影响到渲染树的生成进而影响浏览器的渲染速度。因此在css中我们需要简化选择器,避免使用过于复杂的选择器。

1- 避免使用 *(通配符) 选择器

有没有人开始学前端都和我一样都喜欢这样进行样式初始化的

*{margin:0px;padding:0px;
}

上面的代码虽然能实现所有标签的样式初始化,但是通配符选择器匹配页面上的每一个元素。在大型或结构复杂的网页中,这可能意味着成百上千甚至上万个元素。浏览器的CSS引擎在处理这样的选择器时,需要遍历整个DOM树,对每个元素进行检查和匹配,这无疑增加了计算负担,可能导致页面渲染变慢,尤其是初次加载时。

如果您需要初始化css的代码的话这个网站是个不错的选择:CSS Tools: Reset CSS (meyerweb.com)

2-避免直接使用标签选择器

请看下面这段代码做出你的选择:

<ul class="list">
<li class="list-item"></li>
</ul>
ul*10>li*10//这里代表着10个ul里面每个都拥有10个li标签

:面对上面的html,你需要选中拥有list-item类名的li,请写出你认为效率最高的选择方法

  • A选项 .list li
  • B选项 .list .list-item


    这题我认为效率最高的应该是B选项,下面是我的个人考量,大佬们有不同的见解也欢迎在评论区指出。

    是从右往左进行读取匹配选择器,右边如果先读取到的如果是li标签那么将会先匹配所有的li标签节点,然后在往上寻找是父容器是否是 .list 类,应用css样式。所以在平常css的书写中,我们应当减少标签选择器的使用。使用类名或者是id 来进行标签的选择。

3-减少回流操作

减少回流操作之前,我先介绍一下,什么是回流


回流是指浏览器为了重新渲染部分或全部文档而重新计算元素的位置和尺寸的过程。在回流过程中,浏览器会根据各种样式属性(如宽高、边距、填充、边框等)重新计算元素的位置和大小,然后绘制到屏幕上。(这是比较消耗时间的)



那什么时候会触发回流操作呢?
导致回流的原因有很多,常见的包括:

  1. DOM元素的添加、删除或修改:任何对DOM结构的改变都会导致回流。
  2. 样式计算:修改元素的样式属性(如宽高、边距、填充等)可能导致回流。
  3. 尺寸调整:调整浏览器窗口大小或添加/删除滚动条也会触发回流。
  4. 获取某些属性:读取某些属性(如offsetWidthoffsetHeightscrollTop等)时,浏览器可能需要回流来确保返回最新的值。


    看看下面这个案例你能找出几个优化点
for(let i=0;i<10000;i++){document.querySelector('.list').innerHTML +=`<li>我是小丽</li>` ;
}
  • document.querySelector('.list')应当提出到循环外面用变量保存,不然每次都需要重新进行选择
  • 减少操作原生dom的次数,不能像循环中一样每次循环操作一次。争取一次性操作完成,可以像下面这样
const list_item =  document.querySelector('.list');
let str = "";
for(let i=0;i<10000;i++){str+=`<li>我是小丽</li>` ;
}
list_item.innerHTML =str;

但是其实这里我推荐另外一种写法也是今天给大家介绍的猪脚之一,**createDocumentFragment**文档碎片

4-文档碎片

DocumentFragment 是一个非常有用的 DOM 接口,它被用于创建一个轻量级的文档对象,它的独特之处在于它不会被渲染到页面中,但可以包含各种 DOM 节点。这种方法可以用于优化 DOM 操作,因为它可以减少页面上的回流和重绘次数。

上面的代码就可以写出下面这样

let content = document.createDocumentFragment();
const list_item =  document.querySelector('.list');for (let i = 0;i < 10000; i++) {let li = document.createElement('li');oSpan.innerHTML = '我是小丽';content.appendChild(oSpan);}
container.appendChild(content);

同样避免了dom节点的频繁操作,而且在语义结构上更加的丰富和完善。

结语

本次的分享就到这里了,希望对您有所收获,喜欢的话就点个关注或者是赞吧,谢谢- ̗̀(๑ᵔ⌔ᵔ๑)

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

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

相关文章

Windows 11内置一键系统备份与还原 轻松替代Ghost

面对系统崩溃、恶意软件侵袭或其他不可预见因素导致的启动失败&#xff0c;Windows 7~Windows 11内置的系统映像功能能够迅速将您的系统恢复至健康状态&#xff0c;确保工作的连续性和数据的完整性。 Windows内置3种备份策略 U盘备份&#xff1a;便携且安全 打开“创建一个恢…

Ubuntu20.04突然没网的一种解决办法

本来要学一下点云地图处理&#xff0c;用octomap库&#xff0c;但是提示少了octomap-server库&#xff0c;然后通过下面命令安装的时候&#xff1a; sudo apt install ros-noetic-octomap-server 提示&#xff1a;错误:7 https://mirrors.ustc.edu.cn/ubuntu focal-security …

MWC上海展 | 创新微MinewSemi携ME54系列新品亮相Nordic展台

6月28日&#xff0c; 2024MWC上海圆满落幕&#xff0c;此次盛会吸引了来自全球124个国家及地区的近40,000名与会者。本届大会以“未来先行&#xff08;Future First&#xff09;”为主题&#xff0c;聚焦“超越5G”“人工智能经济”“数智制造”三大子主题&#xff0c;探索讨论…

leetcode热题HOT42. 接雨水

一、问题描述&#xff1a; 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 二、解题思路&#xff1a; 思路1&#xff1a;通过动态规划的预处理方式&#xff0c;分别计算每个柱子左右两侧的最大高度&…

js数据库多级分类按树形结构打印

可以使用 JavaScript 来按层级打印 categories 数组。首先&#xff0c;需要将这个数组转换成一个树形结构&#xff0c;然后再进行递归或者迭代来打印每个层级的内容。 以下是一个示例代码&#xff0c;用来实现这个功能&#xff1a; const categories [{ id: 2, name: "…

java如何删除字符串内部分字符

java中&#xff0c;如果要删除字符串内部分字符&#xff0c;需要用delete方法&#xff0c;前提字符串是可变字符串StringBuffer类型的。 delete方法的语法格式是sbf.delete(start,end) 其中&#xff0c;sbf是任意StringBuffer对象&#xff0c;start是起始索引&#xff0c;end…

AQ mode

算法原理概述 AQ即adaptive quantization(自适应量化),属于宏块级别码流分配的范畴,在一帧的宏块之间调整码率分配,x264中AQ算法的核心内容是:复杂宏块使用大的QP,简单宏块使用小的QP。x264如何定义复杂?x264是根据宏块内像素值的方差来评价宏块复杂性,方差越大,宏块…

溶解氧(DO)理论指南(1)

转载自梅特勒官网资料&#xff0c;仅用于学习交流&#xff0c;侵权则删&#xff01; 溶解氧理论指南 1 溶解氧(DO)原理1.1 溶解氧和分压1.2 氧气在水中的溶解度1.3 溶解氧对生物的重要性1.4 溶解氧对工业的重要性 1 溶解氧(DO)原理 氧是宇宙中第三大常见元素&#xff0c;也是…

JavaScript(6)——数据类型转换

为什么需要类型转换&#xff1f; JavaScript是弱数据类型&#xff1a;JavaScript不知道变量到底属于哪种数据类型&#xff0c;只有赋值了才清除 使用表单&#xff0c;prompt获取的数据默认为字符串类型&#xff0c;此时不能直接进行算数运算 隐式转换 某些运算符被执行时&am…

力扣hot100-链表

文章目录 概要链表的类型 题目&#xff1a;相交链表题解 概要 链表&#xff08;Linked List&#xff09;是数据结构中的一种&#xff0c;用于存储具有线性关系的数据。在链表中&#xff0c;每个元素称为一个节点&#xff08;Node&#xff09;&#xff0c;每个节点包含两个部分…

”极大似然估计“和”贝叶斯估计“思想对比

极大似然估计&#xff08;Maximum Likelihood Estimation, MLE&#xff09;和贝叶斯估计&#xff08;Bayesian Estimation&#xff09;是统计学中两种重要的参数估计方法&#xff0c;它们在思想和应用上有着显著的差异。下面我将详细对比这两种方法的思想&#xff0c;并分别举出…

两次叛国投敌,没有祸及子孙反而家族长盛不衰的传奇

这个人就是韩国国王韩王信&#xff0c;汉朝八大异姓王之一。 第一次叛国投敌&#xff0c;发生在楚汉争霸时期。有一次他的军队被项羽包围&#xff0c;于是选择了投降。不过&#xff0c;这是权宜之计&#xff0c;不久就借机回到刘邦阵营。 第二次叛国投敌&#xff0c;发生在西…

【Linux开发】基于ALSA库实现音量调节

基于ALSA库实现音量调节 ALSA库实现音量调节1、使用alsamixer工具查看音频接口2、完整代码2.1、snd_mixer_open2.2、snd_mixer_attach、2.3、snd_mixer_selem_register2.4、snd_mixer_load2.5、snd_mixer_first_elem/snd_mixer_elem_next2.6、snd_mixer_selem_get_playback_vol…

linux下php的psr.so扩展源码安装

cd /usr/local/src git clone https://github.com/jbboehr/php-psr.git cd php-psr /usr/local/php/bin/phpize ./configure --with-php-config/usr/local/php/bin/php-config make make install在php.ini中添加extensionpsr.so 重启php-fpm /etc/init.d/php-fpm relo…

打卡第3天---链表相关

除了每天自己写博客总结我个人的学习收获情况之外,我也会看其他录友写的博客文章,对于其他录友的博客内容在代码随想录的训练营都是开诚布公的,都能互相看到。彼此学习,彼此参照,有一位录友思路很清晰呀,用画图软件把自己对题的思路画的特别清晰,我 应该向他们学习;除此…

从零开始使用 Docsify 搭建文档站点

引言 在当今的技术环境中&#xff0c;拥有一份易于访问和美观的文档是至关重要的。Docsify 是一个非常适合快速搭建文档站点的工具&#xff0c;它简单易用&#xff0c;且不需要生成静态文件。本文将带你一步步从零开始使用 Docsify 搭建一个文档站点。 1. 安装 Node.js 和 np…

【ARMv8/v9 GIC 系列 5.1 -- GIC GICD_CTRL Enable 1 of N Wakeup Function】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 GIC Enable 1 of N Wakeup Function基本原理工作机制配置方式应用场景小结GIC Enable 1 of N Wakeup Function 在ARM GICv3(Generic Interrupt Controller第三代)规范中,引入了一个名为"Enable 1 of N Wakeup"的功能。…

上海市计算机学会竞赛平台2023年2月月赛丙组区间的并

题目描述 给定一个数轴上的 &#x1d45b;n 个闭区间&#xff0c;第 &#x1d456;i 个闭区间的两端点为[&#x1d44e;&#x1d456;,&#x1d44f;&#x1d456;][ai​,bi​]&#xff0c;它们的并集可以表示为若干不相交的闭区间&#xff0c;请按照左端点从小到大的顺序输出…

(一)Docker基本介绍

部署项目的发展 传统部署适合需要最大性能和可靠性的场景&#xff0c;但在资源利用和管理方面有显著劣势。虚拟化部署提供了良好的资源利用率和隔离性&#xff0c;适用于需要灵活扩展和多租户环境的场景&#xff0c;但存在性能开销。容器部署在轻量级、可移植性和资源利用率方面…

适合金融行业的国产传输软件应该是怎样的?

对于金融行业来说&#xff0c;正常业务开展离不开文件传输场景&#xff0c;一般来说&#xff0c;金融行业常用的文件传输工具有IM通讯、邮件、自建文件传输系统、FTP应用、U盘等&#xff0c;这些传输工具可以基础实现金融机构的文件传输需求&#xff0c;但也存在如下问题&#…