TÌM HIỂU THUỘC TÍNH ASYNC CỦA THẺ SCRIPT TRONG HTML5

Sau khi HTML 5 ra đời, có lẽ có rất nhiều cái mới cho chúng ta ngâm cứu như: Local Storage, Local Database, Websocket, các thẻ mới như Video, Audio ..... nói chung là nhiều. Ngoài các tính năng mới, những thẻ mới thì HTML5 cũng có thêm thuộc tính mới trong các thẻ cũ.


Chúng ta ví dụ 1 đoạn code của google analytics sau:
HTML Code (Xem thử):

Code:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-8172215-1']);
  _gaq.push(['_setDomainName', 'gailangchoi.vn']);
  _gaq.push(['_setAllowLinker', true]);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Các bạn đừng quá chú ý đến từng chi tiết của đoạn script trên, chúng ta xem đoạn này là đc
HTML Code (Xem thử):

Code:

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Đoạn code này tạo ra 1 thẻ script mới, có thuộc tính async=true, có type là text/javascript và src là
Code:

Code:

http://google-analytics.com/ga.js

hoặc
Code:

Code:

https:/ssl./google-analytics.com/ga.js

Tùy theo trang đang duyệt dùng http hay https.

Thuộc tính async chỉ mới xuất hiện trong thời gian gần đây mà thôi, chính xác là sau khi HTML5 ra đời ko lâu.

Vậy thuộc tính đó có công dụng gì ?

Theo mặc định, khi các bạn chèn 1 đoạn javascript bên ngoài website. ví dụ:
HTML Code (Xem thử):

Code:

<script src="http://gailangchoi.vn/vidu.js" type="text/javascript"></script>

Khi trang load tới đoạn html này, trình duyệt sẽ load file http://gailangchoi.vn/vidu.js lên và tiến hành phân tích cú pháp nội dung của file này và thực thi nó. Việc này có 1 nhược điểm là nếu file này có dung lượng lớn, có phần xử lý chậm hoặc trong code của file này có những đoạn xuất ra nội dung HTML phải load thêm tài nguyên khác lên .... thì trang sẽ đứng ngay khi tới đoạn này và tới khi mọi "thủ tục" phân tích và thực thi xong hết thì mới load tiếp. Điều này cũng hợp lý vì trong trang có thể có nhiều script và script lại trộn lẫn trong html nên việc làm như thế mới có thể chạy code đúng thứ tự sắp xếp được.
VD:
HTML Code (Xem thử):

Code:

<script src="http://gailangchoi.vn/vidu-1.js" type="text/javascript"></script>
<script src="http://gailangchoi.vn/vidu-2.js" type="text/javascript"></script>
<script src="http://gailangchoi.vn/vidu-3.js" type="text/javascript"></script>

Thì trình duyệt sẽ chạy file vidu-1.js trước rồi mới tới vidu-2.js rồi mới tới 3.

Nhưng đôi khi điều này sẽ làm trang của ta load chậm vì chúng ta chèn những đoạn code ngoài tầm kiếm soát của mình như: alexa wildget, google analytics, code quảng cáo của các adnetwork như vatgia,vietad,ambient,adnet ... Nếu các trang này bị ngủm hoặc đang quá tải -> Trang mình chậm theo.

Để khắc phục nhược điểm trên, HTML5 có thêm 1 thuộc tính mới cho thẻ script dạng này đó là thuộc tính async, thuộc tính này sẽ trì hoãn việc phân tích cú pháp của file được chèn trong thuộc tính src của thẻ script cho đến khi file này được tải xong, và quá trình tải file này lên không thực hiện theo thứ tự sắp xếp như trước nữa mà là khi tới đoạn <script src=.... nó sẽ tải file đó ở trạng thái nền (background) rồi duyệt tiếp nội dung HTML, nếu gặp tiếp đoạn <script src=... khác nó cũng sẽ tải tiếp file này song song với file ban nãy, và file nào tải xong trước thì nó phân tích cú pháp trước chứ không theo thứ tự như trước nữa. và việc load các file js này lên là tiến hành song song với việc tải trang chứ không phải là đợi tải xong mới load tiếp nữa.

Vậy, có nên dùng thuộc tính này cho mọi thẻ script dẫn đến file js bên ngoài trang không ?
Cái này chúng ta phải xét đến trường hợp, chức năng và ngữ cảnh dùng file js đó.


Mình lấy ví dụ. Mình muốn xuất ra đoạn chữ "hello world" ở đầu trang và "load xong" ở cuối trang thì mình làm như sau:
HTML Code (Xem thử):

Code:

<script src="http://gailangchoi.vn/hello.js" type="text/javascript"></script>
Nội dung trang, dài.....dài, rất rất dài .....
<script src="http://gailangchoi.vn/loadxong.js" type="text/javascript"></script>

Nội dung file hello.js đơn giản chỉ là
document.write('Hello World');
file loadxong chỉ đơn giản là
document.write('Load xong');

Như vậy, khi load trang web này lên, đầu tiên nó sẽ load file hello.js lên rồi in ra chữ "Hello world" , nội dung tiếp theo là nội dung HTML sau nó
HTML Code (Xem thử):

Code:

Nội dung trang, dài.....dài, rất rất dài .....

Rồi đến đoạn cuối nó load file loadxong.js lên rồi in ra chữ "Load xong"

=> Hợp lý.

Nếu 2 thẻ này ta thêm thuộc tính async vào, sẽ sảy ra trường hợp khi trang load xong rồi mà file hello.js chưa load xong, và khi load xong thì chữ hello world sẽ được in ra ngay cuối trang -> Không hợp lý.

Do đó, tùy trường hợp mà chúng ta sử dụng cho hợp lý.

Dùng thuộc tính async như thế nào ?
Chúng ta chỉ việc thêm nó vào thẻ script
ví dụ:
HTML Code (Xem thử):

Code:

<script async src="http://gailangchoi.vn/vidu.js" type="text/javascript"></script>

hoặc
HTML Code (Xem thử):

Code:

<script async="true" src="http://gailangchoi.vn/vidu.js" type="text/javascript"></script>

Và lưu ý rằng
HTML Code (Xem thử):

Code:

<script async="false" src="http://gailangchoi.vn/vidu.js" type="text/javascript"></script>

Cũng là sử dụng thuộc tính async, nếu không dùng thuộc tính này, ta phải bỏ nó hoàn toàn khỏi thẻ script, chứ cho nó giá trị là true, false hay nội dung bất kỳ đều là sử dụng nó. Miễn nó có mặt là sử dụng nó rồi (Giống thuộc tính selected quá phải ko )
Ngoài ra, thuộc tính này thuộc về HTML5 nên nó chỉ có tác dụng trên các trình duyệt hỗ trợ HTML5 mà thôi, nếu người dùng dùng trình duyệt đời cũ thì thuộc tính này cũng chẳng có tác dụng gì