Javascript 如何在网站上加速暗模式延迟？_Javascript_Jquery_Html_Css

Javascript 如何在网站上加速暗模式延迟？

javascript jquery html css

Javascript 如何在网站上加速暗模式延迟？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想加快黑暗模式在我的网站上生效。当前加载页面时，页面加载和暗模式生效之间存在延迟。这是我的jQuery.js代码 onload = function () { if (localStorage.getItem("darkMode") === "true") { var mode = localStorage.getItem("darkMode"); enableDarkMode(); } } function enableDarkMode() { $("body"

我想加快黑暗模式在我的网站上生效。当前加载页面时，页面加载和暗模式生效之间存在延迟。这是我的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();
  }
});

你需要知道：

```
localStorage.getItem（）
```


localStorage.setItem（）


这两个进程都是同步的，从设备的硬盘驱动器读写
这使得它们的进程相对于您将使用javascript运行的大多数事情来说都非常慢——您可以观察到这种效果，因为作为同步进程，这些进程需要在javascript线程中的任何其他进程运行之前完成

采取的步骤：
1） 至少，我会在开始时将onload
替换为ondomcontentload

< P> 2）此外，我还将考虑使用另一种（更快）的方法来保持页面之间的数据不是“代码> WebSturt< /C> >：
2a）IndexedDB:在页面之间存储状态的最佳方法是IndexedDB
，但它是一个非常复杂的API，不容易理解
2b）饼干：老派，但很管用。不过，在这种情况下，可能是杀伤力过大了
2c）URL查询字符串：一个客户端选项（比indexedDB
更快更简单，并且没有不必要的cookie来回机制）可能是使用如下查询字符串：https://example.com/this-is/my-webpage/?mode=dark

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


未来
几年来，web开发人员社区一直在寻求一种在页面之间持久化数据的解决方案，该解决方案具有IndexedDB
的所有技术优势，但实现起来与localStorage
一样简单
谷歌已经提出了一个解决方案（关键字值存储或KV存储
），该解决方案目前处于实验阶段，在2020年或2021年之前不会在浏览器中正确建立（作为内置模块，至少如此）：
进一步阅读：


您可以使用类似的模板引擎，在显示网站之前检查暗模式。然后，您可以分配一个smarty变量，并在网站的HTML中构建一个IF语句
例如：
<body {if darkMode} dark {/if}>



因此，它从一开始就被激活的黑暗模式加载。
我感觉删除类导航栏并再次添加它会触发很多你看不到的代码。你是否使用事件触发代码？像$.ready（）
或DOMContentLoaded
？如果您使用的是window.onload
（我怀疑您是这样的，因为您正在将函数分配给全局onload变量），那么脚本将仅在每个DOM对象加载后运行。将.addClass/.removeClass
替换为attr（“类”，“新类值]”）如何IndexedDB
是异步的，不会减慢其他进程（DOM操作等），不像（同步的）localStorage
，后者会。这不对吗？也许我一直误以为本地存储速度慢、笨重、同步且阻塞。我刚刚读到（2015年）这篇文章，试图纠正记录：那么，2012年的业绩担忧（见：）是否被夸大了？如果是这样的话（我很高兴得到纠正），为什么谷歌要引入KV存储
？那篇文章中描述的性能问题是存储大量大数据，比如图像文件文件夹。对于这些，异步存储是更好的选择，但是对于OP存储简单布尔值的用例，web存储是完美的解决方案。