css grid vs flexbox：为什么css grid会导致重绘而flexbox不会

Question

css grid vs flexbox：为什么css grid会导致重绘而flexbox不会

rek*_*kna 8 html css flexbox css-grid

我非常喜欢 css grid，因为它很简单。但是 flexbox 没有的 css grid 似乎存在性能问题。

我已经实现了一个两列全屏页面，两列都有一个带有输入框的表单和一个带有溢出-y:auto 的项目列表。一个使用 flexbox 实现左右面板的示例，以及使用 css grid 实现左右面板的一个示例。

这是 flexbox 版本：https ://web-platform-wtfgmj.stackblitz.io/

这是 css 网格版本：https : //web-platform-wtfgmj.stackblitz.io/index2.html

在 chrome 中打开开发者工具并启用绘画闪烁（必须启用工具/渲染）。在输入框之一中键入时，css 网格版本将重新绘制列表中的所有项目。flexbox 版本没有这个问题。

我想了解为什么 css grid 在输入框中键入时会重新绘制列表中的所有项目？它可以以某种方式避免吗？

更新：似乎是 stackblitz 的问题......包含在代码片段中

更新 2：因为它在评论中有点隐藏： 所以我用 chrome 提交了一份错误报告（bugs.chromium.org/p/chromium/issues/detail?id=1204446，根据 dgrogan 的建议），他们似乎证实了这一点是 chrome 当前网格实现的性能问题。显然他们正忙于一个新的实现 LayoutNGGrid 来解决这个问题

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  box-shadow: none;
}
my-app {
  display: flex;
  flex-flow: column;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 0, 0, 0.1);
}

.header {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 1em;
  gap: 0.6em;
  align-items: flex-start;
  margin: 1em;
}

.itemspanel {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  min-height: 0;
}

.itemheader {
  flex: 0 0 auto;
}

.items {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  overflow-y: auto;
  min-height: 0;
}

.itemrow {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1em;
}
.itemrow > span:nth-child(1) {
  flex-basis: 30%;
  flex-grow: 1;
}
.itemrow > span:nth-child(2) {
  flex-basis: 70%;
  flex-grow: 1;
}

.itemrowgrid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 0 0.5em 1em 0.5em;
}

.panels {
  flex: 1 1 100%;
  display: grid;
  grid-template:
    "left right" 1fr
    / 1fr 2fr;
  gap: 1em;
  min-height: 0;
}
.panelleft {
  display: flex;
  flex-flow: column;
  grid-area: left;
  min-height: 0;
}
.panelright {
  display: flex;
  flex-flow: column;
  grid-area: right;
  min-height: 0;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <my-app ng-version="11.0.8">
    <div class="panels">
      <div class="panelleft">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-touched ng-dirty">
          <label >Search:</label><input  type="text" name="name" ng-reflect-name="name" ng-reflect-model="00000" class="ng-valid ng-touched ng-dirty"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
      <div class="panelright d2">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header ng-valid ng-dirty ng-touched">
          <label >Search:</label><input  type="text" name="name1" ng-reflect-name="name1" ng-reflect-model="0000" class="ng-valid ng-dirty ng-touched"><label ></label><button  type="button">Search</button>
        </form>
        <div class="itemspanel">
          <div class="itemheader"></div>
          <div class="items">
            <div class="itemrowgrid"><span >Joelynn</span><span >Hitzmann</span></div>
            <div class="itemrowgrid"><span >Farris</span><span >Espine</span></div>
            <div class="itemrowgrid"><span >Linnet</span><span >Nare</span></div>
            <div class="itemrowgrid"><span >Heidie</span><span >Coolican</span></div>
            <div class="itemrowgrid"><span >Ulrike</span><span >Lowndsborough</span></div>
            <div class="itemrowgrid"><span >Claudine</span><span >Caneo</span></div>
            <div class="itemrowgrid"><span >Janella</span><span >Thurborn</span></div>
            <div class="itemrowgrid"><span >Menard</span><span >Wolledge</span></div>
            <div class="itemrowgrid"><span >Alasteir</span><span >Annandale</span></div>
            <div class="itemrowgrid"><span >Isabelita</span><span >Byrom</span></div>
            <div class="itemrowgrid"><span >Jim</span><span >Issard</span></div>
            <div class="itemrowgrid"><span >Mic</span><span >Tiddeman</span></div>
            <div class="itemrowgrid"><span >Carce</span><span >McClunaghan</span></div>
            <div class="itemrowgrid"><span >Archibaldo</span><span >Jacqueme</span></div>
            <div class="itemrowgrid"><span >Sybilla</span><span >Vivyan</span></div>
            <div class="itemrowgrid"><span >Herve</span><span >Lund</span></div>
            <div class="itemrowgrid"><span >Wade</span><span >Calway</span></div>
            <div class="itemrowgrid"><span >Irita</span><span >Newvell</span></div>
            <div class="itemrowgrid"><span >Lucie</span><span >Hurrion</span></div>
            <div class="itemrowgrid"><span >Sherie</span><span >Bapty</span></div>
            <div class="itemrowgrid"><span >Estella</span><span >Lettington</span></div>
            <div class="itemrowgrid"><span >Lion</span><span >Ganforthe</span></div>
            <div class="itemrowgrid"><span >Siouxie</span><span >January 1st</span></div>
            <div class="itemrowgrid"><span >Clay</span><span >Knightsbridge</span></div>
            <div class="itemrowgrid"><span >Shir</span><span >Desesquelle</span></div>
            <div class="itemrowgrid"><span >Magda</span><span >Brew</span></div>
            <div class="itemrowgrid"><span >Didi</span><span >Scanlon</span></div>
            <div class="itemrowgrid"><span >Petr</span><span >Clerk</span></div>
            <div class="itemrowgrid"><span >Frazier</span><span >Harler</span></div>
            <div class="itemrowgrid"><span >Deonne</span><span >Scoffham</span></div>
            <div class="itemrowgrid"><span >Meggi</span><span >Klampk</span></div>
            <div class="itemrowgrid"><span >Darby</span><span >Huey</span></div>
            <div class="itemrowgrid"><span >Berna</span><span >Batram</span></div>
            <div class="itemrowgrid"><span >Ashli</span><span >Ducarel</span></div>
            <div class="itemrowgrid"><span >Marilin</span><span >Gothup</span></div>
            <div class="itemrowgrid"><span >Mariya</span><span >Fettis</span></div>
            <div class="itemrowgrid"><span >Anett</span><span >Stookes</span></div>
            <div class="itemrowgrid"><span >Adella</span><span >Wash</span></div>
            <div class="itemrowgrid"><span >Ricky</span><span >Pellamonuten</span></div>
            <div class="itemrowgrid"><span >Nora</span><span >Hourigan</span></div>
            <div class="itemrowgrid"><span >Pancho</span><span >Wynn</span></div>
            <div class="itemrowgrid"><span >Magdaia</span><span >Walthall</span></div>
            <div class="itemrowgrid"><span >Thatch</span><span >Llorente</span></div>
            <div class="itemrowgrid"><span >Margaretta</span><span >Ramiro</span></div>
            <div class="itemrowgrid"><span >Jacques</span><span >Smallacombe</span></div>
            <div class="itemrowgrid"><span >Gamaliel</span><span >Learoyd</span></div>
            <div class="itemrowgrid"><span >Jyoti</span><span >Sholl</span></div>
            <div class="itemrowgrid"><span >Elbertine</span><span >Larwell</span></div>
            <div class="itemrowgrid"><span >Sebastian</span><span >Alvarado</span></div>
            <div class="itemrowgrid"><span >Mart</span><span >Hentzeler</span></div>
          </div>
        </div>
      </div>
    </div>

  </my-app>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  box-shadow: none;
}



my-app {
  display: flex;
  flex-flow: column;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 0, 0, 0.1);
}

.header {
  display: grid;
  grid-template-columns: 3fr 7fr;
  grid-template-rows: 1em;
  gap: 0.6em;
  align-items: flex-start;
  margin: 1em;
}

.itemspanel {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column;
  min-height: 0;
}

.itemheader {
  flex: 0 0 auto;
}

.items {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  overflow-y: auto;
  min-height: 0;
}

.itemrow {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 1em;
}
.itemrow > span:nth-child(1) {
  flex-basis: 30%;
  flex-grow: 1;
}
.itemrow > span:nth-child(2) {
  flex-basis: 70%;
  flex-grow: 1;
}

.itemrowgrid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 0 0.5em 1em 0.5em;
}

.panels {
  flex: 1 1 100%;
  display: flex;
  flex-flow: row;
  min-height: 0;
}
.panelleft,
.panelright {
  display: flex;
  flex-flow: column;
  min-height: 0;
}

.panelleft {
  flex: 1 1 100%;
}
.panelright {
  flex: 1 1 200%;
}

Run Code Online (Sandbox Code Playgroud)

<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="reset.css">
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
  <my-app ng-version="11.0.8">
    <div class="panels">
      <div class="panelleft">
        <form novalidate="" name="frmFilters" autocomplete="off" class="header





  
  
  
    
      
        
        cor*_*ter
        
         2
      
      
我已经能够在本地重现该问题（几乎至少）。如下图所示，在我的浏览器（Chromium v92.0.4488.0）中，仅重新绘制了列最右侧的区域 - 正是使用滚动条时将显示的区域。

另一方面，使用 Firefox (v88.0) 或 Safari (v14.0.3)，在 Flexbox 和网格示例中，除了输入之外的任何内容都不会被重新绘制。
由于您不使用容器高度的绝对值，我怀疑这是由于高度的计算以及是否需要显示滚动条而发生的。Chrome 在这里的行为似乎与其他浏览器不同。
一个简单的修复似乎是定义容器的绝对高度（vh，虽然它是一个相对单位，但似乎也有效）：
.panelleft,
.panelright {
  height: 100vh;
}
Run Code Online (Sandbox Code Playgroud)
        
          
        
      
    
  
  
  





  
    
       
       
         
          归档时间：
  
            5 年，5 月 前  
  
         
         
          查看次数：
  
           239 次  
  
         
         
          最近记录：
  
          5 年，4 月 前
  
         
       
       
    
    
    
    
      相关归档 
      
      如何增加虚线边框点之间的空间 263

      
      适用于IE9的Flexbox替代品 39

      
      如何删除CSS中的图像边框？ 28

      
      移动网站"WhatsApp"按钮将消息发送到特定号码 26

      
      用于Rails的Twitter Bootstrap Gems之间的比较 22

      
      CSS翻译不能在IE11上使用SVG g 22

      
      向下滚动一下后,我怎么能坚持div 20

      
      当元素进入视口时应用CSS转换 16

      
      如何使用<div id ="SomeId"> </ div>进行导航 16

      
      溢出：在带有 flex: 1 的 div 上滚动，没有特定的高度 7

      
    
    
    
      难疑归档 
      
      从脚本本身获取Bash脚本的源目录 4672

      
      如何删除远程标签？ 3121

      
      如何列出提交中的所有文件？ 2619

      
      在JavaScript中验证十进制数 -  IsNumeric() 2318

      
      在shell中,"2>&1"是什么意思？ 2121

      
      如何避免JSP文件中的Java代码？ 1649

      
      为什么在允许某些Unicode字符的注释中执行Java代码？ 1326

      
      如何在Android应用程序中的活动之间传递数据？ 1293

      
      如何使用OpenSSL创建自签名证书 1169

      
      如何在Ruby中将字符串转换为小写或大写 1081

Answer 1

cor*_*ter 2

我已经能够在本地重现该问题（几乎至少）。如下图所示，在我的浏览器（Chromium v92.0.4488.0）中，仅重新绘制了列最右侧的区域 - 正是使用滚动条时将显示的区域。

另一方面，使用 Firefox (v88.0) 或 Safari (v14.0.3)，在 Flexbox 和网格示例中，除了输入之外的任何内容都不会被重新绘制。

由于您不使用容器高度的绝对值，我怀疑这是由于高度的计算以及是否需要显示滚动条而发生的。Chrome 在这里的行为似乎与其他浏览器不同。

一个简单的修复似乎是定义容器的绝对高度（vh，虽然它是一个相对单位，但似乎也有效）：

.panelleft,
.panelright {
  height: 100vh;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，5 月前
查看次数：	239 次
最近记录：	5 年，4 月前