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

标签 css reactjs jsx gatsby styled-jsx

我正在开发一个博客，我最近添加了一个 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/

上一篇：javascript - react 路由器 Dom : Warning: Received `true` for a non-boolean attribute `exact`

下一篇：mongodb - 仅在 MongoDB 中满足特定条件时分组

相关文章：

javascript - 如何在Rails路由器之上使用React Router(不使用react-rails gem)？

reactjs - 作为函数或 const 的无状态组件

javascript - 使用纯 JavaScript 触发添加

Javascript - 淡入淡出图像？

css - Google Chrome 开发者工具不显示检查的元素样式？

jquery - css jquery隐藏一个div，显示另一个

reactjs - React 组件构造函数中的 ipcRenderer

javascript - REACT JSX - 链式条件

javascript - 在 React 中获取子组件的偏移量/高度

css - 在另一个下面制作 float 框

©2024 IT工具网  联系我们