Ohjelmointi

7 kroonista selainvirhettä, jotka vaivaavat verkkoa

Verkkoselaimet ovat uskomattomia. Jos ei olisi selaimia, emme pystyisi muodostamaan yhteyttä käyttäjien ja asiakkaiden kanssa yhtä hyvin kaatamalla tietoja ja asiakirjoja heidän työasemilleen, tableteilleen ja puhelimilleen. Valitettavasti kaikki verkkoselaimen toimittama upea sisältö tekee meistä paljon turhautuneempia, kun renderöinti ei ole niin tyylikästä tai virheetöntä kuin haluaisimme.

Verkkosivustojen kehittämisessä olemme yhtä paljon selainten armoilla kuin velkaa heille. Mikä tahansa häiriö millä tahansa alustalla hyppää ulos, varsinkin kun se kaatuu käyttäjien koneet. Ja kun muotoilu on sellainen palkkio erottautumisesta tai istuvuudesta, mikä tahansa rasvainen viiva tai väärin käytetty värin kosketus tuhoaa esteettisen kokemuksen, jota olemme työskennelleet. Pienin virhe, kuten ylimääräisen pikselin lisääminen viivan leveydelle tai taulukon kohdistaminen väärin hieman, voi johtaa turhauttavaan käyttökokemukseen, puhumattakaan sen löytämisen, tarkastamisen ja työskentelyn kustannuksista.

Tietenkin se oli ennen pahempaa. W3C-verkkostandardien noudattaminen on suurelta osin poistanut selainten väliset valtavat erot. Ja jäljellä olevat erot voidaan yleensä jättää huomiotta jQueryn kaltaisten kirjastojen lisääntymisen ansiosta, jotka paitsi tekevät JavaScript-hakkeroinnista myös paperille tavoista, joilla selaimet eivät ole samoja.

Näillä kirjastoilla on tapana jäädyttää selainvirheet paikalleen. Jos selainyhtiöt korjaavat joitain pahimmista virheistään, uudet "korjaukset" voivat häiritä vanhoja korjaustiedostoja ja kiertotöitä. Yhtäkkiä korjauksesta tulee ongelma, joka häiritsee vanhaa vakautta, jonka olemme kiinnittäneet virheen ympärille. Ohjelmoijat eivät voi voittaa.

JQueryn kaltaisten kirjastojen tuoma vakaus on myös kannustanut selainrakentajia nopeuttamaan ja automatisoimaan selainten päivitysprosesseja. Mozilla on sitoutunut julkaisemaan uuden version Firefoxista muutaman kuukauden välein. Aikaisemmin jokainen versio olisi vakaa kohde web-kehittäjille, ja voisimme laittaa pienen GIF: n sivustoihimme väittäen, että ne toimivat parhaiten esimerkiksi IE5: ssä. Nyt matkamittari pyörii niin nopeasti, että uusi Firefox-versio julkaistaan ​​ajassa, joka kuluu HTML-koodin kulkemiseen palvelimelta asiakkaalle.

Samaan aikaan pyydämme selaimia tekemään niin paljon enemmän. Paikallislehden verkkosivusto tuo koneeni polvilleen - laajentavat popover-mainokset, automaattiset toistot videokoodinpätkät, koodi mainosten mukauttamiseksi viimeisimpään selaushistoriaani. Jos tyttäreni katsoo nuken verkkosivustoa, JavaScript yrittää kiihkeästi löytää minulle näytettävän nuken mainoksen. Kaikki tämä taika kumoaa prosessorin.

Kaikki tämä tarkoittaa, että nykyiset selainvirheet ovat harvinaisempia, mutta niitä on vaikea löytää. Tässä on katsaus uusimpiin selainvirheiden genreihin, jotka vaivaavat - tai monissa tapauksissa yksinkertaisesti kiusaavat - verkkosuunnittelijoita ja -kehittäjiä.

Layout

Näkyvimmät selainvirheet ovat asetteluhäiriöitä. Mozillan Bugzilla-virhetietokannassa on 10 osiota asetteluongelmia varten, eikä se sisällä DOM: iin, CSS: ään tai kankaaseen liittyviä luokitteluongelmia. Selaimen tärkein tehtävä on järjestää teksti ja kuvat, ja sen oikeaksi saaminen on usein vaikeaa.

Monet ulkoasuvirheet voivat tuntua pieniltä siinä määrin, että ne ovat lähes esoteerisia. Esimerkiksi Bugzilla-vika 1303580 kehottaa Firefoxia käyttämään kirjasimen kursivoitua versiota, kun CSS-tunnisteet vaativat vinoa. Ehkä vain fontti-addikti huomaa sen. Samaan aikaan Bugzilla-vika 1296269 kertoo, että sarjakuva-kirjaimien osat on pilkottu ainakin Windowsissa. Fonttien suunnittelijat tekevät eron, ja heille on tärkeää. Kun verkkosuunnittelijat eivät voi saada täsmälleen oikeaa ulkoasua ja tuntumaa kaikissa selaimissa, he voivat turhautua ehkä liian liikaa.

Näitä vikoja on satoja, tuhansia, ehkä jopa miljoonia. Klo: Olemme kohdanneet ongelmia, jotka johtuvat kuvien katoamisesta CMS-editorissamme ja span-tunnisteista, jotka näkyvät vain DOM: ssä.

Muisti vuotaa

Usein on vaikea huomata muistivuotoja. Määritelmän mukaan ne eivät muuta näkyviä ominaisuuksia. Sivusto on renderoitu oikein, mutta selain ei siivoa asiaa. Muutama liian monta matkaa verkkosivustoille, jotka aiheuttavat vuodon, ja koneesi hidastuu indeksointiin, koska kaikki RAM-muistit on lukittu pitämällä datarakennetta, jota ei koskaan käytetä uudelleen. Siten käyttöjärjestelmä vaihtaa kiihkeästi virtuaalimuistilohkot levylle ja vietät aikaasi odottamalla. Paras valinta on käynnistää kone uudelleen.

Muistivuotovirheiden yksityiskohdat voivat olla hullun armeellisia, ja olemme onnekkaita, että jotkut ohjelmoijat vievät aikaa niiden korjaamiseen. Harkitse Chronium-selainpinon ongelmaa 640578. DOM: n osan muuttaminen viheriöimällä sisäinenHTML ominaisuus vuotaa muistia. Näyte koodinpätkä tiukalla toistuvalla silmukan kutsulla requestAnimationFrame kopioi ongelman. Tällaisia ​​asioita on kymmeniä.

Tietenkään se ei aina ole selaimen vika. Esimerkiksi Chromium-numero 640922 kertoo myös muistivuodon ja tarjoaa esimerkin. Lisäanalyysi kuitenkin osoittaa, että esimerkkikoodi oli luomassa Päivämäärä() esineitä matkan varrella ajan testaamiseksi, ja ne olivat todennäköisesti ongelman lähde.

Salama

Se on melko virallista. Kaikki ovat unohtaneet upeat anti-aliased-taideteokset ja verkkovideot, jotka Adobe Flash toi verkkoon. Sen sijaan syytämme sitä kaikista kaatumisista, jotka ovat saattaneet olla tai eivät olleet sen vikoja. Nyt se on virallisesti eläkkeellä, mutta se ei mene nopeasti. Jopa joillakin eteenpäin ajattelevista yrityksistä, jotka ajavat verkkostandardeja, näyttää olevan edelleen Flash-koodi sivuillaan. Olen yllättynyt siitä, kuinka usein löydän Flash-koodin MySpace- ja GeoCities-sivustojen ulkopuolella.

Koskettaa ja napsauttaa

Erilaisten syötteiden käsittely ei ole helppoa, varsinkin nyt, kun tabletit ja puhelimet tuottavat kosketuksia, jotka saattavat toimia tai eivät toimi hiiren napsautuksena. Sen ei pitäisi olla yllättävää, että tällä alueella on paljon vikoja. Bootstrap JavaScript -kehys pitää osumaluettelon kaikkein raivoisimmista virheistään, ja jotkut tämän luokan pahimmista pudotuksista.

Esimerkiksi Safari kaipaa joskus sormen napautuksia tunniste (151933). Joskus valikot eivät toimi iPadissa, koska selain on muuttanut suorakulmiota syötteen etsimiseksi (150079). Joskus napsautukset laukaisevat tuotteessa oudon heilunnan - mikä saattaa jopa näyttää siltä, ​​että sen on tehnyt tarkoituksellisesti särmikäs suunnittelija (158276). Kaikki nämä aiheuttavat sekaannusta, kun näytöllä näkyvä teksti tai kuvat eivät reagoi odotetulla tavalla.

Video

Suunnitelmana on aina ollut yksinkertaistaa äänen ja videon toimittamista siirtämällä vastuu selaimen sisällä ja laajennusten maailmasta. Tämä on poistanut käyttöliittymäongelmat, mutta se ei ole poistanut kaikkia ongelmia. Videovirheiden luettelo on pitkä, ja monet niistä ovat aivan liian näkyviä. Bugzillan merkinnässä 754753 kuvataan "enimmäkseen punaisia ​​ja vihreitä pilkkuja, jotka sisältävät erilaisia ​​haamukuvia", ja Bugzillan merkintää 1302991 "änkyttää" paremman sanan puuttuessa. "

Jotkut monimutkaisimmista ongelmista ovat nousemassa esiin, kun selaimet integroivat erilaiset salausmekanismit, jotka on suunniteltu estämään piratismi. Virhe 1304899 ehdottaa, että Firefox ei lataa oikeaa salaustekniikkaa (EME) automaattisesti Adobelta. Onko se Firefoxin vika? Adoben? Tai ehkä outo välityspalvelin?

Videovirheet hallitsevat edelleen. Verkkovideoiden integrointi muunlaiseen sisältöön lisäämällä videotunnisteita HTML5: een on avannut suunnittelijoille monia uusia mahdollisuuksia, mutta jokainen uusi mahdollisuus tarkoittaa uusia mahdollisuuksia virheiden ja epäjohdonmukaisuuksien ilmaantumiselle.

Leijuva

Verkkosivun kyky seurata hiirtä, joka liikkuu sivulla, auttaa verkkosuunnittelijoita antamaan käyttäjille vihjeitä siitä, mitkä ominaisuudet saattavat olla piilossa kuvan tai sanan takana. Valitettavasti leijuvat tapahtumat eivät aina pääse ketjuun niin nopeasti kuin pystyisivät.

Esimerkiksi uusi Microsoft Edge -selain ei piilota kohdistinta, kun hiiri leijuu joidenkin päällä syöttökohteet (817822). Joskus leijuminen ei pääty (5381673). Joskus leijutustapahtuma linkitetään väärään kohteeseen (7787318). Kaikki tämä aiheuttaa sekaannusta ja estää melko siistin vaikutuksen käytön.

Haittaohjelma

Vaikka on houkuttelevaa syyttää selaimen virheistä selainkehittäjiä, se on usein epäreilua. Monet ongelmista johtuvat haittaohjelmista, jotka on suunniteltu toimimaan hyödyllisinä laajennuksina tai laajennuksina. Monissa tapauksissa haittaohjelma tekee jotain todella hyödyllistä varastamalla salaa napsautuksia tai kaupankäyntiä taustalla.

Ongelmana on, että laajennuskäyttöliittymä on melko tehokas. Laajennus voi lisätä mielivaltaisia ​​tunnisteita ja koodia kaikkiin verkkosivustoihin. Oikeissa käsissä tämä on erittäin siistiä, mutta on helppo nähdä, kuinka uusi laajennuksen koodi voi törmätä verkkosivuston koodiin. Mitä? Et halunnut määritellä uudelleen $ toiminto?

Tämä ei ole niinkään vika kuin syvä, filosofinen ongelma, jolla on erittäin siisti ominaisuus. Mutta suurella voimalla on suuri vastuu - ehkä suurempi kuin mikään laajennusohjelmoija voi kohdata. Paras tapa tarkastella tätä asiaa on ymmärtää, että se on yksi alue, jolla meillä, käyttäjillä, on hallinto. Voimme poistaa laajennukset käytöstä ja rajoittaa ne vain muutamille verkkosivustoille, joissa ei ole ongelmia. Sovellusliittymä on vähän liian tehokas jokapäiväiseen käyttöön - niin tehokas, että on houkuttelevaa kutsua laajennusten sovellusliittymiä kaikkien suurimmista virheistä. Mutta se kieltäisi kaiken, mitä se tekee meille.

Aiheeseen liittyvät artikkelit

  • JQueryn ulkopuolella: Asiantuntijaopas JavaScript-kehyksiin
  • Arvostelu: 7 JavaScript IDE: tä testattu
  • HTML5-ampuma: Miten Chrome, Safari, Firefox, IE ja Opera mittaa
  • Katsaus: 13 primo Python -verkkokehystä
  • Laiskan ohjelmoinnin voima
  • Ladata: Kehittäjän urakehitysopas
  • 7 huonoa ohjelmointiideota, jotka toimivat
  • 9 huonoa ohjelmointitottumusta, joita rakastamme salaa
  • 21 kuumaa ohjelmointitrendiä - ja 21 menossa kylmäksi
$config[zx-auto] not found$config[zx-overlay] not found