0

我试图通过在折叠代码上方包含内联 css 来加快页面加载速度。这适用于根目录中的页面，但我在加载子文件夹中页面末尾的其余 CSS 文件时遇到问题（即http://example.com/other/index.html） .

如果当前文件位于根文件夹中，则以下代码可以正常工作：

   <script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>

但如果当前文件位于子文件夹中，则以下代码不起作用：

 <script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = '../css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>

另外，如果我尝试绝对路径，它也不起作用：

   <script>var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'http://example.com/css/a1tg2.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);</script>

文件的相对位置是正确的，因为如果我在文档的头部有以下行：

<link href="../css/a1tg2.css" rel="stylesheet" type="text/css">

它也可以正常工作，但我不想使用它，因为它会减慢页面的渲染速度。我不精通 JavaScript，只是从在线关键路径 CSS 生成器中获取所需的代码。任何人都可以提供一个解决方案，因为这个网站上的类似问题都没有一个令人满意的答案。

4

1 回答 1

0

检查生成的 html 文件的链接并使用相对于该页面的路径。例如：如果您的目录结构是：

 - css
    - a1tg2.css
- pages
   - header.php
   - footer.php
- index.php

如果您在 index.php 中包含 header.php，则 header.php 中 css 文件的相对路径应该是 css/a1tg2.css 而不是 ../css/a1tg2.css

于 2018-04-04T15:29:00.417 回答