页面加载前随机重新订购DIV？

发布于 2025-01-28 04:10:05 字数 1082 浏览 5 评论 0原文

我一直在努力提高网站的Google页面速度。

除了最大的内容涂料外，这几乎是一个完美的分数。

我已经解决了这是因为我的页面顶部的轮播隐藏在页面加载上，然后我使用JavaScript随机将幻灯片随机洗牌：

shuffle(selector) {
    let $elements = document.querySelectorAll(selector)
    let array = []
    $elements.forEach(($el) => {
        array.push($el.cloneNode(true))
    })
    $elements.forEach(($el, i) => {
        $el.replaceWith(array[i=Math.floor(Math.random()*array.length)])
        array.splice(i,1)
    })
},

init() {
    const $carousel = document.querySelector('.carousel.shuffle'),
        
    if ($carousel) {
       this.shuffle('.carousel-card')
       $carousel.style.opacity = 1
    }
},

这会导致延迟，因为它必须等到DOM为止然后满载，然后运行我的脚本，因此显示了LCP（第一个幻灯片映像）的时间比其他脚本迟到。

是否有任何方法可以在页面加载之前将Div散装？

我正在使用 vite 和 alpine.js 。

我的页面被缓存，因此我认为无法完成服务器端。

我以为我可以使用这个答案但是我不确定在CSS中是否可以随机随机吗？

原文

I've been working on improving the Google Page Speed of my site.

It's nearly a perfect score except for Largest Contentful Paint.

I've worked out this is because my Carousel at the top of my page is hidden on page load, then I'm using javascript to shuffle the slides randomly before showing it:

shuffle(selector) {
    let $elements = document.querySelectorAll(selector)
    let array = []
    $elements.forEach(($el) => {
        array.push($el.cloneNode(true))
    })
    $elements.forEach(($el, i) => {
        $el.replaceWith(array[i=Math.floor(Math.random()*array.length)])
        array.splice(i,1)
    })
},

init() {
    const $carousel = document.querySelector('.carousel.shuffle'),
        
    if ($carousel) {
       this.shuffle('.carousel-card')
       $carousel.style.opacity = 1
    }
},

This causes a delay because it has to wait until the DOM is fully loaded then run my script and therefore shows the LCP (the first slide image) later than it would otherwise.

Is there any way to shuffle the div's before the page loads?

I'm using Vite and Alpine.js.

My page is cached so I don't think it can be done server-side.

I was thinking I could maybe use CSS like this answer but I'm not sure random is possible in CSS?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

森林很绿却致人迷途 2025-02-04 04:10:05

您可以尝试使用 createocumentFragment api（而不是为每个元素进行更新）

类似：

let elements = document.querySelectorAll(selector)
const frag = document.createDocumentFragment();
const shuffledList = Array.from(elements).sort(() => (Math.random() > .5) ? 1 : -1);
for (let item of shuffledList) {
  frag.appendChild(item);
}
document.querySelector('.carousel.shuffle').appendChild(frag);

you could try to speed up the dom update by using createDocumentFragment api (instead of having an update for each element move)

something like:

let elements = document.querySelectorAll(selector)
const frag = document.createDocumentFragment();
const shuffledList = Array.from(elements).sort(() => (Math.random() > .5) ? 1 : -1);
for (let item of shuffledList) {
  frag.appendChild(item);
}
document.querySelector('.carousel.shuffle').appendChild(frag);

回复收藏 0 原文

~没有更多了~