Chrome中的CSS延迟加载

Question

我在Chrome中延迟加载CSS时遇到了一些奇怪的定位问题,例如,某些元素(绝对,相对和级联)的定位有时会大幅度下降.

基本上我正在做的是通过链接标签省略样式表的标准加载,而是放置一个占位符span-Tag,以便稍后在body-Tag的末尾检索URL. .完全加载DOM后,我用生成的链接替换span-Tag,如下所示:

loadCSS: function()
{
    var el = jQuery('.is_css');
    if(!el.length) return;

    // Build link element
    var linkEl = jQuery('<link />').attr({
        media: 'all',
        type: 'text/css',
        rel: 'stylesheet',
        href: el.data('src')
    });

    el.replaceWith(linkEl);
}

我可以验证CSS是否已完全加载,因为大多数元素看起来都像是将CSS直接嵌入head-Tag中一样.我的猜测是,在加载DOM后加载CSS时,Chrome在某些情况下无法正确计算绝对或相对定位元素的位置.

我想为您提供HTML/CSS片段,遗憾的是,它超出了隔离虚假渲染元素的范围.所以我要问是否有人遇到过可能导致此行为的类似问题.也许有一些关于如何解决这些问题的一般性提示.

亲切的问候

Answer 1

苏图玛，

您正在尝试的方法可能会对性能产生很大的影响。原则上 CSS 需要在 html DOM 渲染之前加载才能生效。我的猜测是你的 html 是在 CSS 加载之前渲染的。您可以尝试以下选项： 1. 加载 html header 标签中的所有 css 2. 重新加载 html 页面，其中 css 内容已下载。3. 您可以使用 html 模板（require js + require css 插件）进行延迟加载。

需要 js、 require-css 插件