자바스크립트가 웹 브라우저를 죽이고 있다

A 99% JavaScript-Free Web: Is It Possible?

JavaScript is unpredictable, old, and sometimes makes me vomit. I don't want to use it anymore. Now, this line is perfect for grabbing your attention, but at the same time, it's false because developers can't live without JavaScript, particularly front-end devs.
This exploration is about finding ways to avoid JavaScript. When I say "avoid JavaScript," I'm not suggesting using something that is transpiled into JavaScript. What I actually mean is that I just want very minimal JavaScript in the final output of my application code.

Watch this on YT

Overuse of JavaScript: Why It’s a Problem

Developers today depend heavily on JavaScript for everything from front-end frameworks to API interactions. But do we really need to rely so much on it? Here's what's happening: Developers often feel pressured to use JavaScript when simpler, more efficient alternatives are available.

Take popular frameworks like React, Vue, Angular, and Svelte. These are awesome for creating dynamic and responsive websites but can be overkill for simpler applications. They introduce unnecessary complexity, ultimately increasing the learning curve and making maintenance a headache.

So, What’s the Issue with JavaScript?

With extensive use comes several critical pain points, including:

1. Slower Load Time – Large JavaScript bundles slow down page performance. Every library you add increases the weight of your project, making load times sluggish.
2. Client-Side Rendering Issues – Many frameworks unnecessarily rely on client rendering, which can cause delays and performance hiccups. React apps, for instance, re-render the entire webpage using a virtual DOM, adding more time before a webpage becomes interactive.
3. Heavy Dependencies – The more libraries you add, the more you'll encounter problems with compatibility, version updates, and dependency conflicts.
4. Hidden Maintenance Costs – Keeping up with the constant updates and potential breaking changes from over-reliance on packages becomes a costly affair in terms of time and resources.

The JIT Compiler: O Boy!

One of the key areas where JavaScript tries to improve performance is through JIT (Just-In-Time) compilation. Modern browsers, like Chrome’s V8 engine, compile JavaScript into machine code at runtime.

The goal is to make JavaScript as fast as possible.

However, this optimization comes at a cost. JIT compilers sometimes change the behavior of JavaScript code, often introducing bugs and unexpected issues that can make your web app fragile. Simply put, JIT compilers’ optimizations can be a gamble.

Common JIT Compiler Bugs

Here are some of the more notorious bugs:

• Miscompilation: The JIT compiler can produce incorrect output if it misoptimizes code sections.
• Bounds Check Elimination: In an attempt to optimize, the JIT compiler might skip necessary checks like array bounds, opening the door to crashes.
• Redundancy Elimination: When the JIT compiler assumes repeated code is redundant, it might eliminate important sections, causing unpredictable behavior.

These compiler issues underline the importance of testing JavaScript extensively to avoid unexpected problems. But more importantly, they show why we need to reduce JavaScript whenever possible to lower the risk of new issues cropping up.

Client-Side Alternatives to JavaScript

The good news is that you don’t have to be stuck in the JavaScript loop. Several alternatives have emerged to reduce JavaScript while maintaining functionality. Two of the most exciting options are HTMX and WebAssembly.

HTMX: Hypermedia on Steroids

HTMX allows developers to build dynamic, interactive web applications with minimal JavaScript. Instead of relying on JavaScript for every interaction, HTMX sends actual HTML from the server, reducing the need to re-render the entire UI with JavaScript frameworks like React.

Imagine this: Instead of sending a JSON response back for your frontend to process, HTMX enables you to send HTML straight from the backend, reducing client-side churn. HTMX leans on traditional HTML anchors and forms to make calls directly to the server—all without JavaScript.

为什么 HTMX 如此受欢迎：

• 最短的学习曲线 – 向您的 HTML 添加一些属性，然后您就可以启动并运行。
• 使用 HTML – 避免使用过多的 JavaScript 操作 DOM。
• 优雅的回退 – 即使有人在浏览器中禁用 JavaScript，您的 HTMX 支持的应用程序仍然可以运行，尽管没有一些花哨的功能。

在许多应用程序没有 JavaScript 的情况下就会崩溃，HTMX 可确保更广泛的兼容性和更好的性能。它回归基础，直接从 HTML 元素发出请求，处理表单或可点击元素等交互式组件，而不会使用脚本使您的应用程序变得臃肿。

WebAssembly：性能强大的引擎

当谈到 WebAssembly (Wasm) 时，其目的并不是完全取代 JavaScript，而是处理计算量大的任务。这可能是游戏性能、数据科学计算或图像处理，而从性能的角度来看，JavaScript 并不能解决这些问题。

使用 WebAssembly，您可以编译 C、C 和 Rust 等语言，以在客户端执行特定的计算量大的任务，而无需使用 JavaScript。这使得 WebAssembly 成为视频编辑、游戏或数据处理等任务的理想选择，所有这些都在网络浏览器中进行。

WebAssembly 的主要优点：

• 高性能：针对 JavaScript 难以处理的 CPU 密集型任务进行了优化。
• 直接在浏览器中运行：像JavaScript一样，它受益于浏览器支持，但不需要JavaScript解析/渲染效率低下。
• 便携：相同的代码可以跨浏览器编译和运行，效率极高。

对于任何需要处理大量计算的网站，WebAssembly 可以加快速度并缩短加载时间。

服务器端：是时候放弃 JavaScript 了？

虽然 JavaScript 曾经仅限于客户端，但 Node.js 的引入使其在服务器上也非常流行。 Node 有很多优势：异步事件处理、非阻塞 I/O，当然还有跨堆栈使用一种语言。但 JavaScript 的陷阱（动态类型、原型污染等安全风险以及复杂性增加）仍然存在。

幸运的是，我们在服务器端有100% JavaScript 替代品。这里有一些：

1. Go（Go 语言）

Go 的轻量级 goroutine 允许高度并发、可扩展的系统，而无需线程的内存开销。这种语言特别适合需要超快性能和大规模流量的应用程序。

2. Django (Python)

在安全性方面，Django 是最受欢迎的。它减少了诸如原型污染和重做攻击（JavaScript容易出现的漏洞）之类的漏洞。虽然它可能无法像 Go 那样扩展，Django 非常适合小型或安全意识强的应用程序。

3. PHP (Laravel)

PHP 一直是一种可靠的后端语言，其现代框架 Laravel 使中小型项目易于管理。尽管 JavaScript 崛起，但凭借自动路由和强大的插件生态系统，PHP 在开发世界中仍然占有一席之地。

4. Ruby on Rails

对于快速开发，Ruby on Rails 提供了一个优雅的、开发人员友好的环境。虽然它可能不是处理大型应用程序的最佳选择，但它非常适合寻求快速、可扩展解决方案的小型团队。

JavaScript 框架的隐性成本

使用更多 JavaScript，特别是对于客户端和服务器端的所有内容，会产生许多隐藏成本。 JavaScript 包越大，您面临的问题就越多。这就是您面临的挑战：

• 패키지 블로트 – 더 많은 라이브러리와 종속성을 추가할수록 불필요한 코드로 인해 최종 출력이 더 커집니다.
• 유지 관리 증가 – 이러한 종속성을 최신 상태로 유지하면 유지 관리 오버헤드가 발생하고 라이브러리가 주요 업데이트를 받을 때 앱이 중단될 위험이 있습니다.
• 주요 변경 사항 – 프레임워크 업데이트(또는 소규모 라이브러리 업데이트)로 인해 기존 기능이 손상될 수 있으므로 코드의 상당 부분을 다시 작성하기 위해 애쓰게 됩니다.

해결책? 성능과 보안 우선순위

결국 JavaScript를 줄이는 것은 단순히 버그를 피하거나 로드 시간을 늦추는 것이 아니라 더 빠르고 간단하며 안전한 웹 애플리케이션을 구축하는 것입니다. 무거운 계산을 WebAssembly로 오프로드하고, HTMX를 사용하여 기본적으로 UI 업데이트를 처리하고, 백엔드 로직을 Go 또는 Python과 같은 더 안전한 언어로 이동함으로써, 귀하의 웹 프로젝트가 대폭 향상될 것입니다.

JavaScript를 완전히 없애는 것이 모든 사람에게 가능하지는 않지만 JavaScript를 최대한 줄이는 것은 확실히 추구할 가치가 있습니다. JavaScript가 개발자의 병목 현상을 일으키는 것을 방지하려면 최신 대안을 사용하는 것이 중요합니다.

결론

클라이언트 또는 서버에서 JavaScript를 최소화하려는 경우 웹 애플리케이션을 더 간결하고 빠르며 안전하게 만들 수 있습니다. HTMX 및 WebAssembly는 JavaScript 중심의 프런트엔드 개발을 위한 흥미로운 대안을 제공하는 반면, Go, Django 및 Laravel은 백엔드를 위한 실행 가능한 옵션입니다.

JavaScript는 이미 존재하지만 모든 것을 JavaScript에 의존할 필요는 없습니다. JavaScript의 공간을 전략적으로 줄임으로써 마침내 성능이 향상되고 원활하게 확장되는 앱을 구축할 수 있습니다.

JavaScript를 줄이고 웹 앱을 제어할 준비가 되셨나요? 오늘 바로 실험을 시작해 보세요!

위 내용은 자바스크립트가 웹 브라우저를 죽이고 있다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!