前端性能优化---样式计算

已于 2023-07-15 15:39:48 修改
阅读量843 收藏
点赞数 1
分类专栏： 前端问题 web前端 文章标签： 前端 性能优化
于 2023-07-15 15:38:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/from_the_star/article/details/131503175
版权
本文深入探讨前端样式计算的过程，包括匹配样式选择器和构造RenderStyle。提出了减少样式计算交互、优化选择器性能和控制计算元素数量等解决思路。通过实例分析，揭示了Recalculate Style在大规模DOM操作中的性能影响，并提供了减少元素受样式计算影响的建议，以提升页面性能。
摘要由CSDN通过智能技术生成

理论

在这里插入图片描述
样式计算
第一步，匹配一系列的样式选择器
第二步，取出所有匹配后的样式规则，构造RenderStyle

步骤

我们的解决思路是

  1. 减少样式计算的相互作用，即样式重新计算
    什么是 Recalculate Style？在浏览器每一帧的渲染流程中，由于 DOM 增删改等因素变化，需要重新计算受影响节点的样式，这一过程在 Chrome DevTools 中被称为 Recalculate Style。我们在排查系统页面性能问题时发现，在影响 DOM 节点数过多的情况下，Recalculate Style 通常会花费较长的时间。

  2. 使用性能更好的样式选择器
    保持简单，使用class选择器。如果的样式选择器存在逻辑.content:nth-last-child(-n+1) .text ，浏览器就需要花时间去计算你说的是哪个元素。
    edge可以在这里查看选择器的性能在这里插入图片描述

  3. 减少样式计算涉及的元素数量

最低0.47元/天 解锁文章
from_the_star
关注
专栏目录
前端性能优化-CSS性能优化
LYFlied的博客
03-27 2595
一、内联首屏关键CSS 二、异步加载CSS 异步加载的几种方式 1.js动态创建样式表link元素，并插入到DOM中。 2.设置media属性 3.设置rel属性 4. rel="preload" 三、文件压缩 四、去除无用CSS 五、有选择地使用选择器 六、减少使用昂贵的属性 七、优化重排与重绘 1. 减少重排 2.避免不必要的重绘 八、让元素及其内容尽可能独立于文档树的其余部分 九、避免使用@import 十、开启GPU渲染动画 十一、合并css文件
「前端进阶」高性能渲染十万条数据(虚拟列表)
lotte
11-07 4572
前言 在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可以使用时间分片的方式来对长列表进行渲染，但这种方式更适用于列表项的DOM结构十分简单的情况。本文会介绍使用虚拟...
CSS计算样式的获取
MA1793的博客
10-09 189
一般来说我们获取CSS的样式的时候会优先采用Elment.style.cssName 这种方法，这种方法类似于对象设置get，set属性获取，例如Elment.style.cssName是获取，Elment.style.cssName = “100px” 是设置，但是这种方法不能获取css样式表或者内嵌样式（这种方法只能获取内联样式），所以这个时候我们需要其他方法。 DOM标准为我们提供...
CSS样式的计算过程
前端御书房
09-05 2373
CSS属性的计算过程分为四步 确定声明值 层叠冲突 使用继承 使用默认值 确定声明值 开发人员在编程时，编写的样式表中给每个属性设置的值，如果有的属性没有声明，如果可以继承使用继承值，如果不能使用继承，使用浏览器的默认值 层叠冲突 层叠是CSS的特性之一，层叠是指相同样式多次作用于同一个元素时确定该样式的值的过程。 浏览器会根据以下规则进行计算 比较重要性 重要性从高到低分为 作者样式表中带 !import 的样式：带有import 的样式的优先级非常高，可以打破默认的优先级规则 作者样式表中的普
CSS样式计算
最新发布
风天语的博客
04-05 941
CSS样式计算，用户代理样式表，层叠冲突，CSS选择器权重，继承
前端笔记之JavaScript（八）关于元素&计算后的样式
RopeHuo
03-26 124
一、获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素。事实上，还有一个方法可以得到标签元素，并且得到的是多个元素： document.getElementsByTagName(); 全线浏览器兼容的，得到元素的方法，就这两个： do...
前端性能优化学习 06 渲染优化 02 JavaScript 执行优化、计算样式优化
皮蛋很白的博客
05-17 549
JavaScript 执行优化 实现动画效果 前端实现动画效果的方法有很多，比如在 CSS 中可以通过 transition 和 animation 来实现，在 HTML 中可以通过 canvas 来实现，而利用 JavaScript 通常最容易想到的方式是利用定时器 setInterval 或 setTimeout 来实现，即通过设置一个间隔时间来不断地改变目标图像地位置来达到视觉变化的效果。 实践经验告诉我们，使用定时器实现的动画会在一些低端机器上出现抖动或者卡顿的现象，这主要是因为浏览器无法确定定时器
谈谈前端性能优化-面试版
loveX001的博客
02-27 636
当我们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对项目做性能优化吗？或者你了解哪些性能优化的方法？听到这个问题的你可能是这样的：似曾相识但又说不清楚，往往只能零散地说出那么几点，难以做到有条理的回答。那么，本文就带你简单了解前端性能优化的几个主要方面，旨在抛砖引玉。css的解析和js的执行是互斥的（互相排斥），css解析的时候js停止执行，js执行的时候css停止解析；无论css阻塞，还是js阻塞，都不会阻塞浏览器加载外部资源（图片、视频、样式、脚本等）；
【前端性能优化】 --- 一次总结明白
qq_53061847的博客
08-01 819
一次Http请求通常包含很多工作，如记录日志、ip过滤、查询字符串、请求体解析、Cookie处理、权限验证、参数验证、异常处理等，但对于Web应用而言，并不希望接触到这么多细节性的处理，因此引入中间件来简化和隔离这些基础设施与业务逻辑之间的细节，让我们能够关注在业务的开发上，以达到提升开发效率的目的。页面的展示主体是文章展示，如果文章展示的请求靠后了，那么渲染文章出来的时间必然靠后，因为有可能因为请求阻塞等情况，影响请求响应情况，如果超过一次并发的情况的话，会更加的慢。与3.2的分包不同。...
3 .前端性能优化-使用Lighthouse测试性能
qq_45679015的博客
06-11 2043
前端性能优化-使用Lighthouse测试性能
javascript获取元素的计算样式
Study_Live_Sun的博客
05-20 238
文章目录 背景 获取计算样式 获取宽高（尺寸） 绝对位置 元素距离 背景 使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。 行内样式(内联样式)即写在html标签中的style属性中，如 <div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中，例如<style t...
【浏览器渲染原理】渲染树构建之样式计算
青青木屋
07-23 2254
构建渲染树时，需要计算每一个渲染对象的可视化属性。通过计算每个元素的样式属性来完成。 样式包括来自各种来源的样式表、inline样式元素和HTML中的可视化属性。 样式表的来源包括浏览器的默认样式表、在网页中加载的样式表、用户在浏览器上设置的用户样式表。
JS获取dom元素计算样式大小
不会code
09-22 852
window.getComputedStyle 获取当前元素的CSS样式显示值，只读，所得的值是绝对值。。ie8及其ie8以下不兼容 elem.currentStyle Ie独有的函数封装一个getStyle函数 处理各浏览器之间的兼容性//封装getStyle function getStyle(elem,prop){//elem dom元素 prop 元素属性 if(wind
JS 获取计算后的样式
boonyaxnn的博客
04-16 845
1、html代码 div class="box"></div> 2、css样式 <style> .box { height: 200px; width: 200px; background-color: orange; border: 20px solid red; } ...
浏览器工作原理--渲染流程：HTML，CSS和JavaScript是如何变成页面的？
xuan的博客
05-19 1205
一、渲染流水线 （1）由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线。 （2）按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。 二、构建DOM树 （1）原因：览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。 （2）DOM树的构建过程 构建 DOM 树的输入内容是.
前端深入学习笔记（2）浏览器渲染原理
qq_41901200的博客
11-04 894
记录浏览器渲染原理学习笔记，优化前置必看知识
浏览器渲染原理
00后的程序员
01-19 1164
当我们对DOM的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。【重新排列布局，即打碎重组】reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，
渲染性能：读写style对渲染过程的影响
沉淀
11-23 2584
读写style对渲染过程的影响一直都说操作DOM性能很差，那么为什么差呢？读写style会给性能造成什么影响？本文作为渲染性能的第一篇（从发布时间来看）其实不太合适，第一篇应该先和大家简单介绍浏览器对于页面的渲染过程，后面会补上，恰好今天写了一些读写style的demo，于是提前写了这篇博客。参考：全部来源于Google最新web的开发者文档： 浏览器是如何渲染每一帧的 如何使用timel
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值