基于前端性能测试优化方法技术

本发明专利技术公开了一种基于前端性能测试优化方法，包括以下步骤：(1)、在浏览器中输入URL，进行域名解析，建立TCP连接，进入WebService；(2)、WebService与应用服务器进行数据传输，应用服务器进行数据获取、数据处理，模板渲染后通过HTML再与应用服务器交互；(3)、WebService进行资源加载、解析以及构建后再渲染树、布局/回流，最终实现绘制呈现。本发明专利技术实现了用户的留存，网站的转化率，体验与传播，搜索排名，客户投诉，提升工作绩效。提升工作绩效。

【技术实现步骤摘要】
基于前端性能测试优化方法


[0001]本专利技术涉及的是前端性能
，具体涉及一种基于前端性能测试优化方法。

技术介绍

[0002]近年来我国的互联网发展迅猛，使用的人群越来越高，并发的要求也越来越高，于是各大厂商就开始想办法提高前端性能，第一种方法是硬件的优化，第二种是软件的优化。硬件给性能带来的变化是扩大带宽、负载均衡、服务集群等方式；而硬件往往需要付出巨大的代价。所以，软件的优化仿佛更加有意义。所以就出现了Web的性能优化这一谈。
[0003]国外现状：美国是互联网最发达的国家，易用性工程(Usability Engineering)是一个以用户为中心的设计方法论(UCD)，重点是用户体验。国内现状：低质Web站点泛滥，几乎没有用户体验。
[0004]综上所述，本专利技术设计了一种基于前端性能测试优化方法。

技术实现思路

[0005]针对现有技术上存在的不足，本专利技术目的是在于提供一种基于前端性能测试优化方法，实现了用户的留存，网站的转化率，体验与传播，搜索排名，客户投诉，提升工作绩效。
[0006]为了实现上述目的，本专利技术是通过如下的技术方案来实现：基于前端性能测试优化系统，包括：性能指标，性能测试，优化方案。
[0007]所述的性能指标：FCP，LCP，FID，TTI，TBT，CLS，Speed Index；
[0008]所述的性能测试：浏览器DevTools调试工具(网络监控分析，性能监控分析)，灯塔(Lighthouse)；
[0009]所述的优化方案：从发出请求到收到响应的优化；
[0010]关键渲染路径优化，加载过程的优化，资源优化，构建优化。
[0011]基于前端性能测试优化方法，包括以下步骤：
[0012]1、在浏览器中输入URL，进行域名解析，建立TCP连接，进入WebService；
[0013]2、WebService与应用服务器进行数据传输，应用服务器进行数据获取、数据处理，模板渲染后通过HTML再与应用服务器交互；
[0014]3、WebService进行资源加载、解析以及构建后再渲染树、布局/回流，最终实现绘制呈现。
[0015]本专利技术的有益效果：
[0016]1、代码运行效率，代码性能指标，性能测试测试提供综合方案；
[0017]2、提升软件性能，减少硬件支出；
[0018]3、广大用户的留存。
附图说明
[0019]下面结合附图和具体实施方式来详细说明本专利技术；
[0020]图1为本专利技术的具体方法流程图
具体实施方式
[0021]为使本专利技术实现的技术手段、创作特征、达成目的与功效易于明白了解，下面结合具体实施方式，进一步阐述本专利技术。
[0022]参照图1，本具体实施方式采用以下技术方案：基于前端性能测试优化系统，所述的系统包括：性能指标，性能测试，优化方案。
[0023]所述的性能指标：FCP，LCP，FID，TTI，TBT，CLS，Speed Index；
[0024]所述的性能测试：浏览器DevTools调试工具(网络监控分析，性能监控分析)，灯塔(Lighthouse)；
[0025]所述的优化方案：从发出请求到收到响应的优化，如DNS查询、HTTP长连接、HTTP 2、HTTP压缩、HTTP缓存等；
[0026]关键渲染路径优化，比如是否存在不必要的重绘和回流。
[0027]加载过程的优化，比如延迟加载，是否有不需要在首屏展示的非关键信息，占用了页面加载的时间；
[0028]资源优化，比如图片、视频等不同的格式类型会有不同的使用场景，在使用的过程中是否恰当；
[0029]构建优化，比如压缩合并、基于webpack构建优化方案等。
[0030]基于前端性能测试优化方法，包括以下步骤：
[0031]1、在浏览器中输入URL，进行域名解析，建立TCP连接，进入WebService；
[0032]2、WebService与应用服务器进行数据传输，应用服务器进行数据获取、数据处理，模板渲染后通过HTML再与应用服务器交互；
[0033]3、WebService进行资源加载、解析以及构建后再渲染树、布局/回流，最终实现绘制呈现。
[0034]本具体实施方式提供了性能测试，指标，监测，优化集于一体的方案；手机端首屏加载优化，请求，dom渲染等优化；pc端项目构建以及项目性能监测。实现了以下价值：用户的留存，网站的转化率，体验与传播，搜索排名，客户投诉，提升工作绩效。
[0035]以上显示和描述了本专利技术的基本原理和主要特征和本专利技术的优点。本行业的技术人员应该了解，本专利技术不受上述实施例的限制，上述实施例和说明书中描述的只是说明本专利技术的原理，在不脱离本专利技术精神和范围的前提下，本专利技术还会有各种变化和改进，这些变化和改进都落入要求保护的本专利技术范围内。本专利技术要求保护范围由所附的权利要求书及其等效物界定。
本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于前端性能测试优化系统，其特征在于，包括：性能指标，性能测试，优化方案。2.根据权利要求1所述的基于前端性能测试优化系统，其特征在于，所述的性能指标：FCP，LCP，FID，TTI，TBT，CLS，Speed Index。3.根据权利要求1所述的基于前端性能测试优化系统，其特征在于，所述的性能测试：浏览器DevTools调试工具,包括网络监控分析，性能监控分析；灯塔。4.根据权利要求1所述的基于前端性能测试优化系统，其特征在于，所述的优化方案：从发...

【专利技术属性】
技术研发人员：商亮，蔡明，
申请(专利权)人：天翼电子商务有限公司，
类型：发明
国别省市：