前端性能优化--重绘与回流

最新推荐文章于 2024-10-05 03:51:51 发布
最新推荐文章于 2024-10-05 03:51:51 发布
阅读量424 收藏
点赞数
文章标签： javascript 前端 ViewUI
原文链接：https://segmentfault.com/a/1190000018303261
版权

简介

clipboard.png

clipboard.png

clipboard.png

clipboard.png

实际案例

clipboard.png

说明

performance:性能
layers: 图层
recalculate style: 重新计算样式
paint:重绘
layout：回流
update layer tree: 更新图层树
composite layers: 合并图层

translate代替top

top

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            position: relative;
            top: 0;
            transform: translateY(0);
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        setTimeout(() => {
            document.querySelector('#box').style.top = '100px';
        }, 2000)
    </script>
</body>

</html>

clipboard.png

translate

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            transform: translateY(0);
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        setTimeout(() => {
            document.querySelector('#box').style.transform = 'translateY(100px)';
        }, 2000)
    </script>
</body>

</html>

clipboard.png

用opacity代替visibility

visibility

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        setTimeout(() => {
            document.querySelector('#box').style.visibility = 'hidden';
        }, 2000)
    </script>
</body>

</html>

clipboard.png

clipboard.png

opacity

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            opacity: 1;
            transform: translateZ(0)
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        setTimeout(() => {
            document.querySelector('#box').style.opacity = '0';
        }, 2000)
    </script>
</body>

</html>

clipboard.png

clipboard.png

一个class包含多个样式，代替多个样式修改

修改前

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            position: relative;
            will-change: transform;
            width: 100px;
            height: 100px;
            background-color: red;
            opacity: 1;
        }

    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        setTimeout(() => {
            document.querySelector('#box').style.opacity = '0';
            document.querySelector('#box').style.width = '300px';
            document.querySelector('#box').style.height = '300px';
            document.querySelector('#box').style.left = '300px';
            document.querySelector('#box').style.top = '200px';
            document.querySelector('#box').style.opacity = '0';
        }, 2000)
    </script>
</body>

</html>

修改后

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            position: relative;
            will-change: transform;
            width: 100px;
            height: 100px;
            background-color: red;
            opacity: 1;
        }
        
        #box.action {
            width: 200px;
            height: 300px;
            left: 300px;
            top: 200px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        setTimeout(() => {
            document.querySelector('#box').className = "action";
        }, 2000)
    </script>
</body>

</html>
weixin_33691700
关注
重绘与回流
Teamig的博客
12-06 399
怎么去理解这两个概念呢？从字面上理解，重绘，重新绘画，重新上色，较难产生联想的是回流。 我们都知道，一个页面从加载到完成，首先是构建DOM树，然后根据DOM节点的几何属性形成render树(渲染树)，当渲染树构建完成，页面就根据DOM树开始布局了，渲染树也根据设置的样式对应的渲染这些节点。 在这个过程中，回流与DOM树，渲染树有关，重绘与渲染树有关，怎么去理解呢？ 比如我们增删DOM节点，修改一个...
前端性能优化—回流与重绘
2401_84097745的博客
04-09 263
点击这里即可获取，包括答案解析。](https://bbs.csdn.net/topics/618191877)，包括答案解析。**[外链图片转存中…(img-TzcgsG53-1712645993416)]
重绘和回流
yzkdcsdn的博客
11-13 377
重绘和回流概念Layout(回流)Painting(重绘)发生场景如何避免或者减少回流和重绘 概念 解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树，将 DOM 树和 CSSOM 树结合生成渲染树(Render Tree) Layout(回流) 当渲染树中的一部分或者全部因为元素的尺寸、布局、隐藏等改变而需要重新构建的时候，这时候就会发生回流。根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） Painting(重绘) 在回流的时候，浏览器会使渲染树中受到影响的
回流和重绘——DocumentFragment Vue keepalive
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-05 1320
当 DOM 元素的几何属性发生变化时（如宽度、高度、位置等），浏览器需要重新计算所有相关元素的位置和尺寸，这会导致回流。在前端开发中，页面的性能优化是一个重要的话题。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。组件用于缓存动态组件的状态，避免重复渲染。当用户在两个组件之间切换时，组件的状态会被保留，避免了重复渲染。通过上述的内容，我们了解了如何在前端开发中优化回流和重绘，并探讨了。，我们可以批量操作 DOM 元素，从而减少回流和重绘的次数。
浏览器渲染页面的过程，以及重绘和重排
热门推荐
人工智能
09-22 6万+
回流与重绘 1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。 2. 当render tree中的一些元素需要
前端性能优化之回流重绘
An滴饭儿的博客
01-17 2254
首先，我们需要先明白一个问题 用户请求的资源到达渲染引擎后如何工作？ 构建DOM树 构建CSSOM树和样式计算 构建渲染树 下面是网上的一张图片，可以很清晰的说明前三步 布局阶段 布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切的大小和位置，所有相对的测量值也都会被转换为屏幕内的绝对像素值。 绘制 浏览器主进程将默认的图层（普通文档流的元素）和多个独立图层交给GPU进程，GPU进程再将各个图层合成，最终显示在屏幕上。 哪些元素会独立图层？ <video>
前端进阶版本 ，性能优化—-防抖、节流、重绘与回流。
01-20
总的来说，前端性能优化涉及很多方面，包括但不限于防抖、节流、重绘和回流的管理。通过理解和应用这些策略，开发者能够创建更加流畅、响应更快的用户体验，同时减轻浏览器的负担。在实际开发中，应该根据场景选择...
前端性能优化：回流与重绘深度解析
本文档主要介绍了前端性能优化中的关键概念——回流（Reflow）与重绘（Repaint），以及它们在前端开发中的重要性。作者强调性能优化是前端工程师必备的技能，它涵盖了理论知识和实践经验，而且这两者是相辅相成的。...
前端性能优化与实践.zip
07-23
5. **回流（Reflow）与重绘（Repaint）**："最后一击——回流与重绘"可能讨论了这两者对性能的影响，以及如何通过优化DOM操作来减少不必要的重排和重绘。 6. **事件的节流（throttle）与防抖（debounce）**："事件...
前端性能-重绘和重排（回流）
natsu-cc的博客
06-04 994
前言：
前端的重绘和回流
cx18333的博客
06-09 305
浏览器在生成页面时，会解析html文件生成dom树，然后浏览器主线程会解析css并确定每个dom节点的样式（位置，大小等），在知道dom树和节点样式后，主线程根据遍历dom和计算好的样式，来生成`layout tree`渲染页面(Layout布局)，`重绘和回流都会导致layout重新计算`
前端优化之页面回流与重绘
宇cccc
07-18 535
近日有一朋友去面试,遇到如下一道题目,要给一个dom元素循环添加一组dom元素,要放在循环内还是循环外, 代码如下:let div = document.getElementById('div') div.forEach(item=>{ // 循环给div append添加dom或者其他 }) // 一次append相信绝多数fe都知道要放在循环外 问: 为什么？ 答：因为
前端性能优化之重绘与回流
wen81643956的专栏
10-18 418
回流     当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)；     当页面布局和几何属性改变时就需要回流； 重绘     当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。 PS：回流必将引起重绘，而...
前端性能：浏览器的重绘和回流
yivisir的博客
09-29 244
浏览器的重绘和回流 浏览器渲染机制 浏览器采用流式布局模型 浏览器将HTML解析成DOM树，CSS解析成CSSOM树，将DOM和CSSOM合并成Render树。 有了RenderTree，就需要计算他们在页面上的大小和位置，最后绘制到页面上。 由于浏览器使用流式布局，对Render Tree只需要计算一次布局，但是table元素及其内部元素需要进行多次计算，通常要花3倍同等元素的时间，因此要避免使用table。 重绘 由于结点的几何属性改变或者样式改变而不会影响布局的称为“重绘”。 例如：visibi
重绘与回流(重排)
qq_52499745的博客
08-15 311
重绘与回流(重排)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值