本站服务

图像识别
Web开发重要概念
零碎知识 Web开发 0 490

HTTP协议

请求头

  • Content-Type
    • application/json: JSON格式的数据
    • application/xml: XML格式的数据
    • application/x-www-form-urlencoded: URL编码的表单数据
    • multipart/form-data: 多部分表单数据，通常用于上传文件
    • text/plain: 纯文本数据
    • application/octet-stream: 文件数据 或者 Protobuf数据
  • Connection
    • keep-alive: 保持连接
    • close: 关闭连接
    • upgrade: 协议升级【一般用于升级为WebSocket或者HTTP/2】
  • User-Agent: 可以伪造，且过于混乱
    • MacOS + Safari: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15
    • MacOS + Chrome: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
  • Referer: 浏览器所访问的前一个页面【正是那个页面上的某个链接将浏览器带到了当前所请求的这个页面】
    • Referer: http://en.wikipedia.org/wiki/Main_Page

响应头

  • Content-Type
    • HTML: text/html[;charset=utf-8]
    • 纯文本: text/plain
    • JSON: application/json
    • Protobuf: application/octet-stream
    • XML: application/xml
    • 图像: image/jpeg、image/png 等
    • 音频: audio/mpeg、audio/wav 等
  • Content-Length: 响应体长度
  • Content-Disposition: 处理响应体的方法
    • inline【默认】
    • attachment; filename="example.txt"
  • ETag: 对于某个资源的某个特定版本的一个标识符【可用于缓存验证】
    • 消息散列: ETag: "737060cd8c284d8af7ad3082f209582d"
    • 版本信息: ETag: "v1.5"
  • Location: 用来进行重定向，或者在创建了某个新资源时使用
    • Location: http://www.w3.org/pub/WWW/People.html

状态码

  • 1xx: 告知请求的处理进度
    • 101 Switching Protocols: 协议切换，例如Websocket的升级
  • 2xx: 成功
    • 200 OK: 表示请求成功，并返回相应的数据
    • 201 Created: 表示请求成功，并创建了新的资源
    • 204 No Content:表示请求成功，但响应体为空，通常用于DELETE请求
  • 3xx: 需要进一步操作
    • 301 Moved Permanently: 表示请求的资源已经被永久移动到新的位置，需要访问使用新URI
    • 302 Found: 表示请求的资源临时移动到了另一个位置，并且还可能继续改变，需要继续访问当前URI【与301区别在于SEO优化】
    • 303 See Other: 临时重定向，明确要求用GET访问新路径，主要用于POST/PUT操作后的重定向，以避免用户刷新页面时重复提交表单
    • 304 Not Modified: 表示资源未修改，直接使用客户端缓存的版本
    • 307、308: 规定了重定向时的请求方法不变【HTTP/1.1才引入，导致使用较少】
  • 4xx: 客户端错误
    • 400 Bad Request: 表示客户端发送的请求有错误
    • 401 Unauthorized: 表示用户未认证，需要提供认证信息
    • 403 Forbidden: 表示 用户已认证但缺少执行的权限 或 存在跨域问题
    • 404 Not Found: 表示请求的资源不存在
    • 405 Method Not Allowed: 请求的方法不可用
    • 415 Unsupported Media Type: 请求体格式不支持
  • 5xx: 服务端错误
    • 500 Internal Server Error: 表示服务器内部发生错误，无法完成请求
    • 502 Bad Gateway: 反向代理服务器作为网关且从上游服务器获取到了一个无效的HTTP响应【重点是无效】
    • 503 Service Unavailable: 表示服务器暂时无法处理请求，通常是因为过载或维护
    • 504 Gateway Timeout: 反向代理服务器作为网关不能从上游服务器及时的得到响应返回给客户端【重点是超时】

浏览器

本地存储

辨析cookie, localStorage, sessionStorage

  1. 能否传递
    • cookie数据始终在同源的http请求中携带，即cookie在浏览器和服务器间来回传递
    • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
  2. 存储大小限制不同
    • cookie数据不能超过4k
    • sessionStorage和localStorage可以达到5M或更大
  3. 数据有效期不同
    • sessionStorage仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持
    • localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
    • cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
  4. 作用域不同
    • sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面
    • localStorage与cookie在所有同源窗口中都是共享的

编码

Base64

  • 原理:
    • 将原始的二进制数据分三个字节为一组，每组转换为4个6bit小片
    • 每个小片使用A-Z, a-z, 0-9, +, /中的一个字符来表示
    • 分组不足的部分补上=
  • 评价:
    • 优点: 纯文本格式的数据方便各种系统的处理和传输，不会出现乱码
    • 缺点: 存储和带宽成本会提升33%(三字节变成了四字节)；编解码过程浪费时间
  • 应用:
    • 电子邮件附件
    • URL编码
    • 图像嵌入
    • ~~v2ray配置~~

加密

可逆加密

  • 特点: 加密后, 密文可以反向解密得明文原文

对称加密

  • 定义: 加密和解密使用相同密钥的加密算法
  • 评价:
    • 优点: 对称加密算法的优点是算法公开、计算量小、加密速度快、加密效率高
    • 缺点: 没有非对称加密安全
  • 实现: DES、AES、3DES、DESX、Blowfish、RC4、RC5、RC6、AES

非对称加密

  • 定义: 加密和解密使用不同密钥的加密算法，也称为公私钥加密
  • 使用: 假设两个用户要加密交换数据，双方交换公钥，使用时一方用对方的公钥加密，另一方即可用自己的私钥解密
  • 实现: RSA、ECC、DSA
  • 评价:
    • 优点: 非对称加密与对称加密相比，其安全性更好
    • 缺点: 非对称加密的缺点是加密和解密花费时间长、速度慢，只适合对少量数据进行加密

不可逆加密

  • 特点: 一旦加密就不能反向解密得到密码原文
  • 场景: 通常用于密码数据加密
  • 实现: MD5、SHA、HMAC、Bcrypt
  • 破解:
    • 方式: 彩虹表存储常见密码
    • 应对:
      • 先使用一个特定的字符串(如域名)加密，然后再使用一个随机的salt(盐值)加密
        • 特定字符串是程序代码中固定的
        • salt是每个密码单独随机，一般给用户表加一个字段单独存储，比较麻烦
      • BCrypt算法
        • 原理: 将salt随机并混入最终加密后的密码【可以根据明文从密文中读出salt】
        • 优势: 验证时也无需单独提供之前的salt，从而无需单独处理salt问题

性能

  • 指标:
    • 首次内容渲染(First Contentful Paint, FCP):
      • from: 用户开始输入url(开始导航)
      • to: 页面出现东西(浏览器渲染第一段DOM)
        • 图片、非白色的<canvas>元素和svg被认为是DOM内容
        • iframe中的任何内容不包含在内
    • 首次可操作(Time to Interactive, TTI):
      • from: 用户开始输入url(开始导航)
      • to: 可操作(比如可点击可滚动)
    • 速度指数(Speed Index, SI): 显示页面内容(全部内容渲染完成)的速度有多快
    • 总阻塞时间(Total Blocking Time, TBT): 在FCP和TTI之间，所有超过50ms的long task的超过时间之和
      • TBT = (T(long task 1) - 50ms) + (T(long task 2) - 50ms) + (T(long task 3) - 50ms) + ...
      • long task 是 JavaScript 代码， 可以让主线程保持忙碌，延迟用户交互，'冻结'UI
      • 为什么是50ms？RAIL模型建议
    • 当前页面上"最大的内容"渲染时间(Largest Contentful Paint, LCP):
      • 一个准确的测量页面主要内容何时被加载的方法: 查看最大的元素何时被渲染
      • 范围: 可视区内
    • 累积布局移位(Cumulative Layout Shift, CLS): 可视区内，累积布局移动的位置
      • 元素的偏移量，比如最开始a元素渲染出现在(1,1)的位置，结果1秒后变成了(7,7)的位值，这有可能造成用户的误触
  • 使用:
    • 想尽快看到东西: 参考FCP
    • 想尽快看全东西: 参考SI, LCP
    • 想尽快能操作: 参考TTI, TBT
    • 页面元素布局最好不要移位: 参考CLS
编写
预览