Chrome Network实验

最新推荐文章于 2024-01-31 17:14:37 发布

树欲静而风不止

最新推荐文章于 2024-01-31 17:14:37 发布

阅读量706

点赞数

分类专栏：前端基础文章标签： chrome 前端

本文链接：https://blog.csdn.net/zjy660358/article/details/122276217

版权

前端基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前言

在开发网页过程中，我们会碰到这页面加载也太慢了，那么就要去调优。要进行调优，当然要先知道哪里慢了。那么就需要Chrome的Network看板

版本：Chrome 95

实验

源码

有css、js、ajax有图片、css中有背景图片设置

loadfinsh.css

#testcssload{
	width:300px;
	height:300px;
	background:url(http://img.zdxsd900.com/jydj_indexbanner_3.jpg) no-repeat;
}

打开浏览器

首先看这个二个事件，熟悉Jquery的都知道ready 和 load方法其实对应的就是这个

先来看看DomContentLoaded这个时间线之前浏览器做了什么

由此可以看出，加载页面，加载解析js，加载css

这里为什么会加载html页面中的图片，是因为页面发送请求和页面解析文档结构，分属两个不同的线程

从这边可以看出，是按照顺序加载的。

我这边用的是Vue，Created对应也可以得出为 DomContentLoaded

这时候解析css中，发现这个div有这个背景图，所有浏览器又去加载这个图片了。

所以很多js都是这个时间段执行，因为比如用Jquery的ready方法，因为在DomContentLoaded之前Jquery已经加载执行完成。就可以用了

接下来换一种更简单的。无JS

源码为

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>load & finsh</title>


	</head>

	<body>
		<img src="http://img.zdxsd900.com/jydj_aboutme_j16.jpg" style="display:inline-block;width:180px;margin-right:15px;" />
		<img src="http://img.zdxsd900.com/jydj_aboutme_j11.jpg" style="display:inline-block;width:180px;margin-right:15px;" />
		<img src="http://img.zdxsd900.com/jydj_aboutme_j12.jpg" style="display:inline-block;width:180px;margin-right:15px;" />

		<div id="testcssload">helloword</div>
	</body>

</html>

由此可以说明，DomContentLoaded 只是解析完html，无需等待外部资源加载

名词说明

requests、代表有几个请求

transferred、有多少资源通过网络传输

resources、所有资源经过解压之后的原始大小

Finish、页面上所有 http 请求发送到响应完成的时间

timing看板中

Request sent、发送HTTP请求的时间（从第一个字节发出前到最后一个字节发出后的时间）

备注：

response 中 content-encoding:gzip 说明由压缩

为什么资源原大小要比网页中的的要小呢，个人觉得是因为http请求中有response header 算上应该差不多。

HTTP1.0/1.1 协议限定，单个域名的请求并发量是 6 个，即 Finish 是所有请求在并发量为6的限制下完成的时间。可以分布式部署，提速。（不同域名）

树欲静而风不止

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Chrome Network实验

前言在开发网页过程中，我们会碰到这页面加载也太慢了，那么就要去调优。要进行调优，当然要先知道哪里慢了。那么就需要Chrome的Network看板版本：Chrome 95实验源码有css、js、ajax有图片、css中有背景图片设置loadfinsh.css#testcssload{ width:300px; height:300px; background:url(http://img.zdxsd900.com/jydj_indexbanner_3.jpg) no
复制链接

扫一扫