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