Nếu không muốn tải trực tiếp bằng cách đặt các tệp liên css trong thẻ link và tệp js trong thẻ script trực tiếp trong DOM, chúng ta có thể tạo các hàm function để tải gián tiếp các tệp này và từ hàm function chúng ta tiếp tục tạo các sự kiện để load tệp khi cần.
 |
| Tạo sẵn các hàm function load tệp css và js |
Các tệp link css hầu như bắt buộc phải đặt trong cặp thẻ <head></head>, tương tự một số tệp js cũng yêu cầu như vậy nhưng đa số các tệp js vẫn thường đặt trước thẻ đóng </body>. Nếu như bạn đặt các tệp css và js trong DOM, có nghĩa bạn đang yêu cầu trình duyệt phải tải các tệp này cùng với các tệp khác dẫn đến kích thước DOM tăng lên và thêm độ trễ thời gian để trình duyệt phân tích để tải các tệp có nguồn bên ngoài.
Tham khảo thêm: Tạo sự kiện trì hoãn get script tăng hiệu suất tải trang
Thay vào đó bạn có thể giảm tải cho DOM bằng cách load gián tiếp tệp css, js chứ không load trực tiếp vì làm theo phương pháp này kích thước DOM không tăng lên và hiệu suất trang không bị ảnh hưởng.
Một số tệp js bắt buộc phải được tải trực tiếp cùng DOM như tệp jquery, lazyload, lúc này bạn cần gắn thuộc tính asyns để tải tệp không đồng bộ hoặc và defer trì hoãn tệp tải ngay.
Đọc nhiều: Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js
Phương pháp tạo các hàm function để load tệp css và js từ nguồn bên ngoài tức là sẽ tạo ra các thẻ link css hoặc thẻ script sau đó append chúng trước thẻ </head> hoặc trước thẻ </body>, Hàm function sẽ được viết như sau:
<script>//<![CDATA[
// Tạo và append tệp css, js trước thẻ </head>
function appendChildHead(name, type) {
if (type == 'css') {
var fileref = document.createElement('link')
fileref.setAttribute('rel', 'stylesheet')
fileref.setAttribute('href', name)
} else if (type == 'js') {
var fileref = document.createElement('script')
fileref.setAttribute('type', 'text/javascript')
fileref.setAttribute('async', '')
fileref.setAttribute('src', name)
}
if (typeof fileref != 'undefined') document.getElementsByTagName('head')[0].appendChild(fileref)
}
// Tạo và append tệp js trước thẻ </body>
function appendChildBody(name, type) {
if (type == 'js')
var src = document.createElement('script')
fileref.setAttribute('type', 'text/javascript')
src.setAttribute('async', '');
src.setAttribute('src', name)
if (typeof src != 'undefined') document.getElementsByTagName('body')[0].appendChild(src)
}
//]]></script>
Đặt code này trước thẻ đóng </body>, tiếp theo tạo các sự kiện để load tệp css, js khi cần đến.
<script>//<![CDATA[
// Load tệp sau khi DOM được phân tích xong
window.addEventListener('load',function(){
// append tệp css, js trước thẻ </head>
appendChildHead('link.css','css')
appendChildHead('link.js','js')
// append tệp css, js trước thẻ </body>
appendChildBody('link.js','js')
})
// Trì hoãn load tệp bằng cách thêm sự kiện bằng hàm function
var flag=0
function load_temp(){
if(flag==0){
flag=1
appendChildHead('link.css','css')
appendChildHead('link.js','js')
appendChildBody('link.js','js')
}
}
window.addEventListener('scroll',function(){load_temp()})
window.addEventListener('mousemove',function(){load_temp()})
setTimeout(function(){load_temp()},3000)
// Load tệp khi chỉ click một lần
const el=document.querySelector('.element')
el.addEventListener('click',function(){
appendChildHead('link.css','css')
appendChildHead('link.js','js')
appendChildBody('link.js','js')
},{once:true})
//]]></script>
Tham khảo thêm: Làm thế nào để tối ưu trang tải nhanh khi tải URL nguồn cấp?
Một ví dụ khác khi load tệp analytics
<b:if cond='data:blog.analyticsAccountNumber'>
<script>
var analytics_ID = "<data:blog.analyticsAccountNumber/>"
//<![CDATA[
window.addEventListener('load',function(){
var load_analytic=0
function _analytics(){
if(load_analytic==0){
load_analytic=1
appendChildHead('https://www.googletagmanager.com/gtag/js?id='+analytics_ID,'js')
window.dataLayer=window.dataLayer||[]
function gtag(){dataLayer.push(arguments)}
gtag('js', new Date())
gtag('config',analytics_ID)
}
}
window.addEventListener('scroll',function(){_analytics()})
window.addEventListener('mousemove',function(){_analytics()})
setTimeout(function(){_analytics()},3000)
})
//]]></script>
</b:if>
Đề xuất cho bạn: Hai phương pháp hay giúp tối ưu pagespeed cho trang bài viết blogspot
