浏览器与网络

浏览器

Content-Type 值有哪些？

• application/x-www-form-urlencoded
• application/json
• application/xml
• multipart/form-data
• text/plain

常见的请求头（Request）有哪些？

• Accept：浏览器能够处理的内容类型
• Accept-Charset：浏览器能够显示的字符集
• Accept-Encoding：浏览器能够处理的压缩编码
• Accept-Language：浏览器当前设置的语言
• Connection：浏览器与服务器之间连接的类型
• Cookie：当前页面设置的任何 Cookie
• Host：发出请求的页面所在的域
• Referer：发出请求的页面的 URL
• User-Agent：浏览器的用户代理字符串
• If-None-Match：客户端的缓存版本标识符
• If-Modified-Since：客户端上次缓存该资源的时间

常见的响应头（Response）有哪些？

• Content-Encoding：服务器对数据进行的编码类型
• Content-Type：服务器返回的内容类型
• Content-Length：服务器返回的内容长度
• Date：响应消息产生的日期和时间
• Authorization：访问控制的认证信息
• Cache-Control：指示缓存机制的指令
• Expires：响应过期的日期和时间
• Etag：资源的特定版本标识符
• Last-Modified：资源最后修改的日期和时间

Cookie、LocalStorage、SessionStorage 对比

名称	大小	生命周期
Cookie	4KB	默认关闭浏览器后失效，可设置过期时间
LocalStorage	5MB	手动清除
SessionStorage	5MB	关闭窗口或浏览器

Cookie 跨域： 默认跨域不共享，但可以通过服务端设置 document.domain 实现跨域共享。

document.domain = 'baidu.com';
// 那么 www.baidu.com、image.baidu.com、xxx.baidu.com 都可以访问

浏览器攻击方式

1. XSS（代码注入攻击）
2. CSRF（利用 cookie）
3. DDoS 攻击
4. SQL 注入

浏览器调试工具

1. 元素审查 Element
2. 控制台 Console
3. 网络 Network
4. 内存 Memory
5. 源代码 Source
6. 应用 Application
7. 性能 Performance

---

网络

从 URL 输入到返回请求的过程

1. URL 解析
2. 缓存判断
   • 根据 Cache-Control 和 Expires 判断是否使用强制缓存
   • 根据 Etag、If-None-Match 判断是否使用协商缓存（更精准）
   • 根据 Last-Modified、If-Modified-Since 判断是否使用协商缓存
3. DNS 解析
4. 获取 MAC 地址
5. TCP 三次握手
6. HTTPS 握手
7. 发送请求
8. 发送响应
9. 页面渲染
   • 解析 HTML 文档，构建 DOM 树
   • 构建 CSSOM 树（样式规则）
   • 将 DOM 树和 CSSOM 树合并成渲染树
   • 根据渲染树布局
   • 绘制
   • 显示
10. TCP 四次挥手

GET 和 POST 请求的区别

特性	GET	POST
传输	URL 传输	请求体传输
安全性	不安全	相对安全
缓存	有缓存	无缓存
长度	长度有限制	长度无限制
幂等	幂等（多次请求返回结果一致）	不幂等

HTTP 状态码

• 2xx - 请求成功
• 3xx - 重定向
• 4xx - 客户端错误
• 5xx - 服务器端错误

详情见：HTTP 状态码

HTTP 和 HTTPS 区别

特性	HTTP	HTTPS
端口	80 端口	443 端口
证书	无需申请证书	需要申请证书
协议	超文本传输协议	SSL 加密协议
速度	快（无状态）	慢（SSL 包需要传输）

什么是浏览器同源策略？

同源指的是相同协议、域名和端口号

什么是跨域？

访问不同源的资源

什么是 OPTIONS 请求？

跨域请求之前进行的一个预检查，浏览器自行发起，无需干预

如何解决跨域问题？

1. JSONP（仅支持 GET 方法，会遭受 XSS 攻击）
2. WebSocket
3. postMessage（iframe）
4. 框架代理跨域
5. Nginx
6. 跨域资源共享（CORS）