Web Technology Basics
Learn how the web works with multiple-choice questions: HTTP requests and responses, methods and status codes, headers and cache control, HTTP/2 and HTTP/3, cookies and sessions, JWT, OAuth and OpenID Connect, REST APIs, URLs and JSON, WebSocket and webhooks, the DOM and CSS, the event loop, the same-origin policy and CORS, Service Workers, CDNs and compression, Core Web Vitals, web servers and reverse proxies, and SSR, CSR and SSG.
Web Technology Basics: key points
When you open a URL in a browser, an HTTP request reaches a server, and the browser builds the screen from the HTML, CSS and JavaScript that come back. The web is made of many technologies working together: cookies that keep you logged in, APIs that connect to other services, and caches and CDNs that speed up display.
This topic covers the shape of HTTP requests and responses, the safety and idempotency of methods, status codes, cache control with headers, and the differences between HTTP/1.1, HTTP/2 and HTTP/3. It then deals with managing state with cookies, sessions and JWTs, OAuth 2.0 and OpenID Connect, REST APIs, the structure of URLs, percent-encoding and JSON, and WebSocket and webhooks. On the browser side, it covers the DOM, the CSS box model and specificity, the processing up to the first display, the JavaScript event loop, the same-origin policy and CORS, Service Workers and responsive design; on the delivery side, browser and CDN caches, compression and transfer-time calculations, Core Web Vitals, image formats, web and application servers, reverse proxies, and SSR, CSR and SSG. It also helps with the network and web-system sections of IT certification exams such as Japan's Fundamental and Applied Information Technology Engineer Examinations. How TCP/IP, DNS and TLS work is covered in "Computer Networking Basics", attacks and countermeasures such as XSS, CSRF and SQL injection in "Information Security Basics", and the design of load balancing and redundancy in "System Architecture and Reliability".
All Web Technology Basics questions (40)
- Which of the following correctly lists the elements in the first line (the request line) of an HTTP/1.1 request?
- Among HTTP methods, which of the following is not "safe" (not intended to change the state of resources on the server) but is "idempotent" (sending the same request any number of times leaves the same state as sending it once)?
- Which of the following correctly pairs an HTTP status code with its meaning?
- On a members-only website, an ordinary member who is logged in requests a page that only administrators may access. The server knows who the user is but does not allow access to this page. Which of the following status codes is most appropriate to return?
- A web API returns data in JSON format as the body of its response. Which of the following headers is generally added to the response to indicate the format of the body?
- A browser requests an image it received earlier once again, putting the ETag value from that earlier response into the If-None-Match header. If the image on the server has not changed, which of the following is the correct server response?
- Which of the following correctly describes HTTP/2 and HTTP/3?
- From a web server with an RTT of 40 ms, one HTML file and the four images it references are fetched one after another. Assume that establishing a TCP connection takes one round trip and each request and response take one round trip, and ignore data transfer time, server processing time, TLS and connection teardown. Which of the following is the difference in total time between opening a new TCP connection for each object and reusing one TCP connection (a persistent connection)?
- HTTP is a stateless protocol. Which of the following correctly describes what this means together with the usual way a website keeps a user logged in?
- Which of the following correctly describes the cookie set by the header above?
- Which of the following correctly describes a difference between the browser's localStorage and cookies?
- Three application servers are placed behind a load balancer, which distributes requests to them in turn (round robin). The session information of a logged-in user is stored only in the memory of the server that handled the login. Which of the following is an appropriate pair of a likely problem and its countermeasure?
- Which of the following correctly describes a typical signed JWT (JSON Web Token)?
- A photo-printing app, with the user's permission, reads the user's photos stored on another company's photo storage service. In OAuth 2.0, which of the following roles shows the user a screen asking for permission and, when the user agrees, issues an access token to the app?
- Which of the following correctly describes the relationship between OAuth 2.0 and OpenID Connect?
- Which of the following is an appropriate web API design that follows the principles of REST?
- A browser opens https://www.example.com:8443/docs/guide.html?lang=ja#install. Which part of this URL is not included in the request sent to the server and is used only inside the browser after the page loads?
- To put the Japanese character "あ" into a URL query, the byte sequence representing it in UTF-8 (E3 81 82) is percent-encoded. Which of the following is the correct result?
- A chat app needs to deliver new messages from the server to the browser immediately. Which of the following correctly describes WebSocket?
- A merchant's server wants to know immediately when a payment is completed on an online payment service. Which of the following correctly describes the method in which the payment service sends a notification by HTTP POST to a URL the merchant registered in advance (a webhook)?
- Which of the following correctly describes the DOM (Document Object Model) used in browsers?
- For the element styled with the CSS above, which of the following is the width from the outer edge of the left border to the outer edge of the right border?
- Assume there are no other style specifications. In the HTML above, which of the following is the color of the text "Hello"?
- In the processing a browser does before showing the first screen (the critical rendering path), a <script src="app.js"> written without attributes inside <head> makes the HTML parser stop at that point. Which of the following correctly describes the behavior when the defer attribute is added to this element?
- When the JavaScript above is run in a browser, which of the following is the order in which the characters are shown on the console?
- Under the browser's same-origin policy, which of the following URLs is considered to have the same origin as https://www.example.com/app/index.html?
- JavaScript on a page at https://app.example.com uses fetch to send a POST request with a body of Content-Type application/json to https://api.example.net/orders. Which of the following correctly describes how CORS behaves in this case?
- Which of the following correctly describes a Service Worker?
- For a page with responsive design that also supports smartphones, which of the following is the main purpose of writing <meta name="viewport" content="width=device-width, initial-scale=1"> in <head>?
- The response for a "my page" whose content differs for each user is given Cache-Control: private, max-age=60. Which of the following correctly describes the effect of this setting?
- When a web server compresses responses with gzip or Brotli before sending them, which of the following generally gains the least reduction in transferred data from compression?
- 1.5 MB of text data is compressed with gzip to one third of its size and sent. The bandwidth is 10 Mbps and the RTT is 100 ms, and before the data starts to be sent, the TCP connection, the TLS handshake and the HTTP request take three round trips in total. Assume 1 MB = 10^6 bytes, and ignore compression and decompression time, headers and waiting caused by TCP congestion control. Which of the following is closest to the time until all the data has been received?
- A CDN receives 2,000 requests per second, and its cache hit ratio rises from 90% to 98%. The response time is 20 ms on a hit, and 200 ms on a miss because the content is fetched from the origin server and returned; only requests that miss reach the origin server. Which of the following is the combination of the number of requests reaching the origin server and the average response time after the ratio reaches 98%?
- Among Core Web Vitals, the metrics of a web page's user experience, which of the following does CLS (Cumulative Layout Shift) represent?
- Which of the following is an appropriate pairing of an image format for web pages with its typical use?
- 3,000 bytes of image data are encoded with Base64 and embedded in HTML. If no line breaks are inserted, which of the following is the number of characters after encoding?
- A web system is built in three tiers: a web server, an application server and a database server. Which of the following is the processing that the application server mainly handles?
- Which of the following correctly describes a reverse proxy?
- With CGI, the web server starts the program as a new process every time it receives a request, and the process ends when processing is finished. Which of the following is the main reason that FastCGI and application-server approaches can handle many requests more efficiently than CGI?
- Among the ways of producing the pages of a website, which of the following generates the HTML files of all pages in advance at the build stage and returns those files as they are in response to requests?
Books on Web Technology Basics Ad
As an Amazon Associate I earn from qualifying purchases.
Other topics in Computer systems
- Computer Arithmetic IEEE 754, fixed point, rounding error
- Probability, Statistics and Queueing Counting, distributions, estimation and testing, M/M/1
- ISA & Assembly RISC-V, addressing modes, calling conventions
- Compilers Parsing, SSA, optimizations, register allocation
- Linkers, Loaders & Executables ELF, symbols, relocation, dynamic linking
- OS & Hardware Interrupts, system calls, page faults
- Linux and Command-Line Basics Shell, permissions, pipes, scripts
- Memory Hierarchy Caches, replacement policies, 3 types of misses
- Multicore & Synchronization MESI, atomic instructions, memory barriers
- GPU Programming Warps, shared memory, coalescing, occupancy
- AI Hardware & Software Stack Inference vs training, quantization, roofline
- Machine Learning Basics Learning types, evaluation metrics and neural networks
- Embedded Systems & Firmware GPIO, UART/SPI/I2C, RTOS
- HDL & Verification Verilog, latches, state machines, testbenches
- I/O Interfaces & Buses PCIe, USB, SerDes, CXL
- Computer Networking Basics TCP/IP, subnetting, DNS, TLS
- Wireless Communication Basics Modulation, OFDM, MIMO and RF circuits
- Information Security Basics Crypto, authentication, web attacks
- Database Basics SQL, normalization, transactions
- Data Structures and Algorithms Complexity, search, sorting and graphs
- Programming Basics (Pseudocode Tracing) Pseudocode, tracing, arrays and recursion
- C Programming Basics Pointers, memory, undefined behavior
- Software Development and Project Management Processes, testing, schedule and cost control
- Business Strategy and Accounting Basics Accounting, break-even, strategy, marketing
- IT Service Management and Systems Audit SLAs, incidents and problems, audits and internal control
- System Architecture and Reliability Redundancy, RAID, backups and cloud
- Cloud and Container Basics Docker, Kubernetes, shared responsibility, IaC
- Performance Analysis Amdahl's law, CPI, bottlenecks
- Hardware Security Side channels, secure boot, TEE, PUF
- Power Management DVFS, power gating, sleep states