รูปภาพและภาพถ่าย · โปรแกรมแปลงรูปภาพและคอมเพรสเซอร์
Web Workers และ OffscreenCanvas ตอบสนองการแปลงรูปภาพอย่างไร
· มันทำงานอย่างไร
การประมวลผลเบราว์เซอร์ ผ้าใบ พนักงานเว็บ
การเข้ารหัสรูปภาพขนาดใหญ่ต้องใช้เวลา CPU จริง และการเข้ารหัสบนเธรดหลักจะทำให้หน้าเว็บค้าง โพสต์นี้จะอธิบายว่า Web Workers และ OffscreenCanvas ย้ายที่ทำงานนอกเธรด UI อย่างไร และสถาปัตยกรรมดังกล่าวมีความหมายต่อความเป็นส่วนตัวและขีดจำกัดอย่างไร
แท็บที่จะค้าง — จะเกิดอะไรขึ้นเมื่อมีการเข้ารหัสจำนวนมากบนเธรดที่ดึงเพจด้วย
การถอดรหัส การวาดใหม่ และการเข้ารหัสชุดต้องอาศัยการทำงาน CPU และหน่วยความจำพิกเซลที่ถอดรหัสแล้ว หากการดำเนินการทุกอย่างทำงานในลูปเหตุการณ์เดียวกันกับที่จัดการการควบคุม การอัปเดตความคืบหน้า และการลงสี อินเทอร์เฟซอาจหยุดตอบสนองจนกว่าไฟล์จะเสร็จสิ้น แผงที่โฟกัสจึงสร้างผู้ปฏิบัติงานโมดูลอย่างเกียจคร้านเมื่อการแปลงครั้งแรกเริ่มต้นขึ้น แทนที่จะจ่ายค่าใช้จ่ายในการเริ่มต้นนั้นให้กับผู้เข้าชมที่ไม่เคยเปลี่ยนใจเลื่อมใสเลย
การตอบสนองเป็นเป้าหมายทางสถาปัตยกรรม ไม่ใช่กำหนดเวลาที่สัญญาไว้ การโหลดอุปกรณ์ ขนาดรูปภาพ การใช้เบราว์เซอร์ และการจัดองค์ประกอบเป็นชุด ยังคงเป็นตัวกำหนดความรู้สึกของหน้าเว็บที่ลื่นไหล ตรวจสอบด้วยไฟล์ตัวแทนบนอุปกรณ์ที่มีความสำคัญ อย่าเผยแพร่ระยะเวลาการแปลงสากลหรืออ้างว่าคนงานทำให้งานที่มีราคาแพงฟรี
เธรดหลักและเหตุใดจึงมีค่า — เธรดเดียวสำหรับโครงร่าง อินพุต และสคริปต์ และระยะเวลาที่งานบล็อกทั้งสามเธรด
เธรดหลักเป็นเจ้าของ DOM และควบคุมการแตะของผู้เยี่ยมชม ToolAcre ใช้เพื่อตรวจสอบความถูกต้องของการเลือก ถอดรหัสสั้นๆ สำหรับมิติข้อมูลแหล่งที่มา การตั้งค่าบิลด์ สถานะการแสดงผล และผลลัพธ์การดาวน์โหลด การถอดรหัส การวาดแคนวาส และลูปการเข้ารหัสซ้ำของแบทช์จะตามหลัง `image.worker.js` ทำให้สามารถแสดงข้อความความคืบหน้าระหว่างไฟล์ได้
ผู้ปฏิบัติงานไม่ได้กำจัดงานเธรดหลักทุกงาน ไฟล์ที่เลือกแต่ละไฟล์จะได้รับการตรวจสอบและวัดผลในแผงควบคุมในขั้นต้น และผลลัพธ์จะกลายเป็นการแสดงตัวอย่างและการดาวน์โหลดในภายหลัง การออกแบบจะย้ายไปป์ไลน์ขนาดใหญ่ที่ทำซ้ำๆ ออกจากการเป็นเจ้าของอินเทอร์เฟซ ในขณะเดียวกันก็รักษา API ของเบราว์เซอร์และการนำเสนอไว้ในบริบทที่แต่ละส่วนอยู่ด้วย
Web Workers: เธรดที่สองที่ไม่มี DOM — สิ่งที่ผู้ปฏิบัติงานสัมผัสได้และสัมผัสไม่ได้ และไฟล์เดินทางไปได้อย่างไร
ผู้ปฏิบัติงานไม่มีสิทธิ์เข้าถึง DOM แบบธรรมดา ได้รับคำอธิบายรายการแบบอนุกรม การตั้งค่า และ ArrayBuffer ของแต่ละไฟล์ สำหรับทุกรายการจะสร้างแผนการแปลงแบบเดียวกับที่ใช้โดยอินเทอร์เฟซ สร้าง Blob ดำเนินการถอดรหัส-วาด-เข้ารหัส แปลง Blob ที่เป็นผลลัพธ์เป็นไบต์ และบันทึกความล้มเหลวต่อไฟล์โดยไม่ละทิ้งส่วนที่เหลือของแบตช์
การแยกตัวดังกล่าวยังส่งผลต่อการจัดการข้อผิดพลาดอีกด้วย ไฟล์ที่เสียหายสามารถเข้าสู่อาร์เรย์ความล้มเหลวในขณะที่รายการต่อๆ ไปดำเนินต่อไป ผู้ปฏิบัติงานตรวจสอบการยกเลิกระหว่างรายการและรายงานความคืบหน้าด้วยชื่อไฟล์ปัจจุบัน UI จะแปลการหมดเวลาของผู้ปฏิบัติงานเป็นคำแนะนำให้ลองรูปภาพน้อยลงหรือเล็กลง แทนที่จะปล่อยปุ่มที่ปิดใช้งานไว้โดยไม่มีคำอธิบาย
OffscreenCanvas: การวาดและการเข้ารหัสโดยไม่มีองค์ประกอบที่มองเห็นได้ — วิธีที่พนักงานได้รับพื้นที่ทำงานของตัวเองและเรียก ConvertToBlob
`createCanvas` ชอบ `OffscreenCanvas` เมื่อมีตัวสร้างอยู่ ภายในเส้นทางนั้น `encodeCanvas` เรียก `convertToBlob` ด้วยเป้าหมาย MIME ประเภทและคุณภาพที่เป็นตัวเลือก ตัวเรนเดอร์เดียวกันนี้ยังสามารถสร้างแคนวาส HTML และใช้ `toBlob` แบบเรียกกลับได้ โดยคงทางเลือกสำรองไว้สำหรับบริบทที่ OffscreenCanvas ไม่พร้อมใช้งาน
ทางเลือกเป็นสิ่งสำคัญในการอธิบายอย่างถูกต้อง แนะนำให้ใช้ OffscreenCanvas ไม่ใช่ผืนผ้าใบเดียวที่เป็นไปได้ในแหล่งที่มา ในทำนองเดียวกัน การเข้ารหัสของเบราว์เซอร์ WebP จะถูกตรวจสอบโดยผลลัพธ์การเข้ารหัสในที่สุด แทนที่จะสันนิษฐานจากการสนับสนุนการถอดรหัส แอปพลิเคชันสัญญาว่าจะเกิดข้อผิดพลาดเมื่อตัวเข้ารหัสที่ร้องขอไม่สามารถสร้างรูปแบบได้ ไม่ใช่การแทนที่แบบเงียบด้วยประเภท MIME อื่น
ถ่ายโอนและคัดลอกได้ — ย้าย ImageBitmap หรือ ArrayBuffer ไปยังผู้ปฏิบัติงานโดยไม่ซ้ำซ้อนหลายสิบเมกะไบต์
ก่อนที่จะโทรหาผู้ปฏิบัติงาน แผงควบคุมจะอ่านแต่ละไฟล์ลงใน ArrayBuffer และรวมบัฟเฟอร์เหล่านั้นไว้ในรายการถ่ายโอน ความเป็นเจ้าของจะย้ายไปยังผู้ปฏิบัติงานแทนการโคลนทุกบัฟเฟอร์อินพุต หลังจากการเข้ารหัส ผู้ปฏิบัติงานจะล้อมไบต์ Blob ใน Uint8Array และลงทะเบียนบัฟเฟอร์สำรองนั้นสำหรับการถ่ายโอนบนเส้นทางการตอบสนอง
ซึ่งช่วยลดการคัดลอกที่หลีกเลี่ยงไม่ได้ แต่รูปภาพและแคนวาสที่ถอดรหัสแล้วยังคงใช้หน่วยความจำ `executePlan` ปิดแต่ละ ImageBitmap ในบล็อก `finally` เพื่อให้สามารถปล่อยพิกเซลที่ถอดรหัสได้ทันที การถ่ายโอนได้ การล้างบิตแมปที่ชัดเจน และตัวป้องกันงบประมาณพิกเซล จัดการกับแหล่งที่มาของแรงกดดันที่แตกต่างกัน ไม่มีผู้ใดอนุญาตให้มีการอ้างสิทธิ์เป็นชุดได้ไม่จำกัด
เหตุใดสถาปัตยกรรมนี้จึงเป็นเรื่องราวความเป็นส่วนตัวด้วย — ไปป์ไลน์ทั้งหมดอยู่ในแท็บของคุณและแผงเครือข่ายยังคงเงียบอยู่
โค้ดการแปลงจะเรียกอิมเมจของเบราว์เซอร์และ Canvas API โดยไม่ต้องขออัปโหลดไฟล์ หน่วยป้องกันการทดสอบการวางแผนสำหรับทุกอินพุตและเอาต์พุตที่รองรับโดยห้ามการเข้าถึงเครือข่าย คำชี้แจงสิทธิ์ส่วนบุคคลของการกำหนดค่านั้นแคบลงตามลำดับ: รหัสเครื่องมือไม่ได้ร้องขอให้พกพาไฟล์ วางข้อความ หรือเอาต์พุตที่สร้างขึ้น
ตัวหน้ายังคงสามารถโหลดเนื้อหาของไซต์และสคริปต์ภายนอกที่เปิดเผยได้ ดังนั้น "แผงเครือข่ายแบบเงียบ" จึงจำเป็นต้องมีการตีความ ล้าง DevTools หลังจากโหลด และค้นหาชื่อไฟล์ทดสอบที่ไม่เป็นอันตรายหรือไบต์ของเพย์โหลดในคำขอใหม่ การตรวจสอบแหล่งที่มาและการสังเกตรันไทม์ร่วมกันสนับสนุนการอ้างสิทธิ์เกี่ยวกับเส้นทาง Conversion ไม่เปลี่ยนสภาพแวดล้อมเบราว์เซอร์ทั้งหมดให้เป็นแซนด์บ็อกซ์ออฟไลน์
ขีดจำกัดมาจากที่ใด — หน่วยความจำและแคนวาสแคปมาแทนที่แคปอัพโหลด ดังนั้นเพดานจึงเป็นอุปกรณ์ของคุณ
การประมวลผลในเครื่องแทนที่ขีดจำกัดการอัปโหลดด้วยข้อจำกัดจากการตรวจสอบอินพุต พิกเซลที่ถอดรหัส การจัดสรร Canvas และหน่วยความจำอุปกรณ์ที่มีอยู่ ไฟล์อินพุตแต่ละไฟล์ถูกจำกัดไว้ที่ 40 MB โดยพาเนลที่โฟกัส รูปทรงเอาท์พุตที่วางแผนไว้จะพอดีกับงบประมาณพิกเซลของอุปกรณ์ และผู้ใช้จะได้รับคำเตือนที่ตั้งชื่อขนาดที่ลดลงเมื่อตัวป้องกันนั้นเปลี่ยนคำขอ
ไม่มีจำนวนแบทช์คงที่ในการกำหนดค่า กราฟิกขนาดเล็กยี่สิบภาพและภาพถ่ายความละเอียดสูงยี่สิบภาพไม่ใช่การจัดสรรที่เทียบเท่ากัน โทรศัพท์อาจล้มเหลวเร็วกว่าเดสก์ท็อป คำแนะนำในการปฏิบัติงานตามความเป็นจริงคือให้ประมวลผลไฟล์น้อยลงหรือเล็กลงหลังจากการหมดเวลาหรือหน่วยความจำล้มเหลว ห้ามเผยแพร่จำนวนสูงสุดหรือเพดานเมกะพิกเซลที่ไม่รองรับ
ประโยชน์: การยกของหนัก อินเทอร์เฟซที่เงียบ — วิธีที่ Image Converter & Compressor ทำการแปลงจากเธรดหลักบนอุปกรณ์ของคุณ
อินเทอร์เฟซยังคงเงียบกว่าเนื่องจากไปป์ไลน์ที่ซ้ำกันทำงานในผู้ปฏิบัติงาน แคนวาสของอินเทอร์เฟซสามารถอยู่นอกหน้าจอได้ และบัฟเฟอร์ไบต์ขนาดใหญ่เคลื่อนที่ในลักษณะที่สามารถถ่ายโอนได้ สิ่งเหล่านี้เป็นคุณสมบัติของแหล่งที่มาที่เป็นรูปธรรม ไม่ใช่การจดชวเลขทางการตลาด พวกเขาอธิบายว่างานเกิดขึ้นที่ไหนและความคืบหน้ากลับมาอย่างไรโดยไม่อ้างว่าทุกเบราว์เซอร์กำหนดเวลาเหมือนกัน
ทดสอบสถาปัตยกรรมด้วยรูปภาพที่เวิร์กโฟลว์ของคุณใช้จริง ดูการควบคุมระหว่างการแปลง ยืนยันความคืบหน้าต่อไฟล์ ตรวจสอบความล้มเหลว และตรวจสอบแผงเครือข่ายเพื่อดูเครื่องหมายทดสอบ การออกแบบของ ToolAcre ให้หลักฐานที่สังเกตได้: โมดูลผู้ปฏิบัติงานจริง ผลลัพธ์ที่วัดได้ และไบต์ดาวน์โหลดในเครื่อง แทนที่จะเป็นงานระยะไกลที่ทึบแสง