איך השתמשנו ב-WebAssembly כדי להאיץ יישום אינטרנט 20 פעמים

מאמר זה דן במקרה להאצת יישום דפדפן על ידי החלפת חישובי 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 כדי להאיץ שירות אינטרנט ניתוחי. למען הבהירות, לקחנו אפליקציה עובדת כתובה ב-C, אשר מורכבת לתוך WebAssembly. התוצאה תשמש להחלפת חלקים עם ביצועים נמוכים של JS.

טרנספורמציה של יישומים

הדוגמה תשתמש בשירות הדפדפן fastq.bio, המיועד לגנטיקאים. הכלי מאפשר לך להעריך את איכות רצף ה-DNA (פענוח).

הנה דוגמה ליישום בפעולה:

לא כדאי להיכנס לפרטי התהליך מכיוון שהם מורכבים למדי עבור לא מומחים, אבל בקיצור, מדענים יכולים להשתמש באינפוגרפיקה שלמעלה כדי להבין אם תהליך רצף ה-DNA עבר בצורה חלקה ואילו בעיות התעוררו.

לשירות זה יש חלופות, תוכניות שולחן עבודה. אבל fastq.bio מאפשר לך להאיץ את העבודה שלך על ידי הדמיה של הנתונים. ברוב המקרים האחרים, אתה צריך להיות מסוגל לעבוד עם שורת הפקודה, אבל לא לכל הגנטיקאים יש את הניסיון הדרוש.

הכל עובד בפשטות. הקלט הוא נתונים המוצגים בצורה של קובץ טקסט. קובץ זה נוצר על ידי כלי רצף מיוחדים. הקובץ מכיל רשימה של רצפי DNA וציון איכות לכל נוקלאוטיד. פורמט הקובץ הוא .fastq, וזו הסיבה שהשירות קיבל את שמו.

יישום ב-JavaScript

השלב הראשון של המשתמש בעבודה עם fastq.bio הוא לבחור את הקובץ המתאים. באמצעות אובייקט הקובץ, היישום קורא מדגם אקראי של נתונים מקובץ ומעבד את האצווה. התפקיד של JavaScript כאן הוא לבצע פעולות מחרוזות פשוטות ולחשב מדדים. אחד מהם הוא מספר הנוקלאוטידים A, C, G ו-T על שברי DNA שונים.

לאחר חישוב האינדיקטורים הדרושים, הם מוצגים באמצעות Plotly.js, והשירות מתחיל לעבוד עם מדגם נתונים חדש. ה-chunking נעשה כדי לשפר את איכות ה-UX. אם תעבדו עם כל הנתונים בבת אחת, התהליך יקפא לזמן מה, מכיוון שהקבצים עם תוצאות הרצף תופסים מאות גיגה-בייט של שטח קבצים. השירות לוקח פיסות נתונים בגודל של 0,5 עד 1 MB ועובד איתם צעד אחר צעד, בונה נתונים גרפיים.

ככה זה עובד:

המלבן האדום מכיל את אלגוריתם טרנספורמציה של מחרוזת להשגת הדמיה. זהו החלק האינטנסיבי ביותר מבחינה חישובית בשירות. שווה לנסות להחליף אותו ב- 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 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 כוללת אותה בפרויקט.

מערכת הקבצים הוירטואלית Emscrippten מופעלת. זֶה 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 ב-FS הוירטואלי עם קריאה ל-main() seqtk עליו.

הנה הארכיטקטורה החדשה:

האיור מראה שבמקום חישובים בשרשור הדפדפן הראשי, עובדי רשת. שיטה זו מאפשרת לך לבצע חישובים בשרשור רקע מבלי להשפיע על תגובת הדפדפן. ובכן, בקר ה-WebWorker מפעיל את ה-Worker, ומנהל את האינטראקציה שלו עם השרשור הראשי.

הפקודה seqtk מופעלת באמצעות Worker בקובץ המותקן. לאחר השלמת הביצוע, העובד מייצר תוצאה בצורה של הבטחה. כאשר הודעה מתקבלת על ידי השרשור הראשי, התוצאה משמשת לעדכון הגרפים. וכן הלאה בכמה איטרציות.

מה לגבי ביצועי WebAssembly?

על מנת להעריך את השינוי בביצועים, צוות הפרויקט השתמש בפרמטר פעולות קריאה לשניה. הזמן שלוקח לבניית גרפים אינטראקטיביים אינו נלקח בחשבון מכיוון ששתי ההטמעות משתמשות ב-JavaScript.

בעת שימוש בפתרון ה-out-of-the-box, עליית הביצועים הייתה פי תשעה.

זוהי תוצאה מצוינת, אבל, כפי שמתברר, יש גם הזדמנות לייעל אותה. העובדה היא שמספר רב של תוצאות ניתוח QC אינן בשימוש על ידי seqtk, כך שניתן למחוק אותן. אם תעשה זאת, התוצאה משתפרת פי 13 בהשוואה ל-JS.

זה הושג על ידי הערה פשוטה על הפקודות printf() .

אבל זה לא הכל. העובדה היא שבשלב זה, fastq.bio מקבל את תוצאות הניתוח על ידי קריאה לפונקציות שונות של C. כל אחת מהן מחשבת את סט המאפיינים שלה, כך שכל קטע של הקובץ נקרא פעמיים.

על מנת לעקוף את הבעיה הזו, הוחלט לשלב שתי פונקציות לאחת. כתוצאה מכך, התפוקה עלתה פי 20.

ראוי לציין שלא תמיד ניתן להשיג תוצאה יוצאת דופן כזו. במקרים מסוימים, הביצועים ירדו, ולכן כדאי להעריך כל מקרה.

לסיכום, אנו יכולים לומר ש- Wasm אכן מספקת הזדמנות לשפר את ביצועי האפליקציה, אך עליך להשתמש בה בחוכמה.

Skillbox ממליצה:

• קורס מעשי שנתיים "אני מפתח אתרים PRO".
• קורס מקוון "מפתח C# מ-0".
• קורס מעשי בן שנה "מפתח PHP מ-0 ל-PRO".

מקור: www.habr.com