Tập lệnh tải lười biếng

---

Các tập lệnh cần thiết cho chức năng tìm kiếm của trang web này chỉ được tải khi thanh tìm kiếm được tập trung. Bằng cách này, chúng chỉ được tải cho những người quyết định sử dụng chức năng tìm kiếm và băng thông cũng như trọng lượng trang có thể được giảm đáng kể. Rốt cuộc, chỉ một phần nhỏ khách truy cập sẽ sử dụng tìm kiếm, vậy tại sao phải trả chi phí mỗi lần?

Để thực hiện kỹ thuật tải lười đơn giản này, trước tiên hãy xác định một hàm mà ta sẽ gọi là loadScript :

function loadScript(url) {
  let isLoaded = document.querySelectorAll('.search-script');
  if(isLoaded.length > 0) {
    return;
  }

  let myScript = document.createElement("script");
  myScript.src = url;
  myScript.className = 'search-script';
  document.body.appendChild(myScript);
}

Trước tiên, hàm sẽ kiểm tra xem script đã được tải chưa, trong trường hợp đó, nó sẽ chỉ trả về thay vì cố gắng tải nhiều lần. Sau đó, ta tạo một phần tử script với document.createElement , cung cấp cho nó url truyền vào làm giá trị cho thuộc tính src của nó, đặt cho nó tên lớp để kiểm tra của ta hoạt động, rồi nối phần tử script mới này vào phần tử body.

---

Bước cuối cùng chỉ cần cài đặt trình xử lý sự kiện trên đầu vào tìm kiếm và gọi hàm loadScript của ta với url tới tập lệnh của ta :

var searchInput = document.querySelector('.algolia__input');
searchInput.addEventListener('focus', function(e) {
  loadScript('/path/to/search-script.js');
});

Rõ ràng điều này nghĩa là về lý thuyết có một khoảng thời gian ngắn giữa việc lấy nét trong hộp tìm kiếm và tập lệnh có sẵn để sử dụng. Trong hầu hết các trường hợp, đó không phải là vấn đề và trong trường hợp này, tìm kiếm thời gian thực sẽ bắt đầu ngay sau khi tập lệnh được tải đầy đủ.

---

---

Các tin liên quan