Launching into Computer Science- Unit 4
Published:
Unit 4
The aim of this task was to discover the process of loading a webpage. Based on experience with bad internet connections, I’ve always thought the process was loading HTML first, then CSS, then Javascript. If a connection I’ve used was slow or unstable, what would usually happen is that the HTML would load, but be completely unstyled. Sometimes it would only be partially styled. After that, CSS would load, and then Javascript- I would be able to tell if Javascript loaded because webpage elements (e.g. text in expandable sections) would start being hidden. This is somewhat correct; according to Kantor (2021), there are two phases to loading a webpage. The first is where the HTML is fully parsed and loaded, but resources not present in the HTML are yet to be loaded. This would include things such as CSS/JS files and images. Finally, in the second phase, these files are loaded and rendered. Typically, the browser will make requests to retreive and render this data. This can be shown by using a Chromium-based browser and pressing CTRL+SHIFT+I, then opening the Network tab and loading a webpage. All the data required to render a webpage fully is shown on the right. A screenshot is shown below:
An additional task was to create a simple webpage. For the sake of brevity, I’ve pasted it directly below. As a sidenote, the absolute best plugin I have ever worked with, across multiple languages, is Emmet. It allows HTML to be typed exponentially faster, to a degree that even beats autocomplete. It supports multiple IDEs, and once you know the syntax, typing can be done much faster. I used it to type the following document and it took about 3 minutes, although I copy-pasted the paragraph text:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>Welcome to my homepage</h2>
<div style="background-color:red">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mi sapien, lobortis nec consectetur vel, venenatis a leo. Mauris condimentum scelerisque nibh, in varius neque tempus ac.</p>
</div>
<a href="example.com">Visit a sample link.</a
</body>
</html>