- 已经建立连接了，但是服务器崩溃了，怎么办？
- HSTS
- 缓存校验
- DNS解析（20ms到120ms）
1.png
一，url解析以及缓存
二，DNS解析
2.png
1，首先本地解析，没有的话再去别的地方找（递归过程--深度搜索）
3.png
2，去DNS服务器上找（迭代过程--广度搜索），2，3，4，5，6，7步骤，最后到权威域名服务器找，20-120ms
优化点：
1，减少DNS请求次数，尽量不用请求太多不同服务器资源。但是为了做负载均衡，服务器分离部署，需要尽量多的请求不同服务器资源，所以这个很难做到。
2，DNS预解析，这个是异步处理，节省时间，针对的是页面的图片等资源
<link rel="dns-prefetch" href="//g.alicdn.com">
三，减少HTTP请求和请求资源大小
优化点：
1，资源合并压缩
2，字体图标
3，base64（小图片）
4，GZIP
5，图片懒加载（骨架屏技术）
6，数据延迟分批加载（第一次只加载首页）
7，CDN资源（地域式分布，请求离自己最近的服务器）
8，雪碧图（基本淘汰）
四，发送http请求之后应用缓存（把内容缓存起来，他不香吗）
4.png
缓存位置：
1，Service Worker：浏览器独立线程进行缓存（基本不用）
2，Memory Cache：内存缓存（小而快，浏览器操作）
3，Disk Cache：硬盘缓存（大而慢，浏览器操作）
4，Push Cache：推送缓存（HTTP2中，基本不用）
缓存流程：
- 初次加载url：查找disk cache，有的话直接拿，没有的话从服务器请求，服务器返回缓存规则
- 刷新页面（f5）：memory cache，然后再disk cache
- 强制刷新（ctrl+f5）：浏览器不使用缓存，发送的头部带有cache-control:no-cache（为了兼容，也会有pragma：no-cache），服务器直接返回200和最新内容
4.1，强缓存（Expires/Cache-Control）
浏览器对于强缓存的处理：根据第一次请求资源时服务器返回的相应头来确定
5.png
缓存规则：
- Expries：缓存过期时间，用来指定资源到期时间（http1，过时了，现在用http1.1）
-
Cache-Control： Cache-Control:max-age=2592000，也就是30天，再次发请求，读取缓存中的信息（http1.1），具体是在memory cache中还是disk cache中读取，由浏览器规定
规则（两者同时写时，Cache-Control优先级更高）：
6.png
问题：服务器在30天内更新资源，客户端无法同步更新。
解决：webpack打包之后，文件名会添加hash值，当成新的资源请求服务器（也就是没有缓存）
4.2，协商缓存
强缓存失效（过期）后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。
资源未更新，返回304过程：
7.png
资源更新，返回200的过程：
8.png
Last-Modified和If-Modified-Since：
- 初次访问，服务器返回资源，响应头中设置了Last-Modified（上次修改时间），缓存文件和响应头
- 再次访问，浏览器检测到有Last-Modified，于是设置If-Modified-Since=Last-Modified，并将If-Modified-Since添加到请求头。
- 服务器收到请求，将If-Modified-Since与服务器的Last-Modified相同，则返回304和空的响应体，浏览器直接从缓存中读取；如果If-Modified-Since小于服务器的Last-Modified，则说明服务器资源有更新，则返回新的资源文件和200.
注意：Last-Modified是秒级，如果在不可感知的时间内修改文件，则服务器会以为没有修改
ETag和If-None-Match：
服务器资源改变时，ETag就会改变，用法和上面一样
七，浏览器渲染
构建DOM树，CSS树，Render树
7.1，DOM树
初始字节码-通过utf-8转换：Bytes：3c 62 6f ......
9.png
（1）转换 字符集
Characters:<html><head></head><body><p></p></body></html>
10.png
（2）令牌
Tokens: StartTag:html StartTag:head EndTag:head StartTag:body EndTag:body ...
11.png
（3）词法分析
Nodes:html body p span ...
12.png
（4）DOM构建
13.png
优化点：
1，标签语义化
2，避免多级嵌套（尽量4级以下）
7.2，CSSDOM树，link,@import
流程和DOM一样
14.png
优化点：
（1）css选择器是从右到左，比如 .div a 是先找所有的a，然后再找.div，因此选择器层级不要太多
7.3，RENDER树
15.png
计算在视口的位置和大小，也就是回流（因元素位置，大小变化导致的重新布局）
根据渲染树和回流得到的几何信息，进行绘制（宽高，大小，颜色）
重绘不一定会流，但是会流一定重绘
优化点：
1，减少操作dom（react之类框架很少需要）：
（1）动画效果放在absolute上面
（2）css3硬件加速（GPU加速），但是可能消耗过多性能，占用内存，导致字体模糊等
（3）牺牲平滑度换取速度，也就是动画时不以1px为基准，而以3px以上，看上去略有不流畅，但可以减少因cpu打满而产生的卡顿
（4）读写分离
2，link是发送http请求，每个http请求都是单独线程处理，chorme可以允许6-7个http请求
（1）@import是同步的，会导致阻塞，因此要减少使用
（2）问：react项目中使用@import，打包之后是什么情况？
优化点：
1，style不需要发请求，速度比link快，如果内容不多的话
2，减少@import
3，link写在头部，和html并发请求
7.4，JS加载
优化点
1，js也是阻塞的，需要放到底部
16.png
蓝色加载，红色渲染
async是谁先加载完成，谁先渲染，不分先后顺序，不依赖其他js文件，不产生冲突的common.js可以使用。（淘宝基本都用的async，和我想的有点不一样...）
defer会有设置依赖，有顺序，一般使用defer。（webpack打包也可以加上）
参考资源：去b站看了下，视频凉了
网友评论