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

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之类的模板引擎，并在显示网站之前检查暗模式。 然后，您可以分配一个 smarty 变量并在网站的 HTML 内构建一个 IF 语句。

例子：

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

所以它会从一开始就加载暗模式。

Answer 2

你需要知道：

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

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

相对于您将使用 javascript 运行的大多数事情，这使得它们的过程相当缓慢 - 您可以观察到这种效果，因为由于是同步的，这些过程需要在 javascript 线程中的其他任何东西可以运行之前完成。

采取的步骤：

1）至少，我会在开始时将onload替换为onDOMContentLoaded 。

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

2a) IndexedDB：在页面之间存储 state 的最佳方法是indexedDB ，但它是相当复杂的 API 并且一点也不容易理解。

2b） Cookies：老派，但他们工作。 不过，在这种情况下可能有点矫枉过正。

2c） URL 查询字符串：一个客户端选项（比indexedDB更快更容易，并且没有不必要的额外的 cookie 来回机制）可能是使用查询字符串，例如： https://example.com/this-is/my-webpage/?mode=dark

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

未来

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

Google 提出了一个解决方案（ Keyword-Value Storage或KV Storage ），目前处于实验阶段，2020 年或 2021 年之前不会在浏览器中正确建立（作为内置模块，不少于）：

延伸阅读：

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

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

问题描述

2 个解决方案

解决方案1
1 2019-11-21 22:28:08

解决方案2
-1 2019-11-02 10:32:29

采取的步骤：

未来

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

问题描述

2 个解决方案

解决方案1 1 2019-11-21 22:28:08

解决方案2 -1 2019-11-02 10:32:29

采取的步骤：

未来

解决方案1
1 2019-11-21 22:28:08

解决方案2
-1 2019-11-02 10:32:29