在同一網頁上加載多個數據集的最佳實踐

Question

我正在嘗試開發一個 web 頁面，該頁面根據用戶操作查詢 MySQL 數據庫，但我正在努力找出最佳實踐方法是什么。

例如，如果用戶將鼠標懸停在選項 A 上，則顯示數據庫中與 A 相關的數據。 如果用戶將鼠標懸停在選項 B 上，則顯示數據庫中與 B 相關的數據。 這意味着我只需要在任何時間點顯示一組數據。

我看到它的方式有以下選擇，但我很想聽聽是否有更好的方法。

選項1

最初查詢整個數據庫，無論需要多少元素都加載，將它們全部隱藏，僅在 hover 上顯示相關元素。 從快速搜索其他網站來看，這似乎不是一種常見的方法，所以我猜這不是最佳實踐。

選項 2

編輯：這個選項可能是個壞主意，我不希望新數據通過。 數據應基於頁面加載時間。

使用 AJAX 查詢 hover 上的數據庫，並使用結果填充特定元素。 老實說，這似乎不切實際，並且增加了一些數據庫連接失敗的風險。 但是，這確實意味着我不必一次加載所有數據並填充一堆隱藏元素。

選項 3

查詢整個數據庫，但只在需要時加載元素——這甚至可能嗎？

（注意：我使用的是 PHP 和 Javascript 的組合）

Answer 1

第一個選項實際上取決於要查詢的數據量。 如果你知道你只有很少量的元素，那么它是可行的，但否則它真的是低效和不切實際的。

第二個選項解決了我剛剛討論的關於第一個選項的問題，但將涉及使用 ajax。

即使在需要時加載元素，第三個仍然查詢整個數據庫。

所以，我想，最好是 go 與第二個選項。 有一點數據庫連接失敗的風險來代替查詢整個數據庫並加載所有元素是公平的。

Answer 2

HTML5 通過title屬性原生支持您想要的內容。

<div title="17 left in stock! Order now!">7-port USB-C hub</div>

當您的用戶將鼠標懸停在項目上時，這將顯示“標題”文本。 因此，在您的 HTML 中包含title屬性數據，您就完成了。

AJAX 操作（或現代 HTML 中更易於使用的 fetch() ）非常適合將新信息動態加載到您的頁面中。 但是您的要求似乎並不需要。 您希望信息與頁面一起加載。

如果您不喜歡title彈出窗口的默認樣式，您可以更改它。 查找“樣式化 HTML 工具提示”，您會看到很多教程。

（請記住，觸摸屏移動設備無法執行 hover 操作）。

Answer 3

為什么不使用選項 2 的 go 並在初始頁面加載時，將時間戳保存在一些 html 標記中，例如
<div data-page-loaded-at="{{ timestamp/formatted date }}" style="display: none;" /> <div data-page-loaded-at="{{ timestamp/formatted date }}" style="display: none;" /> ?
然后，您可以將時間戳添加到您的 AJAX 請求並根據提供的時間獲取數據。 如果您不希望前端的用戶能夠通過更改時間戳來操作獲取的數據，這當然不是一個好習慣。