采取的步骤：

Question

我想加快暗模式在我的网站上生效的速度。当前加载页面时，页面加载和暗模式生效之间会有延迟。这是我的jQuery.js代码

onload = function () {
  if (localStorage.getItem("darkMode") === "true") {
    var mode = localStorage.getItem("darkMode");
    enableDarkMode();
  }
}

function enableDarkMode() {
  $("body").addClass("dark");
  $("nav").removeClass("navbar navbar-expand-md navbar-light");
  $("nav").addClass("navbar navbar-expand-md navbar-dark");
  $('.inner-switch').text("ON");
  var mode = localStorage.setItem("darkMode", "true");
}

function disableDarkMode() {
  $("body").removeClass("dark");
  $("nav").removeClass("navbar navbar-expand-md navbar-dark");
  $("nav").addClass("navbar navbar-expand-md navbar-light");
  $('.inner-switch').text("OFF");
  var mode = localStorage.setItem("darkMode", "false");
}

$('.inner-switch').on("click", function () {
  if ($("body").hasClass("dark")) {
    disableDarkMode();
  } else {
    enableDarkMode();
  }
});

Answer 1

您可以使用Smarty之类的模板引擎，并在显示网站之前检查暗模式。然后，您可以分配一个聪明的变量并在网站的HTML内构建IF语句。

示例：

<body {if darkMode} dark {/if}>

因此它将从一开始就启用了暗模式。

Answer 2

您需要知道：

localStorage.getItem();
localStorage.setItem();

都是读取和写入设备硬盘驱动器的同步过程。

相对于您将要使用javascript进行的大多数操作而言，这会使它们的处理过程变得非常慢-并且您会观察到这种效果，因为这些过程是同步的，需要先完成，然后才能运行javascript线程中的其他任何内容。

采取的步骤：

1）至少，我一开始将onload替换为onDOMContentLoaded。

2）另外，我还将考虑使用另一种（更快的）方法在不是webStorage的页面之间持久存储数据：

2a） IndexedDB：在页面之间存储状态的最佳方法是indexedDB ，但是这是一个复杂的API，一点也不容易

2b） Cookies：老派，但他们行得通。不过，在这种情况下可能会造成过度杀伤力。

2c） URL查询字符串：一个客户端选项（比indexedDB更快捷，更简单，而且没有不必要的cookie来回机制）。查询字符串，例如：https://example.com/this-is/my-webpage/?mode=dark

在这种情况下，我可能会使用上面的第三个选项 URL查询字符串代替webStorage。

未来

几年来，Web开发人员社区一直在呼吁一种在页面之间持久存储数据的解决方案，该解决方案具有IndexedDB的所有技术优势，但实现起来却与localStorage一样简单。

Google提出了一个解决方案（关键字-值存储或KV Storage），该解决方案目前处于实验阶段，无法在浏览器中正确建立（作为 -em ，不少于2020年或2021年之前：

进一步阅读：

https://css-tricks.com/kv-storage/

如何加快网站上的黑暗模式延迟？

2 个答案:

采取的步骤：

未来