Thực đơn
trang chủExcel

Tải javascript không đồng bộ là gì. Hãy tận dụng sự phụ thuộc của các tập lệnh khác vào jQuery. Loại bỏ tập tin bên ngoài

25/12/2012 việc làm 18355

Hãy nói một chút về việc tối ưu hóa tải trang trong Joomla. Đối với ngày hôm nay nó sẽ là Kết nối JavaScript. Trước hết, tôi sẽ thu hút sự chú ý của các nhà thiết kế bố cục về tính chính xác của việc xây dựng mẫu. Sau đó, chúng ta sẽ xem xét khả năng được tích hợp trong công cụ để sử dụng tính năng tải không đồng bộ của các tập lệnh bên ngoài. Tôi sẽ không đi sâu vào lý do tại sao cần tối ưu hóa.

Xây dựng mẫu

Theo quy định, các nhà thiết kế Joomla không chú ý đến thứ tự các kiểu và tập lệnh được tải, và điều này khía cạnh quan trọng tối ưu hóa cho việc song song hóa tải. Các tệp CSS phải luôn được đưa vào trước các tệp JavaScript.

Nếu trong mẫu tải css và javascript của bạn trông như thế này:

Tôi muốn đảm bảo với bạn rằng điều này không đúng! Bởi vì bạn tải các tệp bên ngoài sau khi trang được hiển thị, điều đó có nghĩa là khối đầu đã được hình thành, do đó tải theo kiểu bàn cờ sẽ hỗn loạn.

Dưới đây là cách đưa các tệp vào kết xuất một cách chính xác:

Chúng tôi không chú ý đến tính hợp lệ của doctype và html, tôi viết ngắn gọn chẳng hạn.

Tải không đồng bộ

Nhưng ở đây tôi sẽ chú ý hơn và đọc bài viết đến cuối! Thông thường, các ứng dụng khách tối ưu hóa yêu cầu tải javascript không đồng bộ. Thật kỳ lạ, các nhà phát triển Joomla đã cung cấp khả năng này, nhưng các nhà phát triển thành phần, mô-đun và plugin của bên thứ ba lại quên chức năng này, đó có thể là lý do tại sao Jooml thường bị chỉ trích vì tối ưu hóa thấp, điều mà tôi sẽ tranh luận.

Như đã thảo luận trước đó trong việc hiển thị tài liệu, có một hàm addScript();. Nhưng rõ ràng một số người thậm chí còn không nghi ngờ rằng nó có bốn biến số - địa chỉ $, loại $, $trì hoãn, $ không đồng bộ.

$this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js"); $this->addScript($this->baseurl."/templates/beez_20/js/script.js");

Nhưng trong trường hợp của chúng tôi, chúng tôi cần xếp hàng tải các tập lệnh bằng trình duyệt; để làm được điều này, chúng tôi cần sử dụng thuộc tính. không đồng bộ và/hoặc hoãn lại. Cả hai chỉ khác nhau ở chỗ hoãn lại duy trì thứ tự thực thi các tập lệnh. Trì hoãn là cần thiết nếu script.js khung jQuery được sử dụng, điều này sẽ ngăn không cho nó tải trước chính thư viện và nếu cần duy trì một trình tự nhất định.

Và vì vậy, để kích hoạt tải không đồng bộ, bạn cần sử dụng tất cả các biến

$this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript"); // hoặc $this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript", false, false); // In ra $this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript", true, false); // In ra $this->addScript($this->baseurl."/templates/beez_20/js/jquery-latest.min.js", "text/javascript", false, true); // Kết quả đầu ra

Và một khoảnh khắc nhỏ nữa. Về nguyên tắc, các thuộc tính này là các phần tử HTML5, do đó không có ích gì khi sử dụng biểu mẫu async="async" và defer="defer", async và defer là đủ tương ứng.

Hãy thực hiện điều chỉnh thư viện Joomla. Khai mạc site.ru/libraries/joomla/document/html/renderer/head.php

Chúng tôi đang tìm kiếm (khoảng dòng 150):

// Tạo liên kết tệp tập lệnh foreach ($document->_scripts as $strSrc => " . $lnEnd; )

thay bằng:

// Tạo liên kết tệp tập lệnh foreach ($document->_scripts as $strSrc => $strAttr) ( $buffer .= $tab . "" . $lnEnd; )

Đó là tất cả muối. Tất cả các thao tác của tôi đều được thực hiện trong Joomla 2.5, tôi không nghĩ nó sẽ hoạt động như thế nào trong 1,5 xs và đã đến lúc quên nó đi))). Và kỹ thuật được mô tả ở trên hoàn toàn không phải là thuốc chữa bách bệnh; mọi người đều cần một cách tiếp cận riêng.

Cám ơn vì sự quan tâm của bạn!

/ 26.01.2018

Với sự gia tăng tốc độ kết nối Internet và sự gia tăng sức mạnh không chỉ của máy tính để bàn mà còn thiêt bị di động Các trang web đang trở nên nặng hơn. Số lượng và kích thước của các tệp được kết nối ngày càng tăng: tệp JavaScript, tệp css, hình ảnh, tiện ích trang web của bên thứ ba, iframe. TRÊN khoảnh khắc này Các chi tiết cụ thể về cách hoạt động của trình duyệt là khi tải tệp js, quá trình hiển thị sẽ bị chặn cho đến khi tập lệnh được thực thi. Trình duyệt hiện đại V. lý lịch sẽ phân tích tài liệu và tải xuống các tập lệnh và kiểu, nhưng việc hiển thị sẽ bị chặn. So sánh thông số mạng Vì các trình duyệt khác nhau có thể được xem tại browserscope.org. Chúng tôi không thể loại bỏ hoàn toàn việc chặn, nhưng chúng tôi có thể tối ưu hóa các phần máy chủ và máy khách của ứng dụng để việc chặn kết xuất mất ít thời gian nhất.

Giải pháp phía máy chủ:
- Giảm kích cỡ tập tin được chuyển
- Sử dụng CDN
— Đặt các tập tin tĩnh trên miền riêng biệt hoặc dưới một miền, do đó làm tăng số lượng kết nối trình duyệt đồng thời.
- Cho phép nén các tập tin được chuyển (gzip)

Giải pháp dành cho phía khách hàng:
- Giảm số lượng yêu cầu.
- Tệp bộ đệm ở phía máy khách bằng cách sử dụng tiêu đề Hết hạn và Etags.
— Sử dụng CDN có sẵn công khai (Google CDN, Yandex CDN). Vì vậy, có khả năng tệp từ CDN công cộng đã được lưu trữ trong bộ đệm của trình duyệt.

Một cách để tối ưu hóa tốc độ tải trang là tải tệp không đồng bộ, điều này không chặn hiển thị.

Tập lệnh tải không đồng bộ JavaScript:

(function() ( var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = ' URL tệp'; document.getElementsByTagName('head').appendChild(script); ))();

Nếu JavaScript cần được thực thi sau khi toàn bộ trang được tải, bao gồm nội dung, hình ảnh, tệp kiểu và tập lệnh bên ngoài thì sự kiện onload cần phải được thêm vào trình tải.

if (window.addEventListener) ( window.addEventListener('load', async_load, false); ) else if (window.attachEvent) ( window.attachEvent('onload', async_load); )

Tập lệnh tải không đồng bộ JavaScript dựa trên sự kiện onload

(function() ( function async_load())( var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'URL tệp'; document. getElementsByTagName ('head').appendChild(script); ) if (window.addEventListener) ( window.addEventListener('load', async_load, false); ) else if (window.attachEvent) ( window.attachEvent('onload', async_load ); ) ))();

Nhưng đây là trường hợp cá biệt khi cần tải xuống một tệp duy nhất. Thông thường trong thực tế nhiều tập tin được kết nối.

Bao gồm tập lệnh tải không đồng bộ nhiều tệp JavaScript

(function() ( function async_load())( [ 'URL_1.js', 'URL_2.js', 'URL_3.js' ].forEach(function(src) ( var s = document.createElement('script'); s .type = 'text/javascript'; s.async = true; document.getElementsByTagName('head').appendChild(script)); 'load', async_load, false khác nếu (window.attachEvent) ( window. AttachEvent('onload', async_load); ) ))();

Nhưng có một điểm trừ trong cách triển khai này - các tập lệnh sẽ được tải theo thứ tự ngẫu nhiên và theo đó, chúng sẽ được thực thi ngẫu nhiên theo thời gian. Tập lệnh tải không đồng bộ này lý tưởng nếu Thực thi JavaScript các tệp không phụ thuộc vào nhau và không phụ thuộc vào DOM. Nếu không, việc sử dụng nó có thể dẫn đến lỗi trên trang hoặc kết quả thực thi không mong muốn. Để thực hiện tuần tự nhưng tải xuống không đồng bộ, bạn cần chỉ định async=false, khi đó các tệp sẽ được tải xuống theo thứ tự ngẫu nhiên nhưng được thực hiện lần lượt.

Tiêu chuẩn HTML 5 hỗ trợ tải JavaScript không đồng bộ. Điều này có thể được thực hiện bằng cách thêm từ khóa không đồng bộ hoặc trì hoãn. Ví dụ:

.jpg" type="text/javascript" trì hoãn>

Một tập lệnh được kết nối với thuộc tính defer sẽ được thực thi mà không làm ảnh hưởng đến thứ tự thực thi so với các tập lệnh khác và việc thực thi nó sẽ diễn ra sau đó. hết chỗ và phân tích trang nhưng trước khi gọi DOMContentLoaded.

Một tập lệnh được kết nối với thuộc tính async sẽ được thực thi càng sớm càng tốt sau khi được tải đầy đủ, nhưng nó không đợi tài liệu được phân tích cú pháp trước khi tải đối tượng cửa sổ. Các trình duyệt không đảm bảo rằng các tập lệnh sẽ được thực thi theo đúng thứ tự mà chúng được kết nối.

Thư viện để tải JavaScript không đồng bộ

RequireJS là một mô-đun tải JavaScript. Được tối ưu hóa cho các trình duyệt nhưng có thể sử dụng được trong các môi trường khác như Node, Rhino.

require(["script"], function(script) ( console.log("bắt đầu sau khi tải script.js"); ));

extsrc.js là một thư viện chạy các tập lệnh sẽ được thực thi sau khi trang được tải và hiển thị cho người dùng. Hoạt động chính xác với document.write.

.jpg">.jpg">

yepnope.js - cho phép tải các tệp JavaScript và CSS không đồng bộ.

yepnope([ 'script.js', 'style.css']);

Một cách dễ dàng để tải tập lệnh JavaScript

Hóa ra trên thực tế, việc tải các tập lệnh JavaScript không chặn hiển thị trên nhiều trình duyệt là rất khó và đôi khi là không thể..jpg"> đến cuối tài liệu trước khi đóng thẻ cơ thể. Do những hạn chế các trình duyệt khác nhau và chính HTML, tùy chọn tải không chặn hiển thị như vậy có thể được coi là đơn giản nhất.

Tốc độ trang của Google: Kiểu CSS và Tập lệnh JavaScript chặn tải trang trên WP

Bài đăng này sẽ cho rằng bạn đã quen thuộc với công cụ Googleđể tối ưu hóa tốc độ tải trang của trang web - Thông tin chi tiết về tốc độ trang. Nghe này, ngay bây giờ hãy nhập trang web của bạn vào đó và nhấp vào nút “Phân tích”.

Được rồi, bây giờ bài viết này nói về cái gì?

Rất có thể trong kết quả kiểm tra trang web của bạn có mục “Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên”.

Tôi nhận thấy rằng điểm này là một trong những điểm khó xử lý nhất (tốn thời gian) và có mặt trên hầu hết các trang web, ngay cả những trang rất nhanh.

Cách khắc phục trên lý thuyết:

  • Chúng tôi kết hợp tất cả các tệp JavaScript và đặt những gì chúng tôi có trước thẻ đóng của trang web.
  • Chúng tôi kết hợp tất cả CSS, đặt nó ngay trước JavaScript mà chúng tôi đã di chuyển, sau đó chọn từ chúng những kiểu cần thiết để hiển thị chính xác trang và đặc biệt là phần trên cùng của nó (màn hình đầu tiên) và đặt chúng trong một thẻ trên trang web.

    • Điều này hoạt động như thế nào trong thực tế và trong trường hợp cụ thể này - đối với các trang web WordPress?

    1. Hãy tận dụng sự phụ thuộc của các tập lệnh khác vào jQuery

    Được pha chế đúng cách chủ đề WordPress tất cả các tệp CSS và JS được kết nối thông qua wp_head() và wp_footer() - nghĩa là ở và ở cuối tương ứng.

    Ngoài ra, các tệp có phần phụ thuộc, ví dụ: plugin phải được kết nối sau, điều đó có nghĩa là nếu thư viện jQuery nằm trong wp_footer() thì FancyBox không vào được wp_head().

    Di chuyển jQuery đến chân trang của trang

    Việc này được thực hiện rất đơn giản - sử dụng các hàm wp_deregister_script(), wp_register_script(), wp_enqueue_script() và một hook (đôi khi một hook được sử dụng cùng với is_admin()). Tất cả những gì bạn cần làm là dán đoạn mã sau vào tệp trang web của bạn.

    Tôi muốn thu hút sự chú ý của bạn đến thực tế là điều này giải pháp tự động và mặc dù nó hoạt động trong hầu hết 100% trường hợp, nhưng vẫn xảy ra trường hợp một số tập lệnh không muốn được chuyển sang chân trang của trang. Sau đó, bạn sẽ cần chú ý hơn đến từng tệp JavaScript của mình.

    Tất nhiên, đây là lúc công việc của chúng tôi với JS kết thúc, việc hợp nhất các tập lệnh cũng sẽ tăng tốc độ (nghĩa là bạn hủy đăng ký tất cả chúng và sau đó chỉ cần kết nối phiên bản kết hợp của mình) - nhưng Google không còn yêu cầu điều này nữa.

    2. Kết hợp CSS trong WordPress

    Nếu việc kết hợp tất cả JavaScript vào một tệp không phải lúc nào cũng ý tưởng tốt, thì tôi khuyên bạn nên kết hợp CSS bất cứ khi nào có thể.

    Hãy nhớ ảnh chụp màn hình ở đầu bài viết ( 10 tài nguyên CSS chặn)? Nhiều tệp kiểu đến từ đâu, vì nhà phát triển chủ đề có thể biết anh ta đang làm gì?

    Câu trả lời là từ các plugin.

    Ví dụ: plugin Mâu liên hệ 7" bao gồm biểu định kiểu riêng và mặc dù bản thân nó không lớn nhưng tốt hơn hết là tránh các yêu cầu HTTP không cần thiết.

    Chúng ta hãy xem từng bước một.

  • Sao chép nội dung của biểu định kiểu của plugin và dán vào cuối tệp kiểu chính - .
  • Ví dụ: kiểm tra xem các liên kết tương đối đến hình ảnh có được bao gồm trong các kiểu này hay không. Nếu có, hãy thay thế chúng bằng hình ảnh tuyệt đối hoặc di chuyển hình ảnh từ plugin sang thư mục chủ đề.
  • Đi tới cài đặt plugin và xem liệu có tùy chọn bỏ chọn hộp ở đâu đó và không bao gồm CSS của plugin hay không. Không có tùy chọn như vậy trong Biểu mẫu liên hệ 7, có nghĩa là chúng ta chuyển sang điểm tiếp theo.
  • Chúng tôi cắt các tập tin thông qua. Đối với kiểu Contact Form 7, mã sẽ như sau:

    • Ngoài ra, đôi khi việc sử dụng thẻ có điều kiện, tệp plugin (cả CSS và JS) chỉ bị vô hiệu hóa khỏi những trang không được sử dụng.

    Ok, chúng tôi đã sắp xếp Biểu mẫu liên hệ 7, nhưng làm cách nào để tìm ra ID của tệp CSS của các plugin khác?

    Thật dễ dàng, hãy mở nó ra nguồn trang và chúng tôi thấy một hình ảnh tương tự ở đó:

    Ngoài ra còn có một plugin cho phép bạn tự động kết hợp CSS và JavaScript - Trình tối ưu hóa tập lệnh JS & CSS.

    Nếu bạn có bất kỳ câu hỏi nào hoặc tôi quên đề cập đến bất cứ điều gì trong bài viết này, vui lòng để lại nhận xét.

    Cách trình duyệt tải trang

    Trình duyệt tải trang một cách tuần tự. Điều này đặc biệt đúng đối với liện kết ngoại cho các tập tin - css và javascript. Hãy lấy ví dụ một khối cho trang web lesnoy.name.

    Blog của Lesnoy Vladislav

    Trang web này chỉ tải ba tập tin bên ngoài.

    2 người trong số họ - phong cách css và một là tệp js. Nhưng đây là một ví dụ về một trang web đơn giản, thường có hàng chục tệp bên ngoài được tải và điều này ảnh hưởng đáng kể đến tốc độ tải trang.

    Tăng tốc độ hiển thị trang trên trình duyệt

    Mọi chuyện sẽ ổn thôi, nhưng vấn đề chính là trình duyệt hoạt động như sau: khi nó gặp một liên kết đến một tệp bên ngoài, nó sẽ tải xuống và xử lý nó, tạm dừng hiển thị phần còn lại của trang.

    Tức là từ ví dụ trên các bạn có thể thấy trình duyệt sẽ tải tiêu đề trang web (title), sau đó gặp link tới css bên ngoài main.css và sẽ tải nó. Sau khi tải, nó xử lý nó và tiếp tục - nó gặp tệp css thứ hai, lại trì hoãn việc xử lý trang cho đến sau này và hoạt động với prettify.css. Tương tự với prettify.js. Và chỉ sau đó nó mới bắt đầu hiển thị phần còn lại của trang, áp dụng tất cả các quy tắc CSS được xử lý trước đó từ tập tin css và js-col từ tập tin javascript ov.

    Nếu Internet chậm hoặc số lượng lớn các tệp bên ngoài, thời gian từ khi truy cập trang đến khi hiển thị trang có thể lên tới hàng chục giây hoặc thậm chí hơn một phút. Nhưng không phải trong khi các tệp bên ngoài đang tải, không thể hiển thị văn bản từ trang mà khách truy cập thực sự đã đến sao?

    Tất nhiên là có thể. tầm thường nhất nhưng không kém phần phương pháp hiệu quả— chuyển tất cả các tệp bên ngoài không được ưu tiên từ đầu trang sang chân trang. Những thứ kia. từ khối đầu càng gần thẻ càng tốt.

    Với các tệp không ưu tiên, ý tôi là những tệp không quan trọng đối với chức năng hoặc vẻ bề ngoàiđịa điểm. Cách tốt chia một tệp css hoặc js lớn thành hai - tệp nhỏ đầu tiên lưu trữ những gì cần tải nhanh nhất có thể và được đặt trong phần đầu, còn tệp thứ hai và lớn chứa mọi thứ khác và được đặt ở vị trí thấp nhất có thể trong mã html của trang mà không ảnh hưởng đến tốc độ hiển thị nội dung trang.

    Nhưng với sự ra đời của html5, bạn có thể làm điều đó dễ dàng và đẹp mắt hơn. Thẻ script đã thêm tham số async và defer.

    thuộc tính không đồng bộ

    Thuộc tính không đồng bộ của tập lệnh khiến việc tải tệp js không đồng bộ. Những người biết cách lập trình JS đều biết chính xác nó hoạt động như thế nào - không đồng bộ. Đối với những người chưa biết cách, tôi sẽ cho bạn biết: trình duyệt gặp một liên kết đến tệp javascript bên ngoài (thẻ script có tham số src), bắt đầu tải và xử lý nó, nhưng không ngừng tải và xử lý trang chính .

    Những thứ kia. thực hiện điều này song song. Đúng thứ chúng ta cần! Và đồng thời, không cần phải di chuyển thẻ này xuống chân trang (đặc biệt không phải trong tất cả các hệ thống CMS điều này đều dễ thực hiện).

    Nhược điểm của thuộc tính async

    Để tải tệp js không đồng bộ, tính không đồng bộ vừa là điểm cộng vừa là điểm trừ. Xét cho cùng, kích thước tệp rất có thể là khác nhau và tốc độ tải xuống và xử lý tệp cũng không mang tính quyết định. Điều này có nghĩa là khi tải một số tệp không đồng bộ, không có gì đảm bảo rằng tệp bắt đầu tải sau sẽ không tải sớm hơn (chủ yếu là do kích thước của nó).

    …

    TRONG trong ví dụ này Tôi không thể nói chính xác trình tự thực thi của các tệp js này sẽ như thế nào. Tất cả những gì tôi có thể nói chắc chắn là script4 sẽ tải sau script3 do thiếu thuộc tính async. Nhưng tôi không biết tệp nào từ script1.js, script2.js và script5.js sẽ tải trước, bởi vì... chúng được tải không đồng bộ.

    Chèn/chỉnh sửa liên kết

    “Và nó có gì khác biệt với chúng ta?” - bạn hỏi. Nhưng có vẻ như việc thực thi một tập lệnh js phụ thuộc vào một tập lệnh khác. Điều này xảy ra mọi lúc và ví dụ đơn giản nhất về sự phụ thuộc như vậy là jQuery.

    …

    TRONG trong trường hợp này có khả năng nhận được rất cao Lỗi JavaScript bởi vì thực tế là bất kỳ plugin jQuery sẽ bắt đầu thực thi trước khi jQuery tự tải.

    Phải làm gì?

    thuộc tính trì hoãn

    Đây là lúc một thuộc tính khác của thẻ script xuất hiện để giải cứu chúng ta - trì hoãn.

    …

    Trì hoãn chuyển từ bằng tiếng Anh như "hoãn lại".

    Tương ứng tải javascript bị trì hoãn- lười tải javascript. Nếu trình duyệt gặp thuộc tính trì hoãn trên một liên kết đến tệp js bên ngoài, trình duyệt sẽ trì hoãn việc tải và thực thi các tệp này cho đến khi toàn bộ trang được tải và hiển thị. Đồng thời, nó đảm bảo thứ tự thực thi tập lệnh giống như ban đầu được đặt trong mã html.

    Theo đó, trong ví dụ của chúng tôi với jQuery và các plugin của nó, defer giúp chúng tôi thực hiện hai tác vụ: thời gian hiển thị trang giảm đáng kể (trình duyệt không chặn hiển thị trang để tải tệp js, nó trì hoãn tải cho đến sau) và đồng thời chúng tôi loại bỏ lỗi có thể xảy ra liên quan đến việc tải không đồng bộ các tệp js phụ thuộc lẫn nhau.

    Trong ví dụ trên, tập lệnh other_script.js sẽ tải không đồng bộ, bởi vì nó không phụ thuộc vào bất kỳ tệp nào khác và jQuery cũng như các plugin của nó sẽ được tải ngay sau khi trang được hiển thị theo thứ tự sau: jquery.min.js đầu tiên, sau đó là plugin1.jquery.js, plugin2.jquery.js, plugin3.jquery.

    Kết quả là, với sự ra đời của html5 cùng các thuộc tính defer và async, chúng ta có thể kiểm soát thứ tự tải của các tệp js bên ngoài linh hoạt hơn nhiều, từ đó tăng tốc độ hiển thị trang web. Và quan trọng nhất, người dùng sẽ có ấn tượng về tốc độ tải của toàn bộ trang web tăng lên đáng kể, bởi vì chỉ trong vài giây, anh ta sẽ thấy những gì anh ta đến trang web để tìm kiếm - thông tin.

    Nếu bạn từng nghĩ đến các vấn đề về tốc độ tải trang trên trang web của mình, thì có lẽ bạn đã quen thuộc với một dịch vụ như vậy của Google như PageSpeed ​​​​Insights. Và nếu vậy thì có lẽ bạn đã quen với vấn đề khi nội dung chính của trang được tải sau khi các tập lệnh và kiểu nhất định đã được tải.

    Đến lượt Google, đang cố gắng chọc mũi vào nỗi ô nhục này và đưa ra giải pháp riêng cho vấn đề - Xóa Mã JavaScript và CSS chặn phần đầu trang được hiển thị.

    Phải làm gì về nó? Tất nhiên, bạn có thể đi theo cách tốn nhiều công sức nhất, nhưng một cách hiệu quả– xem xét toàn bộ công cụ Joomla, thực hiện các thay đổi đối với các tiện ích mở rộng, v.v. Phương pháp này thực sự tốt, nhưng thành thật mà nói, nó tốn nhiều công sức đến mức không ai muốn làm phiền nó, và đối với những người mới bắt đầu, phương pháp này hoàn toàn không phải là một lựa chọn.

    Đơn giản nhất và không kém đúng cáchĐiều này là để sử dụng một số tiện ích mở rộng nhất định sẽ thực hiện tất cả (hoặc gần như tất cả) công việc cho chúng tôi. Một trong những tiện ích mở rộng này là plugin Javascript Async & Defer, với plugin này bạn có thể chạy các tập lệnh không đồng bộ hoặc trì hoãn việc khởi chạy chúng, nhưng miễn là điều này không gây hại cho hoạt động của trang web.

    Đầu tiên bạn cần tải plugin Javascript Async & Defer rồi cài đặt. Nhưng chỉ cài đặt thôi là chưa đủ, cái chính là phải cấu hình đúng phần mở rộng này. Bây giờ tôi sẽ cố gắng giải thích cách thực hiện việc này.

    Cài đặt Trình cắm Javascript Không đồng bộ và trì hoãn

    Sau khi cài đặt plugin, bạn có thể bắt đầu định cấu hình plugin vì nó sẽ không thể tự cấu hình. Để thực hiện việc này, trong bảng điều khiển, hãy truy cập trang “Trình quản lý plugin: Plugin” (Tiện ích mở rộng -> Plugin). Chúng tôi vừa tìm thấy tiện ích mở rộng đã cài đặt dưới dạng plugin “Javascript Async and Defer”.

    Như bạn có thể thấy, plugin này bị tắt theo mặc định, nhưng như tôi đã nói, một plugin được bật cho vận hành chính xác sẽ không đủ. Hãy mở plugin chỉnh sửa và xem những gì chúng tôi có. Và chúng tôi có không ít hơn một tab “Plugin” với một vài cài đặt.

    Trong cài đặt plugin, chúng tôi thấy thông báo từ nhà phát triển cho chúng tôi biết rằng plugin này sẽ thêm thẻ khởi chạy không đồng bộ hoặc bị trì hoãn vào các tập lệnh được chỉ định. Nhưng cũng có một cảnh báo rằng việc thiết lập plugin này tốt nhất nên được thực hiện bởi các chuyên gia và phải thận trọng, nếu không có thể xảy ra lỗi trong hoạt động của trang web.

    Trước tiên, hãy tìm hiểu những gì và cách cấu hình ở đây, cách tìm ra tập lệnh nào được khởi chạy và cách đăng ký chúng. Trước tiên, hãy xem bản chất của từng cài đặt:

    – công tắc này cho phép tải tập lệnh ở chế độ không đồng bộ.– lười tải các tập lệnh được chỉ định
  • Tập lệnh cần sửa đổi – bạn phải nhập vào trường văn bản này đường dẫn tương đối vào các tập lệnh mà chúng tôi sẽ xử lý.
  • Gỡ lỗi - chế độ gỡ lỗi, hữu ích để xác định các tập lệnh được chạy trước khi tải nội dung.

    • Điều đầu tiên chúng ta cần tìm hiểu là tập lệnh nào được khởi chạy khi một trang cụ thể được tải; để làm được điều này, chúng ta cần sử dụng chế độ gỡ lỗi “Gỡ lỗi”. Ở chế độ này trên trang web trong khu vực tin nhắn hệ thống(thông báo) danh sách các tập lệnh được tải cùng với trang sẽ được hiển thị.

    Nhưng thành thật mà nói, không phải mọi thứ đều đơn giản như vậy, chính danh sách này sẽ chỉ được hiển thị nếu bạn chỉ định ít nhất một tập lệnh cần sửa đổi trong trường Tập lệnh cần sửa đổi. Nhưng nếu bạn không biết nên chỉ ra tập lệnh nào ở đó thì sao? Không sao, đối với người mới bắt đầu, bạn có thể viết bất cứ thứ gì vào trường này, bất kỳ từ hoặc ký hiệu nào, sau đó bật chế độ gỡ lỗi, kích hoạt plugin và lưu kết quả.

    Bây giờ bạn có thể vào trang web và xem kết quả.

    Tùy chọn đơn giản nhất là sao chép tất cả các tập lệnh mà plugin cung cấp cho chúng tôi và thêm chúng vào trường “Tập lệnh cần sửa đổi” để sửa đổi. Sau đó chọn chế độ tải (không đồng bộ, trễ hoặc cả hai), lưu các thay đổi và kiểm tra kết quả.

    Nhưng trong trường hợp này, bạn chắc chắn sẽ nhận thấy một số lỗi trên trang web, chẳng hạn như cửa sổ bật lên hoạt động không chính xác, v.v. Điều này là do trang được tải trước khi một số tập lệnh nhất định được thực thi và do đó các chức năng mà chúng chịu trách nhiệm sẽ không hoạt động.

    Điều chính ở đây là đừng hoảng sợ, hãy nghiên cứu kỹ danh sách các tập lệnh để hiểu mỗi tập lệnh chịu trách nhiệm gì và chỉ sửa đổi những tập lệnh không vi phạm chức năng của trang web.

    Hầu hết (nếu không phải tất cả) các trang web hiện đại đều sử dụng Javascript. nút mạng xã hội? Bổ sung? Ngay cả các mẫu! 99% các thành phần này sẽ sử dụng Javascript. Điều này có nghĩa là trang web của bạn sử dụng tập lệnh. Nhưng các tập lệnh làm chậm tốc độ của trang web. Hôm nay chúng tôi muốn giới thiệu cho bạn 2 plugin sẽ giải quyết vấn đề này.

    Không đồng bộ và bị trì hoãn... cái gì?

    Trước khi chúng ta bắt đầu, có ba điều bạn nên cân nhắc:

  • Trình phân tích cú pháp là HTML đang ở giai đoạn tải
  • Net là thời gian để tải tập lệnh của bạn
  • Thực thi là thời gian mà tập lệnh được tải đầy đủ để hoạt động trong trình duyệt.

    • Là một phần trong môi trường hoạt động bình thường của trang web, quá trình phân tích cú pháp HTML bị tạm dừng trong khi các tập lệnh đang chạy. Nếu trang web của bạn giống trang web của tôi thì điều này có nghĩa là người dùng sẽ phải đợi một chút (để mã, thiết kế, nội dung, v.v.) tải trước khi họ có thể sử dụng trang web của bạn. Chúng ta hãy xem quá trình tải tập lệnh điển hình trông như thế nào:

    Tải chậm chỉ đơn giản là cho phép bạn Mã HTML tải trước khi tập lệnh bắt đầu chạy. Ưu điểm ở đây là trang web sẽ được hiển thị ngay lập tức trong cửa sổ trình duyệt, như thể thể hiện hiệu suất nhanh như chớp. Cá nhân tôi khuyên bạn nên sử dụng tải từng phần nếu một số người dùng của bạn đang sử dụng trình duyệt không hỗ trợ tải tập lệnh không đồng bộ. Chúng ta hãy xem cách tải chậm hoạt động như thế nào:

    Tải tập lệnh không đồng bộ là lựa chọn tốt nhất. Quá trình phân tích cú pháp HTML và tải tập lệnh sẽ tiếp tục nhưng việc thực thi tập lệnh sẽ chỉ có thể thực hiện được khi quá trình tải hoàn tất. Điều này sẽ cho phép bạn trình bày nội dung trang web của mình cho khách truy cập nhanh nhất có thể. Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ tải tập lệnh không đồng bộ. Chúng ta hãy xem cách tải không đồng bộ hoạt động như thế nào:

    • Tôi chắc chắn khuyên bạn nên tối ưu hóa tập lệnh của mình bằng cả hai phương pháp.

    Khi sử dụng các thuộc tính này, bạn sẽ có 3 chế độ. Nếu bạn sử dụng thuộc tính async, tập lệnh sẽ được thực thi không đồng bộ sớm nhất có thể. Nếu bạn không sử dụng thuộc tính async mà thay vào đó hãy sử dụng defer thì tập lệnh sẽ được thực thi khi trang phân tích cú pháp xong. Nếu bạn không sử dụng bất kỳ thuộc tính nào trong số này, tập lệnh sẽ tải và thực thi ngay lập tức, ngay cả trước khi trình duyệt bắt đầu phân tích cú pháp trang.

    Nơi để bắt đầu?

    Do đó, nếu Javascript không đồng bộ là lựa chọn tốt nhất, hãy để tôi giới thiệu cho bạn plugin WordPress tốt nhấtđể tải Javascript không đồng bộ. Ai có thể nghĩ rằng nó được gọi là !

    Tải xuống, cài đặt và bạn đã sẵn sàng! Tuy nhiên, nó sẽ xung đột với một số plugin, đặc biệt nếu bạn sử dụng thanh trượt. Trong phần cài đặt Mẫu WordPress một chức năng như vậy thường có mặt. Bạn có thể loại trừ các tập lệnh sẽ tải ngay lập tức.

    Tiếp theo, tôi muốn chuyển sang tải Javascript một cách lười biếng. Tôi đã xem xét các plugin và nhận thấy rằng các plugin có tên trùng khớp chính xác hoạt động tốt nhất. Đối với tôi, plugin tốt nhất trong danh mục này có tên là .

    Tải xuống, cài đặt và nó sẽ bắt đầu hoạt động mà không cần bất kỳ cài đặt nào, vì đơn giản là nó không có bất kỳ cài đặt nào. Nó sẽ tự động khởi chạy cho những người dùng có trình duyệt không hỗ trợ tải javascript không đồng bộ. Tôi quyết định giữ bài đăng này càng ngắn càng tốt, nhưng đồng thời tôi cũng giới thiệu cho bạn những điều thực sự thú vị nhất. plugin tốt nhấtđể tối ưu hóa hoạt động của các tập lệnh trên trang web của bạn.

    Bây giờ tôi sẽ kể cho bạn nghe về một cách thú vị, điều này sẽ giúp bạn tăng tốc trang web WordPress của mình bằng cách tải các tập lệnh song song.

    Nó dùng để làm gì?

    Mọi thứ đều rất đơn giản. Một trang web hiện đại là một tập hợp của nhiều loại tập lệnh, thẻ, đoạn mã, kiểu, phông chữ và mọi thứ khác. Như bạn hiểu, càng có nhiều “quà tặng” thì trang web của bạn sẽ tải càng lâu. Đối với JavaScript, đó lại là một vấn đề khác. Bạn đã bao giờ nhận thấy tình trạng lộn xộn như vậy khi trang dường như đã được tải nhưng tab lại hiển thị rằng trang vẫn đang tải? Điều này xảy ra khi một tập lệnh cụ thể chưa được tải đến cuối. Sẽ không sao đâu, đôi khi trang hoàn toàn không hoạt động cho đến khi tập lệnh tương tự, dường như không quan trọng lắm được tải. Và người dùng của bạn có thể không đủ kiên nhẫn.

    Khái niệm này hoàn toàn trái ngược với tải đồng bộ, đó là một tập lệnh thông thường như:

    Cuộc gọi không đồng bộ kịch bản trông như thế này:

    Giờ đây, tập lệnh sẽ không buộc người dùng của bạn phải đợi tải đầy đủ, mọi thứ sẽ diễn ra song song.

    Làm thế nào để tự động hóa quá trình?

    Rõ ràng là nếu bạn kết nối các tập lệnh theo cách thủ công và không có nhiều tập lệnh, thì bạn có thể thực hiện việc này theo cách thủ công, chỉ bằng cách thêm thuộc tính thích hợp vào mã cuộc gọi. Nhưng làm thế nào bạn có thể tự động hóa việc này nếu, chẳng hạn, bạn có WordPress với một loạt các tập lệnh, ngoài ra, còn được gọi tự động?

    Tìm tệp tin.php quen thuộc của chủ đề của bạn và chèn đoạn mã sau vào đó (ví dụ: ở cuối):

    // hàm javascript không đồng bộ wcs_defer_javascripts ($url) ( if (FALSE === strpos($url, ".js")) return $url; if (strpos($url, "jquery.js")) return $url; return "$url" async="async" ) add_filter("clean_url", "wcs_defer_javascripts", 11, 1);

    Phần kết luận

    Tôi có thể thêm gì vào kết luận? Tập lệnh này có thể không phù hợp với tất cả mọi người, vì ai biết bạn đã kết nối tập lệnh nào, vì vậy hãy cài đặt và thử nghiệm. Không thể có nhược điểm nào đối với tập lệnh như vậy, ngoại trừ có lẽ không tương thích với một trang web cụ thể do tính chất cụ thể của nó. Đây là một bước nhỏ khác hướng tới việc tối ưu hóa lớn cho trang web của bạn.