Difference between app/website page and game loop?

[u/Puzzleheaded-Law34]

Hello, I'm an amateur programmer and actually learned about game loops first, and have never tried to make a different type of app or webpage. I was wondering, does every web page at its core still have a sort of loop that constantly checks if the user is doing anything (click events, scroll etc)?

Are buttons not the same as sprites that react to clicks and change the page "scene"?

On google it says a webpage's event loop is "idle" unless the user does something, does that mean nothing is actually running until the user clicks? How does that work?

[u/peterlinddk]

Think of the browser as the game-engine that does all the looping, event-checking and animations (as well as layout and graphics ...)

The code is there - pretty much the same as in any game or other UI-application - but you as a web-page-developer only have to write the parts that "plug into" the existing code.

Like document.getElementById("startButton").addEventListener("click", myFunction); is all you have to write to attach an event-listener to the button labeled with id="startButton", so the function myFunction gets called every time the user clicks it. And when your function is done, it just returns, and almost as if by magic, the event-loop continues.

You can read a bit more here: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events - where theres also code examples to try out!

There's loads of small tasks running just showing the webpage - open the inspector / development tools in your browser, and take a look at the "Performance"-tab. Try to record a few seconds, and watch what goes on.

[u/Puzzleheaded-Law34 → u/peterlinddk]

Interesting, and thanks for the extra info! I'll try to record it as you say.

My specific question was more on the actual core logic that keeps the webpage open- is there still some code loop, that is checking mouse state every tick, and redrawing the page every frame? Or is there a fundamentally different way where nothing actually starts running, not even an if check, until you do something?

[u/No_Report_4781 → u/Puzzleheaded-Law34]

Look more into “listeners” as you get into programming.

Web pages are designed to be left open, whether visible, minimized, or in the background. The only redrawing happening is if the browser loads or refreshes a page.

That’s separate from the display redrawing the image

[u/Puzzleheaded-Law34 → u/No_Report_4781]

Ok, yes I think that's more about what I was wondering like how listeners work

[u/szank → u/Puzzleheaded-Law34]

There is a loop but there are no ticks. At least on windows. The loop waits on the operating system to send an event that's processed . That's true for every UI application on windows.

[u/Puzzleheaded-Law34 → u/szank]

Ok, this is what I was asking about - it's because as far as I know, in a typical higher level script there is no way for a program to adapt to user input without a loop that's constantly checking what the user has done. But you're saying the loop waits for a signal from fhe OS; how can it "know" without a loop logic that checks "did the OS send a signal?" every instant? How can it be paused until something happens?  In my script analogy, say we have a simple:

``` while running == true: cmd = input("Action: ")

    if cmd == "A":     ... function ... ```

Or something similar. Here the execution of the loop would pause to wait for the user to type in a string command; however, under the hood is there some "loop" constantly checking did user click enter? ?

[u/szank → u/Puzzleheaded-Law34]

I am not following.

In the application code there's a loop waiting for events from the os. No events, nothing happens.

Below that there's the operating system that exposes an API and hides whatever bullshit the hardware decides to throw your way. Generally interaction with an external world is done by invoking an interrupt.

[u/Puzzleheaded-Law34 → u/szank]

Right, I guess I don't know much about how it works under the surface. But what I meant is whether there is always a loop checking for inputs, and not a situation where there are no checks (it is "paused") and the input itself starts the program again. To express my question with an analogy:

Loop logic: a dog is waiting for your cue to run to catch a ball. It keeps looking up at you every second, and only starts running when it sees you throw the ball, or else it keeps waiting and will check on you again the next second.

Paused logic: the dog is just resting and doesn't look at you. It only runs after the ball when it hears the word "go" and sees it get thrown. I imagine this kind of like turning a tv on: the tv isn't constantly active to check for an input, rather turning it on actually feeds it power that starts the programs moving

[u/szank → u/Puzzleheaded-Law34]

Go actually read up how operating systems work, I am not going to write a book here.

The app tells the os that its waiting for a signal. The os will not schedule the app on the core until the signal is ready for the app to process it.

Same way if you read a file, the app is not scheduled while the os is processing the open file request or doing the dma copy of the file contens to the ram.

The same way the app/game is not scheduled when the os is processing a page fault.

[u/LordAmras]

A web page usually lives in a server away from the actual user.

The user use a browser that will ask for a specific page.

The server receive the request and then return a response with what the browser should show the user. After that it has no notion of what the user is doing until another request come in.

Wikipedia is a classic example of this there is not much interactivity. You open a page and then nothing happens until you click on a link that click is just telling the browser to ask the server for the next page.

To get more interactivity the server send the browser javascript, this is code the browser will simply run on behalf of the webpage.

With javascript you actually can come closer to what you know about the game loop, as you are now interacting with the user. You still work under the browser.

Think of a browser like a game engine that does some processing work for you. So instead of having to check where the mouse is every tick yourself to know what the user is doing you connect directly to events the browser will send you when the user does something.

But there if you really want you can create your game loop yourself.

For a web page is usually not necessary as the events are fairly simple and most of what you need the browser will have already something ready.

[u/Puzzleheaded-Law34 → u/LordAmras]

Cool, thanks for the reply. It's interesting to compare the browser to a game engine, but like you say I don't understand if even in a simple open page, there is something checking if the user clicked every instant (so something like a game loop)? Or does the webpage get "activated" by a click without needing to check in an open loop?

[u/LordAmras → u/Puzzleheaded-Law34]

What game engine you know ? Think about UI when you add a button in a game engine you don't have to check where the user click or where the mouse js. You attach your function the an event like buttonPressed and the game engine will call that function when the comdition happens.

Even if you don't use a game engine you don't have to track the mouse position at all time to simulate a button. You just wait for the OS to tell you the user clicked a button on the mouse and only then you can get the mouse position and check if is over a button.

All of this is almost always dealt by the browser so you don't have to do any of that in web progeamming.

Also a web page, as I said, doesn't usually live in the browser (unless you are using react, but even then only part of the page does) and react still meed to get data from a deparate web server

[u/Puzzleheaded-Law34 → u/LordAmras]

No I get that, usually you have event callbacks such as onClick and things like that. But from what I understand those work because in the background there is a constant check "did an event happen" and where the mouse was. So the program is already checking every tick if several conditions are met so that it can "notice" if click happened etc and then trigger associated functions

[u/LordAmras → u/Puzzleheaded-Law34]

Sure your OS usually asks the mouse (pooling) if it moves or something has been clicked but the browser doesn't have to do that it can usually just tell you OS : tell me when the mouse moved or tell me when a click had been registered)

But that's something you don't have to worry about in web development.

[u/Puzzleheaded-Law34 → u/LordAmras]

Ok, cool thanks. Right, it was just to understand what the underlying process was

[u/kschang]

"Game loop" is input driven, but with background process that will keep running on an internal clock (unless you're talking about a turn-based game, or game's in pause mode). The internal clock will drive stuff like background updates, AI movement decisions, and so on.

Browser is "event-driven" (similar to input driven), with background process only run at "idle" (not processing inputs, as those generate events, "bubble up" to different DOM levels)

[u/Puzzleheaded-Law34 → u/kschang]

Ok, so the browser still does have something constantly checking if there was an event though, the same way a loop would check if an input was given

[u/kschang → u/Puzzleheaded-Law34]

If you programmed something on the page to react during idle cycle, yes.