เร็วได้อย่างไรบนแล็ปท็อปธรรมดา
หน้าจอเทรดนั้นหนัก: ประวัติยาว ติกที่ไม่เคยหยุด กราฟหลายตัวในหน้าเดียว TradeCanvas ทำงานเท่าที่แต่ละเฟรมต้องการเท่านั้น บนเธรดหลัก โดยไม่มีโค้ดจากภายนอก หน้านี้แสดงว่าทำอย่างไร และตรงไหนที่ยังปรับปรุงอยู่
อยู่ระหว่างพัฒนา: เอนจินเร็วพอจะใช้งานจริงได้แล้ว แต่ยังไม่เร็วเท่าที่จะเป็นในอนาคต หัวข้อสุดท้ายแสดงสิ่งที่เรารู้ว่ายังเหลืออยู่
แพ็กเกจเล็ก ทิศทางเดียว
แต่ละแพ็กเกจพึ่งพาเฉพาะแพ็กเกจที่อยู่ข้างล่างเท่านั้น ไม่มีโค้ดนอก TradeCanvas ทำงานในหน้าของคุณ คอมโพเนนต์สำหรับเฟรมเวิร์กใช้ React, Vue หรือ Svelte เป็น peer dependency และตัวเรนเดอร์ WebGL เป็นชังก์แยกที่โหลดเฉพาะเมื่อกราฟเรียกใช้
0 ไลบรารีภายนอกที่ต้องพึ่งพาขณะรัน
เส้นทางของหนึ่งติก
ราคามาจากฟีดของคุณและไปถึงหน้าจอภายในเฟรมเดียว แต่ละขั้นทำเฉพาะส่วนที่เปลี่ยน
- 1ฟีดของคุณ
DataAdapterWebSocket, REST, โบรกเกอร์: อะไรก็ได้ที่มีประวัติและสตรีม - 2ตัวจัดการสตรีม
StreamManagerโหลดประวัติก่อน แล้วจึงต่อข้อมูลสด คำตอบจากคำขอเก่าจะถูกทิ้ง และฟีดที่เงียบไปจะถูกตรวจพบภายใน 30 วินาที - 3ตัวรวมติก
TickAggregatorติกเข้าบัฟเฟอร์วงแหวนขนาด 1,000 แล้วถูกรวมเข้าแท่งของกรอบเวลานั้น - 4อินดิเคเตอร์
IndicatorEngineคำนวณใหม่จากแท่งสุดท้าย ไม่ใช่จากต้นชุดข้อมูล - 5วิวพอร์ต
Viewportไล่เฉพาะแท่งที่อยู่บนจอ และสเกลราคาคำนวณจากแท่งเหล่านั้นเท่านั้น - 6ลูปการเรนเดอร์
RenderLoopไม่ว่าติกจะเข้ามากี่ติก ฉากจะถูกวาดอย่างมากหนึ่งครั้งต่อเฟรมแอนิเมชัน - 7Canvas 2D หรือ WebGL
RenderEngineแคนวาสสองชั้น และมีแคนวาส GPU อยู่ข้างใต้เมื่อเปิด WebGL
หนึ่งติกใช้ต้นทุนแค่แท่งเดียว ไม่ใช่ทั้งประวัติ
เมื่อติกเปลี่ยนแท่งสุดท้าย อินดิเคเตอร์แต่ละตัวจะคำนวณต่อจากแท่งนั้น (และแท่งก่อนหน้าไม่กี่แท่งที่สูตรต้องย้อนดู) แทนการคำนวณทั้งชุดใหม่ หากแท่งที่จำไว้ไม่ตรงกันแล้ว ก็จะกลับไปคำนวณใหม่ทั้งหมด จึงไม่พลาดการแก้ไขข้อมูล
อินดิเคเตอร์ราว 20 ตัวมีการอัปเดตแบบคำนวณเพิ่มของตัวเอง และอีก 31 ตัวสร้างบนฐานที่คำนวณต่อทีละจุด อินดิเคเตอร์ที่อ่านเส้นของอินดิเคเตอร์อื่นก็คำนวณต่อได้เช่นกัน
เมื่อซูมออก: หนึ่งคอลัมน์ต่อพิกเซล
เมื่อแท่งแคบกว่าหนึ่งพิกเซล การวาดทีละแท่งคือการทำงานที่ตามองไม่เห็น แท่งเทียน บาร์ high-low และวอลุ่มจะถูกวาดเป็นหนึ่งคอลัมน์ต่อพิกเซล โดยใช้ราคาเปิดแรก ราคาสูงสุดที่สูงที่สุด ราคาต่ำสุดที่ต่ำที่สุด และราคาปิดสุดท้ายของแท่งที่อยู่ใต้พิกเซลนั้น เส้นและพื้นที่เก็บไว้ราวสองจุดต่อพิกเซล (LTTB) ส่วนเส้นและแบนด์ของอินดิเคเตอร์วาดหนึ่งช่วงต่อคอลัมน์พิกเซล
- แท่งที่มองเห็น
- 313
- แท่งต่อพิกเซล
- 0.39
- รูปที่วาด
- 313
แท่งไม่มีวันแคบกว่าหนึ่งในสี่ของพิกเซล CSS กราฟที่มีล้านแท่งจึงแสดงได้มากสุดราวสี่แท่งต่อพิกเซลเมื่อซูมออกจนสุด: ประมาณ 6,400 แท่งบนกราฟกว้าง 1,600 px การเลื่อนผ่านส่วนที่เหลือคือสิ่งที่เบนช์มาร์กล้านแท่งวัด
แคนวาสสองชั้น การชี้เมาส์จึงแทบไม่มีต้นทุน
ฉาก (กริด ซีรีส์ อินดิเคเตอร์ ภาพวาด คำสั่ง) อยู่บนแคนวาสหนึ่ง ส่วนเป้าเล็ง คำอธิบายกราฟ ป้ายแกน และตัวนับถอยหลังอยู่บนแคนวาสบาง ๆ ด้านบน การขยับเมาส์จะวาดใหม่เฉพาะชั้นบน การอัปเดตข้อมูลจะวาดฉากใหม่หนึ่งครั้งในเฟรมถัดไป
แคนวาสขนาดเต็มทุกชั้นทำให้เบราว์เซอร์ต้องผสมภาพหนึ่งครั้งต่อเฟรม เอนจินจึงใช้ให้น้อย: แคนวาสด้านหลังสำหรับการวาดแบบ 2D เท่านั้นมีอยู่เฉพาะตอนที่มีสิ่งต้องใช้
WebGL ด้วยการบันทึก ไม่ใช่การเขียนใหม่
กราฟวาดด้วยคำสั่งของ Canvas 2D เมื่อเปิด WebGL คำสั่งเหล่านั้นจะไปยังตัวบันทึกที่แปลงพาธ การระบาย และเส้นขอบเป็นคำสั่ง GPU ในหน่วยพิกเซลของอุปกรณ์ สิ่งที่ GPU วาดให้เหมือนกันไม่ได้จะคงอยู่บน Canvas 2D ตามลำดับ ภาพจึงเหมือนกันไม่ว่าจะใช้แบบไหน
- พาธ การระบาย และเส้นขอบ
- แท่งเทียน วอลุ่ม และกริด วาดแบบ instanced
- ซีรีส์อยู่ใน Float32Array เดียว หกค่าต่อแท่ง ติกหนึ่งเขียนทับเฉพาะส่วนท้าย
- ข้อความ
- รูปภาพและลวดลาย
- เงา ฟิลเตอร์ การตัดขอบแบบพิเศษ
- ทุกอย่างหลังขั้นแรกที่ GPU ทำไม่ได้
renderer: 'auto'ขอคอนเท็กซ์จากเบราว์เซอร์แบบที่ไม่มีข้อควรระวังด้านประสิทธิภาพร้ายแรง เครื่องที่ WebGL จะรันด้วยซอฟต์แวร์จึงยังใช้ Canvas 2D- ในหน้าเดียวมีกราฟถือคอนเท็กซ์ WebGL ได้สูงสุด 8 กราฟ (
setMaxWebGLCharts) ที่เหลือรอคิวและวาดด้วย Canvas 2D - หาก GPU ทิ้งคอนเท็กซ์ กราฟจะทำงานต่อด้วย Canvas 2D และสร้างใหม่บน WebGL เมื่อคอนเท็กซ์กลับมา
- แท่งเทียนถูกปัดเป็นพิกเซลอุปกรณ์เต็มด้วยกฎเดียวกันทั้งในเชเดอร์และบน CPU ตัวเรนเดอร์ทั้งสองจึงวางแท่งไว้บนพิกเซลเดียวกัน
สร้างมาเพื่อเครื่องสเปกต่ำ
- Canvas 2D เป็นค่าเริ่มต้นWebGL ต้องเปิดเองจนกว่าจะได้วัดผลบนอุปกรณ์มากขึ้น บนกราฟิกในตัวที่อัตราส่วนพิกเซลสูง คอขวดคือการผสมภาพของเบราว์เซอร์เอง ไม่ใช่การวาด
- ปรับขนาดหนึ่งครั้งต่อเฟรมอีเวนต์ปรับขนาดถูกรวมเป็นหนึ่งครั้งต่อเฟรม และขนาดที่ไม่เปลี่ยนจะไม่ทำอะไรเลย
- ประวัติแบบแบ่งหน้าแท่งเก่าโหลดครั้งละ 500 แท่งเมื่อเลื่อนย้อนหลัง ทีละคำขอ และเว้นระยะก่อนลองใหม่หลังล้มเหลว
- ไม่มีการกะพริบขณะโหลดม่านโหลดรอ 200 ms การสลับสัญลักษณ์ที่เร็วจึงไม่กะพริบ
- ดาวน์โหลดเล็กกราฟแบบ headless มีขนาด 176 KB หลัง gzip วิดเจ็ตครบชุด 315 KB และตัวเรนเดอร์ WebGL อีก 18 KB เมื่อใช้
- กระดานที่อัปเดตอยู่กับที่กระดานราคา bo-grid รวมติกเป็นแพตช์เดียวต่อเฟรม และวาดใหม่เฉพาะเซลล์ที่เปลี่ยน