cssgridvsflexbox：为什么cssgrid会导致重绘而flexbox不会

html5 • • 问答

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

  </my-app>
</body>

</html>
以上是cssgridvsflexbox：为什么cssgrid会导致重绘而flexbox不会的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容