计算机基础-面试常问问题
请谈谈 HTTP 协议。
超文本传输协议 (HTTP) 是一种应用层协议，用于传输超媒体文档，例如：网页、图片或视频。
它可用于机器对机器通信，例如 Web 浏览器和 Web 服务器之间的通信。
HTTP 是一种客户端-服务器协议：客户端打开（或重用）TCP 连接从而发出一个 Request，然后等待直到收到来自服务器的 Response。
HTTP 是一种无状态协议，这意味着两个两个请求之间没有关联。但是服务器可以向 Web 浏览器发送 Cookie。使用 Cookie 能让你把请求关联起来，共享服务器中的数据，创建会话。
参考资料：
https://developer.mozilla.org/en-US/docs/Web/HTTP
https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
能谈一谈常见的几种 HTTP request methods 吗？
HTTP 定义了一组 Request methods 来指示请求的目的以及如果请求成功则会得到什么结果。
常见的 Request methods 包括：
- GET (获取数据)
- POST (向某个资源提交数据，通常会导致状态变化，比如创建一个资源数据)
- DELETE (删除某个资源数据)
- PUT (和 PATCH 类似)
- PATCH (部分修改某个资源数据)
- OPTIONS (用于 CORS preflight request 中，检测支持哪些 request methods)
参考资料:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
HTTP request method `OPTIONS` 有什么用？
用于CORS preflight request 中，来检测该资源支持哪些 request methods。
因为浏览器有 Same-Origin（同源）策略，跨源访问资源是受限的。跨源访问资源时：
1. 对于简单请求，如 GET, POST，浏览不会发出 method 为 OPTIONS 的 preflight request 请求。
2. 对于非简单请求，如 DELETE, PUT, PATCH, 浏览会自动发出 preflight request 请求，来检测该资源支持哪些 request methods。
3. OPTIONS request 的响应可以被浏览器缓存。
4. 开发者通常使用第三方的包来实现相关功能，如： https://github.com/cyu/rack-cors
参考资料：
https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
你能列举一些常见的 HTTP 响应状态码吗？
响应分为五类：
1. 信息类
2. 成功类
3. 重定向类
4. 客户端错误
5. 服务端错误
200 OK
201 Created
301 Moved Permanently (在 Response Headers 中的 'Location' 值会被浏览器自动请求并跳转)
302 Found (和301类似)
304 Not Modified
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
500 Internal Server Error
参考自：
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
HTTP messages 有哪几种？它们各由哪些部分组成？
HTTP messages 有两类，它们是 Request 和 Response。
一、Request 的组成部分
1. start-line (又称为 request-line)
2. Headers
3. Body
二、Response 的组成部分
1. start-line (又称为 status-line)
2. Headers
3. Representation Headers
4. Body
参考资料：
https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages
常见的 HTTP request headers 有哪些？
常见的 HTTP response headers 有哪些？
常见的 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 (当跨源调用API时，这个会自动被加入)
- Referer: https://developer.mozilla.org/en-US/docs/Glossary/Request_header
- Cookie: coding5session=BikY8d; (客户端把 cookie 发回给服务器，用于保持会话信息) Content-Length: 64 (POST 时传入) Content-Type: application/x-www-form-urlencoded (POST 时传入)
常见的 Response Headers:
- Server: nginx/1.26.1
- Date: Tue, 22 Feb 2022 22:22:22 GMT
- Cache-Control: max-age=604800 (与 Date 联用，可用于浏览器判断缓存的文件是否过期。如过期，浏览器会把 Etag 的值放到请求 headers 的
If-None-Match中，如果响应码为304表示缓存的文件还可以继续使用，否则就用本次请求取得的响应。这一切在浏览器中自动完成，程序员只需要把Cache-Control: max-age=N和etag: xxx设置好) - Etag: "677f3810-1eb" (entity tag是资源的版本信息)
- Set-Cookie: set-cookie: coding5session=BikY8d; (用于服务器给客户端发送 cookie，之后客户端可以发回给服务器，用于保持会话信息)
- Access-Control-Allow-Origin: *
- Location: coding5.com/new-page-143 (status为301或302时，此值会被浏览器自动请求并跳转)
'Content-*' are representation headers, like:
- Content-Type: text/html; charset=utf-8
- Content-Length: 91698
- Content-Language: en-US
参考资料:
https://developer.mozilla.org/en-US/docs/Glossary/Request_header
https://developer.mozilla.org/en-US/docs/Glossary/Response_header
什么是媒体 (MIME) 类型？它有什么作用？请列举几种常见的媒体类型。
媒体类型（又名 MIME 类型）表示文档、文件的性质和格式。
媒体类型的结构是 'type/subtype'，尾部还可以加一个可选的参数提供额外信息：
'type/subtype; parameter=value'， 例如：'text/html; charset=utf-8'。
一个常用到它的地方是 HTTP response headers 中的 'Content-Type'，有助于浏览器更安全地处理它们并获得更好的性能。
常见的媒体类型有：
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
参考资料：
https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types
为什么有时需要对媒体文件进行压缩？如何压缩？
对媒体文件进行压缩的目的是在不影响体验的前提下，提升网站的加载速度。
针对不同的文件，各种压缩算法被发明。
有两类文件压缩算法：无损压缩和有损压缩。
有损压缩通常压缩程度更高。
开发者使用基于这些算法的工具对媒体文件进行压缩，比如：
1. 使用 ImageMagicK 压缩图片。
2. 在 Ngnix 中开启 gzip， 压缩 HTML, CSS, JavaScript 文件，代码：server { gzip: on; }。
参考资料：
https://developer.mozilla.org/en-US/docs/Web/HTTP/Compression
如何在 a.com 的网页中调用 b.com 的 APIs？
可用 JavaScript 的 fetch() method 来调用 b.com 的 APIs。
但因为浏览器有 Same-Origin（同源）策略，所以还需要在 server-side，需要在 Response 的 Headers 中加入 Access-Control-Allow-Origin: a.com，用以实现 Cross-Origin Resource Sharing (aka CORS, 跨源（域）资源共享)。
在浏览器中输入 URL 并按回车键，之后都发生了些什么事？
一，浏览器封装 HTTP Request
一个 HTTP Request 包括 Headers 和 Body。method 为 GET 时，Body 为空。浏览器把 URL 信息，填入到 Headers 中，包括：协议，域名，path 等。
二、Open a TCP connection to send the request
三、发送 request
四、Close or reuse the connection for further requests.
浏览器作为客户端会向服务端发送这个get请求服务端能够通过HDTV协议接收导这条请求并进行处理发送的request里面包含Hader和body get的话，
body就是空，但是它的UI里面可能会有carry Primates，
可以根据Carite进行一些查找服务端把请求的应射到一个通过路由的方式交由代码处理相关的代码处理完之后，把相应的response返回给浏览器。1
https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
https://developer.mozilla.org/en-US/docs/Web/HTTP/Session
HTTP1.x 和 HTTP2.x 有什么区别？
请谈谈浏览器缓存的工作原理，并指出 ETag 的使用方法。
浏览器把一个响应保存在本地，如果它没有过期，下次可以继续使用它的内容作为响应。
有效利用缓存可以提高网站吞吐量和用户体验。
Response headers 中：
- Date: Tue, 22 Feb 2022 22:22:22 GMT
- Cache-Control: max-age=N （N 是秒数）
浏览器会把上述两个值相加，与当前时间差距可用于判断缓存的文件是否过期（stale or fresh)。
如果本地缓存已经过期（stale），就把本地缓存文件headers中的 Etag 值，放到新的请求 headers 的 If-None-Match中，并向服务器请求该URL。
如果服务器响应状态码为304，则继续使用缓存的文件；如果响应状态码为200，则说明缓存文件已经失效，应采用本次得到的响应。
如果本地缓存没有过期（是 fresh），浏览器照理应该不发起请求，但如果你刷新页面，会发现Chrome浏览器仍然会发起请求，可能是因为它猜测你在测试页面更新。你可以把 URL 复制到另外一个 tab 中，就会发现本地文件缓存是成功的。
响应（已存于本地）的headers中如果不包含Cache-Control，浏览器将根据响应的headers中的Date、Last-Modified，和当前时间，通过计算来判断缓存的文件是否过期。只要缓存未过期，就不会发出任何请求。如过期，会在request headers中加入Etag，请求服务器资源。这种做法一般用于缓存assets文件。
对于使用 cookie 来防止其他人重复使用缓存的个性化内容的应用程序，您应该指定 'Cache-Control: private'.
参考资料：
https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching
https://developer.mozilla.org/en-US/docs/Web/HTTP/Conditional_requests
https://stackoverflow.com/questions/11245767/is-chrome-ignoring-cache-control-max-age
How to make your page always the fresh? not cached.
How do you cache your assets?