Introduction
Chúng ta có nhiều cách để hỗ trợ viết javascript cho những trình duyệt phiên bản cũ (IE 8, IE 9...), một trong số chúng là sử dụng Polyfill.Bạn đang xem: Polyfill là gì
What’s a polyfill?
Polyfill là một đoạn code để chỉ cho browser những cách để implement các javascript feature. Một khi chúng ta đã sử dụng polyfill cho một function nào đó thì sau đó chúng ta sẽ không cần lo lắng về việc liệu function hay method ta vừa viết có được browser support hay không nữa.Bạn đang xem: Polyfill là gì
Polyfill có phương thức hoạt động khá đơn giản như sau:
check xem feature có được browser support hay khôngnếu browser không support, nó sẽ add code để support việc implement featureLấy ví dụ về method Array.prototype.find, trong trường hợp browser không support Array.prototype.find, nó sẽ hướng dẫn browser cách để implement:
Using Polyfills
Về cơ bản, có 2 cách để sử dụng polyfill:
Polyfill manually: theo cách thủ công (giống như ta làm ở trên)Polyfill library: add nhiều polyfill cùng một lúc thông qua thư việnPolyfilling manually
Đầu tiên chúng ta phải search polyfill mà chúng ta cần, có thể thông qua google, hiện giờ hầu như các function hay method mới mà các browser cũ ít hỗ trợ đều có sẵn polyfill trên MDN.
Bạn đang xem: Sự khác biệt giữa shim và polyfill là gì ? polyfill là gì
Sau khi tìm được polyfill phù hợp, chúng ta có thể add nó vào như đoạn code bên trên.
Polyfill library
Using cutting-edge JavaScript features
Ngoài ra chúng ta có thể sử dụng Babel - là tool với chức năng chính là compile Javascript, trong quá trình compile nó có thể đọc các file js, sau đó convert các file đó về dạng mà browser có thể hiểu được.
Xem thêm: Vecto Chỉ Phương Và Vecto Pháp Tuyến Trong Không Gian, Cách Tìm Vecto Pháp Tuyến Của Mặt Phẳng
What if polyfills aren’t enough?
Nếu trong trường hợp polyfill vẫn không đủ để support một feature nào đó, thì chúng ta nên cân nhắc lại một chút:
Liệu có cần dùng chính xác feature đấy cho các browser khác nhau không? chúng ta có thể sử dụng sang 1 feature khác tương đương nhưng đảm bảo các browser đều supportHoặc chúng ta có thể xử lý theo hướng khác mà không cần dùng đến feature đấy, hay thậm chí là không cần đến javascript?How to tell if a browser supports the feature?
Để check xem feature mà chúng ta đang sử dụng được các browser nào hỗ trợ, ta có thể dùng caniuse.com. Viết javascript feature mà chúng ta muốn check, sau đó chúng ta có thể xem kết quả, vd như với Array.prototype.find:


Beware the cost of JavaScript
Khi chúng ta sử dụng polyfill, đồng nghĩa với việc chúng ta sẽ thêm nhiều dòng code javascript hơn. Một khi số lượng file js quá lớn, cũng sẽ gây nhiều ảnh hưởng:
Những browser cũ thường được sử dụng trên những hệ thống cũ, có nghĩa là việc phải tải số lượng file js lớn sẽ ảnh hưởng đến performanceSố lượng file js càng nhiều, quá trình Javascript bundle sẽ càng mất nhiều thời gian hơnSummary
Bài viết nhằm chia sẻ về cách để support javascript với các browser cũ qua việc sử dụng Polyfill và các thư viện hay các tool liên quan. Bài viết còn nhiều hạn chế, cảm ơn bạn đã dành thời gian theo dõi.