css - 部分css添加flex后渲染延迟-6ren

css - 部分css添加flex后渲染延迟

转载作者：行者123 更新时间：2023-12-04 15:06:09

我正在开发一个博客，我最近添加了一个 div 元素和 display: flex; 以使元素出现在同一行中。

但是，每当我加载页面时进行此更改后，元素会向右移动一点，字体加载会有点晚。这种情况只会持续一段时间，在页面加载后它们都会移回预期位置。

注意:这不会出现在我的本地主机上，而只会出现在生产构建中(或部署时)

请观看下面的视频，亲眼看看:

https://imgur.com/XY0SHPM

或者如果在桌面上亲自见证:https://lucid-brown-a29dc1.netlify.app/

JSX

<li>
        <Link to={slug} key={slug} className="link">
            
          <h1 className="title">
            {title}
          </h1>
          
          <p className="meta">
            <span>
              <FaCalendar size={18} /> {prefix}
              </span>
            
            <div className="tags">
              {tags && tags.map(tag =>
                <Link to={`/tag/${tag.split(" ").join("-").toLowerCase()}`}>
                  <span key={tag}> <FaTag size={18} /> {tag} </span>
                </Link>
              )}
            </div>
          </p>
          
          <p> {excerpt}</p>
        </Link>
</li>

对应的css:

<style jsx>{`
        :global(.link) {
          width: 100%;
          color: ${theme.text.color.primary};
        }
        li {
          border: 1px solid transparent;
          // border-radius: ${theme.size.radius.default};
          margin: ${theme.space.l} 0 ${`calc(${theme.space.l} * 3)`};
          padding: ${theme.space.inset.s};
          position: relative;
          transition: all ${theme.time.duration.default};
          background: transparent;
          
          &::after {
            // border-top: 1px solid ${theme.line.color};
            content: "";
            height: 0;
            position: absolute;
            bottom: ${`calc(${theme.space.default} * -1.5)`};
            left: 50%;
            transform: translateX(-50%);
            transition: all ${theme.time.duration.default};
            width: 50%;
          }
          &:first-child {
            margin-top: 10px;   
          }
          &:last-child {
            margin-bottom: 10px;
          }
        }
        .title {
          padding: ${theme.space.m} ${theme.space.s} 0;
          line-height: ${theme.blog.h1.lineHeight};
          font-size: ${theme.blog.h1.size};
          text-remove-gap: both;
          :global(.arrow) {
            display: none;
            position: relative;
            top: 7px;
          }
        }
        .meta {
          // display: block;
          font-size: 0.8em;
          padding: ${theme.space.s} ${theme.space.s};
          margin: ${theme.space.m} 0;
          background: transparent;
          .tags {
            display: flex;
            flex-flow: row wrap;
            // flex-shrink: 0;
          }
          :global(svg) {
            // fill: ${theme.icon.color};
            fill: ${theme.text.color.primary};
            opacity: 0.5;
            margin: ${theme.space.inline.xs};
            position: relative;
            bottom: -0.4em;
          }
          span {
            // align-items: baseline;
            // display: flex;
            text-transform: uppercase;
            margin: ${theme.space.xs} ${theme.space.s} ${theme.space.xs} 0;
            font-size: 0.8em;
          }
        }
        p {
          line-height: 1.5;
          padding: 0 ${theme.space.s};
          text-remove-gap: both;
        }
        @from-width tablet {
          li {
            margin: ${`calc(${theme.space.default} * 3)`} 0 ${theme.space.xl};
            padding: ${theme.space.default};
            &::after {
              bottom: ${`calc(${theme.space.default} * -2)`};
            }
            &:first-child {
              &::before {
                top: ${`calc(${theme.space.default} * -1.75)`};
              }
            }
          }
          .title {
            font-size: ${`calc(${theme.blog.h1.size} * 1.2)`};
            padding: ${`calc(${theme.space.default} * 1.5) ${theme.space.default} 0`};
            transition: all 0.5s;
          }
          .meta {
            
            padding: ${theme.space.default} ${theme.space.default};
          }
          p {
            padding: 0 ${theme.space.default};
          }
        }
        @below desktop {
          li {
            border: 1px solid ${theme.line.color};
            box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
            margin-top: 20px;
            margin-bottom: 20px;
            
            &:first-child {
              margin-top: 0;
            }
            &::after {
              border-top: 0px;
            }
          }
        }
        @from-width desktop {
          li {
          
            margin: 0 0 0;
            padding: 0 0 ${theme.space.l};
            &::after {
              bottom: ${`calc(${theme.space.default} * -1.5)`};
            }
            &:first-child {
              &::before {
                top: ${`calc(${theme.space.default} * -2.75)`};
              }
            }
          }
          :global(.blogItemLink:first-child) > li::before {
            top: ${`calc(${theme.space.default} * -2.75)`};
          }
          .title {
            font-size: 2.5em;
            padding: ${`calc(${theme.space.default} * 1.2)`} ${theme.space.l} 0;
          }
          .meta {
          
              padding: 0 ${theme.space.l} 0;
          }
          p {
            padding: 0 ${theme.space.l} 0;
          }
          li {
            &:hover {
              border: 1px solid ${theme.line.color};
              box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
              &:after {
                bottom: ${`calc(${theme.space.default} * -2.5)`};
              }
              :global(.gatsby-image-wrapper) {
                transform: scale(1.1);
              }
              .title {
                color: ${theme.blog.h1.hoverColor};
              }
          
            }
          
          }
        }
        @media (hover: hover) {
          .meta {
            :global(a svg) {
              transition: all 0.5s ease-in-out;
              -webkit-transition: all 0.5s ease-in-out;
              -moz-transition: all 0.5s ease-in-out;
            }
            :global(a:hover svg) {
              transition: all 0.5s ease-in-out;
              -webkit-transition: all 0.5s ease-in-out;
              -moz-transition: all 0.5s ease-in-out;
              transform: scale(1.3);
              color: ${theme.color.brand.primary};
            }
          }
        }
      `}</style>

到目前为止我已经尝试过:

将 div 更改为 span 但这会使标签与上面的前缀对齐
删除 flex 但我还可以如何对齐行中的元素？
尝试通过删除复杂的计算来提高 css 性能
读到应该使用 grid 而不是 flex 但看起来 grid 不可用(也许需要使用一些 css 框架？)
我还观察到字体颜色加载比页面晚一点，所以这可能与 flex 根本无关，我只是找错了树？

我是一个 CSS 新手，所以我可能没有使用这里的最佳实践。将整个 CSS 粘贴到此处，因为我无法找到问题的原因。是因为 flex box 性能很重吗？我该如何缓解这种情况？

如果有人想阅读整个代码:https://github.com/amita-shukla/blog-1/blob/master/src/components/Blog/Teaser.js

最佳答案

FOUC(Flash OF Unstyled C组件)来自多个来源。在你的情况下，我想加载 CSS 作为 JSX 组件 <style jsx>阻止样式的呈现，直到它们被浏览器解析。请记住 JavaScript is a render-blocking .此外，您的代码的最终行为应在 gatsby build 中进行测试。环境。

在浏览器可以呈现页面之前，它必须通过解析 HTML 标记来构建 DOM 树。在此过程中，每当解析器遇到脚本时，它必须停止并执行它，然后才能继续解析 HTML。

尝试将样式添加为 Gatsby docs suggest :

Global CSS Files :网站样式的传统方式。 CSS 规则是全局声明的，样式的应用取决于特异性和继承。
Modular Stylesheets :CSS 规则是传统编写的，但与 JavaScript 一起使用并在本地范围内使用，以避免在其他地方产生意外的副作用。与 Gatsby 一起开箱即用。
CSS-in-JS :在 JavaScript 中编写和使用的本地范围的 CSS，可以更轻松地使用动态样式和其他功能。需要使用第三方库。

作为初始方法，我建议使用 CSS 文件:

import './styles.css'
// other imports


<li>
        <Link to={slug} key={slug} className="link">
            
          <h1 className="title">
            {title}
          </h1>
          
          <p className="meta">
            <span>
              <FaCalendar size={18} /> {prefix}
              </span>
            
            <div className="tags">
              {tags && tags.map(tag =>
                <Link to={`/tag/${tag.split(" ").join("-").toLowerCase()}`}>
                  <span key={tag}> <FaTag size={18} /> {tag} </span>
                </Link>
              )}
            </div>
          </p>
          
          <p> {excerpt}</p>
        </Link>
</li>

假设 styles.css 与 React 组件位于同一文件夹中。在那里，在你的 styles.css :

:global(.link) {
  width: 100%;
  color: ${theme.text.color.primary};
}
li {
  border: 1px solid transparent;
  // border-radius: ${theme.size.radius.default};
  margin: ${theme.space.l} 0 ${`calc(${theme.space.l} * 3)`};
  padding: ${theme.space.inset.s};
  position: relative;
  transition: all ${theme.time.duration.default};
  background: transparent;
  
  &::after {
    // border-top: 1px solid ${theme.line.color};
    content: "";
    height: 0;
    position: absolute;
    bottom: ${`calc(${theme.space.default} * -1.5)`};
    left: 50%;
    transform: translateX(-50%);
    transition: all ${theme.time.duration.default};
    width: 50%;
  }
  &:first-child {
    margin-top: 10px;   
  }
  &:last-child {
    margin-bottom: 10px;
  }
}
.title {
  padding: ${theme.space.m} ${theme.space.s} 0;
  line-height: ${theme.blog.h1.lineHeight};
  font-size: ${theme.blog.h1.size};
  text-remove-gap: both;
  :global(.arrow) {
    display: none;
    position: relative;
    top: 7px;
  }
}
.meta {
  // display: block;
  font-size: 0.8em;
  padding: ${theme.space.s} ${theme.space.s};
  margin: ${theme.space.m} 0;
  background: transparent;
  .tags {
    display: flex;
    flex-flow: row wrap;
    // flex-shrink: 0;
  }
  :global(svg) {
    // fill: ${theme.icon.color};
    fill: ${theme.text.color.primary};
    opacity: 0.5;
    margin: ${theme.space.inline.xs};
    position: relative;
    bottom: -0.4em;
  }
  span {
    // align-items: baseline;
    // display: flex;
    text-transform: uppercase;
    margin: ${theme.space.xs} ${theme.space.s} ${theme.space.xs} 0;
    font-size: 0.8em;
  }
}
p {
  line-height: 1.5;
  padding: 0 ${theme.space.s};
  text-remove-gap: both;
}
@from-width tablet {
  li {
    margin: ${`calc(${theme.space.default} * 3)`} 0 ${theme.space.xl};
    padding: ${theme.space.default};
    &::after {
      bottom: ${`calc(${theme.space.default} * -2)`};
    }
    &:first-child {
      &::before {
        top: ${`calc(${theme.space.default} * -1.75)`};
      }
    }
  }
  .title {
    font-size: ${`calc(${theme.blog.h1.size} * 1.2)`};
    padding: ${`calc(${theme.space.default} * 1.5) ${theme.space.default} 0`};
    transition: all 0.5s;
  }
  .meta {
    
    padding: ${theme.space.default} ${theme.space.default};
  }
  p {
    padding: 0 ${theme.space.default};
  }
}
@below desktop {
  li {
    border: 1px solid ${theme.line.color};
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
    margin-top: 20px;
    margin-bottom: 20px;
    
    &:first-child {
      margin-top: 0;
    }
    &::after {
      border-top: 0px;
    }
  }
}
@from-width desktop {
  li {
  
    margin: 0 0 0;
    padding: 0 0 ${theme.space.l};
    &::after {
      bottom: ${`calc(${theme.space.default} * -1.5)`};
    }
    &:first-child {
      &::before {
        top: ${`calc(${theme.space.default} * -2.75)`};
      }
    }
  }
  :global(.blogItemLink:first-child) > li::before {
    top: ${`calc(${theme.space.default} * -2.75)`};
  }
  .title {
    font-size: 2.5em;
    padding: ${`calc(${theme.space.default} * 1.2)`} ${theme.space.l} 0;
  }
  .meta {
  
      padding: 0 ${theme.space.l} 0;
  }
  p {
    padding: 0 ${theme.space.l} 0;
  }
  li {
    &:hover {
      border: 1px solid ${theme.line.color};
      box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.03);
      &:after {
        bottom: ${`calc(${theme.space.default} * -2.5)`};
      }
      :global(.gatsby-image-wrapper) {
        transform: scale(1.1);
      }
      .title {
        color: ${theme.blog.h1.hoverColor};
      }
  
    }
  
  }
}
@media (hover: hover) {
  .meta {
    :global(a svg) {
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
    }
    :global(a:hover svg) {
      transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      transform: scale(1.3);
      color: ${theme.color.brand.primary};
    }
  }
}

注意:当然要更改基于 CSS 的变量。或者，使用样式组件。

还请记住，如果您想添加 global styles , 最简单的 native 方法是使用 gatsby-browser.js文件:

import "./src/styles/global.css"

// or:
// require('./src/styles/global.css')

关于css - 部分css添加flex后渲染延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66077614/

文章推荐： mongodb - 仅在 MongoDB 中满足特定条件时分组

文章推荐： amazon-web-services - 从 T2.medium 升级到 T3.medium

文章推荐： r - 对于 R : How to exclude some data files based on file language

OpenGL:如何确定 3D(渲染)点是否被其前面的其他 3D(渲染)图元遮挡？
在我的 OpenGL 程序中，我按顺序执行以下操作: // Drawing filled polyhedrons // Drawing points using GL_POINTS // Displa
ruby-on-rails-3 - 渲染@object 和 locals vs 渲染 :partial
我想传递一个包含原始页面的局部变量，这个变量只包含一个带有值的符号。当我使用此代码时，它运行良好，可以在部分中访问 origin 变量: render :partial => "products",
JavaScript 渲染
为什么这个 HTML/脚本(来自“JavaScript Ninja 的 secret ”)不渲染？ http://jsfiddle.net/BCL54/
Django 渲染 anchor
我想在阅读完 View 后返回到特定的网页位置(跳转到页内 anchor )。换句话说，在 views.py 中，我想做类似的事情: context={'form':my_form} return r
WPF PathGeometry 渲染
我有一个包含单条折线的 PathGeometry，并以固定的间隔向该线添加一个新点(以绘制波形)。使用 Perforator 工具时，我可以看到每次向直线添加一个点时，WPF 都会将整个 PathGe
JavaScript 渲染 block
尝试了解如何消除或最小化网站上不同 JavaScript 库的渲染延迟。例如，如果我想加载来自许多社交网络的“即时”关注按钮，它们似乎会相互阻止渲染，并且您会收到令人不快的弹出窗口。 (func
渲染 3D 表面
我有以 xyz 点格式表示 3D 表面(即地震断层平面)的数据。我想创建这些表面的 3D 表示。我使用 rgl 和 akima 取得了一些成功，但是它无法真正处理可能会自行折叠或在同一 x,y 点具有
java - 渲染/更新线程同步
我正在用 Libgdx 编写一个小游戏。我有一个 Render[OpenGL] 线程，它不断对所有对象调用 render() 和一个更新线程不断对所有对象调用 update(double delta
R:渲染 xtable
我有一个 .Rmd 文件包含: ```{r, echo=FALSE, message=FALSE, results='asis'} library(xtable) print(xtable(group
javascript - HTML5 渲染
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
ios - 渲染 MTIImage
请不要评判我，我只是在学习 Swift。最近我安装了 MetalPetal 框架，并按照说明操作: https://github.com/MetalPetal/MetalPetal#example-
javascript - Canvas 渲染
如果您尝试渲染 Canvas 宽度和高度之外的图像，计算机是否仍会尝试渲染它并使用资源来尝试渲染它？我只是想找出在尝试渲染图像之前检查图像是否在 Canvas 内是否更好。最佳答案我相信它仍然在无
html - 渲染 Safari
我在 safari 中渲染时遇到问题。在 firefox、chrome 和 IE 上。如下图所示: input.searchbox{-webkit-border-radius:10px;-moz-b
通过远程桌面进行 Java 渲染
我正在尝试通过远程桌面在 Windows7 下运行我在 RHEL7 服务器中制作的 java 程序。服务器中的所有java程序都无法通过远程桌面呈现。如果我在服务器位置访问服务器本身，它们看起来没问
PHP - LaTeX 渲染
我正处于一个新项目的设计阶段，该项目将采用数据集并将其加载到文档中，然后围绕模板呈现文档。呈现的文件可以是 CSV 数据集、PDF 营销信函、电子邮件……很多东西。数据不会是数学方程式，我只是在寻找一
reactjs - 渲染 React 嵌套组件
有没有办法在不同的 div 下渲染 React 组件的子组件？ ... ... ... ... ...
Plotly:渲染 3D 网格椭球体时的视觉伪像
使用以下代码: import numpy as np from plotly.offline import iplot, init_notebook_mode import plotly.graph_
Meteor.js onRendered & 渲染
截至最近， meteor 的所有文档都指出 onRendered是一种在模板完成渲染时获取回调的新方法。和 rendered只是为了向后兼容。但是，这似乎对我不起作用。 onRendered永远不会
symfony2 Twig 渲染，抛出异常
所以在我的基本模板中，我有:{% render "EcsCrmBundle:Module:checkClock" %} 然后我创建了 ModuleController.php ... getDoctr
javascript - 阻止 Mathjax 渲染
我正在使用 vue-mathjax 来编译我的 vue 项目中的数学方程。它正在编译第一个括号 () 之间的文本。我想防止编译括号内的字符串。在文档中我发现，对于$符号，如果我们想逃避编译，我们需要使

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 部分css添加flex后渲染延迟