Video học lập trình mỗi ngày

Google Analytics, Facebook Login cùng với việc sử dụng 3rd-party thì mang lại nhiều tiện ích thế nhưng có một nhược điểm lớn đó là khiến tải trang chậm hơn so với trước đây. Đương nhiên có nhiều cách khắc phục làm cho hiệu suất tải trang nhanh hơn. Và ở đây, tôi sẽ giới thiệu một trong những cách mà rất nhiều trang đã sử dụng. 

Bài viết thuộc series - Mẹo javascript. 

Đó là cách tải file script không đồng bộ. Nhắc tới lập trình không đồng bộ, thì chúng ta đã học rất nhiều và hiểu được vì sao lại lập trình bất đồng bộ rồi. Ở đây không cần nhắc nữa. Và để thực hiện thì chúng ta sẽ thật sự nhắc tới Promise để tải một URL javascript. Khi thành công thì tải, không thì thôi. Hãy xem!

Loading a script asynchronously using JavaScript

Những ai mà đã học về Promise javascript thì nhìn vào không khó để hiểu, còn ngược lại thì nên tìm hiểu về Promise là gì đi nhé.

const loadScript = (src, async = true, type = "text/javascript") => {
    return new Promise((resolve, reject) => {
        try {
            const el = document.createElement("script");
            const container = document.head || document.body;

            el.type = type;
            el.async = async;
            el.src = src;

            el.addEventListener("load", () => {
                resolve({ status: true });
            });

            el.addEventListener("error", () => {
                reject({
                    status: false,
                    message: `Failed to load the script ${src}`
                });
            });

            container.appendChild(el);
        } catch (err) {
            reject(err);
        }
    });
};

Sau khi viết xong thì ta bắt đầu thử chạy xem với Facebook javascript SDK:

loadScript("https://connect.facebook.net/en_US/sdk.js")
    .then((data) => {
        console.log("Facebook script loaded successfully", data);
    })
    .catch((err) => {
        console.error(err);
    });

OK, nó là vậy. Bạn có thể không những sử dụng Promise để giải quyết bài toán này, mà có thể là tải image cách mà chúng tôi triển khải lazy load image trước đây. Và đây cũng là môt bài viết thuộc series - Mẹo javascript.