Why Major Websites Integrate JavaScript Within HTML
Written on
Chapter 1 Understanding the Structure of Web Applications
For several years, I have worked as a web application developer focused on performance, which equips me to address this topic effectively. To grasp why some large websites incorporate JavaScript (JS) directly into HTML, we must first understand the foundational elements of a website or web app. It consists of a document structure (HTML), styling (CSS), and functional instructions (JS).
JS is responsible for guiding the browser on actions to perform and when, enabling interactive experiences for users. Traditionally, JS could either be embedded in HTML or loaded as an external resource.
In the past, web browsers struggled with loading external resources due to their single-threaded nature, which meant that loading one resource could delay the loading of subsequent ones. Consequently, many developers opted to embed JS within HTML to facilitate simultaneous loading.
However, this landscape has shifted. Modern browsers are now multi-threaded, allowing them to manage multiple resources more effectively. It makes more sense to load JS files separately now. By doing so, developers can consolidate static content into a single JS file, which can be cached and reused across sessions, leading to faster web applications.
Section 1.1 The Impact of High Traffic on Resource Loading
It's important to note that large websites cater to millions of users, each making frequent requests. This escalates the number of requests exponentially, which, while manageable for end users, poses significant challenges for the entire network infrastructure, including servers and routers. These systems excel at delivering data quickly but struggle with handling a multitude of simultaneous connections that come with loading separate JS files.
Imagine a scenario where ten people in your home are each downloading from multiple torrent peers simultaneously. This creates a network bottleneck, which is akin to what happens when large websites attempt to load numerous resources at once.
Subsection 1.1.1 Balancing Speed and Resource Management
Another aspect to consider is the dynamic nature of large applications today. Many major websites operate with multiple versions concurrently. When a bug is detected, swift changes are made to rectify it, often without users noticing any disruption. This rapid iteration leaves minimal room for caching. If a cached version of a buggy JS file persists, it could render the site unusable until the cache is cleared, which is far from ideal.
As previously mentioned, the presence of multiple website versions makes it more efficient to manage everything through a single file. This file is not merely what the developer wrote; rather, it is a compiled version synthesized by a build system that aggregates everything into one comprehensive file.
Section 1.2 Convenience vs. Best Practices
In summary, the decision to embed JS within HTML is driven by the dual goals of optimizing network performance and enhancing developer convenience. While best practices often suggest keeping JS files separate, there are instances where integrating them into HTML proves to be a more effective strategy.
Chapter 2 The Importance of Your Online Presence
In this video, titled "Full Course HTML Tutorial - How to Make a Web Site Using HTML and Notepad," you can learn the foundational skills necessary to create a website using HTML.
This second video, "you STILL need a website RIGHT NOW!! (yes, even in 2024)," discusses the ongoing necessity of having a robust online presence in today's digital landscape.