前端面试之（重绘与重排）

已于 2023-05-08 09:22:24 修改
阅读量6.3w 收藏 2
点赞数
分类专栏： JavaScript Vue.js 前端重点 文章标签： css html html5
于 2021-08-24 22:24:14 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/Yun__shen/article/details/119899981
版权
JavaScript 同时被 3 个专栏收录
32 篇文章 2 订阅
订阅专栏
Vue.js
12 篇文章 1 订阅
订阅专栏
前端重点
9 篇文章 0 订阅
订阅专栏

重绘

重绘简单就是说、某个dom节点的颜色、背景颜色变了，只会影响自己，并不会影响整个大局

重排

重排就是说某个dom节点的宽高，位置等发生了改变，此种改变不仅会影响自身、还会引起连锁反应、导致后面的元素位置统统改变。会影响大局

  • 重绘并不一定重排、但是重排一定会重绘
  • 重绘和重排的成本都是非常高的、所以要尽可能少的去操作dom

优化

  • 将多次dom操作、样式操作，集中起来执行，减少重绘与重排的次数
  • position：absolute与flex不会导致重排
china-yun
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端进阶（二）重绘和回流
前端产品工程师
06-14 4183
今天结合项目说下重绘和回流。公司代码有个bug是这样的，上面两个容器都是用Highcharts画的图，但是页面重绘导致其中一个图形在第二次回流时超出了容器边界，页面下方是个表格。这个问题我折腾了大半天都没找到根源。最后才发现是下方表格由于有多余的边框，有段js逻辑代码是这样写的：function ClearBorderRight(source) { $("#" + source + "_u...
牛客网前端面试题-重绘和重排
Y_secret的博客
07-07 908
重绘 元素的外观改变出发的浏览器行为，浏览器会根据元素的新属性重新绘制，是元素外观重新展示。重绘不会重新布局。 重排 dom树会重新计算，节点的增删等就会改变dom树，发生重排。条哼元素的一些样式，比如修改窗口的大小，都会出发重排。 重绘不一定重排，重排一定会重绘。 引起重绘的常有属性 color border-style border-radius visibility text-decoration box-shadow background background-image background-p
代码重构经验
热爱思考、活力满满、开朗爱笑的年轻人
09-23 3132
代码重构经验提炼函数合并重复的条件片段把条件分支语句提炼成函数合理使用循环提前让函数退出代替嵌套条传递对象参数代替过长的参数列表尽量减少参数数量少用三目运算符合理使用链式调用分解大型类用 return 退出多重循环 提炼函数 在 JavaScript 开发中，我们大部分时间都在与函数打交道，所以我们希望这些函数有着良好的命名，函数体内包含的逻辑清晰明了。如果一个函数过长，不得不加上若干注释才能让这...
前端性能优化：重排（reflow）和重绘（repaint）
最新发布
你若盛开，清风自来
06-22 709
本文将介绍重排（reflow）和重绘（repaint）的概念，以及它们对网页性能的影响。了解这些概念可以帮助开发者优化网页性能，提升用户体验。本文介绍了重排（reflow）和重绘（repaint）的概念，以及它们对网页性能的影响。了解这些概念可以帮助开发者优化网页性能，提升用户体验。
前端性能优化之重排&重绘
weixin_34128534的博客
11-13 200
前言，最近利用碎片时间拜读了一下尼古拉斯的另一巨作《高性能JavaScript》，今天写的文章从“老生常谈”的页面重绘和重排入手，去探究这两个概念在页面性能提升上的作用。 一.重排 & 重绘 有经验的大佬对这个概念一定不会陌生，“浏览器输入URL发生了什么”。估计大家已经烂熟于心了，从计算机网络到JS引擎，一路飞奔到浏览器渲染引擎。 经验越多就能理解的越深。感兴趣的同学可以看一下这篇文章，...
【前端面试题】页面绘制-重绘和重排
二琳爱吃肉的博客
11-10 1913
目录 重绘和重排 如何触发重排和重绘? 触发重排 触发重绘 如何减少重绘重排次数？ display:none；和visibility:hidden;的区别 重绘和重排 重绘（repaint） 重绘就是在⼀个元素的外观被改变，但没有改变布局（宽⾼）的情况下发⽣， 如改变visibility、outline、背景色等等，重绘只是页面的一部分需要重新绘制，但是元素的尺寸和位置并没有发生变化。 重绘几乎不可避免，只要用户进行交互动作，页面势必会重新渲染。 重排（reflow） 重排就是DOM
前端重绘重排
qq_43853213的博客
06-26 173
重绘重排两者之间的区别减少重排的方法BFC触发BFC的条件
解锁前端面试体系核心攻略.rar
12-29
5. **浏览器工作原理**: 需要理解浏览器的渲染过程，包括解析HTML、构建DOM树、CSSOM树、合成帧与绘制，以及如何优化性能，比如避免阻塞渲染、减少重排和重绘。 6. **前端框架与库**: 如React、Vue、Angular等主流...
前端面试之道前端面试之道前端面试之道前端面试之道.pdf
09-03
- 渲染优化策略，如避免重排（Reflow）和重绘（Repaint），使用CSS的will-change属性等。 7. **MVVM框架**： - React的生命周期分析，了解旧版和新版生命周期方法的变化及其应用场景。 - setState的工作原理，...
前端面试宝典.zip（校招、社招）
08-10
- CSS性能优化：减少重排和重绘、预加载、CSS Sprites、避免使用!important等。 2. **ES6篇**： - ES6新特性：let和const、解构赋值、模板字符串、箭头函数、类与继承、Promise、async/await、Set和Map等。 - ...
几个大公司前端面试题
08-02
- 渲染层的优化，如避免重排（reflow）和重绘（repaint）也是面试中的常客。 6. **前端安全**： - XSS（跨站脚本攻击）和CSRF（跨站请求伪造）的防护措施，以及如何防止JSONP劫持和点击劫持等安全问题。 - CORS...
初级前端开发面试题.pdf
12-19
5. 重绘和重排：浏览器渲染页面时的重绘和重排机制。 6. 缓存机制：浏览器缓存机制的工作原理和应用场景。 7. 状态码：HTTP状态码的含义和应用场景。 8. !DOCTYPE html：HTML文档类型声明的作用和使用场景。 CSS...
前端性能优化之浏览器重排与重绘
tpfxiazai的博客
05-13 350
浏览器渲染过程 在分析浏览器重排、重绘对性能的影响时，我们需要大致了解浏览器的渲染过程，其大致流程为： 把HTML结构字符串解析转换DOM树形结构 解析CSS会产生CSS规则树 js脚本文件加载后，通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree 浏览器有GUI渲染线程与JS引擎线程，为了防止渲染出现不可预期的结果，这两个线程互斥，故渲染过程中，如果遇到<script>标签则会停止渲染，阻塞DOM构建，等到执行完毕后再继续构建 .
【前端】重排和重绘
Dora_5537的博客
06-09 4010
1. 什么是重排和重绘？ 重排：若渲染树的一部分更新，且尺寸变化，就会发生重排。 重绘：部分节点需要更新，但不改变其他集合形状。如改变某个元素的vidibility、outline、背景颜色等，就会发生重绘。 PS：重绘不一定导致重排，但重排一定会导致重绘。重排会产生比重绘更大的开销。 2. 重排和重绘何时会发生？ 触发重排： （1）页面第一次渲染：在页面发生首次渲染的时候，所有组件都...
从零认识重绘(repaint)和重排(reflow)
不会唱杰伦
10-26 529
重绘(repaint)和重排(reflow) 接着上一篇的输入一个URL到页面展示发生了什么？接着引出了今天的主角：重绘和重排。 前端性能优化一直以来都是要考虑的，这直接影响用户体验，重绘和重排作为前端性能优化的一部分也是面试中的高频考点 重绘：某些元素的外观被改变，例如：元素的填充颜色，字体颜色的改变 重排：重新生成布局，重新排列元素。 页面生成的过程 HTML 被 HTML 解析器解析成 DOM 树； CSS 被 CSS 解析器解析成 CSSOM 树； 结合 DOM 树和 CSSOM 树，生成一
重绘与重排（面试简洁版）
CSDN_go_die的博客
11-25 98
重排：元素的结构（高度，宽度等）发生变化 重绘：元素的外观（颜色等）发生变化 重排会引起重绘，重绘不会引起重排
前端面试题重绘(repaint)和重排(回流reflow)
m0_56344602的博客
09-26 376
重排 重排是指部分或整个渲染树需要重新分析，并且节点的尺⼨需要重新计算。 表现为 重新⽣成布局，重新排列元素。 重绘 重绘是由于节点的⼏何属性发⽣改变，或由于样式发⽣改变（例如：改变元素背景⾊）。 表现为某些元素的外观被改变。或者重排后, 进行重新绘制! 两者的关系 重绘不⼀定会出现重排，重排必定会触发重绘。 每个页面至少需要一次回流+重绘。(初始化渲染) 重排和重绘的代价都很⾼昂，频繁重排重绘, 会破坏⽤户体验、让界面显示变迟缓。 我们需要尽可能避免频繁触发重排和重绘, 尤其是重排
CSS重排与重绘总结
张木期的博客
08-09 4516
昨天面试被问到了什么是重排和重绘，回答的并不是很好，下面来总结一下：关于CSS重排和重绘的概念，在制作中考虑浏览器的性能，减少重排能够节省浏览器对其子元素及父类元素的重新渲染；避免过分的重绘也能节省浏览器性能；优化动画，使用3D启用GPU硬件加速；慎重选择高消耗的样式，如box-shadow、border-radius、transform、css filters等。 浏览器的渲染机制 浏览器渲染展...
前端面试必备：页面生成、重排重绘与缓存机制详解
本文档主要探讨前端工程师面试中可能遇到的一些核心概念和技术细节，包括页面生成过程、浏览器渲染优化的两个关键概念——重排与重绘，以及前端缓存机制。让我们逐一深入理解这些关键知识点。 1. 页面的生成过程： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

china-yun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值