前言

网页打开的速度快慢直接影响了用户体验。据统计，Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。所以网页加载速度应该是一个前端开发者关注的重要指标。那么我们如何得知，在前端网页中，各资源的加载速度昵？下面以百度为例。

查看前端各资源加载速度

打开百度，选择F12，打开控制台。选择“Network”，刷新一下页面。
选择第一个资源，www.baidu.com，选择“Timing”，查看最下方的时间509.64ms就是百度页面打开的时间。
其他的CSS资源、图片资源，JS资源，都是这样看加载时间。

加载过程中各指标详解

观察以上的Timing，除了最下方的总时间数，还有其他的详细指标。

Queueing
此参数表示从添加到待处理队列，到实际开始处理的时间。
浏览器是有线程限制的，不能将所有发出去的请求同时发送，浏览器会将请求加入消息队列中（Chrome的最大并发连接数是6）。
Stalled
浏览器准备发出请求指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载。
DNS Lookup
DNS 解析时间。在 DNS 查找完成之前，浏览器不能从主机名那里下载到任何东西。没有本地缓存的时候，DNS查询的时间比较长。但是比如在 host 中设置了 DNS，或者第二次访问，由于浏览器的 DNS 缓存还在，这个时间就非常短了。
Initial connection
浏览器建立 TCP 连接的时间，浏览器从发请求开始到 TCP 握手结束这一段时间，包括 DNS 查询 + Proxy 时间+ TCP 握手时间。
SSL
http是超文本传输协议，以明文方式发送内容，不提供任何方式的数据加密，如果被不法分子截取浏览器和服务器之间的传输报文，会获取其中的信息。
https 是安全套接字层超文本传输协议，就是在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。
Request sent
服务器发送HTTP请求，从第一个字节发出前到最后一个字节发出后的时间。
Waiting(TTFB)
从浏览器发起请求，到服务器的首字节响应的时间(Time To First Byte)。这个阶段通常是耗费时间最长的。可能受到线路、服务器距离等因素的影响。
Content DownLoad
收到响应的第一个字节，到接受完最后一个字节的时间，就是资源下载时间。

前端资源（css,js,图片,接口等）加载过程相关推荐

关于前端性能优化问题，认识网页加载过程和防抖节流
前端性能优化-网页加载过程.性能优化方法.防抖和节流一.网页加载过程 1.加载资源的形式 2.加载资源的过程 3.渲染页面的过程 4.关于window.onload 和 DOMContentLoad ...
php替换时 css中的图片不显示不出来,URL重写：CSS，JS和图像未加载
我遵循规则 .htaccess Options +FollowSymLinks RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAM ...
android图片加载过程,教你写Android ImageLoader框架之图片加载与加载策略
在教你写Android ImageLoader框架之初始配置与请求调度中,我们已经讲述了ImageLoader的请求配置与调度相关的设计与实现.今天我们就来深入了解图片的具体加载过程以及加载的策略(包 ...
类的加载过程详解：加载、验证、准备、解析、初始化
想要弄明白的知识点: 类加载的过程,加载.验证.准备.解析.初始化.每个部分详细描述. 加载阶段读入.class文件,class文件时二进制吗,为什么需要使用二进制的方式? 验证过程是防止什么问题?验 ...
前端资源文件（图片 css js）同步到阿里云OSS
前端资源文件(图片 css js)同步到阿里云OSS 需求: 为了实现自动化更新前端资源,前端资源已放到了阿里云OSS,实现自动上传. 思路: 1.因为使用的是php语言开发项目,自然会想到用php实 ...
前端如何解决图片太多加载资源慢的问题
前端如何解决图片太多加载资源慢的问题使用图片服务器使用图片懒加载 CSS sprites 使用图片服务器把图片服务器与应用服务器分开,图片服务器采用独立域名 ,css.js和图片就可以并发请求了 ...
php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能，1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果复制代码代码 ...
如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载(整理) 一.总结一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
移动端图片居多，加载过慢，使用延迟加载|懒加载（ lazyload.js）
文章目录[隐藏] Lazy Load 插件原理开始使用 lazyload.js lazyload.js 高级使用方法: 更周全的做法提前加载自定义触发事件自定义显示效果把图像插入某个容器加 ...

前端资源（css,js,图片,接口等）加载过程

查看前端各资源css,js,图片,接口等加载速度

前言

查看前端各资源加载速度

加载过程中各指标详解

前端资源（css,js,图片,接口等）加载过程相关推荐

最新文章

热门文章