Hoppa till innehåll

Utmaningar

Nedan finns fyra frågor om HTTP-kommunikation och om hur webbläsaren laddar och kör skript, hämtade från veckans fredagshäng.

Varje fråga har ett antal alternativ att välja bland för att göra det lite lättare att resonera. Klicka på “Visa lösning” för att se svaret och förklaringen.

Om du är osäker kan du alltid testa i webbläsaren själv eller ta upp frågan på en handledning.

Fråga 08-01: What is true regarding communication over HTTP? (flervalsfråga)

Section titled “Fråga 08-01: What is true regarding communication over HTTP? (flervalsfråga)”
  1. The server initiates the request to the client.
  2. The server sends a response to the client’s request.
  3. The client sends a response to the server request.
  4. The client initiates the request to the server.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Alternativ 2 och 4 är korrekta. Klienten initierar förfrågan (request) till servern, som sedan skickar ett svar (response) på denna förfrågan.

Fråga 08-02: In what order do the scripts execute in a modern browser?

Section titled “Fråga 08-02: In what order do the scripts execute in a modern browser?”
<!DOCTYPE html>
<html lang="en">
  <head>
    ....
    <script type="module" src="./js/script1.js"></script>
    <script type="module" src="./js/script2.js"></script>
  </head>


  <body>
    <script type="text/javascript">
      // script3
    </script>


    <script src="./js/script4.js"></script>
    <script nomodule src="./js/script5.js"></script>
  </body>
</html>
  1. script1, script2, script3, script4
  2. script3, script4, script5, script1, script2
  3. script3, script4, script1, script2
  4. script1, script2, script4, script3

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 3, script3, script4, script1, script2.

HTML-tolken tolkar HTML-sidan uppifrån och ner. När den kommer till skripten i head-elementet så laddas dessa in, men exekveringen skjuts upp tills parsningen av sidan är genomförd. Skripttaggen som påträffas i bodyn tvingar HTML-tolken att avbryta HTML-tolkningen och skriptet där exekveras (script3). Samma sak inträffar vid script4.

script5 ignoreras då vi enligt frågan är i en “modern webbläsare”. När väl HTML-tolken är klar så startar exekveringen av script1 följt av script2.

Section titled “Fråga 08-03: Why is it not recommended to use “inline scripts”?”
  1. The code can not be cached in an optimal way.
  2. They are less secure.
  3. The script will block DOM parsing.
  4. The code will be harder to maintain.
  5. Visual Studio Code has no color coding support for inline scripts.
  6. They often do not work.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Alternativ 1, 3 och 4 är korrekta. Inline-skript kan inte cachas separat av webbläsaren, de blockerar DOM-parsningen där de förekommer, och de gör koden svårare att underhålla eftersom javascript och HTML blandas i samma fil.

Fråga 08-04: What does it mean that a script is deferred? (<script defer>)

Section titled “Fråga 08-04: What does it mean that a script is deferred? (<script defer>)”
  1. The script is executed as soon as the DOM parser find the script tag.
  2. The scripts execution is postponed until the DOM parsing is done.
  3. The scripts loading is postponed until the DOM parsing is done.
  4. The scripts loading is done immediately, and the execution is done when the loading is done

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 2. Ett defer-skript laddas ner parallellt med att HTML-tolken fortsätter parsa sidan, men exekveringen skjuts upp tills DOM-parsningen är klar.

CCBY