javascript - JS - 在 head 中更快地加载脚本

Question

大家好，我的头部有这段代码，它基本上检查 localStorage 内的两个参数，然后取出备用样式表，但我注意到它有点慢，并且在加载页面后几秒钟后加载第二个样式，我希望它在页面内容出现之前加载。你能帮我简化代码并使其更快地满足我的需要吗？非常感谢

    <link href="/css/default.css" rel="stylesheet">
    <link href="/css/day.css" rel="stylesheet alternate" id="day">
    <link href="/css/night.css" rel="stylesheet alternate" id="night">

    <script src="js/sun.js"></script>
    <script src="/js/jquery.min.js"></script>

    <script>
        var Mode;

        var localStorageMode = localStorage.getItem('style-mode');
        if (localStorageMode){
            Mode = localStorageMode;

            if(Mode == 'night'){
                $("#day").attr('rel', 'stylesheet alternate');
                $("#night").attr('rel', 'stylesheet');
            }else{
                $("#day").attr('rel', 'stylesheet');
                $("#night").attr('rel', 'stylesheet alternate');
            }

        }else{
            var startEnd = localStorage.getItem('style-mode-start-end');
            if (startEnd){
                startEnd = JSON.parse(startEnd);
                var startAt = normalizeTime(startEnd[0].start),
                    endAt = normalizeTime(startEnd[0].end),
                    now = new Date().getTime();

                if((endAt < now && now > startAt) || (startAt > now && now < endAt)){
                    $("#day").attr('rel', 'stylesheet alternate');
                    $("#night").attr('rel', 'stylesheet');
                }else{
                    $("#day").attr('rel', 'stylesheet');
                    $("#night").attr('rel', 'stylesheet alternate');
                }

            }else{
                var addressCity = '<?php echo $_SESSION["userCity"]; ?>';
                var addressNation = '<?php echo $_SESSION["userNation"]; ?>';
                var addressNationISO = '<?php echo $_SESSION["userNationISO"]; ?>';
                var address = addressCity+" "+addressNation+" "+addressNationISO;

                if(address != ""){
                    $.get('https://nominatim.openstreetmap.org/search?format=json&q='+address, function(data){
                        if(data.length > 0){
                            var dataLat = data[0].lat,
                                dataLon = data[0].lon;
                            var sunset = new Date().sunset(dataLat, dataLon);
                            var sunrise = new Date().sunrise(dataLat, dataLon);

                            var sunsetHoursMinutes = sunset.getHours().toString().padStart(2, "0")+":"+sunset.getMinutes().toString().padStart(2, "0");
                            var sunriseHoursMinutes = sunrise.getHours().toString().padStart(2, "0")+":"+sunrise.getMinutes().toString().padStart(2, "0");

                            var arrayStartEnd = [{start: sunsetHoursMinutes, end: sunriseHoursMinutes}];

                            setPZLNModeStartEnd(arrayStartEnd);

                            var startAt = sunsetHoursMinutes,
                                endAt = sunriseHoursMinutes,
                                now = new Date().getTime();

                            if((endAt < now && now > startAt) || (startAt > now && now < endAt)){
                                $("#day").attr('rel', 'stylesheet alternate');
                                $("#night").attr('rel', 'stylesheet');
                            }else{
                                $("#day").attr('rel', 'stylesheet');
                                $("#night").attr('rel', 'stylesheet alternate');
                            }

                        }else{
                            var startAt = normalizeTime("18:00"),
                                endAt = normalizeTime("06:00"),
                                now = new Date().getTime();

                            if((endAt < now && now > startAt) || (startAt > now && now < endAt)){
                                $("#day").attr('rel', 'stylesheet alternate');
                                $("#night").attr('rel', 'stylesheet');
                            }else{
                                $("#day").attr('rel', 'stylesheet');
                                $("#night").attr('rel', 'stylesheet alternate');
                            }
                        }

                    });
                }else{
                    var startAt = normalizeTime("18:00"),
                        endAt = normalizeTime("06:00"),
                        now = new Date().getTime();

                    if((endAt < now && now > startAt) || (startAt > now && now < endAt)){
                        $("#day").attr('rel', 'stylesheet alternate');
                        $("#night").attr('rel', 'stylesheet');
                    }else{
                        $("#day").attr('rel', 'stylesheet');
                        $("#night").attr('rel', 'stylesheet alternate');
                    }
                }
            }
        }
    </script>

Answer 1

我按组缩短了代码

$("#day").attr('rel', 'stylesheet alternate');
$("#night").attr('rel', 'stylesheet');

进入类似的函数

function toggleDayNight(value) {
  value = !!value; // Parse boolean
  $("#day").attr('rel', 'stylesheet' + (value ? ' alternate' : ''));
  $("#night").attr('rel', 'stylesheet' + (value ? '' : ' alternate'));
}

然后将所有带有endAt、startAt的代码分组到函数checkPeriod中

function checkPeriod(startAt, endAt, usingNormalize = true) {
  if (typeof startAt == 'undefined') {
    // Create default value
    startAt = normalizeTime("18:00");
    endAt = normalizeTime("06:00");
  } else if (usingNormalize) {
    startAt = normalizeTime(startAt);
    endAt = normalizeTime(endAt);
  }
  var now = new Date().getTime();
  return (endAt < now && now > startAt) || (startAt > now && now < endAt);
}

如果没有提供任何内容，该函数也会创建默认值。我不确定它是否更快，但它更短。

这是完整的 fiddle :https://jsfiddle.net/wy9uh1r0/2/

另外如果endAt总是大于startAt ，你可以替换

(endAt < now && now > startAt) || (startAt > now && now < endAt)

与

!(startAt <= now && no <= endAt)