CN113626739B - 一种网站渲染路径加速优化方法及系统 - Google Patents
一种网站渲染路径加速优化方法及系统 Download PDFInfo
- Publication number
- CN113626739B CN113626739B CN202110744089.2A CN202110744089A CN113626739B CN 113626739 B CN113626739 B CN 113626739B CN 202110744089 A CN202110744089 A CN 202110744089A CN 113626739 B CN113626739 B CN 113626739B
- Authority
- CN
- China
- Prior art keywords
- time
- webpage
- loading
- whole
- resource address
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 73
- 238000000034 method Methods 0.000 title claims abstract description 51
- 238000005457 optimization Methods 0.000 title claims abstract description 51
- 230000001133 acceleration Effects 0.000 claims abstract description 16
- 230000008569 process Effects 0.000 abstract description 13
- 238000012360 testing method Methods 0.000 abstract description 7
- 230000006399 behavior Effects 0.000 description 5
- 238000004891 communication Methods 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 230000000903 blocking effect Effects 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000004590 computer program Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000006835 compression Effects 0.000 description 1
- 238000007906 compression Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供一种网页渲染路径加速优化方法及系统,包括:接收用户端上传的载入网页的时间参数和网页资源地址;将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库;将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化。本发明贴近真实的使用者行为,并减少测试与开发人员逐一的找出关键渲染路径的人力成本;可以自动化排序需要优化的网页的顺序,并找出最关键的关键渲染路径,让开发人员可以选择处理最多人使用的网页或是可以改善最多渲染时间的网页,而不是仅仅改善单一的网页效能,而无法提升整体网站效能与使用者体验。
Description
技术领域
本发明涉及网页渲染技术领域,具体涉及一种网站渲染路径加速优化方法及系统。
背景技术
一般的网页速度瓶颈常常在网页的渲染上。网页(HTML)的渲染流程会先经过DOM(Document Object Model)文件物件模型与层叠样式表CSS(Cascading Style Sheets)的解析。而CSS文件的解析通常是网页执行的速度瓶颈之一。因为浏览器要扫描过网页HTML内所有的DOM节点。在根据这些节点去查询CSS文件内的所有节点的样式定义。再决定HTML内每一个DOM节点的样式。而CSS通常是复杂的阶层树状结构。浏览器在解析CSS必须遍历过CSS每一个样式节点。这个解析的过程会耗费大量的运算时间。
现有的网页HTML的渲染都是让浏览器去遍历HTML当中每个DOM节点,然后加以解析与执行渲染。如果网站的规模太复杂,HTML与CSS的档案阶层与树状结构太复杂。就会让浏览器花大量时间去解析与渲染。
浏览器在处理HTML DOM阶层树状结构往往耗费大量的时间。如果能在用户端实际环境找出决定网页显示速度的关键渲染路径(Critical Render Path)。不但可以节省工程人员开发与测试的时间,也能从用户端的环境找出实际的问题。除了能改进网页渲染与显示的速度,更能增加使用者的体验。
发明内容
针对现有技术的上述不足,本发明提供一种网站渲染路径加速优化方法及系统,以解决上述技术问题。
第一方面,本发明提供一种网站渲染路径加速优化方法,包括:
接收用户端上传的载入网页的时间参数和网页资源地址;
将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库;
将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化。
进一步的,接收用户端上传的载入网页的时间参数和网页资源地址,包括:
接收用户端上传的载入网页的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间、载入其他资源的时间和载入整个网页的时间以及网页资源地址。
进一步的,所述方法还包括:
比对同一网页的本次接收的载入整个网页的时间与前次接收的载入整个网页的时间,将时间较长的载入整个网页的时间作为所述网页的整个网页的时间进行保存。
进一步的,将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库,包括:
计算网页所属网站的所有网页的载入整个网页的时间的平均值,并将所述平均值与预设波动系数的乘积作为预设标准时间范围的上限值,并设定所述标准时间范围的下限值大于0;
将载入整个网页的时间大于所述上限值的网页的资源地址和时间参数保存至资料库。
进一步的,将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化,包括:
根据优化目标的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间和载入其他资源的时间在载入整个网页的时间中的占比确定优化方向;
若整个HTML的DOM与CSSOM的被下载与解析时间的占比超过第一预设阈值,则更新html与css的阶层并减小档案量;
若网页执行javascript的时间的占比超过第二预设阈值则对javascript执行的相关文件进行优化;
若载入其他资源的时间的占比超过第三预设阈值则对图片及附属资源进行优化。
第二方面,本发明提供一种网站渲染路径加速优化系统,包括:
信息接收单元,用于接收用户端上传的载入网页的时间参数和网页资源地址;
信息保存单元,用于将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库;
网页优化单元,用于将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化。
进一步的,所述信息接收单元包括:
接收模块,用于接收用户端上传的载入网页的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间、载入其他资源的时间和载入整个网页的时间以及网页资源地址。
进一步的,所述系统还包括:
参数更新单元,用于比对同一网页的本次接收的载入整个网页的时间与前次接收的载入整个网页的时间,将时间较长的载入整个网页的时间作为所述网页的整个网页的时间进行保存。
进一步的,所述信息保存单元包括:
标准设定模块,用于计算网页所属网站的所有网页的载入整个网页的时间的平均值,并将所述平均值与预设波动系数的乘积作为预设标准时间范围的上限值,并设定所述标准时间范围的下限值大于0;
参数保存模块,用于将载入整个网页的时间大于所述上限值的网页的资源地址和时间参数保存至资料库。
进一步的,所述网页优化单元包括:
优化确定模块,用于根据优化目标的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间和载入其他资源的时间在载入整个网页的时间中的占比确定优化方向;
第一优化模块,用于若整个HTML的DOM与CSSOM的被下载与解析时间的占比超过第一预设阈值,则更新html与css的阶层并减小档案量;
第二优化模块,用于若网页执行javascript的时间的占比超过第二预设阈值则对javascript执行的相关文件进行优化;
第三优化模块,用于若载入其他资源的时间的占比超过第三预设阈值则对图片及附属资源进行优化。
第三方面,提供一种终端,包括:
处理器、存储器,其中,
该存储器用于存储计算机程序,
该处理器用于从存储器中调用并运行该计算机程序,使得终端执行上述的终端的方法。
第四方面,提供了一种计算机存储介质,所述计算机可读存储介质中存储有指令,当其在计算机上运行时,使得计算机执行上述各方面所述的方法。
本发明的有益效果在于,
本发明提供的网站渲染路径加速优化方法,通过不断采集用户端的网页载入参数,通过与载入参数进行阈值判断,确定最需要优化的网页地址,并对该网页进行优化,以提高网站的整体执行速度。本发明贴近真实的使用者行为,并减少测试与开发人员逐一的找出关键渲染路径的人力成本;可以自动化排序需要优化的网页的顺序,并找出最关键的关键渲染路径,让开发人员可以选择处理最多人使用的网页或是可以改善最多渲染时间的网页,而不是仅仅改善单一的网页效能,而无法提升整体网站效能与使用者体验。
本发明提供的网站渲染路径加速优化系统,通过不断采集用户端的网页载入参数,通过与载入参数进行阈值判断,确定最需要优化的网页地址,并对该网页进行优化,以提高网站的整体执行速度。本发明贴近真实的使用者行为,并减少测试与开发人员逐一的找出关键渲染路径的人力成本;可以自动化排序需要优化的网页的顺序,并找出最关键的关键渲染路径,让开发人员可以选择处理最多人使用的网页或是可以改善最多渲染时间的网页,而不是仅仅改善单一的网页效能,而无法提升整体网站效能与使用者体验。
此外,本发明设计原理可靠,结构简单,具有非常广泛的应用前景。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,对于本领域普通技术人员而言,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本发明一个实施例的方法的示意性流程图。
图2是本发明一个实施例的系统的示意性框图。
图3为本发明实施例提供的一种终端的结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本发明中的技术方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本发明保护的范围。
图1是本发明一个实施例的方法的示意性流程图。其中,图1执行主体可以为一种网站渲染路径加速优化系统。
如图1所示,该方法包括:
步骤110,接收用户端上传的载入网页的时间参数和网页资源地址;
步骤120,将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库;
步骤130,将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化。
本发明提供的网站渲染路径加速优化方法,通过不断采集用户端的网页载入参数,通过与载入参数进行阈值判断,确定最需要优化的网页地址,并对该网页进行优化,以提高网站的整体执行速度。本发明贴近真实的使用者行为,并减少测试与开发人员逐一的找出关键渲染路径的人力成本;可以自动化排序需要优化的网页的顺序,并找出最关键的关键渲染路径,让开发人员可以选择处理最多人使用的网页或是可以改善最多渲染时间的网页,而不是仅仅改善单一的网页效能,而无法提升整体网站效能与使用者体验。
为了便于对本发明的理解,下面以本发明网站渲染路径加速优化方法的原理,结合实施例中对网站渲染路径进行加速优化过程,对本发明提供的网站渲染路径加速优化方法做进一步的描述。
在改善网页渲染的速度之前,先简单介绍网页渲染的流程如下:
(1)向来源网站要求html资料;
(2)得到来源网站回复的html之后,开始建立DOM(Document Object Model);
(3)在建立DOM的流程当中,发现要先得到CSS与js档案才能进行javascript的解析与CSS样式的渲染;
(4)得到CSS档案后,开始建立CSSOM(CSS Oject Model);
(5)得到js档案后,开始解析并执行javascript;
(6)等到CSS档案渲染与js档案执行完毕,就可以建立DOM的架构;
(7)浏览器才会根据完整的DOM架构,渲染并绘制整个网页。
而要从流程方面加速网页的渲染与绘制,可以由以下几点做改进:加速档案的下载速度;减少关键资源的数量;减少关键资源渲染路径长度与大小。
加速档案的下载速度可以将档案变小,让浏览器可以更快拿到所需要的档案。但是像CSS与js档案,是一种关键资源。如果浏览器没有拿到这些档案,浏览器就无法继续解析与渲染绘制网页,造成阻塞(blocking)。而整体网页渲染的时间,是由最长关键资源渲染路径所决定。决定关键资源渲染路径有长度与大小两种因素,关键资源路径大小是由最大的关键资源的档案大小决定。假设某个关键的CSS资源特别大,那么整体网页的渲染速度就会被这个关键的CSS档案所影响。所有档案都要等他下载完毕才能开始执行。另外是关键资源路径的长度,这个长度表示关键资源的数量与阶层。如果关键资源的数量太多,就有很大的机会因为缺少某个关键资源而造成网页渲染的阻塞(blocking)。
而关键资源的阶层长度表示他要依序的拿到几层关键资源才能成功渲染网页。以上述的例子来说,关键资源的取得最少有两层动作,也就是一层动作是先取得html档案,另一层动作是取得js或CSS档案。如果CSS档案比js档案大,则下载的时间也会来的比较久。
因为CSS档案与js档案都要浏览器解析与执行后,才能结合html产生完整的DOM。让浏览器可以渲染与绘制。所以浏览器解析与执行CSS和js档案的时间,也是影响关键资源长度的重要因素之一。甚至有比较小的档案,虽然下载速度比较快。但是解析的时间比其他档案久,反而是关键资源路径长度的主要影响因素。
如果针对整个网页做CSS的解析与预先编译,其实效率不高。因为真正决定网页渲染速度只有关键渲染路径(Critical Render Path),也就是网页执行渲染动作当中最慢的时间节点。只要找出关键渲染路径。然後再将关键渲染路径做预先编译优化加速,就可以提高该网页的执行速度。
而建构关键渲染路径的关键因素有以下几项
Critical Resource:会阻塞(Block)网页页面第一次的绘制(Render)的资源(resource)
Critical Path Length:取得所有Critical Resources所需的时间
Critical Bytes:跟第一次页面绘制有关的所有Critical Resource档案大小的总和。
若浏览器无法取得CSS这个Critical Resource(关键资源)。就算浏览器取得网页其他的HTML。也要等下载CSS之后才能组成Render Tree。所以Critical Path Length就跟最後一个取得Critical Resource的总时间有关。因为一个网页不只一个CriticalResource(html,css,js)况且在网页执行时,这些Critical Resource彼此之间都有相依性或者需要互相等待。有时候要来回下载几次。才能将所有的Critical Resource下载完毕。这也是优化Critical Render Path的一个方向。将所有Critical Resource的顺序与相依性理清,让一些档案可以平行的被下载执行。而Critical Bytes比较好理解,就是档案的大小,可以透过一些压缩的工具将这些档案压缩以加速下载Critical Resource档案的时间。
以下是浏览器解析网页的事件时间点:
domLoading:这里代表浏览器开始解析HTML收到的第一个位元组,开始执行整个解析过程
domInteractive:浏览器完成解析并建构完成所有HTML和DOM的时间点
domContentLoadedEventEnd:表示DOM准备就绪,而CSS没有阻塞JavaScript执行的时间点,表示可以开始建构转译树状结构(Render Tree)了,也就是说DOM与CSSOM都被产生了,然後开始执行js档案里的javascript。
domComplete:所有的网页处理程序都完成,网页上所有的资源(ex:图片)也被下载完成。网页和所有附属资源都准备完成。
以下是网页载入与解析关于效能方面几个时间参数:
表示整个HTML的DOM与CSSOM的被下载与解析时间Tdom=domInteractive–domLoading;
表示该网页执行javascript的时间Tjs=domComplete-domLoading;
表示载入其他资源的时间,例如:图片或其他的档案Tother=loadEventEnd-loadEventStart;
表示载入整个网页的时间Tall=loadEventEnd-domLoading
具体的,所述网站渲染路径加速优化方法包括:
S1、接收用户端上传的载入网页的时间参数和网页资源地址。
在Html5的规格中有定义Navigation Timing API让用户端的网页程式可以收集网页性能数据。接收用户端上传的载入网页的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间、载入其他资源的时间和载入整个网页的时间以及网页资源地址。比对同一网页的本次接收的载入整个网页的时间与前次接收的载入整个网页的时间,将时间较长的载入整个网页的时间作为所述网页的整个网页的时间进行保存。
使用者在用户端载入网页的时候,都会纪录以上几个载入网页时间的参数。当某个网页的Tall时间大於之前网页最大的Tall时间(Tmax)的时候。就会纪录最大的Tall时间为改使用者的Tmax,这个Tmax会跟服务器端提供的Tgmax参数作比较。
S2、将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库。
计算网页所属网站的所有网页的载入整个网页的时间的平均值,并将所述平均值与预设波动系数的乘积作为预设标准时间范围的上限值,并设定所述标准时间范围的下限值大于0;将载入整个网页的时间大于所述上限值的网页的资源地址和时间参数保存至资料库。
如果网页的Tmax大于Tgmax就会将该网页的url地址及Tdom,Tjs,Tother,Tall(Tmax)上传到服务器的资料库。标准值用网站所有网页的Tmax取中位数,乘以1.25。也就是说超出所有网页平均数25%时间的网页。都是优先优化的目标。而这个标准范围25%的设定值(Range Factor),可以经由一定时间的优化后,由开发与管理人员调整Tgmax的计算公式与参数。Tgmax=(所有客户回传的Tmax平均数)*(1+Range Factor)-E01,Range Factor可以由开发人员决定。
S3、将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化。
根据优化目标的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间和载入其他资源的时间在载入整个网页的时间中的占比确定优化方向;若整个HTML的DOM与CSSOM的被下载与解析时间的占比超过第一预设阈值(此阈值由开发人员设置),则更新html与css的阶层并减小档案量;若网页执行javascript的时间的占比超过第二预设阈值则对javascript执行的相关文件进行优化;若载入其他资源的时间的占比超过第三预设阈值则对图片及附属资源进行优化。
服务器端会随着用户端的使用,逐一的更新每个用户回传的Tmax。而服务器端会计数回传的url,并排序每一个url回传的数量。让开发人员根据回传数量最多的url做优化。而用户端Tdom可以作为html与css优化的指标,开发人员可以更新html与css的阶层与档案大小来增加速度,并减少Tdom的时间。Tjs可以用来衡量javascript执行速度是否有改善。Tother可以衡量其他网页资源(图片,或是网页存放的服务器连线速度)的速度与效能。
本发明提供的网站渲染路径加速优化方法,通过不断采集用户端的网页载入参数,通过与载入参数进行阈值判断,确定最需要优化的网页地址,并对该网页进行优化,以提高网站的整体执行速度。本发明贴近真实的使用者行为,并减少测试与开发人员逐一的找出关键渲染路径的人力成本;可以自动化排序需要优化的网页的顺序,并找出最关键的关键渲染路径,让开发人员可以选择处理最多人使用的网页或是可以改善最多渲染时间的网页,而不是仅仅改善单一的网页效能,而无法提升整体网站效能与使用者体验。
如图2所示,该系统200包括:
信息接收单元210,用于接收用户端上传的载入网页的时间参数和网页资源地址;
信息保存单元220,用于将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库;
网页优化单元230,用于将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化。
可选地,作为本发明一个实施例,所述信息接收单元包括:
接收模块,用于接收用户端上传的载入网页的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间、载入其他资源的时间和载入整个网页的时间以及网页资源地址。
可选地,作为本发明一个实施例,所述系统还包括:
参数更新单元,用于比对同一网页的本次接收的载入整个网页的时间与前次接收的载入整个网页的时间,将时间较长的载入整个网页的时间作为所述网页的整个网页的时间进行保存。
可选地,作为本发明一个实施例,所述信息保存单元包括:
标准设定模块,用于计算网页所属网站的所有网页的载入整个网页的时间的平均值,并将所述平均值与预设波动系数的乘积作为预设标准时间范围的上限值,并设定所述标准时间范围的下限值大于0;
参数保存模块,用于将载入整个网页的时间大于所述上限值的网页的资源地址和时间参数保存至资料库。
可选地,作为本发明一个实施例,所述网页优化单元包括:
优化确定模块,用于根据优化目标的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间和载入其他资源的时间在载入整个网页的时间中的占比确定优化方向;
第一优化模块,用于若整个HTML的DOM与CSSOM的被下载与解析时间的占比超过第一预设阈值,则更新html与css的阶层并减小档案量;
第二优化模块,用于若网页执行javascript的时间的占比超过第二预设阈值则对javascript执行的相关文件进行优化;
第三优化模块,用于若载入其他资源的时间的占比超过第三预设阈值则对图片及附属资源进行优化。
图3为本发明实施例提供的一种终端300的结构示意图,该终端300可以用于执行本发明实施例提供的网站渲染路径加速优化方法。
其中,该终端300可以包括:处理器310、存储器320及通信单元330。这些组件通过一条或多条总线进行通信,本领域技术人员可以理解,图中示出的服务器的结构并不构成对本发明的限定,它既可以是总线形结构,也可以是星型结构,还可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
其中,该存储器320可以用于存储处理器310的执行指令,存储器320可以由任何类型的易失性或非易失性存储终端或者它们的组合实现,如静态随机存取存储器(SRAM),电可擦除可编程只读存储器(EEPROM),可擦除可编程只读存储器(EPROM),可编程只读存储器(PROM),只读存储器(ROM),磁存储器,快闪存储器,磁盘或光盘。当存储器320中的执行指令由处理器310执行时,使得终端300能够执行以下上述方法实施例中的部分或全部步骤。
处理器310为存储终端的控制中心,利用各种接口和线路连接整个电子终端的各个部分,通过运行或执行存储在存储器320内的软件程序和/或模块,以及调用存储在存储器内的数据,以执行电子终端的各种功能和/或处理数据。所述处理器可以由集成电路(Integrated Circuit,简称IC)组成,例如可以由单颗封装的IC所组成,也可以由连接多颗相同功能或不同功能的封装IC而组成。举例来说,处理器310可以仅包括中央处理器(Central Processing Unit,简称CPU)。在本发明实施方式中,CPU可以是单运算核心,也可以包括多运算核心。
通信单元330,用于建立通信信道,从而使所述存储终端可以与其它终端进行通信。接收其他终端发送的用户数据或者向其他终端发送用户数据。
本发明还提供一种计算机存储介质,其中,该计算机存储介质可存储有程序,该程序执行时可包括本发明提供的各实施例中的部分或全部步骤。所述的存储介质可为磁碟、光盘、只读存储记忆体(英文:read-only memory,简称:ROM)或随机存储记忆体(英文:random access memory,简称:RAM)等。
因此,本发明通过不断采集用户端的网页载入参数,通过与载入参数进行阈值判断,确定最需要优化的网页地址,并对该网页进行优化,以提高网站的整体执行速度。本发明贴近真实的使用者行为,并减少测试与开发人员逐一的找出关键渲染路径的人力成本;可以自动化排序需要优化的网页的顺序,并找出最关键的关键渲染路径,让开发人员可以选择处理最多人使用的网页或是可以改善最多渲染时间的网页,而不是仅仅改善单一的网页效能,而无法提升整体网站效能与使用者体验,本实施例所能达到的技术效果可以参见上文中的描述,此处不再赘述。
本领域的技术人员可以清楚地了解到本发明实施例中的技术可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解,本发明实施例中的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中如U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质,包括若干指令用以使得一台计算机终端(可以是个人计算机,服务器,或者第二终端、网络终端等)执行本发明各个实施例所述方法的全部或部分步骤。
本说明书中各个实施例之间相同相似的部分互相参见即可。尤其,对于终端实施例而言,由于其基本相似于方法实施例,所以描述的比较简单,相关之处参见方法实施例中的说明即可。
在本发明所提供的几个实施例中,应该理解到,所揭露的系统和方法,可以通过其它的方式实现。例如,以上所描述的系统实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,系统或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
尽管通过参考附图并结合优选实施例的方式对本发明进行了详细描述,但本发明并不限于此。在不脱离本发明的精神和实质的前提下,本领域普通技术人员可以对本发明的实施例进行各种等效的修改或替换,而这些修改或替换都应在本发明的涵盖范围内/任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应所述以权利要求的保护范围为准。
Claims (6)
1.一种网站渲染路径加速优化方法,其特征在于,包括:
接收用户端上传的载入网页的时间参数和网页资源地址;
将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库;
将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化;
接收用户端上传的载入网页的时间参数和网页资源地址,包括:
接收用户端上传的载入网页的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间、载入其他资源的时间和载入整个网页的时间以及网页资源地址;
将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化,包括:
根据优化目标的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间和载入其他资源的时间在载入整个网页的时间中的占比确定优化方向;
若整个HTML的DOM与CSSOM的被下载与解析时间的占比超过第一预设阈值,则更新html与css的阶层并减小档案量;
若网页执行javascript的时间的占比超过第二预设阈值则对javascript执行的相关文件进行优化;
若载入其他资源的时间的占比超过第三预设阈值则对图片及附属资源进行优化。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
比对同一网页的本次接收的载入整个网页的时间与前次接收的载入整个网页的时间,将时间较长的载入整个网页的时间作为所述网页的载入整个网页的时间进行保存。
3.根据权利要求2所述的方法,其特征在于,将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库,包括:
计算网页所属网站的所有网页的载入整个网页的时间的平均值,并将所述平均值与预设波动系数的乘积作为预设标准时间范围的上限值,并设定所述标准时间范围的下限值大于0;
将载入整个网页的时间大于所述上限值的网页的资源地址和时间参数保存至资料库。
4.一种网站渲染路径加速优化系统,其特征在于,包括:
信息接收单元,用于接收用户端上传的载入网页的时间参数和网页资源地址;
信息保存单元,用于将时间参数与预设标准时间范围不匹配的网页的资源地址和时间参数保存至资料库;
网页优化单元,用于将资料库中数量最多的资源地址作为优化目标,并根据所述资源地址同网页的时间参数对网页渲染路径进行优化;
所述信息接收单元包括:
接收模块,用于接收用户端上传的载入网页的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间、载入其他资源的时间和载入整个网页的时间以及网页资源地址;
所述网页优化单元包括:
优化确定模块,用于根据优化目标的整个HTML的DOM与CSSOM的被下载与解析时间、网页执行javascript的时间和载入其他资源的时间在载入整个网页的时间中的占比确定优化方向;
第一优化模块,用于若整个HTML的DOM与CSSOM的被下载与解析时间的占比超过第一预设阈值,则更新html与css的阶层并减小档案量;
第二优化模块,用于若网页执行javascript的时间的占比超过第二预设阈值则对javascript执行的相关文件进行优化;
第三优化模块,用于若载入其他资源的时间的占比超过第三预设阈值则对图片及附属资源进行优化。
5.根据权利要求4所述的系统,其特征在于,所述系统还包括:
参数更新单元,用于比对同一网页的本次接收的载入整个网页的时间与前次接收的载入整个网页的时间,将时间较长的载入整个网页的时间作为所述网页的载入整个网页的时间进行保存。
6.根据权利要求5所述的系统,其特征在于,所述信息保存单元包括:
标准设定模块,用于计算网页所属网站的所有网页的载入整个网页的时间的平均值,并将所述平均值与预设波动系数的乘积作为预设标准时间范围的上限值,并设定所述标准时间范围的下限值大于0;
参数保存模块,用于将载入整个网页的时间大于所述上限值的网页的资源地址和时间参数保存至资料库。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110744089.2A CN113626739B (zh) | 2021-06-30 | 2021-06-30 | 一种网站渲染路径加速优化方法及系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110744089.2A CN113626739B (zh) | 2021-06-30 | 2021-06-30 | 一种网站渲染路径加速优化方法及系统 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113626739A CN113626739A (zh) | 2021-11-09 |
CN113626739B true CN113626739B (zh) | 2023-07-18 |
Family
ID=78378878
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110744089.2A Active CN113626739B (zh) | 2021-06-30 | 2021-06-30 | 一种网站渲染路径加速优化方法及系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113626739B (zh) |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106095460A (zh) * | 2016-06-21 | 2016-11-09 | 上海联彤网络通讯技术有限公司 | 实现终端内嵌浏览器优化网页加载的系统及方法 |
CN107729531A (zh) * | 2017-10-27 | 2018-02-23 | 深圳市行云易通科技有限公司 | 一种动态渲染类网页优化方法 |
CN110990731A (zh) * | 2019-10-12 | 2020-04-10 | 平安国际智慧城市科技股份有限公司 | 一种静态网页的渲染方法、装置、设备及计算机存储介质 |
CN111124574A (zh) * | 2019-12-18 | 2020-05-08 | 南京三百云信息科技有限公司 | 首屏渲染加速方法、开发端、服务器、系统和电子设备 |
CN111428169A (zh) * | 2020-03-20 | 2020-07-17 | 深圳市盟天科技有限公司 | 页面加载的优化方法、系统、服务器及存储介质 |
CN112597411A (zh) * | 2020-12-18 | 2021-04-02 | 苏州浪潮智能科技有限公司 | 一种网页预渲染的方法、装置、电子设备及存储介质 |
-
2021
- 2021-06-30 CN CN202110744089.2A patent/CN113626739B/zh active Active
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106095460A (zh) * | 2016-06-21 | 2016-11-09 | 上海联彤网络通讯技术有限公司 | 实现终端内嵌浏览器优化网页加载的系统及方法 |
CN107729531A (zh) * | 2017-10-27 | 2018-02-23 | 深圳市行云易通科技有限公司 | 一种动态渲染类网页优化方法 |
CN110990731A (zh) * | 2019-10-12 | 2020-04-10 | 平安国际智慧城市科技股份有限公司 | 一种静态网页的渲染方法、装置、设备及计算机存储介质 |
CN111124574A (zh) * | 2019-12-18 | 2020-05-08 | 南京三百云信息科技有限公司 | 首屏渲染加速方法、开发端、服务器、系统和电子设备 |
CN111428169A (zh) * | 2020-03-20 | 2020-07-17 | 深圳市盟天科技有限公司 | 页面加载的优化方法、系统、服务器及存储介质 |
CN112597411A (zh) * | 2020-12-18 | 2021-04-02 | 苏州浪潮智能科技有限公司 | 一种网页预渲染的方法、装置、电子设备及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN113626739A (zh) | 2021-11-09 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110059277A (zh) | 首页加载优化方法、服务器及计算机可读存储介质 | |
CN111444455A (zh) | 浏览器兼容方法、系统、计算机设备及存储介质 | |
CN108415998B (zh) | 应用依赖关系更新方法、终端、设备及存储介质 | |
CN107276842B (zh) | 接口测试方法、装置及电子设备 | |
CN108388509B (zh) | 一种软件测试方法、计算机可读存储介质及终端设备 | |
CN111651656B (zh) | 一种基于代工模式的动态网页爬虫方法及系统 | |
CN111078276B (zh) | 应用程序的冗余资源处理方法、装置、设备及存储介质 | |
CN111666201A (zh) | 回归测试方法、装置、介质及电子设备 | |
CN108762809A (zh) | 软件功能扩展方法、装置、计算机设备及存储介质 | |
CN113448862A (zh) | 软件版本测试方法、装置及计算机设备 | |
CN111159142A (zh) | 一种数据处理方法及装置 | |
CN113626739B (zh) | 一种网站渲染路径加速优化方法及系统 | |
CN113010149B (zh) | 应用加载方法、装置、用户终端和服务器 | |
CN116028108B (zh) | 一种依赖包安装用时分析方法、装置、设备及存储介质 | |
CN114448972A (zh) | 分布式存储日志压缩下载方法、系统、终端及存储介质 | |
CN112417324A (zh) | 基于Chrome的URL拦截方法、装置及计算机设备 | |
US20090313628A1 (en) | Dynamically batching remote object model commands | |
CN113986305B (zh) | B/s模型升级的检测方法、装置、设备和存储介质 | |
CN118567698B (zh) | 操作系统迁移方法、计算机设备、存储介质及程序产品 | |
CN116578281B (zh) | 基于代码包的网页开发方法、系统、电子设备及存储介质 | |
CN112402955B (zh) | 游戏日志记录方法及系统 | |
CN110413644B (zh) | 一种数据缓存方法、电子装置及计算机可读存储介质 | |
CN109933573B (zh) | 数据库业务更新方法、装置及系统 | |
US20060053082A1 (en) | System and method for constructing transactions from electronic content | |
CN118229327A (zh) | 定价规则配置方法、装置、设备及存储介质 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |