Common Interview Questions about Computer Basics

    Please talk about HTTP.

    Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia documents, such as HTML pages, images or videos.

    It can be used for machine-to-machine communication, such as communication between web browsers and web servers.

    HTTP is a client-server protocol. A client opens (or reuses) a TCP connection to make a request, then waits until it receives a response from the server.

    HTTP is a stateless protocol, meaning that there is no link between two requests. Yet server can send cookies to web browser. Using HTTP cookies allows you to link requests with the state of the server. This creates sessions.

    References:
    https://developer.mozilla.org/en-US/docs/Web/HTTP
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview

    Can you talk about some common HTTP request methods?

    HTTP defines a set of request methods to indicate the purpose of the request and what is expected if the request is successful.

    Common Request methods include:
    1. GET (retrieves data)
    2. POST (submits an entity to the specified resource, often causing a change in state, e.g., an datum created)
    3. DELETE (deletes the specified resource data)
    4. PUT (similar to PATCH)
    5. PATCH (applies partial modifications to a resource datum)
    6. OPTIONS (makes a CORS preflight request to test the allowed request methods)

    References:
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

    What is the use of HTTP request method `OPTIONS`?

    Used in CORS preflight request to detect which request methods the resource supports.

    Because the browser has the Same-Origin Policy, cross-origin access to resources is restricted.

    1. For simple requests, such as GET, POST, the browser will not issue a preflight request with method OPTIONS.
    2. For non-simple requests, such as DELETE, PUT, PATCH, the browser will automatically issue a preflight request to detect which request methods the resource supports.
    3. The response to the OPTIONS request can be cached by the browser.
    4. Developers often use third-party packages to implement it, such as https://github.com/cyu/rack-cors

    References:
    https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

    Can you list some common HTTP response status codes?

    Responses are grouped in five classes:
    1. informational
    2. successful
    3. redirections
    4. client errors
    5. server errors

    200 OK
    201 Created

    301 Moved Permanently (The 'Location' value in the Response Headers will be automatically requested and redirected by the browser)
    302 Found (Similar to 301)
    304 Not Modified

    400 Bad Request
    401 Unauthorized
    403 Forbidden
    404 Not Found

    500 Internal Server Error

    References:
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

    What types of HTTP messages are there? What parts do they consist of?

    There are two types of HTTP messages, Request and Response.

    Components of Request
    1. start-line (aka request-line)
    2. Headers
    3. Body

    Components of Response
    1. start-line (aka status-line)
    2. Headers
    3. Representation Headers
    4. Body

    References:
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages

    What are the common HTTP request headers?
    What are the common HTTP response headers?

    Common Request Headers:

    • Host: coding5.com
    • User-Agent: Mozilla/5.0
    • Accept: text/html,application/json
    • Accept-Encoding: gzip
    • Accept-Language: en-US,en
    • Origin: https://developer.mozilla.org (this one will be automatically added when making cross-origin API call)
    • Referer: https://developer.mozilla.org/en-US/docs/Glossary/Request_header
    • Cookie: coding5session=BikY8d; (The client sends the cookie back to the server to maintain session) Content-Length: 64 (POST method will use it) Content-Type: application/x-www-form-urlencoded (POST method will use it)

    Common Response Headers:

    • Server: nginx/1.26.1
    • Date: Tue, 22 Feb 2022 22:22:22 GMT
    • Cache-Control: max-age=604800 (With 'Date', it can be used by the browser to determine whether the cached file is stale. If it is stale, browser puts 'Etag' value in the If-None-Match of the request headers, and the response status code is 304 to indicate that the cached file can continue to be used. Otherwise, use the response obtained by this request. All this is done automatically in the browser. The programmer only needs to set Cache-Control: max-age=N and etag: xxx well.
    • Etag: "677f3810-1eb" (Entity tag. It is the version information of the resource. If the value has not changed, the cached file can be used directly without requesting the server again, which improves the loading speed)
    • Set-Cookie: set-cookie: coding5session=BikY8d; (used to send a cookie from the server to the user agent, so that the user agent can send it back to the server later)
    • Access-Control-Allow-Origin: *
    • Location: coding5.com/new-page-143 (the value will be automatically requested and redirected by the browse)

    'Content-*' are representation headers, like:
    - Content-Type: text/html; charset=utf-8
    - Content-Length: 91698
    - Content-Language: en-US

    References:
    https://developer.mozilla.org/en-US/docs/Glossary/Request_header
    https://developer.mozilla.org/en-US/docs/Glossary/Response_header

    What is a media (MIME) type? What does it do? Please list some common media types.

    A media type (aka MIME type) indicates the nature and format of a document, file.

    The structure of a media type is 'type/subtype'.
    An optional parameter can be added to provide additional details:
    'type/subtype; parameter=value', e.g., 'text/html; charset=utf-8'.

    A common place to use it is in HTTP response headers 'Content-Type'.
    The correct content type for these resources helps the browser handle them more securely and with better performance.

    Common MIME types:

    application/octet-stream
    application/json
    application/pdf

    text/plain
    text/html
    text/css
    text/javascript

    image/jpeg
    image/gif
    image/png

    audio/midi
    audio/mpeg

    video/mp4

    multipart/form-data

    References:
    https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types

    Why do you sometimes need to compress media files? How do you do it?

    The purpose of compressing media files is to increase the loading speed of the website without affecting the user experience.

    Various compression algorithms have been invented for different files.
    There are two types of file compression algorithms: lossless compression and lossy compression.
    Lossy compression usually has a higher degree of compression.

    Developers use tools based on these algorithms to compress media files, such as:
    1. Use ImageMagicK to compress images.
    2. Enable gzip in Ngnix and compress HTML, CSS, and JavaScript files. Code: server { gzip: on; }.

    References:
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Compression

    How to call b.com's APIs from a.com's web page?

    Can use JavaScript's fetch() method to call b.com's APIs.

    However, because browsers have the Same-Origin policy, you also need to add Access-Control-Allow-Origin: a.com to the Response Headers on the server-side to implement Cross-Origin Resource Sharing (aka CORS).

    在浏览器中输入 URL 并按回车键，之后都发生了些什么事？

    What are the differences between HTTP1.x and HTTP2.x?

    How to use fetch method?

    OSI 7 layers

    Application layer (HTTP)
    Presentation layer (TSL)
    Session layer ()
    Transport layer (TCP, UDP)
    Network layer (IP)
    Data link layer (Ethernet)
    Physics layer (Wireless, Fiber)

    References:
    https://www.bmc.com/blogs/osi-model-7-layers/

    请谈谈浏览器缓存的工作原理，并指出 ETag 的使用方法。

    The browser saves a response locally, and if it has not expired, it can continue to use its content as a response next time.
    Effective use of cache can improve website throughput and user experience.

    In the response headers:
    - Date: Tue, 22 Feb 2022 22:22:22 GMT
    - Cache-Control: max-age=N (N is the number of seconds)
    The browser will add the above two values, and the difference with the current time can be used to determine whether the cached file is stale or fresh.

    If the stored response is stale, browser puts the 'ETag' value into the If-None-Match of the new request headers, and request the URL from the server.

    If the server response status code is 304, browser will continue to use the cached file; if the response status code is 200, it means that the cached file is stale and the response obtained this time should be used.

    If the stored response is not expired (is fresh), the browser should not issue a request, but if you refresh the page, you can see Chrome still issued a request, probably because it guesses that you are testing page updates. You can copy the URL to another tab and you will find that the local file cache is successful.

    If the stored response headers do not contain Cache-Control, the browser will determine whether the cached file is stale by calculation based on Date, Last-Modified in the response headers and the current time. As long as the cache is not stale, no requests are issued at all. If stale, the 'ETag: xxx' will be added to the request headers to request the server resource. This approach is generally used to cache asset files.

    For applications that employ cookies to prevent others from reusing cached personalized content, you should specify 'Cache-Control: private'.

    References:
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests

    How to make your page always the fresh? not cached.

    How do you cache your assets?