javascript - Firebase/JS - 在加载页面之前触发 JavaScript？

Question

我目前正在制作一个 JavaScript 脚本，用于从实时数据库中获取用户数据

/* Fetch User Data from Firebase */

function userInfo() {
    var username;
    var usertype;
    var barangay;

    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        var userId = firebase.auth().currentUser.uid;
        return firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
        username = (snapshot.val() && snapshot.val().name) || 'Unknown';
        barangay = (snapshot.val() && snapshot.val().barangay) || 'Unknown';

        document.getElementById('fullname').innerHTML = username; //Sets the username in the Webpage. 
        });
      } else {
        window.location.replace("../index.html"); //redirect
      }
    });
  }
  window.onload = userInfo();

window.onload = userInfo();是我当前用来使脚本在页面加载时触发的代码，但这会导致更新innerHTML 中的数据的延迟。 (例如: <p id='fullname'> 的内容是“USERNAME”，并将使用从脚本中获取的“用户名”进行更新。)。我尝试过将JS文件放在页面顶部，结果相同。

我的问题是，有没有办法让这个脚本在页面加载之前首先触发？或者有更有效的方法来处理这个脚本吗？

Answer 1

理论上，如果将脚本放在 head 标签中，请求将在 DOM 加载之前(异步)触发。但是，您不知道请求需要多长时间才能完成。甚至可能会失败。

我的建议是向客户端提供某种信息正在加载的反馈(即显示进度指示器)。关于如何实现这一点的文章有无数篇。

请记住，在检索信息之前您不必显示任何内容。这完全取决于你。