21 May 2023

Ivy trong Angular là gì?

Rendering engine

Công cụ kết xuất (Rendering engine) là một phần mềm hoặc chương trình bên trong trình duyệt phân tích cú pháp và biến đổi mã HTML và CSS để trình duyệt có thể hiển thị.


Công cụ trình duyệt biến đổi CSS và JS và hiển thị kết quả ra màn hình

Tuy nhiên, các trình duyệt không thể hiển thị mã HTML và CSS đến từ Angular hoặc bất kỳ khung nào khác vì HTML và CSS không thuần túy (chúng có thể nằm trong các mẫu hoặc thành phần tùy chỉnh). Do đó, cần có thứ gì đó để chuyển đổi các thành phần này thành thứ mà trình duyệt có thể hiển thị. Đây là nơi công cụ kết xuất Angular xuất hiện.

Ivy rendering engine

Ivy là công cụ kết xuất biến mã Angular (mẫu HTML + TS) thành HTML và JavaScript thuần túy mà trình duyệt hiểu được. Khi quá trình chuyển đổi này hoàn tất, trình duyệt có thể hiểu và hiển thị HTML và JavaScript kết quả để hiển thị nội dung, như được minh họa trong hình trên.

Ivy là bản viết lại hoàn chỉnh của View Engine—công cụ mặc định để xây dựng các ứng dụng Angular từ Angular 4 cho đến khi nó ngừng hoạt động trong Angular 8. Đây là công cụ thứ ba kể từ khi tạo ra Angular vào năm 2016 và Angular đã xuất xưởng cùng với Ivy kể từ khi giới thiệu của Angular 9 cho đến ngày nay.


Tóm tắt về cách thức hoạt động của Ivy

Ivy Lợi ích khi sử dụng Ivy

Ivy đi kèm với nhiều cải tiến, bao gồm:

Biên dịch AOT: Ahead of Time (AOT) biên dịch một ứng dụng trước khi chuyển sang môi trường thời gian chạy như trình duyệt. AOT giảm tải cho trình duyệt vì nó biên dịch trước ứng dụng trước khi đến trình duyệt.

Kích thước gói nhỏ hơn: Kích thước gói là lượng mã mà trình duyệt sẽ phải tải xuống để tải ứng dụng của bạn. Ivy giảm kích thước gói thông qua AOT và tree-shaking.

Cải thiện tốc độ: Các ứng dụng góc cạnh tải nhanh hơn trước nhờ kích thước gói nhỏ hơn và khả năng rung cây của Ivy.

Ivy nhanh hơn nhiều so với người tiền nhiệm của nó bởi vì nó hiện được cung cấp với trình biên dịch trước thời hạn (AOT) theo mặc định. AOT cho phép trình duyệt tải ứng dụng nhanh chóng mà không cần tải xuống trình biên dịch và tự xây dựng ứng dụng.

Biên dịch Just-in-time (JIT) là cơ chế biên dịch mặc định trong các phiên bản trước của Angular , qua đó trình duyệt sẽ tải xuống trình biên dịch và xây dựng ứng dụng. Tuy nhiên, quá trình này không hiệu quả vì nó chậm và gây gánh nặng cho trình duyệt.

Lưu ý: Angular chỉ có một trình biên dịch. AOT và JIT chỉ đề cập đến cách thức và thời điểm bạn sử dụng trình biên dịch.

  • Với AOT, trình biên dịch sẽ chạy khi xây dựng Build.
  • Với JIT, trình biên dịch chạy trong thời gian chạy Runtime.

Công cụ Ivy là một phần quan trọng của Angular. Do đó, có một ý tưởng cơ bản về những gì nó làm là quan trọng.

0 nhận xét:

Post a Comment

 

BACK TO TOP

Xuống cuối trang