前端进阶（二）重绘和回流

最新推荐文章于 2024-08-05 09:56:05 发布

fullstack_lth

最新推荐文章于 2024-08-05 09:56:05 发布

阅读量4.1k

点赞数 7

分类专栏： web

本文链接：https://blog.csdn.net/u014744118/article/details/80699537

版权

本文深入探讨了前端开发中的重绘和回流现象，通过一个实际项目中的bug例子，揭示了回流可能导致的问题。文章详细阐述了回流（布局变化）和重绘（样式变化）的基本概念，列举了触发回流的各种条件，并提供了减少回流和重绘开销的优化策略，包括避免频繁DOM操作、利用CSS控制样式、避免访问特定样式属性等。

摘要由CSDN通过智能技术生成

今天结合项目说下重绘和回流。

公司代码有个bug是这样的：页面整体分为三部分，页面上面横向并排两个容器，页面下方是个表格。页面上方两个容器中图形都是用Highcharts画的，但是页面重绘导致其中一个图形在第二次回流时超出了容器边界。这个问题我折腾了大半天都没找到根源。最后才发现是下方表格由于有多余的边框，有段js逻辑代码是这样写的：

function ClearBorderRight(source) {
    $("#" + source + "_unlockheadersbody").find("tr").each(function () {
        $(":last-child").css("border-right", "0");
    });
}

这段代码直接导致了页面二次回流，使得DOM发生变化，图形冲破容器。

下面我将详细分析造成重绘和回流的原因，首先我们先认识什么叫重绘和回流。

一、回流和重绘基本概念

这个系列的第一篇文章详细介绍了浏览器相关的原理，建议大家先看看。前端进阶（一）浏览器运行原理

1、回流