HTTP

概念

Http (HTTP-Hypertext transfer protocol)是超文本传输协议, 是一个简单的请求-响应协议，HTTP基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式
Https（全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性 。HTTPS 在HTTP 的基础下加入SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层（在 HTTP与 TCP 之间）。这个系统提供了身份验证与加密通讯方法。它被广泛用于万维网上安全敏感的通讯，例如交易支付等方面 。

  • Http默认端口80，Https默认端口443，改为其他端口
  • HTTP是基于客户/服务器模式，且面向连接的。典型的HTTP事务处理有如下的过程
    • 客户与服务器建立连接
    • 客户向服务器提出请求
    • 服务器接受请求，并根据请求返回相应的文件作为应答
    • 客户与服务器关闭连接

报文组成

  • 请求报文
    • 请求行 ( http 方法 + 页面地址 + http 协议 + 版本)
    • 请求头( key + value 值)
    • 空行(服务端通过空行来判断下一部分不再是请求头，而当做请求体来解析)
    • 请求体(数据部分)
  • 响应报文
    • 状态行 + 响应头 + 空行 + 响应体

常见状态码

  • 1xx: 接受，继续处理
  • 200: 成功，并返回数据
  • 201: 已创建
  • 202: 已接受
  • 203: 成为，但未授权
  • 204: 成功，无内容
  • 205: 成功，重置内容
  • 206: 成功，部分内容
  • 301: 永久移动，重定向
  • 302: 临时移动，可使用原有URI
  • 304: 资源未修改，可使用缓存
  • 305: 需代理访问
  • 400: 请求语法错误
  • 401: 要求身份认证
  • 403: 拒绝请求
  • 404: 资源不存在
  • 500: 服务器错误

从URL到呈现页面(简洁)

  • 浏览器的地址栏输入URL并按下回车；
  • DNS 解析：将域名解析成 IP 地址；
  • TCP 连接：TCP 三次握手；（三次握手的目的：为了防止已经失效的连接请求报文段突然又传送到了服务器端，从而产生错误）
  • 发送 HTTP 请求；
  • 服务器处理请求并返回 HTTP 报文；
  • 浏览器解析渲染页面；
  • 断开连接：TCP 四次挥手

三次握手

你好，我是A -> 收到，我是B -> 那么我们可以连接了

第一次、第二次握手不可以携带数据，因为一握二握时还没有建立连接，会让服务器容易受到攻击。而第三次握手，此时客户端已经处于 ESTABLISHED (已建立连接状态) ，对于客户端来说，已经建立起连接了，并且也已经知道服务器的接收、发送能力是正常的了，所以能携带数据也是没问题的

HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

语义化

语义化就是让页面内容结构化，它有如下优点

  • 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构
  • 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重
  • 方便其他设备解析，如盲人阅读器根据语义渲染网页
  • 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 代表头部 -->
<header>
<!-- 代表超链接区域 -->
<nav>
<!-- 定义文档主要内容 -->
<main>
<!-- 可以表示文章、博客等内容 -->
<article>
<!-- 通常表示侧边栏或嵌入内容 -->
<aside>
<!-- 代表尾部 -->
<footer>

HTML5新标签

1
<header>、<footer>、<aside>、<nav>、<video>、<audio>、<canvas>等

渲染机制

  1. 网页生成过程：
  • HTML被HTML解析器解析成DOM 树
  • css则被css解析器解析成CSSOM 树
  • 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)
  • 生成布局（flow），即将所有渲染树的所有节点进行平面合成
  • 将布局绘制（paint）在屏幕上
  1. 重排(回流) 当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。以下会触发：
  • 添加或者删除可见的DOM元素
  • 元素尺寸改变——边距、填充、边框、宽度和高度
  1. 重绘 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。 以下会触发：
  • 改变元素的color、background、box-shadow等属性

重排优化建议

transform 不重绘，不回流
是因为transform属于合成属性，对合成属性进行transition/animate动画时，将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。

  1. 分离读写操作
  2. 样式集中修改
  3. 缓存需要修改的DOM元素
  4. 尽量只修改position：absolute或fixed元素，对其他元素影响不大
  5. 动画开始GPU加速，translate使用3D变化