ดูวิธีที่ Adobe อนุญาตให้ผู้ใช้แก้ไขไฟล์ขนาดใหญ่สุดในแอป Photoshop อันโด่งดังในเวอร์ชันเว็บ
เกริ่นนำ
(บทความนี้มีให้บริการในรูปแบบวิดีโอด้วย)
ในปี 2021 Adobe และวิศวกรของ Chrome ได้นำ Photoshop เวอร์ชันหนึ่งมาสู่เว็บ ซอฟต์แวร์นี้ใช้ WebAssembly ได้อย่างสร้างสรรค์ด้วยฟีเจอร์ต่างๆ เช่น SIMD, พื้นที่เก็บข้อมูลประสิทธิภาพสูงในระบบไฟล์ส่วนตัวต้นทาง, พื้นที่สี P3 สำหรับ Canvas และ Web Components ที่มี Lit ในบทความนี้ เราจะเน้นถึงวิธีที่ระบบวิศวกรรมของ Adobe Photoshop แก้ไขในการทำงานกับไฟล์ที่มีขนาดใหญ่กว่าซึ่งสามารถใส่ลงในหน่วยความจำได้ และในกรณีของ WebAssembly วิธีที่ Photoshop ทำงานกับไฟล์ที่มีขนาดใหญ่กว่าพื้นที่ที่อยู่ 32 บิตของ Wasm32
ปัญหา
การเปิดไฟล์เพื่อทำการแก้ไขต้องใช้หน่วยความจำจำนวนมาก ซึ่งมากกว่าการเปิดไฟล์เพื่อดูอย่างมาก ไฟล์ที่แก้ไขใน Photoshop มักต้องใช้หน่วยความจำมากกว่าที่ผู้ใช้มีในอุปกรณ์ เนื่องจากซอฟต์แวร์มีฟีเจอร์มากมายที่ซอฟต์แวร์มีให้ ประเภทของการออกแบบและการแก้ไขแบบดิจิทัลที่ใช้ และความสามารถของอุปกรณ์ของผู้ใช้
รูปแบบไฟล์ Photoshop จะเก็บข้อมูลด้วยการบีบอัดแบบไม่สูญเสียรายละเอียด เมื่อมีการอ่านไฟล์หรือเอกสาร ระบบจะแยกข้อมูลรูปภาพทั้งหมดเพื่อให้การประมวลผลมีประสิทธิภาพมากขึ้น ดังนั้น จำนวนหน่วยความจำที่ต้องการจึงอาจมากกว่าจำนวนพื้นที่ที่เอกสารใช้ในดิสก์หรือพื้นที่เก็บข้อมูลระบบคลาวด์หลายเท่า
Photoshop สนับสนุนประวัติการเลิกทำขนาดใหญ่มาก การดำเนินการหลายอย่างใน Photoshop ถือเป็นกระบวนการทำลายล้าง กล่าวคือ การแก้ไข เช่น การลงสีด้วยแปรง จะทำให้เกิดข้อมูลพิกเซลใหม่ ซึ่งมีขนาดใหญ่พอๆ กับข้อมูลพิกเซลเดิม การแก้ไขเหล่านี้ในเซสชันการแก้ไขที่นานจะมีข้อมูลพิกเซลจำนวนมากที่ต้องเก็บไว้เพื่อรองรับการดำเนินการเลิกทำ ดังนั้นประวัติจึงอาจมีข้อมูลได้หลายร้อยเมกะไบต์หรือหลายกิกะไบต์
อุปกรณ์และแพลตฟอร์มต่างๆ ไม่ว่าจะเป็นเครื่องเดสก์ท็อป อุปกรณ์เคลื่อนที่ หรือเบราว์เซอร์ ล้วนเป็นการจัดการหน่วยความจำ แอปบางอย่างอาจให้เครดิตกับแอปพลิเคชันที่ใช้หน่วยความจำมากกว่าส่วนอื่นๆ ปริมาณหน่วยความจำจะแตกต่างกันไปในแต่ละอุปกรณ์ ซึ่งคุณทราบได้เมื่อสั่งซื้อคอมพิวเตอร์หรืออุปกรณ์เครื่องใหม่และระบุปริมาณหน่วยความจำเข้าถึงแบบสุ่ม (RAM) ที่ต้องการ แพลตฟอร์มเหล่านี้จำนวนมากยังสนับสนุนหน่วยความจำเสมือน ซึ่งทำให้แอปพลิเคชันใช้หน่วยความจำได้มากกว่าที่ที่มีอยู่จริง การรองรับนี้จะแตกต่างกันไปตามระบบปฏิบัติการและรันไทม์ แอปพลิเคชันอาจเข้าถึงหรือใช้งานได้ยากในกรณีของ WebAssembly นอกจากนี้ ระบบเสมือนจริงสมัยใหม่ยังมีขีดจำกัดสูงสุดซึ่งสูงกว่าข้อกำหนดของ Photoshop ได้โดยง่าย
โดยหลักการแล้ว แอปพลิเคชันจะใช้หน่วยความจำมากเท่าที่จำเป็น ซึ่งโดยทั่วไปจะช่วยให้แคมเปญสามารถมอบประสิทธิภาพที่ดีที่สุดแก่ผู้ใช้ แต่หากใช้หน่วยความจำมากเกินไป แพลตฟอร์มรันไทม์ก็อาจถูกลงโทษ หรืออาจใช้หน่วยความจำจนหมด ซึ่งส่งผลให้เกิดการดำเนินการไม่สำเร็จ
จากหมายเหตุที่ผ่านมา ปัญหาดั้งเดิมที่ Photoshop ต้องแก้ไขคือการแก้ไขไฟล์ความละเอียดการพิมพ์ใน macOS เวอร์ชันแรกๆ ซึ่งมีขนาดต่ำสุด 1 MB สำหรับระบบปฏิบัติการและแอปพลิเคชันทั้งหมด รูปภาพแบบเต็มหน้าขนาด 300 dpi ใน CMYK จะมีขนาดประมาณ 32 MB เมื่อไม่ได้บีบอัด
การแก้ปัญหา
Photoshop ติดตั้งระบบหน่วยความจำเสมือน (VM) สำหรับซอฟต์แวร์เพื่อแก้ปัญหาแอปใช้ RAM มากเกินไป Photoshop ใช้ VM ของตนเพื่อจัดการข้อมูลเอกสาร โดยเฉพาะข้อมูลรูปภาพ ประวัติการเลิกทำและสถานะทั้งหมด รวมถึงพื้นที่เก็บข้อมูลที่ใช้งานได้สำหรับคำสั่งปัจจุบัน นอกจากนี้ ยังใช้สำหรับการแคชข้อมูลขนาดใหญ่ เช่น คำอธิบายแปรง เพื่อกำหนดให้ข้อมูลเหล่านั้นเป็นแบบต่อเนื่องจากดิสก์เพียงครั้งเดียวเท่านั้น
จากตัวอย่างของด้านหนึ่งที่ VM จัดการ ระบบจะจัดเก็บข้อมูลรูปภาพโดยใช้การแสดงแทน mipmap ซึ่งเป็นชุดชิ้นส่วนพีระมิด ให้ข้อมูลภาพที่มีความละเอียดตั้งแต่ต่ำไปจนถึงสูง วิธีนี้จะช่วยให้ Photoshop ทำงานกับข้อมูลความละเอียดที่เหมาะสมได้เพื่อการตอบสนองที่เร็วขึ้นเมื่อซูมเข้าหรือดูตัวอย่าง แทนที่จะซูมออก
ในระหว่างการเริ่มต้นแอปพลิเคชัน Photoshop จะกำหนดจำนวน RAM ที่ใช้ได้ โดยจะจัดสรรข้อมูลส่วนหนึ่งไว้จัดเก็บใน VM RAM ที่เหลือจะใช้ได้กับแอปพลิเคชันอื่นๆ ผ่านไลบรารีรันไทม์ของ C++ มาตรฐาน หน่วยความจำ VM จะแบ่งออกเป็นหน้า ปกติแล้วแต่ละหน้าจะมีขนาดหน้าฮาร์ดแวร์ที่หลากหลายสำหรับอุปกรณ์ เมื่อใช้สำหรับข้อมูลรูปภาพ หน่วยความจำจะถูกอ้างอิงเป็นชิ้นส่วน ชิ้นส่วนคือพื้นที่สี่เหลี่ยมจัตุรัสจำนวนพิกเซลของเลเยอร์เดียว ซึ่งรวมถึงขอบเขตเรขาคณิต การ์ดจะใช้หน้าอย่างน้อย 1 หน้า
Photoshop สร้างไฟล์ Scratch อย่างน้อย 1 ไฟล์เพื่อมอบการสำรองข้อมูลแบบใช้ดิสก์สำหรับหน้า VM ไฟล์ Scratch เหล่านี้จัดเก็บไว้ในระบบไฟล์ส่วนตัวต้นทาง ภาพหน้าจอแสดงลำดับชั้นของไฟล์เป็นตัวอย่างที่ดีของไฟล์สำหรับขูดดังกล่าว (ไฮไลต์สีเหลือง) และไฟล์อื่นๆ ระหว่างเซสชันการแก้ไขรูปภาพ ไฟล์ Scratch แต่ละไฟล์อาจมีหน้า VM ได้หลายหน้า เมื่อ VM ต้องการการสำรองข้อมูลเพิ่มเติม ระบบจะสร้างไฟล์ Scratch เพิ่มเติม เมื่อหน้าเว็บถูกเพิ่มพื้นที่ว่าง พื้นที่ของหน้าเว็บในไฟล์สำหรับเขียนโค้ดจะนำมาใช้ใหม่สำหรับหน้าใหม่ได้
เมื่อประมวลผลข้อมูลรูปภาพ Photoshop จะทำซ้ำบนชิ้นส่วนต่างๆ เพื่อคำนวณพิกเซล การคำนวณแต่ละรายการสามารถอ้างอิงได้หลายไทล์ VM มีหน้าที่ตรวจสอบให้แน่ใจว่าไทล์ต้นทางและปลายทางสำหรับการทำซ้ำปัจจุบันอยู่ในหน่วยความจำ และโหลดไทล์จากไฟล์ Scratch ตามที่จำเป็น ในขณะเดียวกันก็ล้างหน้าไปยังไฟล์ Scratch เพื่อเพิ่มพื้นที่ในหน่วยความจำได้
บทสรุป
แม้ว่ารายละเอียดการนำไปใช้ที่เป็นรูปธรรมของ VM จะอยู่นอกเหนือขอบเขตของเอกสารนี้ (และเป็นกรรมสิทธิ์ของ Adobe) อย่างไรก็ตาม ด้วยคำอธิบายในระดับสูงของโซลูชัน เราได้ให้ไว้ในจุดที่คุณจะเข้าใจว่า Photoshop จัดการกับไฟล์ขนาดใหญ่ได้อย่างไร ระบบไฟล์ส่วนตัวต้นทางที่มีประสิทธิภาพสูงในการอ่านและเขียนไฟล์เป็นองค์ประกอบสำคัญของโซลูชัน
กิตติกรรมประกาศ
บล็อกโพสต์นี้ได้รับการตรวจสอบโดย Oliver Unter Ecker และ Rachel Andrew ขอขอบคุณ Russell Williams สำหรับเอกสารประกอบที่ยอดเยี่ยมเกี่ยวกับ Photoshop VM