浏览器
计算机网络
IP
在网络中唯一标识一台设备，在不同主机间传数据；
UDP
用户数据报协议；不需要建立连接，直接在网络节点间传输数据包，适合视频聊天或网络游戏；
TCP
网络传输协议；需要建立连接，在连接通道上传输数据包，适合：重要数据，网页，邮件；
三次握手
客户端和服务器的三次交互（TCP 连接时）
四次挥手
请求关闭，确认关闭，服务器关闭了，客户端关闭了（TCP 关闭时）
HTTP
超文本传输协议；基于 TCP/IP，是浏览器和服务器之间的协议；
浏览器通过 HTTP 协议，向服务器发送请求，服务器返回网页内容；
TCP 确保网页内容可靠；
HTTPS
在 HTTP 的基础上加入了 SSL/TSL 层，提供了加密、认证、完整性保护等功能。
服务器需要 SSL 证书，浏览器会验证证书的有效性，建立加密通道，数据都是加密传输的。
HTTPS 可以防止 DNS 劫持攻击。
从输入 URL 到页面展示，发生了什么
解析 DNS，把网址解析成 IP 地址，建立 TCP 连接，发送 HTTP 请求，服务器首先会检查资源是否有缓存，缓存有两种，强缓存和协商缓存。强缓存通过 header 里的 Cache-control 判断，协商缓存（浏览器如果缓存了某个资源后，会记录该资源的最后修改时间或 Etag 值，然后根据这两个值在请求头里加入 if-modify-since 或 if-none-match。然后服务器就可以对当前资源和浏览器缓存的资源进行比较，看是否一致）
如果是，则返回 304，使用缓存的资源，如果不是，返回 200，使用新的资源。
获取到新的资源，进入渲染阶段，首先解析响应体（HTML、CSS、JS），解析 HTML 生成 DOM 树，解析 CSS 生成 CSSOM 树，执行 JS，然后根据 DOM 和 CSSOM 进行布局和绘制。
重绘和重排
重排：需要重新计算并确定页面元素的几何属性，位置，大小，边距，布局
修改 DOM 结构，改变布局样式，浏览器窗口变化
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
width、height
getComputedStyle()
getBoundingClientRect()
重绘：需要改变外观，不涉及布局。
设置文本内容，改变颜色等样式，添加或删除伪类
优化：
使用 transform 替代 top (触发 GPU 加速)
使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局
避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局
减少重绘和重排：避免不必要的样式更改，使用 CSS 动画代替 JS 动画，减少 DOM 操作
requestAnimationFrame
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。
避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。