Cách chúng tôi sử dụng WebAssugging để tăng tốc ứng dụng web lên 20 lần

Cách chúng tôi sử dụng WebAssugging để tăng tốc ứng dụng web lên 20 lần

Bài viết này thảo luận về một trường hợp tăng tốc ứng dụng trình duyệt bằng cách thay thế các phép tính JavaScript bằng WebAssembly.

WebAssugging - nó là gì?

Nói tóm lại, đây là định dạng lệnh nhị phân cho máy ảo dựa trên ngăn xếp. Wasm (tên viết tắt) thường được gọi là ngôn ngữ lập trình, nhưng thực tế không phải vậy. Định dạng hướng dẫn được thực thi trong trình duyệt cùng với JavaScript.

Điều quan trọng là có thể lấy được WebAssugging bằng cách biên dịch các nguồn bằng các ngôn ngữ như C/C++, Rust, Go. Ở đây việc gõ thống kê và cái gọi là mô hình bộ nhớ phẳng được sử dụng. Mã, như đã đề cập ở trên, được lưu trữ ở định dạng nhị phân nhỏ gọn, khiến nó nhanh gần như chạy ứng dụng bằng dòng lệnh. Những khả năng này đã dẫn đến sự gia tăng mức độ phổ biến của WebAssembly.

Chúng tôi nhắc nhở: cho tất cả độc giả của "Habr" - giảm giá 10 rúp khi đăng ký bất kỳ khóa học Skillbox nào bằng mã khuyến mại "Habr".

Hộp kỹ năng khuyến nghị: khóa học thực hành "Nhà phát triển di động PRO".

Hiện tại, Wasm được sử dụng trong nhiều ứng dụng, từ các trò chơi như Doom 3 đến các ứng dụng chuyển qua web như Autocad và Figma. Wasm cũng được sử dụng trong các lĩnh vực như máy tính không có máy chủ.

Bài viết này cung cấp ví dụ về cách sử dụng Wasm để tăng tốc dịch vụ web phân tích. Để rõ ràng, chúng tôi đã lấy một ứng dụng đang hoạt động được viết bằng C, được biên dịch thành WebAssembly. Kết quả sẽ được sử dụng để thay thế các phần JS hoạt động kém hiệu quả.

Chuyển đổi ứng dụng

Ví dụ này sẽ sử dụng dịch vụ trình duyệt fastq.bio, dành cho các nhà di truyền học. Công cụ này cho phép bạn đánh giá chất lượng giải trình tự DNA (giải mã).

Đây là một ví dụ về ứng dụng đang hoạt động:

Cách chúng tôi sử dụng WebAssugging để tăng tốc ứng dụng web lên 20 lần

Các chi tiết của quy trình không đáng đi sâu vì chúng khá phức tạp đối với những người không chuyên, nhưng tóm lại, các nhà khoa học có thể sử dụng đồ họa thông tin trên để hiểu liệu quá trình giải trình tự DNA có diễn ra suôn sẻ hay không và những vấn đề gì đã phát sinh.

Dịch vụ này có các lựa chọn thay thế, chương trình máy tính để bàn. Nhưng fastq.bio cho phép bạn tăng tốc công việc của mình bằng cách trực quan hóa dữ liệu. Trong hầu hết các trường hợp khác, bạn cần có khả năng làm việc với dòng lệnh, nhưng không phải nhà di truyền học nào cũng có kinh nghiệm cần thiết.

Mọi thứ hoạt động đơn giản. Đầu vào là dữ liệu được trình bày dưới dạng tệp văn bản. Tệp này được tạo bởi các công cụ giải trình tự chuyên dụng. Tệp này chứa danh sách các chuỗi DNA và điểm chất lượng cho từng nucleotide. Định dạng tệp là .fastq, đó là lý do tại sao dịch vụ này có tên như vậy.

Triển khai bằng JavaScript

Bước đầu tiên của người dùng khi làm việc với fastq.bio là chọn tệp thích hợp. Sử dụng đối tượng Tệp, ứng dụng sẽ đọc một mẫu dữ liệu ngẫu nhiên từ một tệp và xử lý lô đó. Công việc của JavaScript ở đây là thực hiện các thao tác chuỗi đơn giản và tính toán số liệu. Một trong số đó là số lượng nucleotide A, C, G và T trên các đoạn DNA khác nhau.

Sau khi tính toán các chỉ số cần thiết, chúng sẽ được hiển thị bằng Plotly.js và dịch vụ bắt đầu hoạt động với mẫu dữ liệu mới. Việc phân đoạn được thực hiện để cải thiện chất lượng của UX. Nếu bạn làm việc với tất cả dữ liệu cùng một lúc, quá trình này sẽ bị treo trong một thời gian vì các tệp có kết quả giải trình tự chiếm hàng trăm gigabyte dung lượng tệp. Dịch vụ này lấy các mẩu dữ liệu có kích thước từ 0,5 đến 1 MB và làm việc với chúng từng bước, xây dựng dữ liệu đồ họa.

Đây là cách nó hoạt động:

Cách chúng tôi sử dụng WebAssugging để tăng tốc ứng dụng web lên 20 lần

Hình chữ nhật màu đỏ chứa thuật toán chuyển đổi chuỗi để thu được hình ảnh trực quan. Đây là phần tính toán chuyên sâu nhất của dịch vụ. Thật đáng để thử thay thế nó bằng Wasm.

Kiểm tra WebAssugging

Để đánh giá khả năng sử dụng Wasm, nhóm dự án bắt đầu tìm kiếm các giải pháp tạo sẵn để tạo số liệu QC (QC - kiểm soát chất lượng) dựa trên tệp fastq. Việc tìm kiếm được thực hiện giữa các công cụ được viết bằng C, C++ hoặc Rust để có thể chuyển mã sang WebAssembly. Ngoài ra, công cụ này không được "thô", cần phải có một dịch vụ đã được các nhà khoa học thử nghiệm.

Kết quả là sự lựa chọn đã được đưa ra có lợi cho seqtk. Ứng dụng này khá phổ biến, là mã nguồn mở, ngôn ngữ nguồn là C.

Trước khi chuyển đổi sang Wasm, bạn nên xem nguyên tắc biên dịch seqtk cho máy tính để bàn. Theo Makefile, đây là những gì bạn cần:

# Compile to binary
$ gcc seqtk.c 
   -o seqtk 
   -O2 
   -lm 
   -lz

Về nguyên tắc, bạn có thể biên dịch seqtk bằng Emscripten. Nếu nó không có ở đó, chúng tôi sẽ làm. Hình ảnh docker.

$ docker pull robertaboukhalil/emsdk:1.38.26
$ docker run -dt --name wasm-seqtk robertaboukhalil/emsdk:1.38.26

Nếu muốn Bạn có thể tự lắp ráp nó, nhưng cần có thời gian.

Bên trong một thùng chứa, bạn có thể dễ dàng sử dụng emcc thay thế cho gcc:

# Compile to WebAssembly
$ emcc seqtk.c 
    -o seqtk.js 
    -O2 
    -lm 
    -s USE_ZLIB=1 
    -s FORCE_FILESYSTEM=1

Thay đổi tối thiểu:

Thay vì xuất ra tệp nhị phân, Emscripten sử dụng .wasm và .js để tạo các tệp dùng để chạy mô-đun WebAssemby.

Cờ USE_ZLIB được sử dụng để hỗ trợ thư viện zlib. Thư viện đã được phân phối và chuyển sang WebAssugging và Emscripten đã đưa nó vào dự án.

Hệ thống tập tin ảo Emscriptpten được kích hoạt. Cái này FS giống POSIX, chạy trong RAM bên trong trình duyệt. Khi trang được làm mới, bộ nhớ sẽ bị xóa.

Để hiểu lý do tại sao cần có hệ thống tệp ảo, bạn nên so sánh cách bạn chạy seqtk từ dòng lệnh với cách bạn chạy mô-đun WebAssembly đã biên dịch.

# On the command line
$ ./seqtk fqchk data.fastq
 
# In the browser console
> Module.callMain(["fqchk", "data.fastq"])

Cần có quyền truy cập vào hệ thống tệp ảo để không viết lại seqtk cho chuỗi thay vì nhập tệp. Trong trường hợp này, đoạn dữ liệu được hiển thị dưới dạng tệp data.fastq trong FS ảo với lệnh gọi main() seqtk trên đó.

Đây là kiến ​​trúc mới:

Cách chúng tôi sử dụng WebAssugging để tăng tốc ứng dụng web lên 20 lần

Hình này cho thấy thay vì tính toán trong luồng trình duyệt chính, WebWorkers. Phương pháp này cho phép bạn thực hiện các phép tính trong luồng nền mà không ảnh hưởng đến khả năng phản hồi của trình duyệt. Chà, bộ điều khiển WebWorker khởi động Worker, quản lý sự tương tác của nó với luồng chính.

Lệnh seqtk được chạy bằng Worker trên tệp được gắn. Sau khi hoàn thành việc thực thi, Worker tạo ra kết quả dưới dạng Promise. Khi luồng chính nhận được tin nhắn, kết quả sẽ được sử dụng để cập nhật biểu đồ. Và cứ thế trong nhiều lần lặp lại.

Hiệu suất của WebAssembly thì sao?

Để đánh giá sự thay đổi về hiệu suất, nhóm dự án đã sử dụng tham số hoạt động đọc mỗi giây. Thời gian cần thiết để xây dựng biểu đồ tương tác không được tính đến vì cả hai cách triển khai đều sử dụng JavaScript.

Khi sử dụng giải pháp dùng ngay, hiệu suất đã tăng gấp 9 lần.

Cách chúng tôi sử dụng WebAssugging để tăng tốc ứng dụng web lên 20 lần

Đây là một kết quả tuyệt vời, nhưng hóa ra, cũng có cơ hội để tối ưu hóa nó. Thực tế là một số lượng lớn kết quả phân tích QC không được seqtk sử dụng nên có thể bị xóa. Nếu bạn làm điều này, kết quả sẽ cải thiện gấp 13 lần so với JS.

Cách chúng tôi sử dụng WebAssugging để tăng tốc ứng dụng web lên 20 lần

Nó đạt được bằng cách đơn giản là nhận xét các lệnh printf().

Nhưng đó không phải là tất cả. Thực tế là ở giai đoạn này, fastq.bio nhận được kết quả phân tích bằng cách gọi các hàm C khác nhau. Mỗi hàm tính toán tập hợp đặc điểm riêng của mình để mỗi đoạn của tệp được đọc hai lần.

Để giải quyết vấn đề này, người ta quyết định kết hợp hai chức năng thành một. Kết quả là năng suất tăng gấp 20 lần.

Cách chúng tôi sử dụng WebAssugging để tăng tốc ứng dụng web lên 20 lần

Điều đáng chú ý là không phải lúc nào cũng có thể đạt được kết quả nổi bật như vậy. Trong một số trường hợp, hiệu suất sẽ giảm, do đó cần đánh giá từng trường hợp.

Tóm lại, chúng ta có thể nói rằng Wasm mang đến cơ hội cải thiện hiệu suất ứng dụng, nhưng bạn cần sử dụng nó một cách khôn ngoan.

Hộp kỹ năng khuyến nghị:

Nguồn: www.habr.com

Thêm một lời nhận xét