浏览器输入 URL 到页面呈现及其优化
2019-10-30 本文已影响0人
coolheadedY
输入 url: 浏览器先检查缓存，然后解析本地-路由器-全网 dns，指向服务器 ip
- 强缓存 request Cache-Control
1.max-age=0，只 if-none-match 协商 etag 的 hash
2.no-cache, 都不缓存 - 强缓存 response Cache-Control
1.max-age=0, no-cache, 只 etag 对 if-none-match 协商 hash
2.no-store 都不缓存 隐私 - DNS 缓存
1.浏览器缓存的 dns
2.本机 host 文件的映射
3.路由器的映射
4.网络服务商的映射 (本地DNS服务器为止)
5.root 域名服务器
6.顶级域名-主域名服务器-结果缓存在本地DNS服务器 - 默认访问 http 重定向到 https
HSTS 策略: response headers: Strict-Transport-Security: max-age=31536000 把所有请求都访问为 https，首次访问不知道配置可以注册在公网上。
请求远程服务器: 建立 TLS 连接2次RTT， TCP 三次握手RTT，nginx 转发到对应的资源上，服务器检查缓存
- 优化 TLS 2次 RTT, 浏览器缓存对称密钥
1.client 发送 k1 和加密方案列表
2.server 发送 k2、证书、公钥、确定的加密方案
3.client 验证证书、公钥加密 k3 发送
4.server 密钥解 k3
5.client server 使用 k1 k2 k3 对称加密通信
ssl_session_tickets on;
ssl_session_ticket_key current.key;
ssl_session_ticket_key previous.key;
- 优化 TCP 三次握手 RTT
- request header：connection: keep-alive
- 重用 TCP 连接
- 管线化 http 1.1
- keep-alive 基础上
- 请求一次发出
- 响应按顺序 还是有阻塞可能
- 管线化和多路复用区别
- 管线化在 keep-alive 基础上复用 TCP 3次握手
- 管线化一次发送多个请求返回仍是一个个的顺序不变
- 多路复用是 http2 多个请求响应都是并行
服务器断开连接的四次挥手
- 客户端请求断开连接
- 服务端确认断开请求
- 服务端发送完毕剩下的数据 close
- 客户端close 回复
浏览器检查状态码，304 协商缓存，301，302 重定向
- 304 req:if-none-match, res:etag 协商 hash
- 301 永久重定向会浏览器缓存
- 302 临时重定向浏览器不缓存
解析返回内容，重排重绘
- 页面生成过程
- html 解析成 dom 树
- css 解析成 cssom
- 结合 dom 树和 cssom 生成 render tree
- 进行布局 flow 将 渲染树的 节点进行合成
- 进行绘制 paint 至屏幕上
- 文档解析过程的事件触发
1 开始解析 html 文档
触发 readystatechange: load
2 DOMContentLoaded 事件，原始 html 解析
不包含样式资源加载, 同时触发 readystatechange: interactive
3 load 事件，资源加载完毕
样式资源加载完毕后才触发, 同时触发 readystatechange: complete
- defer async 资源的script 都不阻塞，
普通 script 下载阻塞再执行阻塞
defer 先下载 html 解析完后执行，没什么阻塞
async 下载好后直接执行，阻塞执行阶段
-
重排
1.dom 的增删改查
2.浏览器窗口的变化滚动
3.用户的输入
4.dom的形状大小动画
5.重排必定发生重绘
6.影响范围大，最好固定 dom 容器大小不影响到其他 dom -
重绘
1.dom 的颜色背景
2.dom border 样式 如圆角内陷
3.每次重绘前执行 requestAnimationFrame
重排重绘优化
- 目标 dom 父容器固定大小，重排不会影响其他 dom
// 改变 p 里的 dom 也会影响 h5 和 h4，固定 p 的大小
<body>
<div class="hello">
<h4>h4</h4>
<p><strong>Name:</strong>BDing</p>
<h5>h5</h5>
</div>
</body>
- 读写操作分离
// 只发生一次重绘重排, 读取操作在写入操作完成后才进行, 有的浏览器低下仍会进行4次
div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
console.log(div.offsetLeft);
console.log(div.offsetTop);
console.log(div.offsetWidth);
console.log(div.offsetHeight);
- 样式集中改变
// 使用添加 className 和 cssText 的方式一次操作
el.className += " otherclass"
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
- 缓存布局信息
// bad 同时又读写操作 强制刷新 触发两次重排
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
// good 缓存布局信息 读写分离
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
- dom 离线更改
dom.display = 'none'
// 修改dom样式
dom.display = 'block'
----
const fragment = document.createDocumentFragment();
// DocumentFragment 上批量操作 dom
list.appendChild(fragment);
----
复制 dom，操作完后替换掉原 dom
var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);
-
绝对定位 固定定位
position属性为absolute或fixed 的dom 重排消耗小 -
优化动画
动画移动 1px 增加为 3px 减少 重排
启动 GPU 操作 -
react 调度优化 调度模块原理 - 实现 requestIdleCallback �
- 重绘的一帧 16.67，性能低是 33.33
- rAF 计算出当前帧开始时间和下一帧开始时间
- 把 react 更新任务推入 addEventLisnter 队列中
- 每一帧更新顺序：队列 react 任务 -> UI 渲染动画 -> idle 回调
- 每一次循环队列开始根据 react 任务过期时间判断是否过期，过期了执行 react 更新，再执行 UI 操作
