javascript
javascript
javascript
  • Lấy vị trí người dùng với javascript
  • [Problem] Lấy key đầu tiên tìm thấy chứa giá trị cần tìm (ok)
  • 🥸Đoạn mã JavaScript để thêm ký tự đặc biệt vào đầu mỗi dòng trong văn bản nhiều dòng (ok)
  • 😍Tạo ra font in đậm và copy đến website để sử dụng (ok)
  • Hiệu ứng mở sách cực đẹp
  • 🤩JS: Scroll Animation using Intersection Observer API 🤩 (ok)
  • 😅Draw svg on scroll Full (ok)
  • 😄Install Linguise on any domain dịch tự động (ok)
  • 😅Sử dụng ajax tạo popup cho các bài viết wordrpess mattervn.com (ok)
  • 😆PWA - beforeinstallprompt toplusgames.com (ok)
  • How to Use the HTML5 Full-Screen API (Again) (ok)
  • [ERROR GAME] fix lỗi không load iframe gamedistribution.com for toplusgames.com (ok)
  • 😅jQuery Plugin To Create Animated Placeholders - placeholderTypewriter (ok)
  • 😍Làm chức năng thông báo khách hàng đăng ký namkhoahanoi.vn (ok)
  • Tencent Captcha Demo (ok)
  • 😉Send Mail same javascript elasticemail (ok)
  • 🥳Các tool phong thuỷ (ok)
  • 😇Nice Select A lightweight Vanilla JavaScript plugin (ok)
  • Merge objects with the same id but sum values of the objects (ok)
  • 😅Page: DOMContentLoaded, load, beforeunload, unload phần 1 (ok)
  • 😍Scripts: async, defer phần 2(ok)
  • 😂Javascript Array chunkArrayInGroups(arr, size)
  • Sequentially Resolve Promises Works, Giải quyết tuần tự các lời hứa hoạt động (ok)
  • Using Async / Await with the Array Reduce Method API (ok)
  • Flatten an array of arrays,merge, làm phẳng một mảng các mảng (ok)
  • 😌Dependent Dropdown Full (ok)
  • 🥳Select Box Change Dependent Options dynamically (JavaScript Object)
  • 🤩Add elements dynamically full (ok)
  • 😅👌Multiple versions jquery (ok)
  • 😍Cách sử dụng jQuery trong sweetAlert2 là chúng ta phải sử dụng didOpen full (ok)
  • 😁😁 mdbgo.io, mdbootstrap.com full (ok)
  • 🤪Chú ý nếu lỗi cảnh báo từ khóa new nếu dùng trong js thường chúng ta sẽ sử dụng trong mudule (ok)
  • 😝reCAPTCHA javascript (ok)
  • Firework Simulator v2 Phao Hoa (ok)
  • Active scroll center (ok)
  • 🤪Sort array of objects by string property value (ok)
  • 😏findIndex, find index in Array object (ok)
  • 😂Sử dụng nhiều toán tử 3, multiple Ternary Operators (ok)
  • 😅A simple and easy to use library that creates fullscreen scrolling websites fullPage.js (ok)
  • Xây dựng ứng dụng CRUD sử dụng Vue.js trong Laravel (ok)
  • [Chart] Morris.js Line & Area Charts,Bar Charts, Donut Charts, graph (ok)
  • [Chart] Chart.js
  • Multi select checkbox table bootstrap (ok)
  • 😀jquery new, jquery old, jquery migrate (ok)
  • Popup slide up from the bottom overflowing other div blocks (ok)
  • ASYNC JavaScript (CALLBACK, PROMISES, ASYNC AWAIT) video (ok)
  • === START jQuery Mobile ===
  • Data Attributes full (ok)
  • Viết một ứng dụng Restaurant Picke sử dụng "back menu" (ok)
  • Viết một ứng dụng thời tiết, Weather sử dụng panel (ok)
  • jQuery Mobile Tutorial w3schools.com (ok)
  • jQuery Mobile
  • jQuery Mobile - Events (ok)
  • Back button in jquery mobile (ok)
  • === END jQuery Mobile ===
  • removeDuplicates, Remove duplicate values from JS array, remove all duplicates an array object (ok)
  • Sử dụng thư viện jquery.hoverdir.js để làm hiệu ứng hover tuyệt đẹp (ok)
  • Modernizr là gì ? Sử dụng nó cho những trình duyệt cũ ra sao? (ok)
  • Nhận biết tính năng CSS: Modernizr hay Feature Queries? (ok)
  • [SALESFORCE] Remote Action function in Visualforce Page (ok)
  • ScrollIt.js menu (ok)
  • Cách sử dụng scrollTo vanilla cực chất 😘 (ok)
  • Một bài toán xử lý bất đồng bộ trong kintone để lấy số requet quá giới hạn (OK)
  • hexagon thư viện tạo avatar Canvas (ok)
  • 😅Sử dụng Object.assign và để copy dữ liệu, edit, input, form (ok)
  • Một cách đặt và gán giá trị trong mảng, object cự ngắn gọn (ok)
  • [LAZY] jQuery.Lazy và tạo background-loading cực chất (ok)
  • Ví dụ Sử dụng sẵn thư viện masonry của wordpres (ok)
  • Ảnh base64 dùng làm src, placeholder (ok)
  • Kiểm tra hình ảnh đã được tải với thư viện imagesLoaded (ok)
  • Check if Function Exists before Calling? (ok)
  • Async/Await Javascript Full Example (ok)
  • Thenables in JavaScript phục vụ cho bài viết trên (ok)
  • Script distance, khoảng cách (ok)
  • Time, Date full (ok)
  • Function getAllDatesOfMonth (ok)
  • How do I make a placeholder for a 'select' box? (ok)
  • Library choise (ok)
  • jQuery - Redirect with post, Get data php (ok)
  • How to pass data from one page to another page html (ok)
  • how to send data onClick() to another php for processing using post or get?
  • draw grid, vẽ grid (ok)
  • Fullscreen Horizontal Page Slider with jQuery and CSS3 - HSlider scroll template html (ok)
  • _.template, UnderscoreJS Templates Full (ok)
  • Character limit on tag type input number (ok)
  • How to set maximum length in input type=number (ok)
  • ========= START JEST =======
  • Getting Started (ok)
  • Using Matchers (ok)
  • Testing Asynchronous Code
  • Setup and Teardown (ok)
  • Mock Functions
  • Jest Platform
  • Jest tutorial
  • Testing trong Javascript với Jest (Phần 1) (ok)
  • Testing trong Javascript với Jest (Phần 2)
  • Giới thiệu về Jest (Delightful JavaScript Testing)
  • Thử nghiệm phát triển theo hướng phản ứng với Jest và Enzyme
  • Cách kiểm tra các thành phần phản ứng với Jest và Enzyme, Phần 1
  • Cách kiểm tra thành phần phản ứng với Jest và Enzyme, Phần 2
  • Jest js mock jquey and lib
  • Unit testing Các thành phần React với Enzyme và Jest
  • Hướng dẫn viết unit test React với Jest và Enzyme (P1)
  • Tôi đã test các React component như thế nào? (phần 2)
  • Test component trong React với Jest
  • Test Component với Jest và Emzyme
  • Tổng quan về unit test cho dự án react redux saga với Jest Part 1
  • ========= END JEST =======
  • ======= START GULP TUTORIAL ======
  • [GULP] Tìm hiểu về Gulp.js
  • [GULP] Gulp Tutorial
  • [GULP] Gulp - Developing An Application (ok)
  • [GULP] Gulp - Combining Tasks (ok)
  • [GULP] Gulp - Watch (ok)
  • [GULP] Gulp - Live Reload
  • [GULP] Gulp - Optimizing CSS and JavaScript
  • [GULP] Gulp - Optimizing Images
  • [GULP] Gulp - Useful Plugins
  • [GULP] Gulp - Cleaning Unwanted Files
  • Đọc thêm những tài liệu trang khác
  • ======= END GULP TUTORIAL ======
  • Prevent form submission on Enter key press, keyCode (ok)
  • Lấy kích thước ảnh gốc image (ok)
  • 😆How to Center Carousel Slider (ok)
  • Putting Dots onto Owl Carousel Instead of below specialtouchgifts.com.au (ok)
  • Cách xây dựng một Full Screen Carousel với Owl.js
  • Lazy load với owl.carousel.js (ok)
  • Show half of the other item on Owl Carousel vinmec.com items: 1.5 (ok)
  • Show half of the other item on Owl Carousel vinmec.com stagePadding (ok)
  • ------------ Start Fetch -----------
  • Using Fetch Full
  • 😅Javascript Fetch JSON PHP Complete FormData phần 1(ok)
  • Một ví dụ quá đỉnh lấy dữ liệu của form submit trong js bằng đối tượng new FormData + php phần 2(ok)
  • Có một sự thật sử dụng async đồng nghĩa với trả về kết quả là PROMISE (ok)
  • 😅Promise.all full (ok)
  • All you need to know about Promise.all
  • [PROMISE] Promise.all()
  • [PROMISE] Tìm hiểu về promise trong ES6
  • [PROMISE] Introduction to Promises
  • jQuery off() Method (ok)
  • How to make HTTP requests with Axios
  • Axios vs Fetch - 2020 nên sử dụng thằng nào với những tính năng mới trong javascript
  • Get and Post method using Fetch API (ok)
  • Sử dụng JavaScript Fetch API với Async/Await (ok)
  • Xử lý lỗi cho fetch trong trường hợp không có kết nối hoặc kết nối lâu (ok)
  • ------------ End Fetch -----------
  • BigDataCloud Free Reverse Geocoding Javascript API Client (ok)
  • Vietmap API
  • 🥰Sử dụng API Giao hàng Nhanh để tính giá cước vận chuyển (ok)
  • photonsearch as you type with OpenStreetMap map (ok)
  • Leaflet - Một thư viện JS mã nguồn mở cho việc xây dụng ứng dụng bản đồ map (ok)
  • Xây dựng popup lấy vị trí map áp dụng pointfinder (ok)
  • Reverse Geocoding Convert Lat Long to Address map (ok)
  • Free Reverse Geocoding Javascript API map (ok)
  • [YAML] In Action Tutorial Series - General - Hướng dẫn sử dụng file YML YAML cơ bản
  • ----------------- Start Notification -----------------
  • Đối tượng caches object caches (ok)
  • Notification (ok)
  • Sử dụng indexedDB (ok)
  • Using the Notifications API (ok)
  • NotificationEvent (chưa có ví dụ :((
  • ServiceWorkerGlobalScope.onnotificationclick (ok)
  • ServiceWorkerRegistration.getNotifications(ok)
  • ServiceWorkerRegistration.showNotification(ok)
  • Giao tiếp giữa các cửa sổ với Window.postMessage API (ok)
  • Window open() Method (ok)
  • ----------------- End Notification -----------------
  • Example Cookie full (ok)
  • Thay đổi class active javascript bằng cách viết hàm (P1)
  • Thay đổi class active javascript bằng cách viết hàm (P2)
  • jQuery Mockjax Plugin (chưa học cách sử dụng)
  • jQuery Ajax X-editable bootstrap plugin (chưa học cách sử dụng)
  • Lọc theo điều kiện (filter) (ok)
  • Các ví dụ về filter
  • jQuery | grep() Method (ok)
  • Hai bài toán so sánh kinh điển trong javascript
  • Function random :)
  • Một cách sử dụng tab trong theme newspaper
  • Hiệu ứng scroll + animation + menu trượt mượt
  • Trigger a CSS animation on scroll xuongkhopbacninh.vn (ok)
  • App Css Loaded (scroll create link) (ok)
  • Hiệu tứng scroll cực chất (ok)
  • App Js Loaded (ok)
  • Sử dụng async và defer full (Oke)
  • Cách sử dụng Thuộc tính async và defer trong JavaScript hay
  • ReferenceError: Can't find variable: requestAnimationFrame
  • Đoạn code check lỗi PHP trong Ajax
  • [SELECT2] Sử dụng Select2 để thay thế select boxes
  • Một cách sử dụng lazyload khi addclass thật khó khăn...
  • Hiệu ứng croll chuột và % cực đẹp :_
  • Tạo chức năng tự động hoàn tất nhập liệu với thư viện jQuery UI Autocomplete (Phần 1)
  • Tạo chức năng tự động hoàn tất nhập liệu với thư viện jQuery UI Autocomplete (Phần 2)
  • JavaScript String split() Method (OK)
  • Sử dụng thư viện displace để làm menu kéo thả (ok):)))
  • Menu cực chất :)))
  • Sử dụng thư viện slick (ok)
  • vertical scroll, Vertical carousel (ok)
  • Google-like Thanos disintegration (ok)
  • Dùng thư viện jspdf
  • Công thức Toán học cho website
  • Fix lỗi tự động làm thay đổi độ cao :( vieclam123.vn :(
  • Sử dụng window.addEventListener để resize và responsive <3
  • Javascript create, read, and delete cookies (ok)
  • Tự động submit bằng javscript :))) (ok)
  • avoid form warning if user clicks refresh (ok)
  • Một cách truy cập phần tử bằng js thông qua id lạ :)))
  • Meta Refresh
  • Truyền dữ liệu từ javascript sang php
    • Sử dụng form để truyền sang php (ok)
    • Truyền giá trị theo file bằng đường dẫn (ok)
    • Dùng json để truyền sang php
  • auto-refresh page once only after first load – Using JavaScript / JQuery
    • auto-refresh page once only after first load – Using JavaScript / JQuery (ok)
  • Sticky Scroller
    • Sticky Scroller phần 1 (ok)
    • Sticky Scroller phần 2 (ok)
    • owl carousel with dotsContainer (Dots + Text) (ok)
    • Owl Carousel 2 Thumbnails plugin (ok)
  • easy_background Background Slideshow (ok) dev.vieclam123.vn
  • scroll cực chất timviec365.vn, vieclam123.vn (ok)
  • Thư viện lightslider-master gần giống với Owl Carousel
  • Thư viện lightGallery để làm những bộ Sưu tập Gallery
  • Tự viết click slide (ok)
  • Draggable & Touch-friendly Slider Carousel In Pure JS (ok)
  • Slider owl được viết dưới dạng Thumnail (0k)
  • jquery.js:5092 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' (ok)
  • Added non-passive event listener to a scroll-blocking 'touchstart' event (ok)
  • sticky-mobile-menu-burger-menu (ok)
  • How can I add class to the first and last item among the visible items of Owl Carousel 2? (ok)
  • Owl-carousel2 DEMO - items in 2 rows (oke)
  • How can I create a carousel slick with multiple rows? (ok)
  • Một cách sử dụng create <style> để thêm style (ok)
  • Two Rows Olw Carousel (ok) vieclam123.vn
  • Chức năng tự gọi Javascript (ok) tự động auto
  • Click Next Javascript Base (ok)
  • Slider owl được viết dưới dạng Thumnail viết trên jsfiddle (0k)
  • 😆Creating a Countdown Timer, dakhoathienhoa.com.vn (oK)
  • 🥸NumScroller, Counter From Zero To Value - Javascript Animation (ok)
  • Click Button background-hover white (ok)
  • CodePen HomeLazy Loading Images (Ok)
  • Custom Date Javasript (job247.vn)
  • Tooltip
  • button thay đổi thẻ tags button và span trong Owl Carousel thành thẻ khác :)) (ok)
  • Thêm class vào navigation Owl Carousel (ok)
  • Click lần đầu sử event.preventDefault(); lầu sau not event.preventDefault();
  • landscape && landscape (ok)
  • Landscape && Portrait (ok) job247.vn
  • Hammer thư viện JavaScript chạm cho màn hình cảm ứng
  • jQuery Plugin To Add CSS3 Scrolling Effects On Your Web Page - Smoove menu (ok)
  • 😃Auto Expanding Table Of Contents Plugin - Dynamic Content menu (ok)
  • Tornis - watch and respond
  • scroll-manager
  • Xem thêm
  • Hướng dẫn nấu món "Lazy loading image" theo chuẩn 5 sao Google
  • Welcome to jquery-confirm!
    • jQuery Message Box Plugin Demo Page
  • Magnific-Popup Popup img
  • Slider Swiper Slider-Swiper dùng viết slider giống app
  • Magnific Popup Documentation
  • filter search (ok)
  • Is it possible to convert a select menu to buttons? (ok)
  • Changing selected option on button click select (ok) homef.vn hoặc inop.vyanh.net
  • scrooll animation (job247.vn) (ok)
  • Select2 tutorial
    • Single select boxes (ok)
  • [SELECT2] Disabling a Select2 control (ok)
  • Disabling options (ok)
  • placeholder (ok)
  • Hiển thị nút xóa các giá trị đã chọn + allowClear (ok)
  • Đọc dữ liệu từ một mảng, Data sources (ok)
  • Sử dụng database + php (ok)
  • [SELECT2] Sử dụng form + select2 + ajax + get value (ok)
  • Đọc dữ liệu từ nguồn khác sử dụng AJAX (ok)
  • Thiết lập giá trị mặc định ban đầu trên HTML như bình thường (ok)
  • Sử dụng Ajax để tải dữ liệu từ một nguồn khác (ok)
  • change form
Powered by GitBook
On this page

Was this helpful?

Cách sử dụng Thuộc tính async và defer trong JavaScript hay

https://hocwp.net/guide/thuoc-tinh-async-va-defer-trong-javascript

PreviousSử dụng async và defer full (Oke)NextReferenceError: Can't find variable: requestAnimationFrame

Last updated 8 months ago

Was this helpful?

Bạn thường hay thấy mọi người nhắc đến nên load JavaScript ở phía trước kết thúc thẻ body. Bài viết này mình sẽ cùng các bạn thảo luận qua về thuộc tính async và defer trong JavaScript, liệu 2 thuộc tính này có liên quan gì đến câu nói của mọi người?

Thuộc tính async và defer trong JavaScript

Ngày nay, khi mà các trình duyệt đã phát triển vượt bậc, đại đa số các trình duyệt đều hỗ trợ HTML5 và CSS3, bạn cũng nên tìm hiểu chút ít về cách sử dụng async và defer trong khi tải JavaScript chạy trên website.

Đối với thuộc tính async thì phiên bản IE 10 trở về sau mới hiểu được, còn các phiên bản cũ thì chưa có hỗ trợ async. Nhưng không sao, bạn vẫn có thể sử dụng thuộc tính defer để thay thế cho async. Cú pháp sử dụng rất đơn giản, bạn chỉ cần thêm vào thuộc tính cần sử dụng trong thẻ script như bên dưới:

// async
<script src="scripts.js" async></script>

// defer
<script src="scripts.js" defer></script>

Khi sử dụng async và defer thì bạn sẽ giải quyết được lỗi chặn hiển thị trong nội dung trong màn hình đầu tiên khi kiểm tra tốc độ website trên Google PageSpeed Insights. Câu hỏi được đặt ra ở đây là khi nào nên sử dụng async và khi nào nên dùng defer?

Khi bạn tải JavaScript theo cách thông thường, trình duyệt sẽ đọc trang web của bạn theo thứ tự từ trên xuống dưới, nếu gặp phải các đoạn mã JavaScript thì trình duyệt sẽ ngừng load HTML và xử lý code bên trong cho đến khi kết thúc thì mới tiếp tục tải tiếp, đó là lý do vì sao khi bạn kiểm tra tốc độ website trên PageSpeed của Google thì phát hiện lỗi Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên.

<html>
<head>
    <script type="text/javascript" src="script-cua-ban.js"></script>
</head>
<body>
<div>
    Hello, world!
</div>
</body>
</html>

Nếu bạn sử dụng thuộc tính async trong khi tải JavaScript, khi trình duyệt đụng phải đoạn code load JavaScript thì HTML bên dưới vẫn tiếp tục tải, đồng thời JavaScript vẫn được tải cùng lúc, cho đến khi nội dung của JavaScript được tải xong thì các lệnh bên trong sẽ được thực thi, không phụ thuộc vào vị trí thứ tự bạn tải JavaScript trong website của bạn. Trong quá trình các lệnh JavaScript được thực thi thì HTML sẽ tạm ngừng tải cho đến khi JavaScript chạy xong.

<html>
<head>
    <script type="text/javascript" src="script-cua-ban.js" async></script>
</head>
<body>
<div>
    Hello, world!
</div>
</body>
</html>

Nếu bạn sử dụng thuộc tính defer trong khi tải JavaScript, khi trình duyệt đụng phải đoạn code load JavaScript thì HTML bên dưới vẫn tiếp tục tải, đồng thời JavaScript vẫn được tải cùng lúc. Các lệnh bên trong tập tin JavaScript sẽ không được chạy cho đến khi HTML được tải xong.

Như vậy, cả 2 thuộc tính async và defer đều có cách thức tải giống nhau, đều tải đồng thời với các thẻ HTML khác. Chỉ khác là thời gian thực thi, async thì được thực thi ngay sau khi JavaScript được tải xong (cho dù HTML có được tải xong hết hay chưa, trong quá trình JavaScript được thực thi thì HTML bên dưới sẽ ngừng tải), trong khi defer thì các lệnh được chạy chỉ khi HTML đã được tải xong.

Khi nào nên dùng async và defer?

Qua nội dung giới thiệu bên trên, bạn có thể hiểu được cách thức hoạt động của async và defer rồi. Việc quan trọng của bạn là phải biết khi nào bạn nên dùng async, khi nào nên dùng defer.

  • Nếu script của bạn là một module nào đó, chạy độc lập và không phụ thuộc vào bất kỳ script nào khác thì dùng thuộc tính async.

  • Nếu script của bạn phụ thuộc vào một script khác hoặc được một script khác sử dụng lại (phụ thuộc vào) thì nên sử dụng thuộc tính defer.

  • Nếu script của bạn nhỏ chỉ có vài dòng code thì xuất ngay các đoạn code vào bên trong thẻ script luôn (inline script), đừng tạo file JavaScript độc lập và không dùng 2 thuộc tính kia.

  • Nếu script của bạn nhỏ như bên trên (ít code), và được một script khác sử dụng thuộc tính async phụ thuộc vào thì xuất script theo kiểu inline và đặt trước đoạn script async.

Để cho bạn dễ hình dung và có thể hiểu được cách thức hoạt động của async và defer, bạn có thể tham khảo như hình ảnh mình gửi bên dưới.

Đối với các trình duyệt cũ, bạn có thể sử dụng kết hợp cả async và defer trong khi load script để phòng ngừa trường hợp trình duyệt không hiểu thuộc tính async. Đó là đối với các thuộc tính bạn quyết định dùng async thì nên bỏ thêm defer vào, nhưng nếu bạn không quan trọng tới vấn đề lỗi hiển thị trên trình duyệt cũ thì bạn không cần quan tâm tới điều này.

Cách tải và thực thi JavaScript