美文网首页
了解前端请求资源加载时序

了解前端请求资源加载时序

作者: 小李一枚 | 来源:发表于2019-08-01 10:58 被阅读0次

Queueing请求排队的时间。关于这个,需要知道一个背景,就是浏览器与同一个域名建立的TCP连接数是有限制的,chrome设置的6个,如果说同一时间,发起的同一域名的请求超过了6个,这时候就需要排队了,也就是这个Queueing时间

Stalled是浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接等时间等

DNS Lookup DNS查询的时间,页面内任何新的域名都需要走一遍 完整的DNS查询过程,已经查询过的则走缓存

Initial Connection / Connecting 建立TCP连接的时间,包括TCP的三次握手和SSL的认证

SSL完成ssl认证的时间

Request sent/sending请求第一个字节发出前到最后一个字节发出后的时间,也就是上传时间

Waiting 请求发出后,到收到响应的第一个字节所花费的时间(Time To First Byte)

Content Download 收到响应的第一个字节,到接受完最后一个字节的时间,就是下载时间。

如图:Content Download下载时间较长,数据量1.6M左右,如何优化呢?

1、Tomcat5之后默认支持压缩功能,只需开启即可。

  在Tomncat-config-server.xml中添加如下配置,1.6M左右的数据,收到请求不足300k。

compression="on" 打开压缩功能

 compressionMinSize="50" 启用压缩的输出内容大小,单位(B)

  noCompressionUserAgents="gozilla, traviata" 对于以下的浏览器,不启用压缩

  compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" 哪些资源类型需要压缩

2、Nginx开启压缩功能。

检验:

response headers中的Content-Encoding是gzip,说明配置成功。

相关文章

  • 了解前端请求资源加载时序

    Queueing请求排队的时间。关于这个,需要知道一个背景,就是浏览器与同一个域名建立的TCP连接数是有限制的,c...

  • SPA(单页应用)首屏加载速度优化

    加载缓慢的原因 网络延时问题 前端资源文件体积过大 重复请求加载资源 加载脚本的时候,堵塞了渲染内容 解决方案 1...

  • 2019-07-11

    前端性能优化老生常谈的话题,前端面试基本都会问到。回答应该从减少http请求,利用缓存以及资源加载方式切入,但前端...

  • 前端性能优化原理

    网络加载类 1. 减少HTTP资源请求次数 在前端页面中,通常建议尽可能合并静态资源图片、JavaScript和C...

  • 前端性能优化

    一、网络请求方面在网络加载资源方面,相较于app前端页面占劣势,因为很多css、js、img等等要请求获取,而ap...

  • 资源合并与压缩

    什么是web前端 CS架构访问的是本地的资源 Web前端是动态地、增量地访问、加载资源的一个过程 请求过程中一些潜...

  • 前端原生的图片懒加载实现方式

    前端中实现图片懒加载,一次性加载所有资源容易造成网页性能变差,用户体验比较差,所以我们一般需要前端请求出来的数据进...

  • vue-resource的应用

    vue-resource的应用 最近在了解资源的相关加载方式,主要是基于http协议下的资源请求,之前由于用了vu...

  • 前端性能优化

    (1)懒加载与预加载 懒加载的场景 图片进入可视区域之后进行资源请求 减少无效资源的加载 并发加载的资源过多会阻塞...

  • 20170814

    前端使用异步的场景 定时任务:setTimeout, setInverval 网络请求:ajax请求,动态 加载 ...

网友评论

      本文标题:了解前端请求资源加载时序

      本文链接:https://www.haomeiwen.com/subject/vvxqdctx.html