Categories
Business, Hosting, Server, Support, 帮助与下载

页面加载速度慢,到底是多少秒,瓶颈在哪里?

前端性能工具Chrome performance 结合F12,基本可以搞定。

一、Chrome performance

1、shift+ctrl+N进入谷歌的私密浏览模式;

2、F12调出DevTools;

3、点击Tab “Performance”;

4、点击灰色圆点,已开始界面录制;

5、操作测试界面;

6、操作完成后点击stop按钮,开始生成测试报告;

 

7、分析报告

蓝色(Loading):网络通信和HTML解析时间

黄色(Scripting):JavaScript执行时间

紫色(Rendering):渲染时间

绿色(Painting):重绘

灰色(system):系统花费的时间

白色(Idle):空闲时间

总时间-空闲时间,就是此界面显示需要的时间。

 

二、F12

如果不需要分析界面的瓶颈,也可以直接使用Tab “network” ,刷新要测试的界面,会显示下图时间:(但不会有详细的瓶颈数据)

DOMContentLoaded:DOM树构建完成。即HTML页面由上向下解析HTML结构到末尾封闭标签</html> 。

Load:页面加载完毕。 DOM树构建完成后,继续加载html/css 中的图片资源等外部资源,加载完成后视为页面加载完毕。

Finish:时间是页面上所有 http 请求发送到响应完成的时间,HTTP1.0/1.1 协议限定,单个域名的请求并发量是 6 个,即Finish是所有请求(不只是XHR请求,还包括DOC,img,js,css等资源的请求)在并发量为6的限制下完成的时间。

Calendar

2024 年 12 月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

分类