Khắc Phục Lỗi Khi Không Truy Cập Được CDN

Do nhiều ưu điểm của các máy chủ CDN (Content Deliver Network) nên khi cần sử dụng một thư viện nào đó của Frontend (JavaScript hay CSS) chúng ta được khuyên nên sử dụng CDN thay cho việc lưu trữ thư viện trên máy chủ cá nhân.

Tuy nhiên phương pháp này không phải là hoàn hảo. Và một nhược điểm chúng ta có thể thấy được của phương pháp này đó là khi các máy chủ CDN không thể truy cập được.

Một trong những trường hợp dễ thấy nhất ở Việt Nam đó là khi dây cáp Internet trên biển gặp phải sự cố. Và khi đó các máy chủ CDN đặt ở nước ngoài sẽ trả về dữ liệu rất chậm. Tuy nhiên trường hợp này không phải lúc nào cũng xảy ra và chúng ta cũng cần tối ưu hóa tốc độ của trang tận dụng tài nguyên các máy chủ CDN. Nếu như rơi vào trường hợp như thế này thì phải làm thế nào?

Sử Dụng Cả Server Nội Bộ và CDN Server

Cách đơn giản và hiệu quả để có thể khắc phục vấn đề không kết nối được với CDN server đó là sử dụng cả thư viện được lưu trữ trên server nội bộ và thư viện từ CDN server.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/javascript/jquery.1.7.1.min.js"></script>

Tuy nhiên cách này vấp phải vấn đề về tốc độ tải trang vì các trình duyệt sẽ phải tốn nhiều thời gian hơn để tải cả hai thư viện giống nhau cùng một lúc.

Sử Dụng Internal Server Khi Không Kết Nối Được Tới CDN Server

Để xử lý trường hợp trên một cách triệt để hơn chúng ta có thể sử dụng đoạn mã sau:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"></script>')</script>

Đoạn mã trên sẽ kiểm tra sự tồn tại của đối tượng jQuery. Và nếu như đối tượng này không tồn tại trình duyệt sẽ tải về thư viện jQuery trên máy chủ nội bộ.

Với cách trên, trình duyệt sẽ chỉ tải về thư viện jQuery từ máy chủ nội bộ khi nó gặp sự cố kết nối tới máy chủ CDN. Điều này không chỉ đảm bảo được thư viện jQuery luôn được tải về mà còn tận dụng được tài nguyên trên CDN.