首页 > 其他分享 >前端性能优化篇

前端性能优化篇

时间:2023-01-25 19:02:28浏览次数:58  
标签:编码 HTTP 二进制 前端 TCP 连接 传输 优化 性能


HTTP1.1 升级到 HTTP2

1. 改进持久连接

HTTP/1.0每进行一次HTTP通信,都需要经历建立TCP连接、传输HTTP数据和断开TCP连接三个阶段(如下图)。

http1

前端性能优化篇_HTTP

 http1.1之后

前端性能优化篇_性能优化_02

 从上图可以看出,HTTP的持久连接可以有效减少TCP建立连接和断开连接的次数,这样的好处是减少了服务器额外的负担,并提升整体HTTP的请求时间。

2. 头部压缩

前端性能优化篇_网络_03

  • 维护一份相同的静态字典,包含常见的头部名称,以及常见的头部名称和值的组合
  • 维护一份相同的动态字典,可以动态的添加内容
  • 通过静态Huffman编码对传输的首部字段进行编码

3 二进制分帧层

在二进制分帧层上,HTTP 2.0 会将所有传输的信息分割为更小的消息和帧,并对它们采用二进制格式的编码 ,其中HTTP1.x的首部信息会被封装到Headers帧,而我们的request body则封装到Data帧里面。

前端性能优化篇_TCP_04

演示demo

​HTTP/2: the Future of the Internet | Akamai​

nodejs 支持 http2

​http2 超文本传输协议2.0 | Node.js API 文档​

标签:编码,HTTP,二进制,前端,TCP,连接,传输,优化,性能
From: https://blog.51cto.com/u_13463935/6022729

相关文章

  • vue-grid-layout数据可视化图表面板优化过程所遇问题汇总
    对于drag事件不熟悉的,请先阅读:《drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践》之前老项目grafana面板,如下图所示(GEM添加图表是直接到图表编辑,编辑完成后自......
  • C++Day09 深拷贝、写时复制(cow)、短字符串优化
    一、std::string的底层实现1、深拷贝1classString{2public:3String(constString&rhs):m_pstr(newchar[strlen(rhs)+1]()){4}5private:6cha......
  • 如何通过top发现性能问题
    在性能测试时,Linux操作系统中可以通过top命令来发现和定位服务器性能消耗的问题。执行top命令后获取到的数据如下图所示第1行显示的是系统运行信息:系统当前时间为15:5......
  • 黑马程序员前端-CSS综合案例:学成在线模块添加
     前端学习笔记教程不定期更新中,传送门:​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​​​黑马程序员前端-CSS入门总结​​​​黑马程序员前端-CSS之emmet语法​......
  • 黑马程序员前端-CSS属性书写顺序(重点)
     前端学习笔记教程不定期更新中,传送门:​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​​​黑马程序员前端-CSS入门总结​​​​黑马程序员前端-CSS之emmet语法​......
  • 第五十五章 使用 ^mgstat 监控性能 - Seizes、ASeizes 和 NSeizes
    第五十五章使用^mgstat监控性能-Seizes、ASeizes和NSeizesColumnDescriptionNotesGlorefs全局引用(数据库访问)。指示代表当前工作负载正在发生的工作量;......
  • nginx 做图像服务器,生成图片的URL,让前端访问
    需求:后端不断产生新的图片数据,发送给前端,前端然后显示。方案:1.后端可以生成一个图片URL地址,然后返回给前端【采用】2.或者返回base64疑问:将图片文件......
  • js对象优化
    以相同顺序初始化对象成员,避免隐藏类的调整实例化后避免添加新属性尽量使用Array代替array-like对象避免读取超过数组的长度避免元素类型转换注:第五点图片解释 ......
  • Nginx调优总结-第六部分编译优化与简单测试
    第六部分编译优化Nginx可以自行编译,所以里面可以设置多个编译策略.也可以自行修改源码,便于比如进行ip_hash的全IP地址验证.也可以修改nginx的版本号等信息,避免内......
  • 前端每行四个解决办法
    success:function(json){letlist=json.data;lettest='<divclass="col-md-offset-1col-md-10"></div>'for(leti=0;i<list.length;i++){let......