Deno fresh 应用程序中岛屿加载缓慢的问题

Question

申请在这里

我有一个 Deno Fresh 应用程序，它在大多数情况下运行良好，但在未缓存任何内容的浏览器中加载时出现问题，单击“关于”按钮在第一次单击时不起作用，但在第二次单击时起作用你点击中间的另一个。

我的 Android 手机上还存在一个问题，当动画加载时向下滚动到“关于”部分时，它会卡顿。

任何帮助都会很棒，回购在这里，但用于导航和有关的岛屿代码如下所示：

import { Links, Icons } from "@/components/layout/Navigation.tsx";
import { useSignal } from "@preact/signals";
import { useEffect, useRef } from "preact/hooks";

export default function Navigation() {
  const isHidden = useSignal<boolean>(false);
  const prevPosition = useRef(0);

  useEffect(() => {
    const handleScroll = () => {
      const position = globalThis.window.scrollY;
      const threshold = 300;

      if (
        position > threshold &&
        position < prevPosition.current
      ) {
        isHidden.value = false;
      } else if (position > threshold) {
        isHidden.value = true;
      } else {
        isHidden.value = false;
      }

      prevPosition.current = position;
    };

    self.window.addEventListener("scroll", handleScroll);

    return () => {
      self.window.removeEventListener("scroll", handleScroll);
    };
  });

  return (
    <header
      class={`
        grid sticky top-1 z-10 place-items-center w-screen transition-transform duration-300
        ${isHidden.value && "-translate-y-[110%]"}
      `}
    >
      <nav class="flex justify-between items-center px-4 py-2 space-x-4 bg-black rounded-full border-2 max-w-60 border-neutral-800">
        <Links />
        <Icons />
      </nav>
    </header>
  );
}

import { useSignal } from "@preact/signals";
import IconBrandGit from "https://deno.land/x/[email protected]/tsx/brand-git.tsx";
import IconBrandNextjs from "https://deno.land/x/[email protected]/tsx/brand-nextjs.tsx";
import IconBrandPython from "https://deno.land/x/[email protected]/tsx/brand-python.tsx";
import IconBrandReact from "https://deno.land/x/[email protected]/tsx/brand-react.tsx";
import IconBrandTailwind from "https://deno.land/x/[email protected]/tsx/brand-tailwind.tsx";
import IconBrandTypescript from "https://deno.land/x/[email protected]/tsx/brand-typescript.tsx";
import IconTerminal2 from "https://deno.land/x/[email protected]/tsx/terminal-2.tsx";
import { useEffect } from "preact/hooks"; // Import useEffect for side effects

export default function Skills() {
  const active = useSignal<string | null>(null);
  const flashIcons = useSignal<boolean>(false);
  const animationPlayed = useSignal<boolean>(false);

  const skills = [
    { name: "Command Line", icon: IconTerminal2 },
    { name: "Git", icon: IconBrandGit },
    { name: "TypeScript", icon: IconBrandTypescript },
    { name: "React", icon: IconBrandReact },
    { name: "Next.js", icon: IconBrandNextjs },
    { name: "Tailwind", icon: IconBrandTailwind },
    { name: "Python", icon: IconBrandPython },
  ];

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        let delay = 0;
        skills.forEach(({ name }) => {
          setTimeout(() => {
            active.value = name;
          }, delay);
          delay += 140;
        });

        setTimeout(() => {
          active.value = null;
        }, delay += 110);

        setTimeout(() => {
          flashIcons.value = true;
        }, delay += 300);

        setTimeout(() => {
          flashIcons.value = false;
          active.value = skills[0].name;
          animationPlayed.value = true;
        }, delay + 300);

        observer.disconnect();
      }
    });

    observer.observe(document.getElementById("skills"));

    return () => observer.disconnect();
  }, []);

  return (
    <section
      id="skills"
      class={`
        grid place-items-center gap-y-8
        ${flashIcons.value ? "text-blue-600 dark:text-neutral-300" : "text-neutral-600"}
      `}
    >
      <div class="flex items-center justify-center space-x-4">
        {skills.map(({ name, icon: Icon }) => (
          <Icon
            class={`
              cursor-pointer transition-colors duration-300 ease-in-out hover:text-blue-600 dark:hover:text-neutral-300
              ${active.value === name && "text-blue-600 dark:text-neutral-300"}
            `}
            onClick={() => (active.value = name)}
          />
        ))}
      </div>
      <span
        class={`
          font-bold min-h-[28px] text-neutral-100 px-5 rounded-md bg-neutral-900 transition-opacity duration-300 ease-in
          ${animationPlayed.value === true ? "opacity-100" : "opacity-0"}
        `}
      >
        {active}
      </span>
    </section>
  );
}

Answer 1

问题解决了，我有一些分辨率超过 2500 的设计质量图像，需要 5 秒才能加载，并且会干扰 js 的加载。

我使用 safari 的网络选项卡发现了这一点，并看到图像加载速度很慢。