Làm cách nào để tạo JavaScript lười tải trong WordPress để tăng tốc độ hiển thị trang?

WordPressViệc tải JavaScript một cách lười biếng để tăng tốc các phương pháp kết xuất trang.

Thuộc tính Defer của JavaScript là gì?

Chắc hẳn ai cũng đã từng gặp phải trường hợp này:

Có N tập lệnh trong đầu và khi các tập lệnh được tải, việc hiển thị trang sẽ bị chặn, trang thường để trống.

Tất nhiên, chúng ta có thể giải quyết vấn đề này bằng cách đặt script trong mã nguồn vào footer.

Tuy nhiên, một số môi trường phát triển phức tạp có thể làm cho nhiệm vụ đơn giản này trở nên đặc biệt phức tạp.

Tại thời điểm này, chúng ta có thể sử dụng thuộc tính Defer, đây là một thuộc tính tương đối hiếm trong JavaScript.

Có thể bạn sẽ không bao giờ sử dụng nó, nhưng sau khi đọc phần giới thiệu này, tôi chắc chắn rằng bạn sẽ không bỏ nó.

Chức năng chính của nó là cho phép phân tích cú pháp tập lệnh sau khi toàn bộ trang được tải, thay vì phân tích cú pháp khi tải, điều này cung cấp tốc độ tải trang đầy đủ cho các tập lệnh chỉ chứa JavaScript do sự kiện kích hoạt.

Có, nếu thẻ script có thuộc tính defer, nó sẽ được thực thi sau khi phân tích cú pháp trang HTML ngay cả khi nó được đặt ở phần đầu, tương tự như việc đặt script ở cuối trang.

Tất nhiên, việc sử dụng độ trễ cũng có giới hạn, thông thường cần chú ý 2 điểm:

1) Không gọi lệnh document.write trong khối tập lệnh loại hoãn lại;

• Bởi vì document.write sẽ tạo ra hiệu ứng đầu ra trực tiếp.

2) Không sử dụng các biến hoặc hàm toàn cục trong tập lệnh Trì hoãn, bao gồm bất kỳ tập lệnh thực thi tức thời nào.

Thêm thuộc tính Defer vào tập lệnh được sử dụng trong WordPress

Trong WordPress, làm cách nào chúng ta có thể tự động thêm thuộc tính Defer vào các tập lệnh được WordPress sử dụng?

Chúng ta có thể thêm đoạn mã sau vào tệp functions.php của chủ đề hiện tại ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• Đoạn mã trên chỉ hoạt động, theoMã JavaScript do WordPress giới thiệusẽ có hiệu quả.

注意 事项

Quản lý Xem trước Trực tiếp có thể hiển thị trống:

Nếu bạn sử dụng mã trên, khi bạn mở quản lý xem trước thời gian thực (Giao diện → Tùy chỉnh), nó có thể hiển thị trống, vì vậy hãy sử dụng nó khi thích hợp.

Khi yêu cầu quản lý bản xem trước theo thời gian thực, hãy nhận xét đoạn mã trên và xóa mã đã nhận xét sau khi hoàn tất tùy chỉnh.

Ví dụ về mã nhận xét PHP:

/*

这里是代码 

*/