Cách công cụ javascript hoạt động trong trình duyệt

Trong khi CSS đang được phân tích cú pháp và CSSOM được tạo, các nội dung khác, bao gồm cả tệp JavaScript, được tải xuống. Điều này xảy ra nhờ vào preloader mà chúng tôi đã đề cập trong các bài viết trước

A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.

5. THỰC HIỆN JAVASCRIPT

Vì vậy, sau khi chúng tôi nhận được tệp Javascript từ máy chủ, mã được diễn giải, biên dịch, phân tích cú pháp và thực thi. Máy tính không thể hiểu mã Javascript, chỉ trình duyệt mới có thể. Mã JS cần được dịch sang thứ gì đó mà máy tính có thể làm việc được và đây là công việc của Javascript browser engine (đừng nhầm với browser engine). Tùy thuộc vào trình duyệt, các công cụ JS có thể có các tên khác nhau và hoạt động khác nhau

công cụ Javascript

Công cụ javascript (đôi khi còn được gọi là ECMAScript engine) là một phần mềm thực thi (chạy) mã Javascript trong trình duyệt và không chỉ (công cụ V8 là thành phần cốt lõi của Nút. môi trường js chẳng hạn)

Các công cụ JavaScript thường được phát triển bởi các nhà cung cấp trình duyệt web và mọi trình duyệt chính đều có một. Chúng tôi đã nói rằng các trình duyệt được sử dụng nhiều nhất cho đến ngày hôm nay là Chrome, Safari, Edge và Firefox. Mỗi người đang sử dụng một công cụ Javascript khác nhau và đây là

V8
V8 là công cụ JavaScript hiệu suất cao của Google. Nó được viết bằng C++ và nó được sử dụng trong Chrome và trong Node. js, trong số những người khác. Nó triển khai preloader0 (một tiêu chuẩn JavaScript nhằm đảm bảo khả năng tương tác của các trang web trên các trình duyệt web khác nhau) và preloader1. Nó triển khai ECMA-262.

JavaScriptCore
JavaScriptCore là công cụ JavaScript tích hợp sẵn dành cho WebKit và nó cung cấp năng lượng cho trình duyệt Safari, Mail và các ứng dụng khác được sử dụng trên macOS. Nó hiện triển khai ECMAScript như trong đặc tả ECMA-262. Ngoài ra, nó còn được gọi là preloader2 hoặc preloader3.

Chakra
Chakra là một công cụ Javascript được Microsoft phát triển cho trình duyệt web Microsoft Edge và các ứng dụng Windows khác. Nó triển khai ECMAScript 5. 1 và có hỗ trợ một phần (đang phát triển) cho ECMAScript 6. Nó được viết bằng C++.

SpiderMonkey
SpiderMonkey là Công cụ Javascript và WebAssembly của Mozilla. Nó được viết bằng C++, Javascript và Rust và nó được sử dụng để cung cấp năng lượng cho Firefox, Servo và các dự án khác.

Ban đầu, các công cụ Javascript là những trình thông dịch đơn giản. Các trình duyệt hiện đại mà chúng ta sử dụng ngày nay có khả năng thực hiện một thứ gọi là preloader4, một sự pha trộn giữa preloader5 và preloader6

Biên dịch
Trong quá trình biên dịch, một phần mềm có tên là preloader7 lấy mã được viết bằng ngôn ngữ cấp cao và chuyển đổi mã đó thành mã máy cùng một lúc. Một tệp trung gian (được gọi là preloader8) được tạo và tệp đó có thể chạy trên bất kỳ máy nào. Sau khi thực hiện các bước này, mã có thể được thực thi (ngay sau đó, đôi khi trong tương lai hoặc không bao giờ).

Thông dịch
Trong quá trình thông dịch, trình thông dịch sẽ duyệt qua từng dòng mã Javascript và thực thi nó ngay lập tức. Không có quá trình biên dịch nào diễn ra nên không có Mã đối tượng nào được tạo (đầu ra của mã được tạo bởi chính trình thông dịch, sử dụng các cơ chế bên trong của nó). Các phiên bản Javascript cũ hơn sử dụng kiểu thực thi mã này.

Biên dịch JIT
preloader9 là một tính năng của trình thông dịch cho một ngôn ngữ nhất định và nó cố gắng tận dụng cả hai A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.0. Cho dù trong thời gian A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.1, mã có được dịch trước khi nó được thực thi hay không, trong A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.2, mã được dịch A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.3 (tại thời điểm chạy). Vì vậy, chúng tôi có thể nói rằng mã nguồn được chuyển đổi thành mã máy một cách nhanh chóng. Các phiên bản Javascript mới hơn sử dụng kiểu thực thi mã này.

Một khía cạnh rất quan trọng về biên dịch JIT là nó sẽ biên dịch mã nguồn thành hướng dẫn mã máy của máy đang chạy. Điều này có nghĩa là mã máy kết quả được tối ưu hóa cho kiến ​​trúc CPU của máy đang chạy

Nói một cách siêu đơn giản, ba quy trình này có thể được nối lại thành

• Trình biên dịch. dịch mã
• Thông dịch viên. chạy mã
• Trình biên dịch JIT. dịch trong khi chạy mã

Ngày nay, ranh giới giữa các điều khoản preloader5 và preloader6 đã trở nên rất mờ nhạt nên chủ đề này có thể được tranh luận rộng rãi. Nếu bạn muốn biết thêm về các quy trình này, bạn có thể đọc bài viết này trên Mozilla Hacks để bắt đầu

Lưu ý rằng tôi đã đề cập đến phiên bản Javascript cũ hơn và mới hơn. Các trình duyệt không hỗ trợ các phiên bản ngôn ngữ mới hơn sẽ diễn giải mã trong khi các trình duyệt hỗ trợ sẽ sử dụng một số phiên bản JIT để thực thi mã (các công cụ V8, Chakra JavaScriptCore và SpiderMonkey đều sử dụng JIT). Sự thật là mặc dù Javascript là một ngôn ngữ thông dịch (không cần biên dịch) nhưng hầu hết các trình duyệt ngày nay sẽ sử dụng biên dịch JIT để chạy mã, thay vì thông dịch thuần túy.

Mã Javascript được xử lý như thế nào

Khi mã Javascript đi vào công cụ Javascript, nó sẽ được phân tích cú pháp như một bước đầu tiên. Điều này có nghĩa là mã được đọc và trong khi điều này xảy ra, mã được chuyển đổi thành cấu trúc dữ liệu có tên là A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.6 (AST). Mã sẽ được chia thành các phần có liên quan đến ngôn ngữ (như từ khóa A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.7 hoặc A preloader is like a parser that scans the HTML file while the main parser is processing the HTML code. Its role is to look for resources like stylesheets, scripts or images (that also need to be retrieved from a server) and request them. Hopefully, by the time the HTML is parsed, those resources are already downloaded and ready to be processed.8) và sau đó tất cả các phần này sẽ xây dựng Cây cú pháp trừu tượng

Giả sử chúng ta có một tệp chứa một chương trình chỉ thực hiện một việc và đó là xác định một biến

const age = 25;

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đây là cách dòng mã cực kỳ siêu đơn giản này trông giống như một Cây cú pháp trừu tượng (Tôi đang sử dụng @babel/parser-7. 16. 12)

Nếu bạn muốn tự chuyển đổi một số Javascript thành Cây cú pháp trừu tượng, bạn có thể sử dụng công cụ này. Kết quả CUỐI CÙNG sau khi viết biến của tôi thực sự lớn hơn nhiều và có nhiều nút hơn được ẩn trong ảnh chụp màn hình

Sau khi AST được xây dựng, nó sẽ được dịch sang mã máy và được thực thi ngay lập tức, vì Javascript hiện đại sử dụng trình biên dịch Just-In-Time. Việc thực thi mã này sẽ được thực hiện bởi công cụ Javascript, sử dụng thứ gọi là "ngăn xếp cuộc gọi"

JavaScript hoạt động như thế nào trong trình duyệt?

Công cụ JavaScript của trình duyệt là gì?

Động cơ V8 hoạt động như thế nào trong trình duyệt?

Thực thi JavaScript hoạt động như thế nào?