加载 CSS 时我的页面上出现了一点延迟

Question

我在加载我的页面时遇到了一些“问题”，在加载 css 之前可能需要一秒钟，所以起初我看到“未设置样式”页面，过了一小秒钟就正常了。

我的主机是 000webhost，但也许这并不重要。

有小费吗？

Answer 1

我建议您阅读 Google Developer Resource Prioritization 中的这篇文章 - 让浏览器帮助您

简而言之

<link rel="preload" as="script" href="script-file.js">

用于预加载 javascript

<link rel="preload" as="style" href="styles-file.css">

用于预加载 CSS

另一个建议是尝试优化您的网站并仅在需要时使用资源。

也与您的托管服务无关。

Answer 2

我的首选解决方案是将 javascript 移动到页面底部并延迟加载 CSS，如下所示：

将内容包装在没有显示的 div 中，并将基本样式内联放在头部。 然后在您的 CSS 文件中有.wrap{display:block;} 。

然后在底部推迟样式表的加载，直到它被加载。

这里发生的是默认隐藏页面内容（使用 .wrap{display:none} . Then when the CSS file is fully loaded, the .wrap{display:block}` 覆盖显示无并显示页面一次全部。

<html>
<head><style>.wrap{display:none;}</style></head>
<body>
        <div class="wrap">
           website content
        </div>





    <noscript id="deferred-styles">
          <link rel="stylesheet" type="text/css" href="style.css" />
        </noscript>
        <script>
          var loadDeferredStyles = function() {
            var addStylesNode = document.getElementById("deferred-styles");
            var replacement = document.createElement("div");
            replacement.innerHTML = addStylesNode.textContent;
            document.body.appendChild(replacement)
            addStylesNode.parentElement.removeChild(addStylesNode);
          };
          var raf = requestAnimationFrame || mozRequestAnimationFrame ||
              webkitRequestAnimationFrame || msRequestAnimationFrame;
          if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
          else window.addEventListener('load', loadDeferredStyles);
        </script>

</body>
</html>

加载 CSS 时我的页面上出现了一点延迟

问题描述

2 个解决方案

解决方案1
0 2020-07-13 19:42:49

解决方案2
0 2020-07-13 19:45:42

加载 CSS 时我的页面上出现了一点延迟

问题描述

2 个解决方案

解决方案1 0 2020-07-13 19:42:49

解决方案2 0 2020-07-13 19:45:42

解决方案1
0 2020-07-13 19:42:49

解决方案2
0 2020-07-13 19:45:42