javascript - JS-更快地加载脚本

大家好，我的头中有这段代码，该代码基本上检查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>

最佳答案

我按组缩短了代码

$("#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);
}

如果未提供任何默认值，此函数还会创建默认值。
我不确定它会更快，但是会更短。

这是完整的提琴：https://jsfiddle.net/wy9uh1r0/2/

另外，如果endAt始终大于startAt，则可以替换

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

与

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