ฉันเพิ่งสร้างรูปแบบผนังอิฐเป็นส่วนหนึ่งของฉัน #แพทเทิร์นเล็ก ซีรีส์ ความท้าทายที่ฉันสร้างรูปแบบหรือพื้นผิวที่ดูเป็นธรรมชาติใน SVG ภายใน 560 ไบต์ (หรือขนาดประมาณสองทวีต) เพื่อให้เข้ากับข้อจำกัดนี้ ฉันได้ผ่านการเดินทางที่สอนวิธีที่รุนแรงบางอย่างในการเพิ่มประสิทธิภาพรูปแบบ SVG เพื่อให้มีโค้ดน้อยที่สุดเท่าที่จะเป็นไปได้โดยไม่ส่งผลต่อคุณภาพของภาพโดยรวม
ฉันต้องการจะแนะนำคุณตลอดกระบวนการและแสดงให้คุณเห็นว่าเราสามารถนำรูปแบบ SVG ที่เริ่มต้นที่ 197 ไบต์ไปจนเหลือเพียง 44 ไบต์ได้อย่างไร ซึ่งลดลงอย่างมากถึง 77.7%!
รูปแบบ SVG
นี่คือสิ่งที่เรียกว่ารูปแบบอิฐ เป็นรูปแบบอิฐที่พบบ่อยที่สุด และคุณเคยเห็นมาก่อนแน่นอน: อิฐแต่ละแถวจะถูกชดเชยด้วยความยาวของอิฐครึ่งหนึ่ง ทำให้เกิดรูปแบบที่เซซ้ำซาก การจัดเรียงค่อนข้างง่าย ทำให้ SVG's <pattern>
องค์ประกอบที่ลงตัวอย่างสมบูรณ์แบบในการทำซ้ำในโค้ด
SVG <pattern>
องค์ประกอบใช้วัตถุกราฟิกที่กำหนดไว้ล่วงหน้าซึ่งสามารถจำลองแบบ (หรือ "เรียงต่อกัน") ในช่วงเวลาคงที่ตามแกนแนวนอนและแนวตั้ง โดยพื้นฐานแล้ว เรากำหนดรูปแบบกระเบื้องสี่เหลี่ยม และจะมีการทำซ้ำเพื่อทาสีพื้นที่เติม
ขั้นแรก มากำหนดขนาดของอิฐและช่องว่างระหว่างอิฐแต่ละก้อนกัน เพื่อความง่าย ให้ใช้ตัวเลขกลมที่สะอาด: a width of 100
และส่วนสูงของ 30
สำหรับอิฐและ 10
สำหรับช่องว่างแนวนอนและแนวตั้งระหว่างพวกเขา
ต่อไป เราต้องระบุไทล์ "ฐาน" ของเรา และโดย "กระเบื้อง" ฉันกำลังพูดถึงกระเบื้องลายมากกว่ากระเบื้องจริงเพื่อไม่ให้สับสนกับอิฐ ลองใช้ส่วนที่ไฮไลต์ของรูปภาพด้านบนเป็นไทล์รูปแบบของเรา: อิฐทั้งหมดสองก้อนในแถวแรก และหนึ่งก้อนที่ประกบระหว่างอิฐครึ่งก้อนสองก้อนในแถวที่สอง สังเกตว่าช่องว่างถูกรวมไว้อย่างไรและที่ไหนเพราะจำเป็นต้องรวมไว้ในไทล์รูปแบบที่ซ้ำกัน
เมื่อใช้ <pattern>
เราต้องกำหนดรูปแบบ width
และ height
ซึ่งสอดคล้องกับความกว้างและความสูงของกระเบื้องฐาน เพื่อให้ได้มิติ เราต้องใช้คณิตศาสตร์เล็กน้อย:
Tile Width = 2(Brick Width) + 2(Gap) = 2(100) + 2(10) = 220
Tile Height = 2(Bright Height) + 2(Gap) = 2(30) + 2(10) = 80
เอาล่ะ กระเบื้องลายของเราคือ 220✕80
. เรายังต้องตั้งค่า patternUnits
คุณลักษณะ โดยที่ค่า userSpaceOnUse
โดยพื้นฐานแล้วหมายถึงพิกเซล สุดท้ายเพิ่ม an id
เป็นรูปแบบที่จำเป็นเพื่อให้สามารถอ้างอิงได้เมื่อเราวาดภาพองค์ประกอบอื่นด้วย
<pattern id="p" width="220" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
ตอนนี้เราได้กำหนดมิติของไทล์แล้ว ความท้าทายคือการสร้างโค้ดสำหรับไทล์ในลักษณะที่แสดงกราฟิกด้วยจำนวนไบต์ที่น้อยที่สุด นี่คือสิ่งที่เราหวังว่าจะได้รับในตอนท้าย:
มาร์กอัปเริ่มต้น (197 ไบต์)
วิธีที่ง่ายและเปิดเผยที่สุดในการสร้างรูปแบบขึ้นมาใหม่ซึ่งอยู่ในความคิดของฉันคือการวาดสี่เหลี่ยมห้าเหลี่ยม โดยค่าเริ่มต้น the fill
ขององค์ประกอบ SVG เป็นสีดำและ stroke
มีความโปร่งใส วิธีนี้ใช้ได้ผลดีสำหรับการเพิ่มประสิทธิภาพรูปแบบ SVG เนื่องจากเราไม่ต้องประกาศอย่างชัดเจนในโค้ด
แต่ละบรรทัดในโค้ดด้านล่างกำหนดสี่เหลี่ยมผืนผ้า ดิ width
และ height
ถูกกำหนดไว้เสมอ และ x
และ y
ตำแหน่งจะถูกกำหนดก็ต่อเมื่อสี่เหลี่ยมผืนผ้าถูกชดเชยจาก 0
ตำแหน่ง
<rect width="100" height="30"/>
<rect x="110" width="100" height="30"/>
<rect y="40" width="45" height="30"/>
<rect x="55" y="40" width="100" height="30"/>
<rect x="165" y="40" width="55" height="30"/>
แถวบนสุดของกระเบื้องมีอิฐเต็มความกว้างสองก้อน อิฐก้อนที่สองอยู่ในตำแหน่ง x="110"
ที่ช่วยให้ 10
พิกเซลของช่องว่างก่อนอิฐ ในทำนองเดียวกันมี 10
พิกเซลของช่องว่างหลังเพราะอิฐสิ้นสุดที่ 210
พิกเซล (110 + 100 = 210
) บนแกนนอนแม้ว่า <pattern>
ความกว้างคือ 220
พิกเซล เราต้องการพื้นที่เพิ่มเติมเล็กน้อย มิฉะนั้นอิฐก้อนที่สองจะรวมเข้ากับอิฐก้อนแรกในกระเบื้องที่อยู่ติดกัน
อิฐในแถวที่สอง (ล่าง) จะถูกชดเชย ดังนั้นแถวนั้นมีอิฐครึ่งหนึ่งสองก้อนและอิฐทั้งหมดหนึ่งก้อน ในกรณีนี้ เราต้องการให้อิฐครึ่งความกว้างผสานเข้าด้วยกัน เพื่อไม่ให้มีช่องว่างที่จุดเริ่มต้นหรือจุดสิ้นสุด ทำให้อิฐเหล่านี้ไหลลื่นไปกับอิฐในกระเบื้องลวดลายที่อยู่ติดกัน เมื่อทำการหักล้างอิฐเหล่านี้ เราต้องรวมช่องว่างครึ่งหนึ่งด้วย ดังนั้น x
ค่าคือ 55
และ 165
ตามลำดับ
การนำองค์ประกอบกลับมาใช้ใหม่ (-43B, ทั้งหมด 154B)
ดูเหมือนไม่มีประสิทธิภาพในการกำหนดอิฐแต่ละก้อนอย่างชัดเจน มีวิธีเพิ่มประสิทธิภาพรูปแบบ SVG โดยการใช้รูปร่างซ้ำแทนหรือไม่
ฉันไม่คิดว่ามันเป็นที่รู้จักกันอย่างแพร่หลายว่า SVG มี a <use>
องค์ประกอบ. คุณสามารถอ้างอิงองค์ประกอบอื่นด้วยและแสดงผลองค์ประกอบที่อ้างอิงได้ทุกที่ <use>
ถูกนำมาใช้. วิธีนี้ช่วยประหยัดไบต์ได้ค่อนข้างมาก เนื่องจากเราสามารถละเว้นการระบุความกว้างและความสูงของอิฐแต่ละก้อนได้ ยกเว้นอิฐก้อนแรก
ที่กล่าวว่า <use>
มาพร้อมกับราคาเล็กน้อย นั่นคือเราต้องเพิ่ม id
สำหรับองค์ประกอบที่เราต้องการนำกลับมาใช้ใหม่
<rect id="b" width="100" height="30"/>
<use href="#b" x="110"/>
<use href="#b" x="-55" y="40"/>
<use href="#b" x="55" y="40"/>
<use href="#b" x="165" y="40"/>
สั้นที่สุด id
เป็นไปได้คือตัวละครตัวเดียว ดังนั้นฉันจึงเลือก "b" สำหรับอิฐ ดิ <use>
องค์ประกอบสามารถวางตำแหน่งได้คล้ายกับ <rect>
ด้วย x
และ y
คุณลักษณะเป็นออฟเซ็ต เนื่องจากอิฐแต่ละก้อนเต็มความกว้างแล้วเราจึงเปลี่ยนไปใช้ <use>
(จำไว้ว่าเราแบ่งอิฐครึ่งหนึ่งอย่างชัดเจนในแถวที่สองของกระเบื้องลวดลาย) เราต้องใช้ค่าลบ x
ในแถวที่สอง จากนั้นตรวจสอบให้แน่ใจว่าอิฐก้อนสุดท้ายล้นจากแผ่นกระเบื้องเพื่อการเชื่อมต่อที่ไร้รอยต่อระหว่างอิฐ สิ่งเหล่านี้เป็นเรื่องปกติเพราะทุกสิ่งที่อยู่นอกกระเบื้องลวดลายจะถูกตัดออกโดยอัตโนมัติ
คุณมองเห็นสตริงซ้ำๆ ที่สามารถเขียนได้อย่างมีประสิทธิภาพมากขึ้นหรือไม่? มาทำงานกันต่อไป
การเขียนใหม่เป็นเส้นทาง (-54B, ทั้งหมด 100B)
<path>
น่าจะเป็นองค์ประกอบที่ทรงพลังที่สุดใน SVG คุณสามารถวาดรูปทรงใดก็ได้ด้วย "คำสั่ง" ใน d
คุณลักษณะ. มี 20 คำสั่ง แต่เราต้องการคำสั่งที่ง่ายที่สุดสำหรับสี่เหลี่ยมเท่านั้น
นี่คือที่ที่ฉันลงจอด:
<path d="M0 0h100v30h-100z M110 0h100v30h-100 M0 40h45v30h-45z M55 40h100v30h-100z M165 40h55v30h-55z"/>
ฉันรู้ ตัวเลขและตัวอักษรสุดแปลก! ล้วนมีความหมาย, แน่นอน. นี่คือสิ่งที่เกิดขึ้นในกรณีนี้:
M{x} {y}
: ย้ายไปยังจุดตามพิกัดz
: ปิดส่วนปัจจุบันh{x}
: ลากเส้นแนวนอนจากจุดปัจจุบัน โดยมีความยาวเท่ากับx
ในทิศทางที่กำหนดโดยเครื่องหมายของx
. ตัวพิมพ์เล็กx
ระบุพิกัดสัมพัทธ์v{y}
: ลากเส้นแนวตั้งจากจุดปัจจุบัน โดยมีความยาวเท่ากับy
ในทิศทางที่กำหนดโดยเครื่องหมายของy
. ตัวพิมพ์เล็กy
ระบุพิกัดสัมพัทธ์
มาร์กอัปนี้มีความกระชับมากกว่าก่อนหน้ามาก (การขึ้นบรรทัดใหม่และการเว้นวรรคสำหรับการเยื้องมีไว้สำหรับการอ่านเท่านั้น) และนี่ เราจัดการตัดขนาดเริ่มต้นออกไปครึ่งหนึ่งแล้ว โดยเหลือเพียง 100 ไบต์ ถึงกระนั้น มีบางอย่างที่ทำให้ฉันรู้สึกว่าสิ่งนี้อาจเล็กลง…
การแก้ไขไทล์ (-38B, ทั้งหมด 62B)
กระเบื้องลายของเรามีชิ้นส่วนที่ซ้ำกันหรือไม่? เป็นที่ชัดเจนว่าในแถวแรกอิฐทั้งหมดถูกทำซ้ำ แต่แถวที่สองล่ะ? มองเห็นยากขึ้นเล็กน้อย แต่ถ้าเราผ่าอิฐตรงกลางออกครึ่งหนึ่ง ก็จะมองเห็นได้ชัดเจน
อิฐตรงกลางไม่ได้ผ่าครึ่งพอดี มีการชดเชยเล็กน้อยเพราะเราต้องคำนึงถึงช่องว่างด้วย อย่างไรก็ตาม เราเพิ่งพบรูปแบบไทล์พื้นฐานที่ง่ายกว่า ซึ่งหมายความว่ามีไบต์น้อยลง! นี่ก็หมายความว่าเราต้องลดครึ่ง width
ของเรา <pattern>
องค์ประกอบตั้งแต่ 220 ถึง 110
<pattern id="p" width="110" height="80" patternUnits="userSpaceOnUse"> <!-- pattern content here -->
</pattern>
ตอนนี้เรามาดูวิธีการวาดไทล์แบบง่ายด้วย <path>
:
<path d="M0 0h100v30h-100z M0 40h45v30h-45z M55 40h55v30h-55z"/>
ขนาดลดลงเหลือ 62 ไบต์ ซึ่งน้อยกว่าหนึ่งในสามของขนาดดั้งเดิมอยู่แล้ว! แต่ทำไมต้องหยุดที่นี่ ในเมื่อเรายังมีอะไรได้อีกมาก!
คำสั่งพาธย่อ (-9B, รวม 53B)
มันคุ้มค่าที่จะเข้าไปลึกลงไปใน <path>
องค์ประกอบ เพราะมันให้คำแนะนำเพิ่มเติมสำหรับการเพิ่มประสิทธิภาพรูปแบบ SVG ความเข้าใจผิดอย่างหนึ่งที่ฉันมีเมื่อทำงานด้วย <path>
เกี่ยวกับวิธีการ fill
แอตทริบิวต์ทำงาน ฉันเคยเล่น MS Paint บ่อยมากในวัยเด็ก ฉันได้เรียนรู้ว่ารูปร่างใดๆ ที่ฉันต้องการเติมด้วยสีทึบจะต้องปิด นั่นคือไม่มีจุดเปิด มิฉะนั้นสีจะรั่วออกจากรูปทรงและหกเลอะไปทั่ว
อย่างไรก็ตาม ใน SVG สิ่งนี้ไม่เป็นความจริง ให้ฉันพูด ข้อมูลจำเพาะ ตัวเอง:
การดำเนินการเติมเติมเส้นทางย่อยที่เปิดอยู่โดยดำเนินการเติมราวกับว่ามีการเพิ่มคำสั่ง "closepath" เพิ่มเติมในเส้นทางเพื่อเชื่อมต่อจุดสุดท้ายของเส้นทางย่อยกับจุดแรกของเส้นทางย่อย
ซึ่งหมายความว่าเราสามารถละเว้นคำสั่งปิดเส้นทาง (z
) เนื่องจากเส้นทางย่อยจะถูกปิดโดยอัตโนมัติเมื่อกรอก
อีกสิ่งหนึ่งที่มีประโยชน์ที่ควรรู้เกี่ยวกับคำสั่งพาธคือมันมาในรูปแบบตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก ตัวพิมพ์เล็กหมายถึงมีการใช้พิกัดสัมพัทธ์ ตัวพิมพ์ใหญ่หมายถึงใช้พิกัดสัมบูรณ์แทน
มันยากกว่านั้นเล็กน้อยด้วย H
และ V
คำสั่งเพราะมีพิกัดเดียวเท่านั้น นี่คือวิธีที่ฉันจะอธิบายคำสั่งทั้งสองนี้:
H{x}
: ลากเส้นแนวนอนจากจุดปัจจุบันเพื่อพิกัดx
.V{y}
: ลากเส้นแนวตั้งจากจุดปัจจุบันเพื่อประสานy
.
เมื่อเราวาดอิฐก้อนแรกในกระเบื้องลาย เราเริ่มจาก (0,0)
พิกัด. จากนั้นเราก็ลากเส้นแนวนอนไปที่ (100,0)
และเส้นแนวตั้งถึง (100,30)
และสุดท้าย ให้ลากเส้นแนวนอนไปที่ (0,30)
. เราใช้ h-100
คำสั่งในบรรทัดสุดท้ายแต่จะเท่ากับ H0
ซึ่งเป็นสองไบต์แทนที่จะเป็นห้า เราสามารถแทนที่สองเหตุการณ์ที่คล้ายคลึงกันและแยกรหัสของเรา <path>
ลงไปนี้:
<path d="M0 0h100v30H0 M0 40h45v30H0 M55 40h55v30H55"/>
โกนอีก 9 ไบต์ - เราจะเล็กลงได้แค่ไหน?
บริดจ์ (-5B, รวม 48B)
คำสั่งที่ยาวที่สุดที่ขวางทางรูปแบบ SVG ที่ได้รับการปรับแต่งอย่างเต็มที่คือคำสั่ง "ย้ายไปที่" ซึ่งกินเนื้อที่ 4, 5 และ 6 ไบต์ตามลำดับ ข้อจำกัดหนึ่งที่เรามีคือ:
ส่วนข้อมูลพาธ (ถ้ามี) ต้องขึ้นต้นด้วยคำสั่ง "moveto"
แต่ไม่เป็นไร อันแรกสั้นที่สุดอยู่แล้ว ถ้าเราสลับแถว เราสามารถกำหนดเส้นทางที่เราจะต้องย้ายระหว่างอิฐในแนวนอนหรือแนวตั้งเท่านั้น จะเป็นอย่างไรถ้าเราใช้ . ได้ h
และ v
คำสั่งที่นั่นแทน M
?
แผนภาพด้านบนแสดงวิธีการวาดรูปร่างทั้งสามด้วยเส้นทางเดียว โปรดทราบว่าเรากำลังใช้ประโยชน์จากข้อเท็จจริงที่ว่า fill
การดำเนินการจะปิดส่วนที่เปิดโดยอัตโนมัติระหว่าง (110,0)
และ (0,0)
. ด้วยการจัดเรียงใหม่นี้ เรายังได้ย้ายช่องว่างทางด้านซ้ายของอิฐเต็มความกว้างในแถวที่สองด้วย นี่คือลักษณะของโค้ด ซึ่งยังคงแบ่งออกเป็นอิฐก้อนเดียวต่อบรรทัด:
<path d="M0 0v30h50V0 h10v30h50 v10H10v30h100V0"/>
แน่นอนว่าเราพบวิธีแก้ปัญหาที่เล็กที่สุดแล้วโดยเหลือ 48 ไบต์ใช่ไหม! ดี…
การตัดแต่งตัวเลข (-4B, รวม 44B)
หากคุณสามารถปรับเปลี่ยนมิติข้อมูลได้เล็กน้อย มีวิธีเล็กน้อยที่เราสามารถเพิ่มประสิทธิภาพรูปแบบ SVG ได้ เราได้ดำเนินการกับความกว้างของอิฐ 100
พิกเซล แต่นั่นคือสามไบต์ เปลี่ยนเป็น 90
หมายถึงหนึ่งไบต์น้อยลงทุกครั้งที่เราต้องเขียน ในทำนองเดียวกัน เราใช้ช่องว่างของ 10
พิกเซล — แต่ถ้าเราเปลี่ยนเป็น 8
แต่เราบันทึกไบต์ในแต่ละเหตุการณ์เหล่านั้น
<path d="M0 0v30h45V0 h8v30h45 v8H8v30h90V0"/>
แน่นอน นี่หมายความว่าเราต้องปรับขนาดลวดลายให้เหมาะสมด้วย นี่คือรหัสรูปแบบ SVG ที่ปรับให้เหมาะสมขั้นสุดท้าย:
<pattern id="p" width="98" height="76" patternUnits="userSpaceOnUse"> <path d="M0 0v30h45V0h8v30h45v8H8v30h90V0"/>
</pattern>
บรรทัดที่สองในตัวอย่างด้านบน — ไม่นับการเยื้อง — is ไบต์ 44. เรามาที่นี่จาก 197 ไบต์ในการวนซ้ำหกครั้ง อ้วนนน ลดขนาด 77.7%!
ฉันสงสัยว่า… นี่เป็นขนาดที่เล็กที่สุดจริงหรือ เราได้ดูวิธีที่เป็นไปได้ทั้งหมดในการปรับรูปแบบ SVG ให้เหมาะสมแล้วหรือยัง
ฉันขอเชิญคุณให้ลองย่อโค้ดนี้ให้เล็กลง หรือแม้แต่ทดลองวิธีอื่นในการเพิ่มประสิทธิภาพรูปแบบ SVG ฉันชอบที่จะดูว่าเราสามารถหาค่าต่ำสุดของโลกที่แท้จริงด้วยภูมิปัญญาของฝูงชนได้หรือไม่!
เพิ่มเติมเกี่ยวกับการสร้างและเพิ่มประสิทธิภาพรูปแบบ SVG
หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการสร้างและเพิ่มประสิทธิภาพรูปแบบ SVG โปรดอ่านบทความของฉันเกี่ยวกับ การสร้างลวดลายด้วยฟิลเตอร์ SVG. หรือหากต้องการดูแกลเลอรีที่มีมากกว่า 60 รูปแบบ คุณสามารถดู คอลเลกชัน PetitePatterns CodePen. สุดท้ายนี้ เชิญรับชมได้เลยครับ บทช่วยสอนของฉันบน YouTube เพื่อช่วยให้คุณเข้าถึงรูปแบบ SVG ได้ลึกยิ่งขึ้น
การเพิ่มประสิทธิภาพรูปแบบ SVG ให้มีขนาดเล็กที่สุด เผยแพร่ครั้งแรกเมื่อ CSS-เคล็ดลับ. คุณควร รับจดหมายข่าว.
- "
- 10
- 100
- 77
- 9
- 98
- เกี่ยวกับเรา
- แน่นอน
- ลงชื่อเข้าใช้
- เพิ่มเติม
- ทั้งหมด
- การอนุญาต
- แล้ว
- อื่น
- เข้าใกล้
- AREA
- บทความ
- แอตทริบิวต์
- ใช้ได้
- แกน
- บิต
- Black
- ท้าทาย
- เปลี่ยนแปลง
- ปิด
- รหัส
- ร่วมกัน
- การเชื่อมต่อ
- มี
- เนื้อหา
- ประสานงาน
- ได้
- การสร้าง
- ปัจจุบัน
- ข้อมูล
- ลึก
- ลง
- สิ้นสุด
- ที่จัดตั้งขึ้น
- ทุกอย่าง
- ตัวอย่าง
- ยกเว้น
- การทดลอง
- ในที่สุด
- ชื่อจริง
- พอดี
- ไหล
- พบ
- ต่อไป
- ช่องว่าง
- ได้รับ
- เหตุการณ์ที่
- มี
- ความสูง
- ช่วย
- โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม
- ไฮไลต์
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- HTTPS
- แยกแยะ
- ภาพ
- ประกอบด้วย
- รวม
- IT
- ตัวเอง
- ที่รู้จักกัน
- รั่วไหล
- เรียนรู้
- ได้เรียนรู้
- การใช้ประโยชน์
- Line
- น้อย
- มอง
- ความรัก
- ทำให้
- การทำ
- การจัดการ
- คณิตศาสตร์
- ใจ
- ข้อมูลเพิ่มเติม
- มากที่สุด
- ย้าย
- MS
- จำนวน
- ตัวเลข
- ชดเชย
- ถูก
- เปิด
- การปรับให้เหมาะสม
- มิฉะนั้น
- แบบแผน
- กายภาพ
- จุด
- ตำแหน่ง
- เป็นไปได้
- ที่มีประสิทธิภาพ
- สวย
- ราคา
- กระบวนการ
- ให้
- คุณภาพ
- ปัดเศษ
- วิ่ง
- กล่าวว่า
- ไร้รอยต่อ
- ชุด
- ชุด
- รูปร่าง
- คล้ายคลึงกัน
- ง่าย
- หก
- ขนาด
- So
- ทางออก
- บางสิ่งบางอย่าง
- ช่องว่าง
- จุด
- เริ่มต้น
- เริ่มต้น
- ที่สนับสนุน
- การพูดคุย
- ตลอด
- ด้านบน
- โปร่งใส
- บทเรียน
- ใช้
- ความคุ้มค่า
- รายละเอียด
- W3
- นาฬิกา
- ยินดีต้อนรับ
- อะไร
- ภายใน
- ไม่มี
- งาน
- การทำงาน
- โรงงาน
- คุ้มค่า
- YouTube