ProHoster > Blog > διαχείριση > Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly
Πώς επιταχύναμε μια εφαρμογή Ιστού 20 φορές χρησιμοποιώντας το WebAssembly
Αυτό το άρθρο εξετάζει μια περίπτωση επιτάχυνσης μιας εφαρμογής προγράμματος περιήγησης με την αντικατάσταση των υπολογισμών JavaScript με το WebAssembly.
WebAssembly - τι είναι;
Εν ολίγοις, αυτή είναι μια δυαδική μορφή εντολών για μια στοιβαγμένη εικονική μηχανή. Συχνά το Wasm (συντομευμένο όνομα) ονομάζεται γλώσσα προγραμματισμού, αλλά δεν είναι. Η μορφή της εντολής εκτελείται στο πρόγραμμα περιήγησης μαζί με JavaScript.
Είναι σημαντικό ότι το WebAssembly μπορεί να αποκτηθεί με τη μεταγλώττιση πηγών σε γλώσσες όπως C / C ++, Rust, Go. Χρησιμοποιεί στατιστική πληκτρολόγηση και το λεγόμενο μοντέλο επίπεδης μνήμης. Ο κώδικας, όπως αναφέρθηκε παραπάνω, αποθηκεύεται σε μια συμπαγή δυαδική μορφή, η οποία τον καθιστά σχεδόν τόσο γρήγορο σαν να εκτελούνταν η εφαρμογή από τη γραμμή εντολών. Αυτά τα χαρακτηριστικά οδήγησαν στην αύξηση της δημοτικότητας του WebAssembly.
Υπενθύμιση:για όλους τους αναγνώστες του "Habr" - έκπτωση 10 ρούβλια κατά την εγγραφή σε οποιοδήποτε μάθημα Skillbox χρησιμοποιώντας τον κωδικό προσφοράς "Habr".
Το Wasm χρησιμοποιείται επί του παρόντος σε πολλές εφαρμογές, από παιχνίδια όπως το Doom 3 έως εφαρμογές που έχουν μεταφερθεί στο διαδίκτυο όπως το Autocad και το Figma. Το Wasm εφαρμόζεται επίσης σε ένα πεδίο όπως ο υπολογισμός χωρίς διακομιστή.
Αυτό το άρθρο παρέχει ένα παράδειγμα χρήσης του Wasm για την επιτάχυνση μιας υπηρεσίας web analytics. Για λόγους σαφήνειας, πήραμε μια εφαρμογή εργασίας γραμμένη σε C, η οποία θα μεταγλωττιστεί στο WebAssembly. Το αποτέλεσμα θα χρησιμοποιηθεί για την αντικατάσταση τμημάτων JS χαμηλής απόδοσης.
Μετασχηματισμός εφαρμογής
Το παράδειγμα θα χρησιμοποιεί την υπηρεσία προγράμματος περιήγησης fastq.bio, η οποία προορίζεται για γενετιστές. Το εργαλείο σας επιτρέπει να αξιολογήσετε την ποιότητα της αλληλουχίας DNA (αποκωδικοποίηση).
Ακολουθεί ένα παράδειγμα εφαρμογής σε δράση:
Οι λεπτομέρειες της διαδικασίας δεν χρειάζεται να δοθούν καθώς είναι αρκετά περίπλοκες για μη ειδικούς, αλλά εν συντομία, οι επιστήμονες μπορούν να χρησιμοποιήσουν το παραπάνω infographic για να καταλάβουν εάν η διαδικασία αλληλουχίας DNA πήγε ομαλά και ποια προβλήματα προέκυψαν.
Αυτή η υπηρεσία έχει εναλλακτικές λύσεις, προγράμματα επιτραπέζιου υπολογιστή. Αλλά το fastq.bio σάς επιτρέπει να επιταχύνετε τα πράγματα οπτικοποιώντας τα δεδομένα. Στις περισσότερες άλλες περιπτώσεις, πρέπει να είστε σε θέση να εργαστείτε με τη γραμμή εντολών, αλλά δεν έχουν όλοι οι γενετιστές την απαραίτητη εμπειρία.
Όλα λειτουργούν απλά. Η είσοδος είναι δεδομένα που παρουσιάζονται ως αρχείο κειμένου. Αυτό το αρχείο δημιουργείται από εξειδικευμένα εργαλεία αλληλουχίας. Το αρχείο περιέχει μια λίστα με αλληλουχίες DNA και μια βαθμολογία ποιότητας για κάθε νουκλεοτίδιο. Η μορφή αρχείου είναι .fastq, εξ ου και το όνομα της υπηρεσίας.
Υλοποίηση σε JavaScript
Το πρώτο βήμα για τον χρήστη όταν εργάζεται με το fastq.bio είναι να επιλέξει το κατάλληλο αρχείο. Χρησιμοποιώντας το αντικείμενο Αρχείο, η εφαρμογή διαβάζει ένα τυχαίο δείγμα δεδομένων από το αρχείο και επεξεργάζεται αυτήν τη δέσμη. Η αποστολή της JavaScript εδώ είναι να εκτελεί απλές πράξεις συμβολοσειράς και να υπολογίζει τους εκθέτες. Ένα από αυτά είναι ο αριθμός των νουκλεοτιδίων A, C, G και T σε διαφορετικά θραύσματα DNA.
Μετά τον υπολογισμό των απαιτούμενων δεικτών, οπτικοποιούνται χρησιμοποιώντας το Plotly.js και η υπηρεσία ξεκινά να λειτουργεί με ένα νέο δείγμα δεδομένων. Η διαίρεση σε τμήματα γίνεται για να βελτιωθεί η ποιότητα του UX. Εάν εργάζεστε με όλα τα δεδομένα ταυτόχρονα, η διαδικασία θα σταματήσει για λίγο, επειδή τα αρχεία με τα αποτελέσματα της αλληλουχίας καταλαμβάνουν εκατοντάδες gigabyte χώρου αρχείων. Η υπηρεσία, από την άλλη πλευρά, λαμβάνει τμήματα δεδομένων που κυμαίνονται σε μέγεθος από 0,5 έως 1 MB και συνεργάζεται με αυτά βήμα προς βήμα, δημιουργώντας δεδομένα γραφικών.
Вот как это работает:
Το κόκκινο ορθογώνιο περιέχει τον αλγόριθμο μετατροπής συμβολοσειράς για απόδοση. Αυτό είναι το πιο υπολογιστικά φορτωμένο μέρος της υπηρεσίας. Αξίζει να προσπαθήσετε να το αντικαταστήσετε με το Wasm.
Δοκιμή WebAssembly
Για να αξιολογήσει τη δυνατότητα χρήσης του Wasm, η ομάδα του έργου άρχισε να αναζητά έτοιμες λύσεις για τη δημιουργία μιας μέτρησης QC (QC - έλεγχος ποιότητας) με βάση αρχεία fastq. Η αναζήτηση πραγματοποιήθηκε μεταξύ εργαλείων γραμμένων σε C, C ++ ή Rust, έτσι ώστε να ήταν δυνατή η μεταφορά του κώδικα στο WebAssembly. Επιπλέον, το εργαλείο δεν πρέπει να είναι «ακατέργαστο», απαιτούνταν ήδη δοκιμασμένη υπηρεσία από επιστήμονες.
Ως αποτέλεσμα, η επιλογή έγινε υπέρ του seqtk. Η εφαρμογή είναι αρκετά δημοφιλής, είναι ανοιχτού κώδικα, η γλώσσα πηγής είναι η C.
Πριν μετατρέψετε σε Wasm, θα πρέπει να εξετάσετε την αρχή της μεταγλώττισης seqtk για την επιφάνεια εργασίας. Σύμφωνα με το Makefile, ορίστε τι χρειάζεται:
Αντί για έξοδο σε ένα δυαδικό αρχείο, το 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 σε αυτό.
Εδώ είναι η νέα αρχιτεκτονική:
Το σχήμα δείχνει ότι αντί να υπολογίζει στο κύριο νήμα του προγράμματος περιήγησης, χρησιμοποιεί webworkers. Αυτή η μέθοδος καθιστά δυνατή την εκτέλεση υπολογισμών σε ένα νήμα φόντου χωρίς να υποβαθμίζεται η ανταπόκριση του προγράμματος περιήγησης. Λοιπόν, ο ελεγκτής WebWorker ξεκινά το Worker, διαχειριζόμενος την αλληλεπίδρασή του με το κύριο νήμα.
Η εντολή seqtk εκτελείται με ένα Worker σε ένα προσαρτημένο αρχείο. Μετά την ολοκλήρωση της εκτέλεσης, ο Εργαζόμενος εκδίδει το αποτέλεσμα με τη μορφή Υπόσχεσης. Όταν το μήνυμα λαμβάνεται από το κύριο νήμα, το αποτέλεσμα χρησιμοποιείται για την ενημέρωση των γραφημάτων. Και ούτω καθεξής για πολλές επαναλήψεις.
Τι γίνεται με την απόδοση του WebAssembly;
Για να αξιολογήσει την αλλαγή στην απόδοση, η ομάδα του έργου χρησιμοποίησε την παράμετρο των πράξεων ανάγνωσης ανά δευτερόλεπτο. Ο χρόνος διαδραστικής γραφικής παράστασης δεν λαμβάνεται υπόψη επειδή χρησιμοποιείται JavaScript και στις δύο υλοποιήσεις.
Όταν χρησιμοποιούσατε τη λύση out-of-the-box, το κέρδος απόδοσης ήταν εννέα φορές.
Αυτό είναι ένα εξαιρετικό αποτέλεσμα, αλλά, όπως αποδείχθηκε, υπάρχει η ευκαιρία να το βελτιστοποιήσετε. Το γεγονός είναι ότι μεγάλος αριθμός αποτελεσμάτων ανάλυσης QC δεν χρησιμοποιούνται από το seqtk, επομένως μπορούν να διαγραφούν. Εάν γίνει αυτό, το αποτέλεσμα είναι 13 φορές καλύτερο από ό,τι στο JS.
Αυτό επιτεύχθηκε σχολιάζοντας απλώς τις εντολές printf().
Αλλά δεν είναι μόνο αυτό. Το θέμα είναι ότι σε αυτό το στάδιο, το fastq.bio λαμβάνει τα αποτελέσματα της ανάλυσης καλώντας διάφορες συναρτήσεις C. Κάθε μία από αυτές υπολογίζει το δικό της σύνολο χαρακτηριστικών, έτσι ώστε κάθε κομμάτι του αρχείου να διαβάζεται δύο φορές.
Προκειμένου να ξεπεραστεί αυτό το πρόβλημα, αποφασίστηκε να συνδυαστούν οι δύο λειτουργίες σε μία. Ως αποτέλεσμα, η παραγωγικότητα αυξήθηκε κατά 20 φορές.
Θα πρέπει να σημειωθεί ότι ένα τέτοιο εξαιρετικό αποτέλεσμα δεν μπορεί πάντα να επιτευχθεί. Σε ορισμένες περιπτώσεις, η απόδοση πέφτει, επομένως αξίζει να αξιολογήσετε κάθε συγκεκριμένη περίπτωση.
Ως συμπέρασμα, μπορούμε να πούμε ότι το Wasm παρέχει μια ευκαιρία να βελτιώσετε την απόδοση της εφαρμογής, αλλά πρέπει να τη χρησιμοποιήσετε με σύνεση.