From WEB+DB EXPRESS vol122. In the previous article, we discussed web servers. This time we will discuss browsers, HTML, CSS, and Javascript.
The browser is the client part that receives data from the server and processes it. Typical browsers include Chrome, Safari, Edge, and Firefox. The actual operation of a browser is as follows.
As for the flow.
Parse the URL.
Query the DNS server to obtain the IP address from the host name.
Generate an HTTP request.
Send the HTTP request to the obtained IP address.
Receive the HTTP response from the web server.
Analyze the HTTP response.
If necessary, obtain the related content through additional HTTP communication.
Display the received content based on the analysis results.
The following is a detailed description of each process. The details of each of these processes are described below.
First, let’s look at (1) and (2), parsing the URL and obtaining the IP address. When a user accesses a website using a browser, he or she enters the target URL in the address bar.
The scheme specifies the protocol to access the web server. Usually, HTTP or HTTPS that supports SSL/TLS is specified.
Following the scheme is the hostname. You can also specify the IP address directly here. If a hostname is provided, the browser will perform a name lookup from DNS to obtain the IP address. Eventually, it will send a request to the web server with the IP address.
The path specifies the path on the web server of the resource to be retrieved. The path should be specified in the same format as the file path of UNIX OS, with / as the separator.
The query parameter is used when you want to specify a parameter for a resource to be retrieved from the Web server. After the path is separated by ?, multiple parameters can be specified by connecting the parameters specified by key=value with &.
Next, let’s look at (3), sending an HTTP request.
The basic flow is
Parse the URL and separate it into protocol/hostname/request target.
Query DNS for the hostname and get the IP address.
Generate the HTTP request. Add header fields as necessary.
Send the HTTP request to the obtained IP address.
Receive the HTTP response from the web server.
The HTTP response received in this way is usually HTML. The operation of analyzing and displaying this HTML data is called rendering, and the program that does this is called a rendering engine.
Each browser has a different rendering engine, and each has a different processing method.
All rendering engines produce roughly the same results, but the difference is the difference in display between browsers.
HTML, which is the input for rendering, stands for HyperText Markup Language. Since HTML deals with text, it can be used to specify the abstract structure of text, such as headings and paragraphs, and the appearance, such as font size and color. A sample of HTML is shown below.
The predecessor of HTML was SGML (Standard Generalized Markup Language), a markup language for creating documents, and HTML was developed based on this SGL.
Since HTML is a structured language for handling text documents, it cannot be handled by a computer as is. It needs to be parsed and stored as structured data in memory. Therefore, if you want to read or change the data in the HTML parsed by the browser, you need to provide an operation method in some form.
The DOM (Document Object Model) is a programming interface that makes it possible to manipulate text in markup languages such as HTML from programming languages. In fact, Javascript makes calls according to the DOM specification to read and modify the parsed HTML data.
The DOM representation of this would be a tree-structured object as shown below.
This is called a DOM tree, and each element in the DOM tree is called a node. The top node is always the node called Document (Document Root). All nodes start from Documnet, and all nodes except Document Root have a parent-child relationship.
Nodes placed in the DOM tree are provided with a programming interface, which Javascript can access to read and modify values. Front-end frameworks such as React have been developed to make this DOM manipulation more efficient.
HTML was originally a language for defining the structure of a document, but as it became more complex with the addition of functions for display in a browser, it was developed to separate the functions for appearance. CSS (Cascading Style Sheets) was formulated to separate these functions, and was introduced in earnest in HTML4. An example of CSS is shown below.
body {
background-color:#FFFFFF;
text-align:center;
}
Since CSS was formulated for the purpose of changing the appearance of HTML, it does not provide many programming-like features such as variables, constants, and inheritance. Therefore, a method has been developed to implement functions in CSS that are highly compatible with web application development in a different language and output CSS. Such a language is called AltCSS. Typical AltCSS include Less, Sass, and Stylus.
Versions of CSS started with CSS1, followed by CSS2, and now CSS3, which includes a variety of features such as animation, element deformation, and gradients.
Javascript is a language that runs in the browser. It was implemented as a language to run on the Netscape Navigator browser used in the early days of the Web, and was given the name JavaScript because Java was getting a lot of attention at the time. Despite the similarity in name, it is a completely different language from Java.
The JavaScript specification has been standardized as ECMAScript, and while many programming languages are class-based object-oriented, JavaScript is prototype-based object-oriented. While class-based object orientation defines the structure of the object statically, prototype-based object orientation has a variable structure that can be changed later.
JavaScrip is mostly run in a browser, but there are also implementations such as Node.js that run on a server.
The engine that executes JavaScript is called the JavaScript engine, and different browsers use different engines, resulting in differences in operation and execution speed. These are listed below.
The first version of JavaScript was ECMAScript 1, then 2, 3, 4, and 5, and the current mainstream version is ECMAScript 6.
In order to prevent Javascript from working or not working depending on the browser version, a method of writing in a different language and outputting JavaScript that works even with older versions has been developed. AltJS began with CoffeScript in the past, and in recent years TypeScript is often used.
In recent years, there has been an increase in the number of cases where JavaScript is generated using AltJS instead of being written directly, and when some error occurs in JavaScript actually run on a browser, a mechanism called Source Map is provided to show the correspondence with the original source code. This is called a Source Map.
In order to run faster in the browser, a new one has emerged called Wasm (WebAssembly), which uses a binary format to run directly in the browser. It uses a binary format that runs directly in the browser for fast execution, and developers write programs in another language such as C or Rust to output Wasm.
コメント