Get best of the week

Vielleicht sollten wir uns mit JavaScript etwas beruhigen?

Ich habe ein sehr seltsames Browserproblem. Die Skripte auf einigen Seiten funktionieren einfach erst nach etwa 20 Sekunden.

Was auch immer Sie anbieten wollten - ja, ich habe bereits darüber nachgedacht, und nein, es hat nicht geholfen. Ich spreche über diese nicht in der Hoffnung , dass jemand , den Sie mit dem Debuggen sagen wird, sondern weil dieser Vorfall hat mich akut von einigen bewusst, wie sagt man ... Macken ... Entwicklungen an der Front.

(In der Tat, nicht einmal versuchen , das Problem durch einen Satz zu diagnostizieren, nicht , ich hörte und fast alles versucht , dass man sich vorstellen kann).

Der Artikel wurde im März 2016 geschrieben, einige Beispiele sind veraltet - ca. trans.

Nutzlose Seiten


Schauen Sie, hier ist ein Screenshot des Tweets. Darin werden die Teile, die ohne JavaScript nicht funktionieren, rot hervorgehoben . Ich weiß das, weil ich nach wie vor auf die Seite geschaut habe, für die 20 Sekunden der größte Teil des Codes noch nicht funktioniert hat.



Etwas, das ich verstehen kann. Mit der Schaltfläche „Antworten“ wird beispielsweise das Textfeld unten erweitert und der Fokus darauf gelegt. Dies ist ohne einige Skripte nicht möglich. Die Schaltfläche ...öffnet ein Popup-Menü, was zweifelhaft ist , da Sie es auch mit CSS reproduzieren können. Ebenso führt eine Schaltfläche mit Herz eine Aktion im Hintergrund aus, was ebenfalls zweifelhaft istda es mit dem Laden der ganzen Seite wiedergegeben werden kann. Dies sind jedoch nicht triviale Änderungen, die mit und ohne Skripte auf völlig unterschiedliche Weise funktionieren.

Auf der anderen Seite ...

Befindet sich diese Schaltfläche × in der oberen rechten Ecke und im gesamten leeren umgebenden Raum? Ihre einzige Funktion ist es, Sie zu meinem Profil zu schicken, das hinter dem Tweet sichtbar ist. Dies können genauso gut reguläre Links sein, wie z. B. Links- und Rechtspfeile für die Navigation. Dies geschieht jedoch anders, sodass es ohne JavaScript nicht funktioniert.

Oder eine kleine Schaltfläche mit Grafiken für die Analyse? Die einzige Funktion besteht darin, eine weitere Seite in ein künstliches Popup-Fenster mit integriertem Rahmen zu laden. Möglicherweise gibt es einen regulären Link, der mithilfe eines Skripts in ein Popup umgewandelt wird. Dies geschieht jedoch anders, sodass es ohne JavaScript nicht funktioniert.

Textfeld? Dies ist natürlich nur ein Textfeld. Wenn Sie jedoch darauf klicken, bevor Sie JavaScript ausführen, bleibt eine ungeschickte Beschriftung im Feld Reply to @eevee. Und wenn das Skript noch gestartet wird, löscht es alles, was Sie eingegeben haben, und fügt es erneut ein Reply to @eevee. Erst jetzt ist @eeveees in blauen Buchstaben geschrieben, nicht in grauen.

Das gleiche passiert auf der Twitter-Suchseite, was sehr seltsam ist, da das Suchfeld keinen Text enthält! Wenn Sie mit dem Tippen beginnen, bevor die Skripte fertig sind, werden einfach alle von Ihnen eingegebenen Skripte gelöscht. Nicht einmal, um Ihren Platzhaltertext einzufügen oder einen benutzerdefinierten Stil anzuwenden. Ohne ersichtlichen Grund einfach so.

Da NoScript für mich funktioniert, bemerke ich oft seltsame Designentscheidungen auf Websites, die ich zum ersten Mal besuche. Natürlich sind leere weiße Seiten an der Tagesordnung. Artikel auf der Time-Website wurden lange Zeit ohne Skript geladen, aber nicht gescrollt. Aus overflow: hidden;Gründen, die ich nicht verstehen kann, wurde eine Eigenschaft für die Seite verwendet . Vox-Artikel werden ebenfalls normal geladen, außer dass vor jedem Bild ein Leerzeichen in voller Höhe des Bildschirms angezeigt wird. Einige besonders schlechte Unternehmensseiten sind chaotisch überlappende Textblöcke. Ich denke, sie haben CSS aufgegeben und das Layout in JavaScript geschrieben.

Dafür gibt es keine guten Gründe. Dies sind keine fortgeschrittenen interaktiven Anwendungen, sondern nur Textseiten. Früher haben wir sie auf Papier gedruckt, aber sobald wir zur Informationstechnologie gewechselt sind, war es unmöglich, Wörter auf den Bildschirm zu bringen, ohne ein paar Megabyte Müll zur Ausführung zu bringen?

Ich höre direkt, wie sie mich als Luddite bezeichnen, weil ich nicht damit einverstanden bin, fünf Absätze statischen Textes mit Tausenden von Skriptzeilen zu umgeben. Nun, lassen Sie mich im Voraus antworten: Gehen Sie zum Badehaus. Ich denke, dass Web- und interaktive Seiten großartig sind. Ich sehe große Fortschritte im letzten Jahrzehnt. Es ist einfach super, dass das Web anfänglich Benutzereinstellungen unterstützt hat, und ich kann Berechtigungen für jede Site vorkonfigurieren, die auf meinem Computer ausgeführt werden kann und was nicht.

Was aber nicht sehr cool ist, ist eine Gruppe hochbezahlter und hochqualifizierter Spezialisten, von denen jeder Chrome auf dem neuesten Mac Pro-Modell installiert hat und die im Büro in einer Entfernung von nicht mehr als einem Kilometer von jedem Server arbeiten, den sie besuchen. Und jetzt arbeiten diese Leute, und dann drehen sie sich um und kichern alle anderen an, die keine solche Konfiguration haben. Bitte beachten Sie, dass eine der folgenden Bedingungen Ihr JavaScript beeinträchtigt:

  • Jemand auf einem langsamen Computer.
  • Jemand mit einer langsamen Verbindung.
  • Jemand am Telefon, dh auf einem langsamen Computer mit einer langsamen Verbindung.
  • Jemand steckt mit einem alten Browser auf einem Computer fest, den er nicht kontrolliert - bei der Arbeit, in der Schule, in der Bibliothek usw.
  • Jemand versucht, ein kleines Programm zu schreiben, das mit Ihrer Site interagiert, die keine API hat.
  • - , .
  • - — Google .
  • - Linux , , Elinks.
  • - , .
  • - NoScript . , , .
  • - NoScript , , . , .
  • , , .
  • CDN .
  • CDN IPv6, (, , ). - IPv6, , JS .
  • , JavaScript .
  • , . , .
  • , , .

Ich sage nicht, dass interaktive Webanwendungen wie Google Maps vom Erdboden gelöscht werden sollten, obwohl es selbst für Google Maps viele Jahre lang ein Backup ohne Skripte gab, bis zur aktuellen Version von WebGL! Ich sage, wir haben uns woanders ausgeschaltet, als die Grundfunktionen von normalem HTML plötzlich ohne JavaScript nicht mehr funktionierten. Ohne 40 Megabyte JavaScript sind about:memory dies Daten im Speicher, nicht die Größe des Downloads. Dies scheint nicht viel zu sein (für eine Seite mit 140 Zeichen?), Aber mein Browser sammelt häufig ein Dutzend geöffneter Twitter-Tabs , dh ein halbes Gigabyte Speicher , dem maximal 6 KB Text zugewiesen sind.

Die Erfindung des Vierkantrades


Sie müssen wirklich versuchen, ein so bedauerliches Ergebnis zu erzielen. Ich meine, wenn Sie einen Link brauchen, schreiben Sie einfach <a href="somewhere">label</a>und Sie sind fertig. Wenn Sie dies jedoch mit JavaScript erfinden, benötigen Sie einen Klick-Handler, der zum richtigen Zeitpunkt funktioniert, damit Sie wissen, dass der Link tatsächlich vorhanden ist, und möglicherweise einige Arbeiten ausführen müssen, um den gefälschten Links Klick-Handler hinzuzufügen. das fügt Ajax hinzu. Recht?

Nein! Sie erhalten nur eine blasse, beschissene Nachahmung eines Links. Berücksichtigen Sie alle Funktionen nativer Links:

  • Ich kann dem Link folgen.
  • Ich kann den Link in einem neuen Tab oder Fenster mit der Kombination aus Strg, Umschalttaste und Mausrad (mittlere Taste) öffnen.
  • Ich kann die Linkadresse kopieren und irgendwo einfügen oder in einem anderen Browser oder etwas anderem öffnen.
  • ' Firefox .
  •  — Opera, Konqueror, uzbl, Firefox vimperator? — , , «» , .
  • , .
  • .
  • , , .

Der rote Faden hier ist, dass das Tag <a href=...> etwas bedeutet . Er sagt: "Dies ist der Weg, den Sie gehen können." Unzählige Werkzeuge stützen sich auf diese Informationen. Wenn Sie es durch ersetzen <div onclick>, dann bewirkt das Klicken auf das Div etwas, aber der ganze Punkt ist vollständig verloren. Wenn Sie dagegen verwendet werden <a href="javascript:void(0);">, lügen Sie diese Werkzeuge tatsächlich an. Sie verursachen Bedeutung, geben aber bedeutungslose Informationen.

Das ist es, was Menschen meinen, wenn sie über "Semantik" sprechen - dass es nützliche Informationen gibt, die gesammelt werden müssen. Wenn Sie anfangen, die Ähnlichkeit von Links zu erfinden, erfordert die Analyse dieses synthetischen Konstrukts entweder die spekulative Ausführung einer großen Menge beliebigen Codes oder extremes Schreibenein intelligenter statischer Analysator oder einfach nur die Ausbildung eines menschlichen Programmierers. Das Erklären von Absichten ist eine viel leistungsfähigere und flexiblere Methode als nur die Arbeit zu erledigen, da universelle Werkzeuge im ersten Fall nützliche Dinge fast trivial erledigen.

Ein weiteres gutes Beispiel sind Dropdown-Formulare <select>. Einige Entwickler erstellen ihren Ersatz manchmal komplett von Grund auf aus nicht nativen Widgets. Wahrscheinlich, um sie schöner zu machen? Edles Ziel. Aber wussten Sie, dass in nativen Dropdown-Formularen beim Beginn der Eingabe automatisch die erste geeignete Position ausgewählt wird? Offensichtlich wird dies in den meisten alternativen Implementierungen nicht unterstützt. Optisch sehen sie besser aus (oder nur anders), aber funktionell viel schlechter für lange Listen.

Ein hausgemachtes Twitter-Textfeld ist überhaupt kein Textfeld, aber contenteditable <div>. Dies contenteditablebedeutet, dass die meisten nativen Steuerelemente recht gut funktionieren, aber dennoch zeigt dieses Objekt von Zeit zu Zeit ein seltsames Verhalten, z. B. bewegt es den Cursor an den Anfang des Textes, wenn ich zwischen Registerkarten wechsle. Oder manchmal hat das Skript Probleme mit meiner Schreibgeschwindigkeit und es beginnt zu bemerken. Der einzige Grund, warum es anscheinend sogar anstelle des üblichen <Textbereichs> verwendet wird, ist das Tönen @handlesund Verknüpfen in Blau? Ein selbst erstelltes Textfeld verkürzt keine Links und ersetzt keine Twitter-Emojis. Dies ist also keine Vorschau darauf, wie Ihr Tweet aussehen wird.

Wissen Sie, dass einige Websites Hotkeys haben? Schön, oder? Tatsächlich ist /es jedoch ein in Firefox integrierter Hotkey, der die Schnellsuchleiste öffnet. Offensichtlich weiß niemand auf Twitter, GitHub, BitBucket, Tumblr oder an einem Dutzend anderer Orte davon, da alle diesen Hauptfokus ihrer eigenen Suchleiste auf der Website zugewiesen haben. Das ist völlig anders als die Suche auf der aktuellen Seite (zu Ehren von GitHub haben sie es behoben, als ich mich auf Twitter beschwerte). Google+ hat die Leertaste lange Zeit deaktiviert, um nach unten zu scrollen. Warum hat niemand in diesen riesigen Unternehmen angehalten und gesagt: "Hey, warte, das ist eine funktionierende Funktion im Browser, und wir brechen sie." Verwenden Webentwickler selbst Browser?

Es wurde daran erinnert, dass jede Twitter-Seite Tastaturereignisse und Mausklicks stillschweigend absorbiert, bis alle Skripte funktionieren. Dies bedeutet, dass ich die Registerkarte erst ändern kann, wenn ich diese 20 Sekunden auf das Laden der Seite gewartet habe: Strg-T, Strg-W, Strg-Tab, Strg-Pgup und Strg-Pgdn - alle Tastaturereignisse werden vollständig absorbiert. So funktioniert ein Mechanismus namens "schnelle Aktionswarteschlange". Es hört sich so an, als ob diese Warteschlange Ereignisse am Ende des Ladens der Seite wiedergeben sollte, aber (a) Sie können die Hotkeys im Browser nicht verwenden; (b) es sieht so aus, als ob es immer noch nicht funktioniert. Um dies zu beheben, musste ich ein benutzerdefiniertes Skript schreiben, um das Skript-Tag mit einer bestimmten Kennung zu blockieren.

Ich glaube nicht, dass ich sehr wählerisch bin. Dies sind die Grundfunktionen des Browsers, gegen die Sie häufig ohne triftigen Grund verstoßen. Ich erwarte nicht, dass Sie Google Text & Tabellen ohne JavaScript zum Laufen bringen. Ich hoffe nur, dass du meine verdammte Tastatur nicht kaputt machst.

Lassen Sie mich Ihnen einen Rat geben.


Akzeptieren Sie die Tatsache, dass Ihr JavaScript bei manchen Menschen manchmal nicht funktioniert. Überlegen Sie, was das bedeutet. Wenn Sie die Wahl haben, wählen Sie immer vorhandene HTML-Mechanismen aus. Vielleicht schaltet Ihr Entwicklungsteam einmal im Jahr JavaScript aus und versucht, die Site zu verwenden. Fang an zu weinen.

Wenn Sie das, was bereits existiert, neu definieren oder überdenken möchten, lesen Sie dies zuerst. Sie können keinen guten Ersatz erstellen, ohne das Original zu verstehen. Herumfragen. /Zum Teufel, klicken Sie einfach auf den Browser, bevor Sie dies mit dem Hotkey auf Ihrer Website tun.

Denken Sie daran, dass bei all der Macht, die Ihnen das Internet bietet, die Kontrolle letztendlich immer noch in den Händen des Benutzers liegt. Das Internet ist keine Spielekonsole, handeln Sie entsprechend. Module erstellen. Berücksichtigen Sie mögliche oder allgemeine Einstellungen im Voraus. Vielleicht etwas zu reduzieren, wenn Sie 40 Megabyte Skripte auf der Seite erreichen.

Danke.

More articles:


All Articles