script defer, async

Leave a reply

วันนี้นั่งอ่าน CSS อยู่ก็เจอเข้ากับหัวข้อที่น่าสนใจของ HTML ที่เกี่ยวกับ tag ที่มีชื่อว่า script ใช่ครับมันคือ tag ที่เราใช้ในการโหลด javascript

อย่างในกรณี jquery หน้าตาประมาณนี้ 

<script src="jquery/3.2.1/jquery.min.js"></script>

ทีนี้สมมติว่าเราต้องการให้เวลาเอาเมาส์ไป hover บน div ก้อนนึงแล้ว alert ข้อความว่า mouseover แล้วเราเขียนเป็น javascript ไฟล์นึงขึ้นมามีโค้ดแบบนี้ (ชื่อว่า script.js)

$('div').on("mouseover", function(){
    alert("mouseover");
});


มี html หน้าตาแบบนี้

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Script async or defer</title>
    <script src="jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div>Hover me</div>
</body>
</html>

โดยทั่วไปเวลาใช้งานเราจะเรียกไฟล์นี้ที่ tag head นั่นก็คือต่อจากที่เราเรียก jquery แบบนี้

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Script async or defer</title>
    <script src="jquery/3.2.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div>Hover me</div>
</body>
</html>

เราจะพบว่าโค้ดเราใช้งานไม่ได้ นั่นก็เพราะเมื่อเว็บเบราเซอร์โหลด javascript มา มันจะรันและบล็อคก่อนที่เว็บจะสร้าง div Hover me ขึ้นมาได้ทัน เราจึงต้องให้โค้ดที่เราเขียนถูกครอบด้วยโค้ดที่รอจนกว่าเบราเซอร์จะจัดการหน้าเว็บเสร็จเสียก่อนแบบนี้

$(document).ready(function(){
    $('div').on("mouseover", function(){
        alert("mouseover");
    });
});

หรือแบบนี้

$(function(){
    $('div').on("mouseover", function(){
        alert("mouseover");
    });
});

หรือย้ายลงไปเรียกโค้ดเราที่ข้างล่างแบบนี้

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Script async or defer</title>
    <script src="jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div>Hover me</div>
    <script src="script.js"></script>
</body>
</html>

attribute defer กับ async จึงเกิดขึ้นเพื่อจัดการลำดับการทำงานของ script ให้เราโดยที่ถ้าเราใส่

  • defer เบราเซอร์จะโหลด script ให้เราแต่รอจนกว่าหน้าเว็บจะพร้อม นั่นคือเราไม่ต้องใส่ document.ready อีกแล้ว div จะมีอย่างแน่นอนเมื่อ script รัน 
    <script src="script.js" defer></script>
  • async เบราเซอร์จะโหลด script ให้เราแล้วรันไปพร้อม ๆ กันกับการสร้างหน้าเว็บ ซึ่งจะเหมาะกับการรัน script ที่ทำ analytic
  • กรณีที่ไม่ใส่ เบราเซอร์จะทำแบบเดิมคือโหลดแล้วรัน บล็อคการสร้างหน้าเว็บ จนรันเสร็จแล้วสร้างต่อ (คือเหมือนเดิม)

ส่วนเบราเซอร์ที่ support ก็น่าจะทั้งหมด แต่ IE เหมือนจะต้องเวอร์ชั่น 10 ขึ้นไปนะถึงจะใช้ได้ ว่าแต่เราต้องสนใจไหมนั่นก็แล้วแต่นะ ฮ่า ๆ

อ้างอิง:
HTML script defer Attribute
HTML script async Attribute
W3C HTML5

Leave a comment