JS - load script more faster in head

Question

Hi everyone I have this code in the head which basically checks two parameters inside a localStorage and then takes off an alternate stylesheet, but I noticed that it is a bit slow and the second style is loaded after a few seconds after loading page, I would like it to be loaded before the page content appears. Can you help me simplify the code and make it faster for what I need. Thanks so much

    <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

I've made the code shorter by group

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

Into a function like

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

Then group all the code with endAt, startAt into function 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);
}

This function also create default value if nothing supplied to it. I'm not sure that it is faster, but it shorter.

This is the full fiddle: https://jsfiddle.net/wy9uh1r0/2/

Also if endAt always bigger than startAt, you can replace

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

with

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