ข้อบกพร่องของเบราว์เซอร์เรื้อรัง 7 จุดที่รบกวนเว็บ

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

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

แน่นอนว่ามันเคยแย่ลง ความแตกต่างอย่างมากระหว่างเบราว์เซอร์ส่วนใหญ่ถูกลบไปโดยความจงรักภักดีต่อมาตรฐานเว็บ W3C และความแตกต่างที่ยังคงอยู่นั้นสามารถถูกละเลยได้เนื่องจากการขยายตัวของไลบรารีเช่น jQuery ซึ่งไม่เพียง แต่ทำให้การแฮ็ก JavaScript ง่ายขึ้น แต่ยังอธิบายถึงวิธีการที่เบราว์เซอร์ไม่เหมือนกัน

ไลบรารีเหล่านี้มีพฤติกรรมในการตรึงจุดบกพร่องของเบราว์เซอร์ หาก บริษัท เบราว์เซอร์แก้ไขข้อบกพร่องที่เลวร้ายที่สุด "การแก้ไข" ใหม่อาจทำให้แพตช์เก่าและวิธีแก้ไขไม่ได้ ทันใดนั้น "การแก้ไข" ก็กลายเป็นปัญหาที่ขัดขวางความเสถียรแบบเก่าที่เราเจอกับข้อบกพร่อง โปรแกรมเมอร์ไม่สามารถชนะได้

ความเสถียรที่มาจากไลบรารีเช่น jQuery ยังสนับสนุนให้ผู้สร้างเบราว์เซอร์เร่งความเร็วและทำให้กระบวนการอัปเดตเบราว์เซอร์เป็นไปโดยอัตโนมัติ Mozilla มุ่งมั่นที่จะผลักดัน Firefox เวอร์ชันใหม่ทุกๆสองสามเดือน ในอดีตแต่ละเวอร์ชันจะเป็นเป้าหมายที่มั่นคงสำหรับนักพัฒนาเว็บและเราสามารถใส่ GIF เล็กน้อยในไซต์ของเราโดยอ้างว่าทำงานได้ดีที่สุดเช่น IE5 ตอนนี้เครื่องวัดระยะทางเปลี่ยนไปอย่างรวดเร็วจน Firefox เวอร์ชันใหม่จะออกในเวลาที่ HTML ใช้ในการเดินทางจากเซิร์ฟเวอร์ไปยังไคลเอนต์

ในขณะเดียวกันเราขอให้เบราว์เซอร์ทำมากกว่านี้ เว็บไซต์ของหนังสือพิมพ์ท้องถิ่นของฉันทำให้เครื่องของฉันกลายเป็นหัวเข่า - ขยายโฆษณาป๊อปโอเวอร์ตัวอย่างวิดีโอที่เล่นอัตโนมัติโค้ดเพื่อปรับแต่งโฆษณาตามประวัติการเข้าชมล่าสุดของฉัน ถ้าลูกสาวของฉันดูเว็บไซต์ตุ๊กตา JavaScript ก็พยายามหาโฆษณาตุ๊กตาเพื่อแสดงให้ฉันเห็น ความมหัศจรรย์ทั้งหมดนี้ทำให้ CPU ขึ้น

ทั้งหมดนี้หมายความว่าข้อบกพร่องของเบราว์เซอร์ในปัจจุบันหายากขึ้น แต่ยากที่จะปักหมุดลง นี่คือการดูประเภทล่าสุดของข้อบกพร่องของเบราว์เซอร์ที่ก่อให้เกิดปัญหาหรือในหลาย ๆ กรณีนักออกแบบและพัฒนาเว็บก็จู้จี้

เค้าโครง

จุดบกพร่องของเบราว์เซอร์ที่มองเห็นได้ชัดเจนที่สุดคือความบกพร่องของการจัดวาง ฐานข้อมูลบั๊ก Bugzilla ของ Mozilla มี 10 ส่วนสำหรับปัญหาการจัดวางและไม่รวมถึงปัญหาเลย์เอาต์ที่จัดหมวดหมู่ว่าเกี่ยวข้องกับ DOM, CSS หรือ Canvas งานที่สำคัญที่สุดของเบราว์เซอร์คือการจัดเรียงข้อความและรูปภาพและการทำให้ถูกต้องมักเป็นเรื่องยาก

จุดบกพร่องของการจัดวางหลายอย่างอาจดูเหมือนเล็กจนแทบจะเป็นเรื่องลึกลับ ตัวอย่างเช่น Bugzilla bug 1303580 เรียก Firefox สำหรับการใช้ฟอนต์เวอร์ชันตัวเอียงเมื่อแท็ก CSS เรียกแบบเฉียง บางทีอาจมีเพียงคนติดฟอนต์เท่านั้นที่สังเกตเห็นสิ่งนั้น ในขณะเดียวกัน Bugzilla bug 1296269 รายงานว่าบางส่วนของตัวอักษรใน Comic Sans ถูกตัดออกอย่างน้อยก็ใน Windows นักออกแบบฟอนต์สร้างความแตกต่างและสำคัญสำหรับพวกเขา เมื่อพวกเขาไม่สามารถรับรูปลักษณ์ที่ถูกต้องในทุกเบราว์เซอร์นักออกแบบเว็บไซต์อาจรู้สึกหงุดหงิดมากเกินไป

มีหลายร้อยหลายพันหรืออาจถึงล้านของข้อบกพร่องเหล่านี้ ที่เราพบปัญหาเกี่ยวกับภาพที่หายไปในโปรแกรมแก้ไข CMS และแท็กช่วงที่ปรากฏใน DOM เท่านั้น

หน่วยความจำรั่ว

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

รายละเอียดของข้อบกพร่องของหน่วยความจำรั่วอาจเป็นเรื่องลึกลับและเราโชคดีที่โปรแกรมเมอร์บางคนใช้เวลาในการแก้ไข พิจารณาปัญหา 640578 จากสแต็กเบราว์เซอร์ Chronium การเปลี่ยนส่วนหนึ่งของ DOM โดยการเล่นซอกับinnerHTMLคุณสมบัติทำให้หน่วยความจำรั่วไหล ตัวอย่างโค้ดที่มีการเรียกวนซ้ำแบบแน่นหนาrequestAnimationFrameจะทำให้ปัญหาซ้ำกัน มีหลายสิบประเด็นเช่นนี้

แน่นอนว่าไม่ใช่ความผิดของเบราว์เซอร์เสมอไป ตัวอย่างเช่นปัญหา Chromium 640922 ยังให้รายละเอียดเกี่ยวกับการรั่วไหลของหน่วยความจำและเป็นตัวอย่าง แม้ว่าการวิเคราะห์เพิ่มเติมจะแสดงให้เห็นว่าโค้ดตัวอย่างกำลังสร้างDate()วัตถุขึ้นระหว่างทางเพื่อทดสอบเวลาและอาจเป็นสาเหตุของปัญหา

แฟลช

ค่อนข้างเป็นทางการ ทุกคนลืมเกี่ยวกับงานศิลปะต่อต้านนามแฝงและวิดีโอบนเว็บที่ Adobe Flash นำมาสู่เว็บ เราแทนที่จะตำหนิสำหรับข้อขัดข้องทั้งหมดที่อาจเป็นความผิดพลาดหรือไม่ก็ได้ ตอนนี้กำลังจะเกษียณอย่างเป็นทางการ แต่ยังไม่เร็วไป แม้แต่ บริษัท ที่มีความคิดก้าวหน้าส่วนใหญ่ในการผลักดันมาตรฐานเว็บก็ยังดูเหมือนว่าจะมีโค้ด Flash อยู่ในหน้าเว็บ ฉันแปลกใจที่พบรหัส Flash นอกเว็บไซต์ MySpace และ GeoCities บ่อยเพียงใด

สัมผัสและคลิก

ไม่ใช่เรื่องง่ายที่จะเล่นกลอินพุตประเภทต่างๆโดยเฉพาะอย่างยิ่งในตอนนี้ที่แท็บเล็ตและโทรศัพท์สร้างการสัมผัสที่อาจหรือไม่อาจทำหน้าที่เหมือนการคลิกเมาส์ ไม่น่าแปลกใจที่พบว่ามีจุดบกพร่องมากมายในบริเวณนี้ เฟรมเวิร์ก Bootstrap JavaScript เป็นรายการยอดนิยมของข้อบกพร่องที่น่ารำคาญที่สุดและบางส่วนของการล่มสลายที่เลวร้ายที่สุดในหมวดหมู่นี้

ตัวอย่างเช่น Safari บางครั้งจะใช้นิ้วแตะที่ข้อความในแท็ก (151933) บางครั้งเมนูไม่ทำงานบน iPad เนื่องจากเบราว์เซอร์ได้เลื่อนสี่เหลี่ยมผืนผ้าเพื่อค้นหาอินพุต (150079) บางครั้งการคลิกทำให้เกิดการกระดิกแปลก ๆ ในรายการซึ่งอาจดูเหมือนว่ามันทำโดยนักออกแบบหงุดหงิด (158276) สิ่งเหล่านี้ทำให้เกิดความสับสนเมื่อข้อความหรือภาพบนหน้าจอไม่ตอบสนองอย่างที่เราคาดหวัง

วิดีโอ

แผนดังกล่าวมีไว้เพื่อลดความซับซ้อนของการส่งมอบเสียงและวิดีโอโดยการย้ายความรับผิดชอบภายในเบราว์เซอร์และออกจากโลกของปลั๊กอิน สิ่งนี้ได้ขจัดปัญหาเกี่ยวกับอินเทอร์เฟซ แต่ยังไม่ได้ขจัดปัญหาทั้งหมด รายการข้อบกพร่องของวิดีโอมีความยาวและหลายรายการก็มีให้เห็นมากเกินไป รายการ Bugzilla 754753 อธิบายถึง“ รอยเปื้อนสีแดงและสีเขียวส่วนใหญ่ที่มีภาพโกสต์ต่างๆ” และรายการ Bugzilla 1302991“ 'stutters' เนื่องจากไม่มีคำที่ดีกว่า "

ปัญหาที่ซับซ้อนที่สุดบางอย่างกำลังเกิดขึ้นเนื่องจากเบราว์เซอร์รวมกลไกการเข้ารหัสต่างๆที่ออกแบบมาเพื่อป้องกันการละเมิดลิขสิทธิ์ ข้อผิดพลาด 1304899 แสดงให้เห็นว่า Firefox ไม่ได้ดาวน์โหลดกลไกการเข้ารหัสที่ถูกต้อง (EME) จาก Adobe โดยอัตโนมัติ เป็นความผิดของ Firefox หรือไม่? Adobe ของ? หรืออาจจะเป็นพร็อกซีแปลก ๆ ?

ข้อบกพร่องของวิดีโอจะยังคงครอบงำต่อไป การรวมวิดีโอบนเว็บเข้ากับเนื้อหาในรูปแบบอื่น ๆ โดยการเพิ่มแท็กวิดีโอลงใน HTML5 ได้เปิดโอกาสใหม่ ๆ ให้กับนักออกแบบ แต่ความเป็นไปได้ใหม่แต่ละครั้งหมายถึงโอกาสใหม่ ๆ ที่จะทำให้จุดบกพร่องและความไม่สอดคล้องกันปรากฏขึ้น

โฮเวอร์

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

ตัวอย่างเช่นเบราว์เซอร์ Microsoft Edge ใหม่จะไม่ซ่อนเคอร์เซอร์เมื่อเมาส์วางเมาส์เหนือรายการอินพุตบางรายการ (817822) บางครั้งการวางเมาส์ไม่สิ้นสุด (5381673) บางครั้งเหตุการณ์โฮเวอร์เชื่อมโยงกับรายการที่ไม่ถูกต้อง (7787318) ทั้งหมดนี้นำไปสู่ความสับสนและกีดกันการใช้เอฟเฟกต์ที่ค่อนข้างเรียบร้อย

มัลแวร์

แม้ว่าจะเป็นการล่อลวงให้ตำหนิข้อบกพร่องของเบราว์เซอร์ในนักพัฒนาเบราว์เซอร์ แต่ก็มักจะไม่ยุติธรรม ปัญหาหลายอย่างเกิดจากมัลแวร์ที่ออกแบบมาเพื่อสร้างเป็นส่วนขยายหรือปลั๊กอินที่มีประโยชน์ ในหลาย ๆ กรณีมัลแวร์ทำสิ่งที่เป็นประโยชน์อย่างแท้จริงในขณะที่แอบขโมยคลิกหรือการค้าอยู่เบื้องหลัง

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

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

บทความที่เกี่ยวข้อง

  • นอกเหนือจาก jQuery: คำแนะนำสำหรับผู้เชี่ยวชาญเกี่ยวกับกรอบงาน JavaScript
  • รีวิว: 7 JavaScript IDE ที่นำไปทดสอบ
  • HTML5 shoot-out: Chrome, Safari, Firefox, IE และ Opera วัดผลได้อย่างไร
  • รีวิว: 13 เว็บเฟรมเวิร์ก Primo Python
  • พลังแห่งการเขียนโปรแกรมแบบขี้เกียจ
  • ดาวน์โหลด: คู่มือการพัฒนาอาชีพนักพัฒนา
  • 7 แนวคิดการเขียนโปรแกรมที่ไม่ดีที่ใช้ได้ผล
  • 9 นิสัยการเขียนโปรแกรมที่ไม่ดีที่เราแอบชอบ
  • 21 เทรนด์การเขียนโปรแกรมที่กำลังมาแรงและ 21 เทรนด์กำลังจะหนาว