วิธีที่เราใช้ WebAssembly เพื่อเพิ่มความเร็วเว็บแอปพลิเคชัน 20 เท่า

บทความนี้กล่าวถึงกรณีการเร่งความเร็วแอปพลิเคชันเบราว์เซอร์โดยการแทนที่การคำนวณ JavaScript ด้วย WebAssembly

WebAssembly - มันคืออะไร?

กล่าวโดยสรุป นี่คือรูปแบบคำสั่งไบนารีสำหรับเครื่องเสมือนแบบสแต็ก Wasm (ชื่อสั้น) มักเรียกว่าภาษาโปรแกรม แต่ไม่ใช่ รูปแบบคำสั่งจะดำเนินการในเบราว์เซอร์พร้อมกับ JavaScript

สิ่งสำคัญคือสามารถรับ WebAssembly ได้โดยการรวบรวมแหล่งที่มาในภาษาต่างๆ เช่น C/C++, Rust, Go มีการใช้การพิมพ์ทางสถิติและแบบจำลองหน่วยความจำแบบแบนที่เรียกว่า โค้ดดังที่กล่าวไว้ข้างต้นถูกจัดเก็บในรูปแบบไบนารี่ขนาดกะทัดรัด ทำให้ทำงานได้รวดเร็วเกือบเท่ากับการรันแอปพลิเคชันโดยใช้บรรทัดคำสั่ง ความสามารถเหล่านี้ทำให้ความนิยมของ WebAssembly เติบโตขึ้น

เราเตือนคุณ: สำหรับผู้อ่าน "Habr" ทุกคน - ส่วนลด 10 rubles เมื่อลงทะเบียนในหลักสูตร Skillbox ใด ๆ โดยใช้รหัสส่งเสริมการขาย "Habr"

Skillbox แนะนำ: หลักสูตรภาคปฏิบัติ "นักพัฒนามือถือ PRO".

ปัจจุบัน Wasm ถูกนำมาใช้ในแอปพลิเคชันมากมาย ตั้งแต่เกมอย่าง Doom 3 ไปจนถึงแอปพลิเคชันที่พอร์ตบนเว็บ เช่น Autocad และ Figma Wasm ยังใช้ในด้านต่างๆ เช่น การประมวลผลแบบไร้เซิร์ฟเวอร์

บทความนี้แสดงตัวอย่างการใช้ Wasm เพื่อเร่งความเร็วบริการเว็บการวิเคราะห์ เพื่อความชัดเจน เราได้นำแอปพลิเคชันที่ใช้งานได้ซึ่งเขียนด้วยภาษา C ซึ่งรวบรวมไว้ใน WebAssembly ผลลัพธ์จะถูกนำมาใช้เพื่อแทนที่ส่วนที่มีประสิทธิภาพต่ำกว่าของ JS

การเปลี่ยนแปลงแอปพลิเคชัน

ตัวอย่างจะใช้บริการเบราว์เซอร์ fastq.bio ซึ่งมีไว้สำหรับนักพันธุศาสตร์ เครื่องมือนี้ช่วยให้คุณประเมินคุณภาพของการจัดลำดับดีเอ็นเอ (การถอดรหัส)

นี่คือตัวอย่างการใช้งานจริงของแอปพลิเคชัน:

รายละเอียดของกระบวนการนี้ไม่คุ้มค่าที่จะเข้าไปพิจารณา เนื่องจากค่อนข้างซับซ้อนสำหรับผู้ที่ไม่ใช่ผู้เชี่ยวชาญ แต่โดยสรุป นักวิทยาศาสตร์สามารถใช้อินโฟกราฟิกด้านบนเพื่อทำความเข้าใจว่ากระบวนการจัดลำดับดีเอ็นเอดำเนินไปอย่างราบรื่นหรือไม่ และมีปัญหาอะไรเกิดขึ้น

บริการนี้มีทางเลือกอื่นคือโปรแกรมเดสก์ท็อป แต่ fastq.bio ช่วยให้คุณทำงานได้เร็วขึ้นโดยการแสดงข้อมูลเป็นภาพ ในกรณีอื่นๆ ส่วนใหญ่ คุณจะต้องสามารถทำงานกับบรรทัดคำสั่งได้ แต่นักพันธุศาสตร์บางคนอาจไม่มีประสบการณ์ที่จำเป็น

ทุกอย่างทำงานได้อย่างง่ายดาย อินพุตคือข้อมูลที่นำเสนอในรูปแบบของไฟล์ข้อความ ไฟล์นี้สร้างโดยเครื่องมือจัดลำดับเฉพาะ ไฟล์นี้ประกอบด้วยรายการลำดับ DNA และคะแนนคุณภาพสำหรับนิวคลีโอไทด์แต่ละตัว รูปแบบไฟล์คือ .fastq ซึ่งเป็นเหตุว่าทำไมบริการจึงมีชื่อนี้

การใช้งานใน JavaScript

ขั้นตอนแรกของผู้ใช้เมื่อทำงานกับ fastq.bio คือการเลือกไฟล์ที่เหมาะสม เมื่อใช้ออบเจ็กต์ File แอปพลิเคชันจะอ่านตัวอย่างข้อมูลแบบสุ่มจากไฟล์และประมวลผลแบตช์นั้น งานของ JavaScript ที่นี่คือดำเนินการสตริงอย่างง่ายและคำนวณเมตริก หนึ่งในนั้นคือจำนวนนิวคลีโอไทด์ A, C, G และ T บนชิ้นส่วน DNA ที่แตกต่างกัน

หลังจากคำนวณตัวบ่งชี้ที่จำเป็นแล้ว ตัวบ่งชี้เหล่านั้นจะถูกแสดงเป็นภาพโดยใช้ Plotly.js และบริการจะเริ่มทำงานกับตัวอย่างข้อมูลใหม่ การแบ่งส่วนเสร็จสิ้นเพื่อปรับปรุงคุณภาพของ UX หากคุณทำงานกับข้อมูลทั้งหมดในคราวเดียว กระบวนการจะหยุดชั่วขณะหนึ่ง เนื่องจากไฟล์ที่มีผลลัพธ์ตามลำดับจะใช้พื้นที่ไฟล์หลายร้อยกิกะไบต์ บริการนี้ใช้ข้อมูลที่มีขนาดตั้งแต่ 0,5 ถึง 1 MB และทำงานร่วมกับข้อมูลเหล่านั้นทีละขั้นตอนเพื่อสร้างข้อมูลกราฟิก

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

สี่เหลี่ยมสีแดงมีอัลกอริธึมการแปลงสตริงสำหรับรับการแสดงภาพ นี่เป็นส่วนที่เน้นการคำนวณมากที่สุดของบริการ มันคุ้มค่าที่จะลองแทนที่ด้วย Wasm

ทดสอบ WebAssembly

เพื่อประเมินความเป็นไปได้ของการใช้ Wasm ทีมงานโครงการได้เริ่มค้นหาโซลูชันสำเร็จรูปสำหรับการสร้างเมตริก QC (QC - การควบคุมคุณภาพ) โดยใช้ไฟล์ fastq การค้นหาดำเนินการในเครื่องมือที่เขียนด้วยภาษา C, C++ หรือ Rust เพื่อให้สามารถย้ายโค้ดไปยัง WebAssembly ได้ นอกจากนี้เครื่องมือนี้ไม่ควร "ดิบ" โดยจำเป็นต้องมีบริการที่นักวิทยาศาสตร์ทดสอบแล้ว

เป็นผลให้มีทางเลือกให้เลือก ถัดไป. แอปพลิเคชั่นนี้ค่อนข้างได้รับความนิยม เป็นโอเพ่นซอร์ส ภาษาต้นฉบับคือ 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

นี่คือสถาปัตยกรรมใหม่:

รูปนี้แสดงให้เห็นว่าแทนที่จะคำนวณในเธรดเบราว์เซอร์หลัก WebWorkers. วิธีการนี้ช่วยให้คุณสามารถคำนวณในเธรดพื้นหลังได้โดยไม่ส่งผลต่อการตอบสนองของเบราว์เซอร์ ตัวควบคุม WebWorker เริ่มต้น Worker โดยจัดการการโต้ตอบกับเธรดหลัก

คำสั่ง seqtk รันโดยใช้ Worker บนไฟล์ที่เมาท์ หลังจากเสร็จสิ้นการดำเนินการ ผู้ปฏิบัติงานจะสร้างผลลัพธ์ในรูปแบบของคำสัญญา เมื่อเธรดหลักได้รับข้อความ ผลลัพธ์จะถูกนำมาใช้เพื่ออัปเดตกราฟ และต่อๆ ไปในหลายๆ รอบ

แล้วประสิทธิภาพของ WebAssembly ล่ะ?

เพื่อประเมินการเปลี่ยนแปลงประสิทธิภาพ ทีมงานโครงการใช้พารามิเตอร์การอ่านต่อวินาที เวลาที่ใช้ในการสร้างกราฟเชิงโต้ตอบจะไม่ถูกนำมาพิจารณา เนื่องจากการใช้งานทั้งสองใช้ JavaScript

เมื่อใช้โซลูชันที่แกะกล่อง ประสิทธิภาพจะเพิ่มขึ้นเก้าเท่า

นี่เป็นผลลัพธ์ที่ยอดเยี่ยม แต่เมื่อปรากฎว่ามีโอกาสที่จะปรับให้เหมาะสมเช่นกัน ความจริงก็คือ seqtk ไม่ได้ใช้ผลการวิเคราะห์ QC จำนวนมาก ดังนั้นจึงสามารถลบออกได้ หากคุณทำเช่นนี้ ผลลัพธ์จะดีขึ้น 13 เท่าเมื่อเทียบกับ JS

สามารถทำได้โดยเพียงแค่แสดงความคิดเห็นในคำสั่ง printf()

แต่นั่นไม่ใช่ทั้งหมด ความจริงก็คือในขั้นตอนนี้ fastq.bio ได้รับผลการวิเคราะห์โดยการเรียกใช้ฟังก์ชัน C ที่แตกต่างกัน แต่ละคนจะคำนวณชุดคุณลักษณะของตัวเองเพื่อให้แต่ละส่วนของไฟล์ถูกอ่านสองครั้ง

เพื่อที่จะแก้ไขปัญหานี้ จึงได้ตัดสินใจรวมสองฟังก์ชันเข้าเป็นหนึ่งเดียว ส่งผลให้ผลผลิตเพิ่มขึ้น 20 เท่า

เป็นที่น่าสังเกตว่าไม่สามารถบรรลุผลลัพธ์ที่โดดเด่นเช่นนี้ได้เสมอไป ในบางกรณี ประสิทธิภาพจะลดลง ดังนั้นจึงคุ้มค่าที่จะประเมินในแต่ละกรณี

โดยสรุป เราสามารถพูดได้ว่า Wasm ให้โอกาสในการปรับปรุงประสิทธิภาพของแอปพลิเคชัน แต่คุณจำเป็นต้องใช้มันอย่างชาญฉลาด

Skillbox แนะนำ:

• หลักสูตรภาคปฏิบัติสองปี "ฉันเป็นนักพัฒนาเว็บ PRO".
• คอร์สออนไลน์ "นักพัฒนา C # จาก 0".
• หลักสูตรปีปฏิบัติ "นักพัฒนา PHP จาก 0 ถึง PRO".

ที่มา: will.com