测试之前端性能问题定位学习文档

一、h5网页加载原理

• H5与native区别

•  关键性能指标定义

  具体指标	指标含义
  白屏时间	它特指从用户在浏览器中发起请求（比如在地址栏输入URL或点击链接）到浏览器开始显示任何内容（通常是第一个HTML元素或者背景颜色变化，标志着文档开始加载）之间的时间间隔。这个时间段用户看到的是空白屏幕，因此得名“白屏时间”。 白屏时间直接关乎用户体验，长时间的白屏可能会让用户感觉网站响应慢，甚至误以为没有成功加载页面而选择离开。缩短白屏时间对于提升用户满意度和降低页面放弃率至关重要。 影响白屏时间的因素： 网络延迟：用户与服务器之间的数据传输速度。 服务器响应时间：服务器处理请求并开始发送响应的速度。 前端资源加载策略：如CSS和JavaScript的加载顺序，以及是否使用了异步加载技术。 浏览器渲染机制：文档解析速度、样式计算、布局和绘制等。 资源大小与数量：过多或过大的资源文件会延长下载时间。
  首屏时间	它表示从用户发起请求到浏览器在视口内（即用户可见区域）渲染出第一个有意义的内容所需的时间。这里的“第一个有意义的内容”可以是文本、图片、SVG元素或是非白色背景等，标志着用户能够开始理解页面内容的起点。 首屏时间直接关联到用户体验，快速的首屏时间可以让用户感觉网站响应迅速，提高用户满意度和参与度。这个指标关注的是用户感受到页面开始加载内容的那一刻，而不是页面完全加载完毕。  首屏时间 = 地址栏输入网址后回车 - 浏览器第一屏渲染完成 影响首屏时间的因素：白屏时间，资源下载执行时间 尽量让首屏时间满足一秒钟法则。

• 白屏时间&首屏时间

• 不同访问速度下用户体验

• 网页加载原理组成内容

静态资源：

HTML 文件：虽然HTML可以包含动态生成的内容，但其本身作为文件存储在服务器上时是静态的。
CSS 文件：定义页面样式的CSS代码，除非通过服务器端处理或JavaScript动态修改，否则是静态的。
图像、视频、音频文件：这些多媒体内容在上传至服务器后内容固定，属于静态资源。
字体文件：例如 .ttf、.woff 等字体文件，内容不会因为用户请求而变化，是静态资源。
部分JavaScript文件：虽然JavaScript可以用于实现动态功能，但JavaScript代码文件本身在服务器上是静态存储的，除非它们是由服务器动态生成的。

动态资源：

动态生成的HTML内容：通过服务器端语言（如PHP、ASP.NET、JSP等）或框架（如Ruby on Rails、Django等）生成的HTML页面，其内容会根据用户请求或数据库数据变化。
API请求返回的数据：从服务器获取的JSON、XML或其他格式的数据，通常根据用户请求或业务逻辑动态生成。
运行时执行的JavaScript代码：虽然JavaScript文件本身是静态的，但通过Ajax技术从服务器获取数据并动态修改DOM或页面内容的过程涉及动态资源。
服务器端渲染的内容：任何在服务器上根据请求参数实时生成的内容都属于动态资源。

•  H5页面加载过程，包含 静态资源 和动态资源

• html代码示例

 二、常见性能问题&定位方法

charles抓包---前端常见问题 之 js重复加载

根据抓取的信息，看到部分js重复加载。

charles抓包---前端常见问题 之 图片未压缩

 charles抓包---前端常见问题 之 接口、图片重复请求

 charles抓包---前端常见问题 之 接口请求总时过长

charles抓包---前端常见问题 之 响应时间过长

charles抓包---前端常见问题 之  我也不知道这是啥问题，没好好听课~~~~  知道的留言一下   延迟时间过长？

•  前端常见问题汇总

• charles抓包耗时分析

Response Code：304 DNS：DNS域名解析的时间(长链接时为0)

Connect：建立链接的时间(长链接时为0)

SSL Handleshake：SSL认证时间(长链接时为0)

Request： 发送请求的时间

Response： 响应包下载时间，和包大小、 网速有关

Latency：服务器响应时间 Speed/Response

Speed：接收/下载速度

Duration：表示本次资源下载的总时间， 等于：DNS+Connect+SSL +Handshake+Request+Latency+Response

• http协议交互过程

请求资源/接口响应时间：T1+T2+T3+T4+T5。 常见性能问题：T4(服务器响应慢)、T5（响应包太大/网络不稳定导致下载慢）