前言
近期忙的要死，app要上线一系列功能…到周末只想躺着，今天的文案是来自哥们的一篇网络性能优化的文案。虽然他搞的是前端，然则网络这一起是“大众”的，因此个人觉得各职业小伙伴看一看没坏处~
正文
前两期讲过了怎样在代码层级进行性能优化，本期给大众带来网络传输层的优化，亦是性能三部曲的终结篇：
Web前端性能优化：html、css、js篇
Web前端性能优化：JavaScript细节篇
强调HTTP请求的完整过程
DNS解析
首要会搜索浏览器
自己的DNS缓存（缓存时间比较短，大概
仅有1分钟，且只能容纳1000条缓存）
倘若浏览器
自己的缓存里面
无找到，
那样浏览器会搜索系统
自己的DNS缓存
倘若还
无找到，
那样尝试从 hosts文件里面去找在前面三个过程都没获取到的
状况下，就递归地去域名服务器去
查询创立TCP链接拿到域名对应的IP
位置之后，浏览器会以一个随机端口（1024<端口<65535）向服务器的WEB程序（常用的有httpd，nginx）等的80端口发送链接请求。连接请求（原始的http请求经过TCP/IP4层模型的层层封包）到达服务器端（这中间有
各样路由设备，局域网内除外）进入到网卡，
而后进入到内核的TCP/IP协议栈（用于识别连接请求，解封包，一层一层的剥开），还有可能要经过Netfilter防火墙（属于内核的模块）的过滤，
最后达到WEB程序
创立了TCP/IP的连接TCP连接的三次握手/四次握手SYN > SYN-ACK > ACK(HTTPS协议还有一个ssl握手过程)
三次握手HTTP重定向的话，从头
起始握手过程Web浏览器发送HTTP请求报文HTTP请求报文由三部分
构成：请求行，请求头和请求正文Web服务器发送HTTP响应报文HTTP响应
亦由三部分
构成：状态码，响应头和实
身体容Web服务器关闭TCP连接
假设一个典型的宽带环境
无本地缓存相对较快的DNS解析(50ms)，TCP握手，ssl协商较快的服务器响应时间(100ms)一次延迟(80ms)
网络传输层时间分析
总时间(470ms)50ms for DNS80ms for TCP handshake (one RTT)160ms for SSL handshake (two RTTs)40ms （发送请求到服务器）100ms (服务器处理)40ms (服务器回传响应数据)一个请求耗费470ms，事实上，470ms
已然很
阳光了(较早的数据，
此刻的DNS预解析和优化
已然将这个时间减少部分)
优化方法
最快的请求便是无请求
优化DNS解析
运用DNS缓存加快DNS解析速度
运用DNS负载
平衡为同一个主机名配置多个IP
位置，在应答DNS
查找时，DNS服务器对
每一个查找将以DNS文件中主机记录的IP
位置按
次序返回
区别的解析结果，将客户端的
拜访引导到
区别的
设备上去，使得
区别的客户端
拜访区别的服务器，从而达到负载
平衡的目的。
优化缓存性能
强缓存和协商缓存的概念1）浏览器在加载资源时，先
按照这个资源的
有些http header判断它
是不是命中强缓存，强缓存
倘若命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。
例如某个css文件，
倘若浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；2）当强缓存
无命中的时候，浏览器
必定会发送一个请求到服务器，
经过服务器端依据资源的
另一有些http header验证这个资源
是不是命中协商缓存，
倘若协商缓存命中，服务器会将这个请求返回，
然则不会返回这个资源的数据，而是告诉客户端
能够直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；3）
一起点是：
倘若命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；4）区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。5）当协商缓存
亦无命中的时候，浏览器直接从服务器加载资源数据。缓存的实现：本地磁盘和内存内存模式
重点应用于无痕浏览，在窗口关闭时清除掉磁盘缓存实现了它自己的一组数据结构, 它们被存储在一个单独的缓存目录里。其中有索引文件(在浏览器
起步时加载到内存中)，数据文件(存储着
实质数据，以及HTTP头以及其它信息)实现方式：Expires, ETag, Last-Modified, keepalive，Cache-Control(
详细细节请移步HTTP-header)
运用Service Worker
概念：谷歌
研发的，在后台
起步的一条服务Worker线程，
功效是不管开多少个页面始终
仅有一个Worker在负责管理，把资源缓存起来，拦截页面请求，查看缓存。Service Worker结合Web APP Manifest能实现离线
运用，断网时返回200，提示用户把网站添加图标到桌面(
亦是PWA的检测标准)兼容性问题：
此刻所有的浏览器均支持Service Worker
利用Chrome Devtools进行优化传输资源检测与优化体积
consoleconsole.log: 不解释console.table: 表格形式打印
繁杂的数据结构console.dir: 递归打印对象的所有属性console.trace():
跟踪函数的调用轨迹console.group()、console.groupEnd(): 分组打印信息带样式打印
带样式打印
检测没用的CSS/JSmore tools=>Coverage
检测没用的CSS/JS
Chrome浏览器供给的关联数据
查看缓存存储的数据和响应处理: chrome://net-internals/#httpCacheDNS度量数据: chrome://histograms/DNSDNS缓存: chrome://net-internals/#dnsChrome浏览器的url表: chrome://chrome-urls/
尾声
性能优化就到此结束了，期盼给各位小伙伴们能够带来帮忙，感觉不错的，欢迎分享给自己的小伙伴~
咱们下篇文案再见~
发表于 2024-8-31 11:28:06