外链论坛

 找回密码
 立即注册
搜索
查看: 32|回复: 2

高级Web必须:网络优化,拿去镇住面试官

[复制链接]

2930

主题

182

回帖

9920万

积分

论坛元老

Rank: 8Rank: 8

积分
99209518
发表于 2024-8-31 11:28:06 | 显示全部楼层 |阅读模式

前言

近期忙的要死,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/

尾声

性能优化就到此结束了,期盼给各位小伙伴们能够带来帮忙,感觉不错的,欢迎分享给自己的小伙伴~

咱们下篇文案再见~

回复

使用道具 举报

2930

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109437
发表于 2024-10-16 10:31:51 | 显示全部楼层
“NB”(牛×的缩写,表示叹为观止)‌
回复

使用道具 举报

2930

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109437
发表于 2024-10-24 07:39:46 | 显示全部楼层
谷歌网站排名优化 http://www.fok120.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-5 16:38 , Processed in 0.065878 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.