ทำไมเบราว์เซอร์ถึงหนักขนาดนั้น [ปิด]

ย้อนกลับไปในปี 1998 ฉันมีคอมพิวเตอร์ที่มี CPU Pentium MMX 233MHz และการ์ด GFX ที่ไม่มีการเร่งความเร็วแบบ 3D มันสามารถเรียกใช้เกมอย่าง Quake II ในอัตรา FPS ที่เหมาะสม คอมพิวเตอร์ปัจจุบันของฉันมีประสิทธิภาพมากกว่าและ GPU ระดับกลาง แต่ก็ยังลำบากที่จะเข้าถึง 20 FPS เมื่อเรนเดอร์โมเดลเดียวภายใน skybox ด้วย WebGL แม้แต่หน้าปกติที่มีภาพเคลื่อนไหว 2D CSS จำนวนมากก็นำคอมพิวเตอร์ที่ทันสมัยมาสู่หัวเข่าของพวกเขา

ในฐานะที่เป็นนักพัฒนาเว็บผมเข้าใจว่ามีจำนวนมากที่เกิดขึ้นในหน้าเว็บ แต่ไม่สิ่งที่ทำให้มันที่หนัก เบราว์เซอร์สมัยใหม่รวบรวม JavaScript ไปยังรหัสเครื่องเนทีฟ CPU ก่อนที่จะรันและการเรนเดอร์ไปยังองค์ประกอบแคนวาสไม่ควรกระตุ้นให้ DOM สร้างใหม่ดังนั้นในทางทฤษฎีมันควรจะเร็วกว่ามาก

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

หน้าเว็บจำนวนมากรู้สึกช้าเพราะพวกเขาขอโฆษณาจากที่ต่างๆ หน้าอื่น ๆ รู้สึกช้าเพราะจาวาสคริปต์เขียนได้ไม่ดี ปัจจัยอื่น ๆ ได้รับการอธิบายโดย Mokubai และผู้ใช้ * "ตัวหาร" ทั่วไป แต่เป็นจาวาสคริปต์ โดยทั่วไปจะทำให้เบราว์เซอร์ของคุณช้า บางคนจะบอกว่าแฟลชเป็นหลัก แต่ฉันต้องไม่เห็นด้วย หน้าแฟลชที่เขียนอย่างดีนั้นมีความเอนเอียงและมีความหมาย ภาพเคลื่อนไหว 3 มิติ, เกมแบบโต้ตอบไม่ว่าอะไรก็ตาม ... ปัญหาหลักคือคนที่ไม่รู้วิธีการเขียนโปรแกรมอย่างมีประสิทธิภาพ และมันไม่ใช่เรื่องง่ายเสมอไป!

อย่างไรก็ตาม. ถ้าคุณเรียกใช้ Firefox ได้รับNoScript มันจะปิดกั้นจาวาสคริปต์ทั้งหมด (และแฟลช) ในขณะที่ช่วยให้คุณเปิดใช้งานองค์ประกอบ "รวย" ในแบบทีละหน้าหรือทีละหน้า หากคุณไม่ได้เป็นแฟนของ firefox แสดงว่า google chrome เป็นทางออกที่ดีที่สุดของคุณเพราะมันเร็วจริงๆ

หน้าเว็บมีขนาดใหญ่กว่าในทุกวันนี้เมื่อสองทศวรรษที่แล้วและพวกเขายังใช้ส่วนประกอบที่ใช้ CPU มากเช่น Flash

หน้าเว็บจากสองทศวรรษที่ผ่านมาจะประมาณ 7KB ปัจจุบันมีการตอกบัตรประมาณ 200-300K หรือไม่ และหลังจากนั้นคุณสามารถ JavaScript น้อยที่สุดโดยมีรูปภาพเพียงเล็กน้อยและถ้าเป็นรูปภาพคุณก็กำลังดูที่ GIF หรือ JPEG ขนาดเล็ก และ Flash สามารถล็อคเครื่องที่มีประสิทธิภาพแย่มาก ตอนนี้คุณมีเว็บไซต์ที่มีรายการ Flash หลายรายการโดยมี 1920x1080 หรือ JPEG ที่ใหญ่กว่า

เบราว์เซอร์นั้นมีประสิทธิภาพมากที่สุดเท่าที่จะทำได้

มันค่อนข้างไม่ยุติธรรมเลยที่จะเปรียบเทียบหน้าเต็มรูปแบบ 3 มิติ, CSS, AJAX และ JavaScript กับหน้าเว็บเก่าที่มีความซับซ้อนมากที่สุดคือการสลับภาพไปรอบ ๆ บนปุ่มหรือในหน้าทุก ๆ สองสามวินาที

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

แบบจำลองใน Quake นั้นไม่ซับซ้อนการจัดการลำดับของรูปหลายเหลี่ยมต่อรูปแบบแทนที่จะเป็นรูปแบบเกมสมัยใหม่ที่คาดหวังรูปหลายเหลี่ยมหลายหมื่นต่อรูปแบบ

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

ลองดูเพื่อดูว่าคุณสามารถลดความซับซ้อน (จำนวนรูปหลายเหลี่ยม) ในแบบจำลองของคุณเป็นกรณีแรก 3D ได้มากยิ่งขึ้นเกี่ยวกับการรับระดับความซับซ้อนที่เหมาะสมในแบบจำลองเพื่อให้ดูดี แต่ไม่มีผลกระทบ ประสิทธิภาพไม่ดีเกินไป

ไซต์นี้จากการทดลองของ Chromeเป็นตัวอย่างของ 3D ในเบราว์เซอร์ที่ดีดูราบรื่นสำหรับฉัน (ใน Firefox) และเป็นระดับของรายละเอียดที่ฉันคาดว่าจะทำงานได้ดี หากคุณมีปัญหากับเว็บไซต์ที่กำลังทำงานช้าอย่างเจ็บปวดฉันก็อยากรู้ว่าเบราว์เซอร์ของคุณใช้กราฟิกการ์ดเพื่อแสดงภาพ 3 มิติหรือไม่