分布式架构网络传输优化

分布式架构网络传输优化

本文主要讲解，浏览器请求过程及网络传输等优化手段

优化之前首先了解其调用过程，如下图：

流程分析

*
通过URL请求到服务器，浏览器就要知道这个url对应的ip是什么？只有知道了ip地址，浏览器才能准备把请求发送到指定服务器的具体ip和端口上去。浏览器的DNS解析器负责把url解析为正确的ip地址，这个解析很花时间，而且这个解析时间段，浏览器不能从服务器那里下载任何东西。浏览器和操作系统提供了DNS解析缓存支持
* 获取IP之后，浏览器会请求与服务器连接，TCP经过3次握手后建立连接通道
* 浏览器真实发送http请求，请求包含了（cookie，header信息）
* 网络开始传输请求到服务器，这个会包含很多时间，如网络阻塞时间、网络延迟时间、真正传输内容时间等
* web服务器接收到请求，会根据url上下文转交给相应web应用进行处理
* web应用会经过很多处理，如
filter、aop前置处理、IOC处理、处理寻找对象和创建，进行业务处理后生成Response对象，熟悉spring对此过程更清晰
* 通过网络传输应答内容回到前端浏览器，先返回html代码，不包含图片、外部脚本、css等
* 浏览器解析页面，进行渲染和绘制过程
1.装载和解析html文档，构建DOM，如果在解析过程中发现需要其它资源，如图片，浏览器会发出请求获取资源
2.装载和解析css，构建cssom
3.根据DOM和cssom构建渲染树
4.然后对渲染树节点进行布局处理，确认其屏幕位置
5.渲染好的节点绘制到界面上，渲染引擎不会等到所有html都解析完后才创建布局渲染树，并行处理解析渲染树同时向后端请求资源
重绘：页面渲染到后面发现需要修改前面已经绘制元素的外观，如背景色、文字颜色。需要重绘这个元素
回流：页面渲染到后面发现需要修改前面已经绘制好的元素某些行为，引起页面上某些元素占位面积、定位方式、边距的变化，会引起周围或者整个页面重新渲染

针对以上第三点之后，可以进行特定的网络优化

优化思路：

* 尽量利用浏览器缓存，优化到极致能不传输最好不传
* 尽量减少需要传输的内容数据量
* 尽量最短距离访问，比如使用客户端最近CDN
* 尽量优化网络链路
详细描述

* 使用浏览器本身缓存，尽量减少来回传输数据量
* 精简代码，移除不必要的字符以减少其大小
* 静态文件，如JS/CSS，进行混淆压缩，如jsmin、YUIcompressor、CSScompressor
* 优先考虑使用CSS来代替，其次才是图片裁剪，如果条件允许，选择有损压缩格式，如jpg
针对大图片，尽量进行精简，在图片效果和大小之间仔细斟酌
* 压缩请求传输内容，前后端交互文章中有详细实例说明，使用压缩如Gzip
后再传输给客户端，客户端接收后由浏览器进行解压，稍微会占取客户端和服务器的CPU，但是会显著提高宽带利用率，特别是纯文本，相当明显
* 减少cookie传递，http规范中描述，每个客户端最多保持300个，每个域名下最多20个，其大小基本保持4K左右，如需传输控制其传输大小
总结

web调用过程分为很多阶段、不同阶段处理方式不同，其过程链路复杂甚长，了解过程后可对其中特定点进行优化，本文主要特定阐述网络传输的优化方式，周期甚短，优化过后效果显著。

作者简介：张程技术研究

更多文章请关注微信公众号：zachary分解狮 (frankly0423)

热门工具换一换

分布式架构 网络传输优化