javascript - 防止从 firebase 获取数据的延迟时间(请检查详细信息以确保清晰)

Question

注意:

1. Firebase 的异步特性已在此处讨论了数千次，但我的声誉较低，不允许对现有问题发表评论。这就是我问这个问题的原因。
2. 我是一个菜鸟，所以请帮助我以易于理解的方式理解实现。

实现步骤:

1. 用户在 HTML 输入框中输入值
2. 在 Firebase 数据库中搜索输入值(调用 showMessage())
3. 根据第 2 步中的搜索结果显示适当的结果

面临的问题:步骤 3 中显示的消息平均需要几乎 1.75 秒的时间来显示。这种体验并不人性化。我想尽快显示消息，即希望减少获取时间。

可能的根本原因:

1. 我从 firebase dB 获取数据的方式不正确(我仍然不明白如何信守 promise :()
2. 或者搜索和显示机制不对

var full_name; 

function showMessage(){
      extractData();
    }

function extractData(){	
	test(function(returnValue) {
  		custom_message = searchMessage(returnValue);
		var container = document.querySelector('#placeholder');
		var para = document.createElement('p');
		var custom_message = "Happy happy, buds!";
		para.innerHTML = custom_message;
		para.className = "message";
		container.appendChild(para);
	});
}

function test(callback) { 
	var ref = firebase.database().ref();
    ref.on('value', function(snapshot) {
    var data = snapshot.val();
    callback(data); 
  }, function (error) {
	   console.log("Error: " + error.code);
	});
}

function searchMessage(data){
    for(var i = 0; i < data.length; i++)
    {
    	name_f_data = data[i].firstName.concat(" ", data[i].lastName);

		if(full_name.toLowerCase() == name_f_data.toLowerCase())
		{
			console.log(name_f_data.toLowerCase());
    		console.log(full_name.toLowerCase());
			return data[i].message;
		}
    }
}

Answer 1

读取操作所需的时间取决于:

1. 与 Firebase 服务器的连接延迟
2. 您正在读取的数据量
3. 您的连接带宽
4. Firebase 处理请求所需的时间

在大多数情况下，Firebase 花费的时间只占总时间的很小一部分，大部分时间实际上都花在了数据传输上，这完全取决于带宽和数据量。如果这是您第一次在页面中从 Firebase 读取数据，则延迟也更重要，因为 Firebase 必须建立连接，这需要几次往返。

您当前的代码正在从数据库下载所有数据，然后在 JavaScript 代码中搜索与特定值匹配的子节点。减少所需时间的最佳方法(除了升级到快速连接之外)是传输更少的数据，您可以通过使用 Firebase 的查询机制在服务器上进行过滤来实现这一点。

您可以非常接近:

var ref = firebase.database().ref();
var query = ref.orderByChild().startAt(firstName).endAt(firstName+"~");
query.once('value', function(snapshot) {
  var data = snapshot.val();
  callback(data);

这将显着减少传输的数据量。但有一些注意事项:

1. 查询仅返回与您要查找的名字相同的人员。它尚未过滤姓氏，因此您仍然需要在客户端代码中过滤该姓氏。
2. 为了进一步优化此功能，请将全名(您现在在客户端代码中编写)存储在数据库中，以便您可以对其进行查询并进一步减少数据传输。
3. Firebase 查询区分大小写，因此查询仅返回大小写完全匹配的数据。如果您想查询不区分大小写的数据，请考虑在数据库中存储一个 toLowerCase() 值。
4. 请务必在 firstName 上定义索引，否则 Firebase 数据库仍会将所有数据发送到客户端，并且 SDK 将在客户端执行过滤。