Network(网络面板)概览
- 控制器
- 过滤器
- 时间线
- 请求列表
- 下载详情
1、控制器
Preserve log
勾选后
页面刷新或者重定向能保留前者的请求列表信息。
Disable cache
勾选后禁用缓存。
No throtting
网络场景模拟设置
在线、离线、3G网络等。
Use large request rows
请求列表大图标模式（个人感觉用处不大）
Show overview
资源加载时间轴。
Captrue sereenshots
页面快照时间轴。
2、过滤器
Filter 使用这些选项可以控制在请求列表中显示哪些资源，过滤规则如下：
按住 Cmd （Mac）或 Ctrl （Window / Linux），然后点击过滤器可以同时选择多个过滤器
一般过滤方法
高级过滤方法
取反（-）组合过滤
Invert
过滤取反（有筛选项生效）
Hide data URLs
Data URLs即前缀为 data: 协议的URL，其允许内容创建者向文档中嵌入小文件。
has blocked cookies？
是否展示被阻止的 cookies
。（cookies后续系列讲解）
Blocked Rrequests
是否展示被阻止的 request。
3rd-party requests
过滤出第三方请求。
4. 请求列表
(1)资源加载时间分布
Queueing ：这个字段表示排队时间（浏览器在建立连接之前，根据短暂的磁盘分配，对请求进行排队） Chrome（Http1.1）默认同域名请求的并发限制数为6，所以当同一时刻请求资源过多时就需要排队等待；时间过长怎么办？
- 升级成http2 (示例：H1 vs H2 http.tunetheweb.com/performance... )；
- 尽量减少资源的访问次数、资源合并；
- 合理使用缓存缓存；
- 分域名（1、示例：index1.html vs index2.html 2、cooikes）；
为什么要分域名？
-
同域名出现了很多等待的请求
-
分域名后，同一个图片换成不同的域名后不用等待
Stalled：由于排队而停下来等待的时间？
Request sent：发起请求的时间。
Waiting（TTFB） ：服务器接收到请求以后直到返回第一个字节的时间；
若该时间较长，则可以考虑是否网络条件较差，或服务器响应慢，这个基本上是网络问题或服务器问题，比如是否发送的某些特定条件导致服务器陷入较深的循环等，需要考虑对网络或服务器进行性能优化了。
Conetn Download：服务器已将数据返回到Response中，获取Response中的数据所花费的时间；
若该时间较长，则应该是返回的资源字节数较大，需要较长时间才能下载完成。
(2)页面重定向
Http 302 -> Location跳转（
示例：拿cas登录举例）
(3)浏览器缓存
浏览器缓存流程分析：
由上图我们可以知道：
- 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的
结果以及缓存标识 - 浏览器每次拿到返回的请求结果都会将
该结果和缓存标识存入浏览器缓存中
强缓存
强缓存流程分析： 
页面表现： 
强缓存规则：控制强制缓存的字段分别是
Cache-Control（Htttp1.1）和Expires（Htttp1.0），同时存在时Cache-Control>Expires。
Cache-Control取值如下：
- public：所有内容都将被缓存（客户端和代理服务器都可缓存）
- private：所有内容只有客户端可以缓存，Cache-Control的默认取值
- no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
- no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
- max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效
内存缓存(from memory cache)vs硬盘缓存(from disk cache)
示例：演示流程-页面第一次打开->关闭标签打开->刷新
在浏览器中，浏览器会在js和图片等文件解析执行后直接存入内存缓存中，那么当刷新页面时只需直接从内存缓存中读取(from memory cache)；而css文件则会存入硬盘文件中，所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
协商缓存
协商缓存-304的情况：
协商缓存-200的情况：
同样，协商缓存的标识也是在响应报文的HTTP头中和请求结果一起返回给浏览器的，控制协商缓存的字段分别有：Last-Modified / If-Modified-Since和Etag / If-None-Match
- Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高
- Etag / If-None-Match对比一致性
- Last-Modified / If-Modified-Since 对比时间节点
总结
示例：如何解决前端发版页面不更新问题？
5. 下载信息
当前页面总共发起了多少个请求，交换了多大的数据量，完成事件，以及触发DOMContentLoaded的时间和触发Load事件的时间。
transferred和resources的最大区别是：network
DOMContentLoaded：当 HTML 文档完全解析，且所有延迟脚本（<script defer src="...">和<script type="module">）下载和执行完毕后，会触发DOMContentLoaded事件。它不会等待图片、子框架和异步脚本等其他内容完成加载。
Load： 整个页面及所有依赖资源如样式表和图片都已完成加载时触发
总结和建议
- 尽量减少http的请求
- http版本升级（优化方案）
- 首屏优化、分包、按需加载
- 减少cookies的使用
- 资源用不同的域名访问（优化方案）
- 合理使用缓存（优化方案）
- 推荐连接 developer.chrome.com/docs/devtoo...