持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
从浏览器地址栏输入 url 到页面加载的过程是怎么样的？
- DNS 解析:将域名解析成 IP 地址
- TCP 连接：TCP 三次握手
- 发送 HTTP 请求
- 服务器处理请求并返回 HTTP 报文
- 关闭 TCP 连接，通过四次挥手释放 TCP 连接
- 浏览器解析渲染页面
- 解析 HTML 结构，构建 DOM 树
- 解析 CSS，生成 CSS 规则树
- 合并 DOM 树和 CSS 规则，生成 render 树后绘制
- 加载外部脚本
- 解析并执行部分脚本代码
- DOM 树构建完成（PS 可以使用 DOMContentLoaded 事件插入在此之后）
- 加载图片等外部文件
- 页面执行完毕后再执行 window.onload
重绘和重排
- 重排（reflow）：当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流
- 重绘（repaint）：当页面中元素样式的改变并不影响它在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘
- 导致回流的操作：
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容变化（文字数量或图片大小等等）
- 元素字体大小变化
- 添加或者删除可见的 DOM 元素
- 激活 CSS 伪类（例如：:hover）
- 查询某些属性或调用某些方法
- 使用 diff 算法的好处之一就是减少频繁操作节点导致过多的重绘和重排带来的性能损耗
防抖和节流
- 防抖是将多次执行变为最后一次执行
- 节流是将多次执行变成每隔一段时间执行
TCP 三次握手
- 客户端发送一个带 SYN=1，Seq=X 的数据包到服务器端口
- 服务器发回一个带 SYN=1， ACK=X+1， Seq=Y 的响应包以示传达确认信息
- 客户端再回传一个带 ACK=Y+1， Seq=Z 的数据包，代表“握手结束”
get 和 post 的区别（get 和 post 虽然本质都是 tcp/ip）
- GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包
- get 请求时，浏览器会把 headers 和 data 一起发送出去，服务器响应 200
- post 请求时，浏览器先发送 headers，服务器响应 100 continue，浏览器再发送 data，服务器响应 200（返回数据）
- GET 在浏览器回退时是无害的，而 POST 会再次提交请求
- GET 参数通过 URL 传递，POST 放在 Request body 中，所以 GET 请求只能进行 url 编码，而 POST 支持多种编码方式
- GET 比 POST 更不安全，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息
- GET 请求在 URL 中传送的参数是有长度限制的，而 POST 没有
