Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly

Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly

Αυτό το άρθρο εξετάζει μια περίπτωση επιτάχυνσης μιας εφαρμογής προγράμματος περιήγησης με την αντικατάσταση των υπολογισμών JavaScript με το WebAssembly.

WebAssembly - τι είναι;

Εν ολίγοις, αυτή είναι μια δυαδική μορφή εντολών για μια στοιβαγμένη εικονική μηχανή. Συχνά το Wasm (συντομευμένο όνομα) ονομάζεται γλώσσα προγραμματισμού, αλλά δεν είναι. Η μορφή της εντολής εκτελείται στο πρόγραμμα περιήγησης μαζί με JavaScript.

Είναι σημαντικό ότι το WebAssembly μπορεί να αποκτηθεί με τη μεταγλώττιση πηγών σε γλώσσες όπως C / C ++, Rust, Go. Χρησιμοποιεί στατιστική πληκτρολόγηση και το λεγόμενο μοντέλο επίπεδης μνήμης. Ο κώδικας, όπως αναφέρθηκε παραπάνω, αποθηκεύεται σε μια συμπαγή δυαδική μορφή, η οποία τον καθιστά σχεδόν τόσο γρήγορο σαν να εκτελούνταν η εφαρμογή από τη γραμμή εντολών. Αυτά τα χαρακτηριστικά οδήγησαν στην αύξηση της δημοτικότητας του WebAssembly.

Υπενθύμιση: για όλους τους αναγνώστες του "Habr" - έκπτωση 10 ρούβλια κατά την εγγραφή σε οποιοδήποτε μάθημα Skillbox χρησιμοποιώντας τον κωδικό προσφοράς "Habr".

Το Skillbox προτείνει: Πρακτικό μάθημα "Mobile Developer PRO".

Το Wasm χρησιμοποιείται επί του παρόντος σε πολλές εφαρμογές, από παιχνίδια όπως το Doom 3 έως εφαρμογές που έχουν μεταφερθεί στο διαδίκτυο όπως το Autocad και το Figma. Το Wasm εφαρμόζεται επίσης σε ένα πεδίο όπως ο υπολογισμός χωρίς διακομιστή.

Αυτό το άρθρο παρέχει ένα παράδειγμα χρήσης του Wasm για την επιτάχυνση μιας υπηρεσίας web analytics. Για λόγους σαφήνειας, πήραμε μια εφαρμογή εργασίας γραμμένη σε C, η οποία θα μεταγλωττιστεί στο WebAssembly. Το αποτέλεσμα θα χρησιμοποιηθεί για την αντικατάσταση τμημάτων JS χαμηλής απόδοσης.

Μετασχηματισμός εφαρμογής

Το παράδειγμα θα χρησιμοποιεί την υπηρεσία προγράμματος περιήγησης fastq.bio, η οποία προορίζεται για γενετιστές. Το εργαλείο σας επιτρέπει να αξιολογήσετε την ποιότητα της αλληλουχίας DNA (αποκωδικοποίηση).

Ακολουθεί ένα παράδειγμα εφαρμογής σε δράση:

Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly

Οι λεπτομέρειες της διαδικασίας δεν χρειάζεται να δοθούν καθώς είναι αρκετά περίπλοκες για μη ειδικούς, αλλά εν συντομία, οι επιστήμονες μπορούν να χρησιμοποιήσουν το παραπάνω infographic για να καταλάβουν εάν η διαδικασία αλληλουχίας DNA πήγε ομαλά και ποια προβλήματα προέκυψαν.

Αυτή η υπηρεσία έχει εναλλακτικές λύσεις, προγράμματα επιτραπέζιου υπολογιστή. Αλλά το fastq.bio σάς επιτρέπει να επιταχύνετε τα πράγματα οπτικοποιώντας τα δεδομένα. Στις περισσότερες άλλες περιπτώσεις, πρέπει να είστε σε θέση να εργαστείτε με τη γραμμή εντολών, αλλά δεν έχουν όλοι οι γενετιστές την απαραίτητη εμπειρία.

Όλα λειτουργούν απλά. Η είσοδος είναι δεδομένα που παρουσιάζονται ως αρχείο κειμένου. Αυτό το αρχείο δημιουργείται από εξειδικευμένα εργαλεία αλληλουχίας. Το αρχείο περιέχει μια λίστα με αλληλουχίες DNA και μια βαθμολογία ποιότητας για κάθε νουκλεοτίδιο. Η μορφή αρχείου είναι .fastq, εξ ου και το όνομα της υπηρεσίας.

Υλοποίηση σε JavaScript

Το πρώτο βήμα για τον χρήστη όταν εργάζεται με το fastq.bio είναι να επιλέξει το κατάλληλο αρχείο. Χρησιμοποιώντας το αντικείμενο Αρχείο, η εφαρμογή διαβάζει ένα τυχαίο δείγμα δεδομένων από το αρχείο και επεξεργάζεται αυτήν τη δέσμη. Η αποστολή της JavaScript εδώ είναι να εκτελεί απλές πράξεις συμβολοσειράς και να υπολογίζει τους εκθέτες. Ένα από αυτά είναι ο αριθμός των νουκλεοτιδίων A, C, G και T σε διαφορετικά θραύσματα DNA.

Μετά τον υπολογισμό των απαιτούμενων δεικτών, οπτικοποιούνται χρησιμοποιώντας το Plotly.js και η υπηρεσία ξεκινά να λειτουργεί με ένα νέο δείγμα δεδομένων. Η διαίρεση σε τμήματα γίνεται για να βελτιωθεί η ποιότητα του UX. Εάν εργάζεστε με όλα τα δεδομένα ταυτόχρονα, η διαδικασία θα σταματήσει για λίγο, επειδή τα αρχεία με τα αποτελέσματα της αλληλουχίας καταλαμβάνουν εκατοντάδες gigabyte χώρου αρχείων. Η υπηρεσία, από την άλλη πλευρά, λαμβάνει τμήματα δεδομένων που κυμαίνονται σε μέγεθος από 0,5 έως 1 MB και συνεργάζεται με αυτά βήμα προς βήμα, δημιουργώντας δεδομένα γραφικών.

Вот как это работает:

Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly

Το κόκκινο ορθογώνιο περιέχει τον αλγόριθμο μετατροπής συμβολοσειράς για απόδοση. Αυτό είναι το πιο υπολογιστικά φορτωμένο μέρος της υπηρεσίας. Αξίζει να προσπαθήσετε να το αντικαταστήσετε με το Wasm.

Δοκιμή WebAssembly

Για να αξιολογήσει τη δυνατότητα χρήσης του Wasm, η ομάδα του έργου άρχισε να αναζητά έτοιμες λύσεις για τη δημιουργία μιας μέτρησης QC (QC - έλεγχος ποιότητας) με βάση αρχεία fastq. Η αναζήτηση πραγματοποιήθηκε μεταξύ εργαλείων γραμμένων σε C, C ++ ή Rust, έτσι ώστε να ήταν δυνατή η μεταφορά του κώδικα στο WebAssembly. Επιπλέον, το εργαλείο δεν πρέπει να είναι «ακατέργαστο», απαιτούνταν ήδη δοκιμασμένη υπηρεσία από επιστήμονες.

Ως αποτέλεσμα, η επιλογή έγινε υπέρ του seqtk. Η εφαρμογή είναι αρκετά δημοφιλής, είναι ανοιχτού κώδικα, η γλώσσα πηγής είναι η C.

Πριν μετατρέψετε σε Wasm, θα πρέπει να εξετάσετε την αρχή της μεταγλώττισης seqtk για την επιφάνεια εργασίας. Σύμφωνα με το Makefile, ορίστε τι χρειάζεται:

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

Κατ 'αρχήν, μπορείτε να μεταγλωττίσετε το seqtk χρησιμοποιώντας το Emscripten. Αν δεν είναι εκεί, τα βγάζουμε πέρα. Docker τρόπος.

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

Εάν είναι επιθυμητό, μπορείτε να το συναρμολογήσετε μόνοι σαςαλλά αυτό θέλει χρόνο.

Μέσα στο δοχείο, μπορείτε εύκολα να πάρετε το emcc ως εναλλακτική λύση στο gcc:

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

Ελάχιστες αλλαγές:

Αντί για έξοδο σε ένα δυαδικό αρχείο, το Emscripten χρησιμοποιεί .wasm και .js για τη δημιουργία αρχείων, τα οποία χρησιμοποιείται για την εκτέλεση της λειτουργικής μονάδας WebAssemby.

Η σημαία USE_ZLIB χρησιμοποιείται για την υποστήριξη της βιβλιοθήκης zlib. Η βιβλιοθήκη διανέμεται και μεταφέρεται στο WebAssembly και το Emscripten την περιλαμβάνει στο έργο.

Το εικονικό σύστημα αρχείων Emscriptpten είναι ενεργοποιημένο. Αυτό FS που μοιάζει με POSIX, που εκτελείται σε μνήμη RAM μέσα στο πρόγραμμα περιήγησης. Όταν η σελίδα ανανεώνεται, η μνήμη διαγράφεται.

Για να κατανοήσετε γιατί χρειάζεται ένα εικονικό σύστημα αρχείων, αξίζει να συγκρίνετε τον τρόπο που εκτελείτε το seqtk από τη γραμμή εντολών με τον τρόπο που εκτελείτε μια μεταγλωττισμένη λειτουργική μονάδα WebAssembly.

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

Η πρόσβαση στο εικονικό σύστημα αρχείων είναι απαραίτητη για να μην ξαναγραφεί το seqtk για εισαγωγή συμβολοσειράς και όχι για εισαγωγή αρχείου. Σε αυτήν την περίπτωση, το τμήμα δεδομένων εμφανίζεται ως αρχείο data.fastq σε ένα εικονικό σύστημα αρχείων με μια κλήση σε main() seqtk σε αυτό.

Εδώ είναι η νέα αρχιτεκτονική:

Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly

Το σχήμα δείχνει ότι αντί να υπολογίζει στο κύριο νήμα του προγράμματος περιήγησης, χρησιμοποιεί webworkers. Αυτή η μέθοδος καθιστά δυνατή την εκτέλεση υπολογισμών σε ένα νήμα φόντου χωρίς να υποβαθμίζεται η ανταπόκριση του προγράμματος περιήγησης. Λοιπόν, ο ελεγκτής WebWorker ξεκινά το Worker, διαχειριζόμενος την αλληλεπίδρασή του με το κύριο νήμα.

Η εντολή seqtk εκτελείται με ένα Worker σε ένα προσαρτημένο αρχείο. Μετά την ολοκλήρωση της εκτέλεσης, ο Εργαζόμενος εκδίδει το αποτέλεσμα με τη μορφή Υπόσχεσης. Όταν το μήνυμα λαμβάνεται από το κύριο νήμα, το αποτέλεσμα χρησιμοποιείται για την ενημέρωση των γραφημάτων. Και ούτω καθεξής για πολλές επαναλήψεις.

Τι γίνεται με την απόδοση του WebAssembly;

Για να αξιολογήσει την αλλαγή στην απόδοση, η ομάδα του έργου χρησιμοποίησε την παράμετρο των πράξεων ανάγνωσης ανά δευτερόλεπτο. Ο χρόνος διαδραστικής γραφικής παράστασης δεν λαμβάνεται υπόψη επειδή χρησιμοποιείται JavaScript και στις δύο υλοποιήσεις.

Όταν χρησιμοποιούσατε τη λύση out-of-the-box, το κέρδος απόδοσης ήταν εννέα φορές.

Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly

Αυτό είναι ένα εξαιρετικό αποτέλεσμα, αλλά, όπως αποδείχθηκε, υπάρχει η ευκαιρία να το βελτιστοποιήσετε. Το γεγονός είναι ότι μεγάλος αριθμός αποτελεσμάτων ανάλυσης QC δεν χρησιμοποιούνται από το seqtk, επομένως μπορούν να διαγραφούν. Εάν γίνει αυτό, το αποτέλεσμα είναι 13 φορές καλύτερο από ό,τι στο JS.

Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly

Αυτό επιτεύχθηκε σχολιάζοντας απλώς τις εντολές printf().

Αλλά δεν είναι μόνο αυτό. Το θέμα είναι ότι σε αυτό το στάδιο, το fastq.bio λαμβάνει τα αποτελέσματα της ανάλυσης καλώντας διάφορες συναρτήσεις C. Κάθε μία από αυτές υπολογίζει το δικό της σύνολο χαρακτηριστικών, έτσι ώστε κάθε κομμάτι του αρχείου να διαβάζεται δύο φορές.

Προκειμένου να ξεπεραστεί αυτό το πρόβλημα, αποφασίστηκε να συνδυαστούν οι δύο λειτουργίες σε μία. Ως αποτέλεσμα, η παραγωγικότητα αυξήθηκε κατά 20 φορές.

Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly

Θα πρέπει να σημειωθεί ότι ένα τέτοιο εξαιρετικό αποτέλεσμα δεν μπορεί πάντα να επιτευχθεί. Σε ορισμένες περιπτώσεις, η απόδοση πέφτει, επομένως αξίζει να αξιολογήσετε κάθε συγκεκριμένη περίπτωση.

Ως συμπέρασμα, μπορούμε να πούμε ότι το Wasm παρέχει μια ευκαιρία να βελτιώσετε την απόδοση της εφαρμογής, αλλά πρέπει να τη χρησιμοποιήσετε με σύνεση.

Το Skillbox προτείνει:

Πηγή: www.habr.com

Προσθέστε ένα σχόλιο