JavaScript が Web ブラウザを破壊している

99% JavaScript フリーの Web: それは可能ですか?

JavaScript は予測不能で、古く、時々吐き気を催します。もう使いたくないです。さて、この行は注意を引くのに最適ですが、同時に、開発者、特にフロントエンド開発者は JavaScript なしでは生きていけないため、これは誤りです。
この探索は、JavaScript を回避する方法を見つけることです。私が「JavaScript を避ける」と言っているのは、JavaScript にトランスパイルされるものを使用することを提案しているわけではありません。私が実際に言いたいのは、アプリケーション コードの最終出力には最小限の JavaScript が必要なだけであるということです。

YT でこれを視聴

JavaScript の過剰使用: なぜ問題になるのか

今日の開発者は、フロントエンド フレームワークから API インタラクションに至るまで、あらゆる面で JavaScript に大きく依存しています。しかし、本当にそこまで依存する必要があるのでしょうか？何が起こっているかは次のとおりです: 開発者は、よりシンプルで効率的な代替手段が利用できる場合、JavaScript を使用するようプレッシャーを感じることがよくあります。

React、Vue、Angular、Svelte などの人気のあるフレームワークを例に挙げます。これらは、動的で応答性の高い Web サイトを作成する場合には最適ですが、単純なアプリケーションには過剰になる可能性があります。これらは不必要な複雑さをもたらし、最終的には学習曲線が長くなり、メンテナンスが頭痛の種になります。

では、JavaScript には何が問題なのでしょうか?

広範囲に使用すると、次のような重大な問題点がいくつか発生します。

1. 読み込み時間の遅延 – 大きな JavaScript バンドルにより、ページのパフォーマンスが低下します。ライブラリを追加するたびにプロジェクトの重量が増加し、ロード時間が遅くなります。
2. クライアント側レンダリングの問題 – 多くのフレームワークはクライアント レンダリングに不必要に依存しているため、遅延やパフォーマンスの低下が発生する可能性があります。たとえば、React アプリは仮想 DOM を使用して Web ページ全体を再レンダリングするため、Web ページがインタラクティブになるまでの時間が長くなります。
3. 重い依存関係 – 追加するライブラリが増えるほど、互換性、バージョン更新、依存関係の競合に関する問題が発生します。
4. 隠れたメンテナンスコスト – 継続的なアップデートや、パッケージへの過度の依存による破壊的変更の可能性を維持することは、時間とリソースの面で多大なコストがかかります。

JIT コンパイラ: ああ、ボーイ!

JavaScript がパフォーマンスの向上を図る重要な領域の 1 つは、JIT (Just-In-Time) コンパイル です。 Chrome の V8 エンジンなどの最新のブラウザは、実行時に JavaScript をマシンコードにコンパイルします。

目標は、JavaScript をできるだけ高速にすることです。

ただし、この最適化にはコストがかかります。 JIT コンパイラーは JavaScript コードの動作を変更することがあり、Web アプリを脆弱にする可能性のあるバグや予期せぬ問題を引き起こすことがよくあります。簡単に言えば、JIT コンパイラーの最適化は賭けになる可能性があります。

JIT コンパイラの一般的なバグ

ここでは、より悪名高いバグをいくつか紹介します:

• コンパイルミス: コード セクションの最適化を誤ると、JIT コンパイラーは誤った出力を生成する可能性があります。
• 境界チェックの排除: 最適化を試みる際、JIT コンパイラーは配列境界などの必要なチェックをスキップし、クラッシュの危険を招く可能性があります。
• 冗長性の排除: JIT コンパイラーが、繰り返されるコードが冗長であると判断すると、重要なセクションが削除され、予期しない動作が発生する可能性があります。

これらのコンパイラの問題は、予期しない問題を回避するために JavaScript を広範にテストすることの重要性を強調しています。しかし、より重要なのは、新しい問題が発生するリスクを下げるために、可能な限り JavaScript を減らす必要がある理由を示していることです。

クライアント側での JavaScript の代替手段

幸いなことに、JavaScript ループに陥る必要はありません。機能を維持しながら JavaScript を削減するための代替手段がいくつか登場しています。最もエキサイティングなオプションの 2 つは、HTMX と WebAssembly です。

HTMX: ステロイド上のハイパーメディア

HTMLX を使用すると、開発者は最小限の JavaScript で動的でインタラクティブな Web アプリケーションを構築できます。すべてのインタラクションで JavaScript に依存するのではなく、HTMX はサーバーから実際の HTML を送信するため、React のような JavaScript フレームワークを使用して UI 全体を再レンダリングする必要性が減ります。

これを想像してみてください。フロントエンドで処理するために JSON 応答を送り返す代わりに、HTMX を使用すると、バックエンドから HTML を直接送信できるため、クライアント側のチャーンが軽減されます。 HTMX は、従来の HTML アンカーとフォームを利用して、JavaScript を使用せずにサーバーを直接呼び出します。

Warum HTMX rockt:

• Minimale Lernkurve – Fügen Sie Ihrem HTML ein paar Attribute hinzu, und schon kann es losgehen.
• Funktioniert mit HTML – Vermeiden Sie die Manipulation des DOM mit übermäßigem JavaScript.
• Anmutiger Fallback – Selbst wenn jemand JavaScript in seinem Browser deaktiviert, funktioniert Ihre HTMX-basierte App weiterhin, wenn auch ohne den ganzen Schnickschnack.

In einer Welt, in der viele Apps ohne JavaScript kaputt gehen, HTMX sorgt für größere Kompatibilität und bessere Leistung. Es geht zurück auf das Wesentliche, Anfragen direkt aus HTML-Elementen zu stellen und interaktive Komponenten wie Formulare oder anklickbare Elemente in Angriff zu nehmen, ohne Ihre App mit Skripten aufzublähen.

WebAssembly: Ein Leistungskraftwerk

Wenn es um WebAssembly (Wasm) geht, besteht die Absicht nicht darin, JavaScript vollständig zu ersetzen, sondern rechenintensive Aufgaben zu bewältigen. Dies kann die Leistung von Spielen, datenwissenschaftliche Berechnungen oder die Bildverarbeitung sein, bei denen JavaScript vom Standpunkt der Leistung einfach nicht ausreicht.

Mit WebAssembly können Sie Sprachen wie C, C und Rust kompilieren, um spezifische, rechenintensive Aufgaben auf der Clientseite auszuführen, ohne JavaScript zu verwenden. Dies macht WebAssembly ideal für Aufgaben wie Videobearbeitung, Spiele oder Datenverarbeitung, alles innerhalb eines Webbrowsers.

Die wichtigsten Vorteile von WebAssembly:

• Hohe Leistung: Optimiert für CPU-lastige Aufgaben, mit denen JavaScript zu kämpfen hat.
• Läuft direkt im Browser: Wie JavaScript profitiert es von der Browserunterstützung, erfordert jedoch keine JavaScript-Parsing-/Rendering-Ineffizienz.
• Portabel: Derselbe Code kann mit hervorragender Effizienz kompiliert und in allen Browsern ausgeführt werden.

Für jede Site, die viel Rechenaufwand bewältigen muss, WebAssembly kann die Dinge beschleunigen und die Ladezeiten verkürzen.

Serverseitig: Zeit, JavaScript aufzugeben?

Während JavaScript einst auf die Clientseite beschränkt war, ist es durch die Einführung von Node.js auch auf Servern äußerst beliebt geworden. Node hat einiges zu bieten: Asynchrone Ereignisbehandlung, nicht blockierende E/A und natürlich die Verwendung einer Sprache im gesamten Stapel. Aber die Fallstricke von JavaScript (dynamische Typisierung, Sicherheitsrisiken wie Prototypverschmutzung und erhöhte Komplexität) bestehen immer noch.

Glücklicherweise haben wir 100 % Alternativen zu JavaScript auf der Serverseite. Hier sind einige:

1. Gehen (Golang)

Gos leichtgewichtige Goroutinen ermöglichen hochgradig gleichzeitige, skalierbare Systeme ohne den Speicheraufwand von Threads. Diese Sprache eignet sich besonders für Anwendungen, die eine blitzschnelle Leistung bei großem Datenverkehr benötigen.

2. Django (Python)

Django ist ein Favorit, wenn es um Sicherheit geht. Es reduziert Schwachstellen wie Prototypenverschmutzung und Redos-Angriffe (für die JavaScript anfällig ist). Obwohl es möglicherweise nicht wie Go skaliert, Django ist perfekt für kleinere oder sicherheitsbewusste Anwendungen.

3. PHP (Laravel)

PHP war schon immer eine zuverlässige Backend-Sprache und sein modernes Framework, Laravel, macht kleine bis mittlere Projekte einfach zu verwalten. Mit automatischem Routing und einem großartigen Plugin-Ökosystem hat PHP trotz des Aufstiegs von JavaScript immer noch seinen Platz in der Entwicklungswelt.

4. Ruby on Rails

Für schnelle Entwicklung bietet Ruby on Rails eine elegante, entwicklerfreundliche Umgebung. Auch wenn es für die Bewältigung großer Anwendungen vielleicht nicht die beste Lösung ist, eignet es sich perfekt für kleine Teams, die schnelle, skalierbare Lösungen anstreben.

Die versteckten Kosten von JavaScript-Frameworks

Die Verwendung von mehr JavaScript, insbesondere für alles auf der Client- und Serverseite, verursacht eine Reihe versteckter Kosten. Je größer Ihr JavaScript-Paket ist, desto mehr Probleme treten auf. Hier ist, womit Sie es zu tun haben:

• パッケージの肥大化 – 追加するライブラリと依存関係が増えるほど、最終出力は不必要なコードで肥大化します。
• メンテナンスの増加 – これらの依存関係を最新の状態に維持すると、メンテナンスのオーバーヘッドが発生し、ライブラリが大幅に更新されるとアプリが破損する危険性があります。
• 重大な変更 – フレームワークの更新 (または小規模なライブラリの更新) によって既存の機能が損なわれる可能性があり、コードの重要な部分を書き直す必要が生じます。

解決策は？パフォーマンスとセキュリティを優先する

結局のところ、JavaScript を減らすことは、バグや読み込み時間の遅さを回避することだけではなく、より速く、よりシンプルで、より安全な Web アプリケーションを構築することです。負荷の高い計算を WebAssembly にオフロードし、UI 更新を HTMX でネイティブに処理し、バックエンド ロジックを Go や Python などのより安全な言語に移行することで、 Web プロジェクトを大幅に改善します。

JavaScript を完全に排除するのは誰にとっても実現不可能かもしれませんが、可能な限り JavaScript を削減することは間違いなく追求する価値があります。重要なのは、最新の代替手段を使用して、JavaScript が開発者のボトルネックにならないようにすることです。

結論

クライアントまたはサーバーで JavaScript を最小限に抑えることを目的としているかどうかに関係なく、Web アプリケーションをよりスリム、高速、より安全なものにすることができます。 HTMX と WebAssembly は、JavaScript を多用するフロントエンド開発にエキサイティングな代替手段を提供し、Go、Django、Laravel はバックエンドの実行可能なオプションです。

JavaScript は今後も残りますが、すべてをそれに依存する必要はありません。 JavaScript のフットプリントを戦略的に削減することで、パフォーマンスが向上し、シームレスに拡張できるアプリを構築できるようになります。

JavaScript を減らして Web アプリを制御する準備はできましたか?今日から実験を始めましょう!

以上がJavaScript が Web ブラウザを破壊しているの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。