CN113282295B - 阻塞处理方法及装置、存储介质及电子装置 - Google Patents
阻塞处理方法及装置、存储介质及电子装置 Download PDFInfo
- Publication number
- CN113282295B CN113282295B CN202110572923.4A CN202110572923A CN113282295B CN 113282295 B CN113282295 B CN 113282295B CN 202110572923 A CN202110572923 A CN 202110572923A CN 113282295 B CN113282295 B CN 113282295B
- Authority
- CN
- China
- Prior art keywords
- target
- page
- codes
- nodes
- analyzing
- 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
- 230000000903 blocking effect Effects 0.000 title claims abstract description 67
- 238000003672 processing method Methods 0.000 title claims abstract description 21
- 238000000034 method Methods 0.000 claims abstract description 38
- 238000012545 processing Methods 0.000 claims abstract description 19
- 230000006870 function Effects 0.000 claims description 46
- 238000004458 analytical method Methods 0.000 claims description 37
- 238000004590 computer program Methods 0.000 claims description 16
- 238000004806 packaging method and process Methods 0.000 claims description 7
- 238000012856 packing Methods 0.000 claims description 7
- 230000008569 process Effects 0.000 abstract description 13
- 238000005457 optimization Methods 0.000 description 11
- 238000009877 rendering Methods 0.000 description 10
- 239000002699 waste material Substances 0.000 description 9
- 238000011161 development Methods 0.000 description 6
- 230000018109 developmental process Effects 0.000 description 6
- 230000005540 biological transmission Effects 0.000 description 5
- 238000010586 diagram Methods 0.000 description 5
- 230000011218 segmentation Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 238000006467 substitution reaction Methods 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 230000002457 bidirectional effect Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000000414 obstructive effect Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
- G06F8/443—Optimisation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- 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)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Debugging And Monitoring (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种阻塞处理方法及装置、存储介质及电子装置，其中，上述方法包括：分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载，即通过分析目标框架的源代码，确定目标框架的全生命周期中的节点，在节点阻塞的情况下，通过异步加载的方式处理目标节点对应的目标代码。采用上述技术方案，解决了在访问网页的过程中，页面加载时间较长等问题。
Description
技术领域
本发明涉及通信领域，具体而言，涉及一种阻塞处理方法及装置、存储介质及电子装置。
背景技术
在注重用户体验的互联网环境里，更快的页面访问速度，更流畅的用户操作体验往往是企业关注的重点，也是开发工程师要持续面对的难题。而Vue作为前端领域最为流行的框架之一，开发者基数庞大，利用Vue框架开发的应用数量也极多。但随着应用用户的增多，开发工程师将不可避免的遭遇同样的问题：性能瓶颈，具体表现为：应用访问缓慢，浏览器加载页面时长高；用户操作相应延迟、丢帧、卡顿；开发工程师在开发调试过程中等待响应时间长，开发效率低。
针对相关技术，在访问网页的过程中，页面加载时间较长等问题，目前尚未提出有效的解决方案。
发明内容
本发明实施例提供了一种阻塞处理方法及装置、存储介质及电子装置，以至少解决在访问网页的过程中，页面加载时间较长等问题。
根据本发明实施例的一方面，提供一种阻塞处理方法，包括：分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载。
进一步地，所述目标节点包括以下至少之一：入口文件、路由钩子函数、页面组件生命周期钩子函数。
进一步地，对所述任一目标节点对应的代码进行异步加载之前，所述方法还包括：对所有所述目标节点对应的代码进行分析，得到分析结果；根据所述分析结果确定所有所述目标节点中存在阻塞的任一目标节点。
进一步地，对所有所述目标节点对应的代码进行分析，得到分析结果，包括：通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包；对于所有所述目标节点中的任一目标节点，对所述任一目标节点的所述不同包进行分析，得到分析结果。
进一步地，通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包，包括：确定对所述不同页面的资源代码进行打包的模块打包器；通过所述模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包。
进一步地，通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包之后，所述方法还包括：确定所述不同包中的关键资源和非关键资源，其中，所述关键资源用于指示在第一时间在所述目标框架对应的页面上显示的资源，所述非关键资源用于指示在第二时间在所述目标框架对应的页面上显示的资源，所述第一时间早于所述第二时间；异步加载所述非关键资源。
进一步地，在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载之后，还包括：确定所述目标框架所使用的骨架屏，并在所述目标框架对应的页面上显示所述骨架屏；响应页面程序发送的数据请求，加载所述数据请求对应的页面资源；在所述数据请求对应的页面资源加载成功的情况下，隐藏所述骨架屏。
根据本发明实施例的又一方面，还提供一种阻塞处理装置，包括：确定模块，用于分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点包括以下至少之一：入口文件、路由钩子函数、页面组件生命周期钩子函数；处理模块，用于在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载。
根据本发明实施例的又一方面，还提供了一种计算机可读的存储介质，该计算机可读的存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述阻塞处理方法。
根据本发明实施例的又一方面，还提供了一种电子装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，上述处理器通过计算机程序执行上述阻塞处理方法。
通过本发明，分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载。也就是说通过分析目标框架的源代码，确定目标框架的全生命周期中的节点，在节点阻塞的情况下，通过异步加载的方式处理目标节点对应的目标代码。采用上述技术方案，解决在访问网页的过程中，页面加载时间较长等问题。进而在节点阻塞的时候，通过异步加载的方式处理，缩短了页面加载时长。
附图说明
此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示例性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
图1是本发明实施例的阻塞处理方法的计算机终端的硬件结构框图；
图2是根据本发明实施例的阻塞处理方法的流程图(一)；
图3是根据本发明实施例的阻塞处理方法的原理图；
图4是根据本发明实施例的阻塞处理方法的流程图(二)；
图5是根据本发明实施例的阻塞处理装置的结构框图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
本申请实施例中所提供的方法实施例可以在计算机终端或者类似的运算装置中执行。以运行在计算机终端上为例，图1是本发明实施例的阻塞处理方法的计算机终端的硬件结构框图。如图1所示，计算机终端可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器(Microprocessor Unit，简称是MPU)或可编程逻辑器件(Programmable logic device，简称是PLD))和用于存储数据的存储器104，在一个示例性实施例中，上述计算机终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述计算机终端的结构造成限定。例如，计算机终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示等同功能或比图1所示功能更多的不同的配置。
存储器104可用于存储计算机程序，例如，应用软件的软件程序以及模块，如本发明实施例中的阻塞处理方法对应的计算机程序，处理器102通过运行存储在存储器104内的计算机程序，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机终端的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(Network Interface Controller，简称为NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(Radio Frequency，简称为RF)模块，其用于通过无线方式与互联网进行通讯。
相关技术中，在使用Vue框架开发前端应用时，开发者在享受到Vue本身低门槛、高效率的优秀特性的同时，也会面对一部分Vue带来的性能问题，如：Vue全面使用数据和UI的双向绑定，优点是可以极大的提高开发便捷性，缺点是在不恰当的时机触发更新反而会造成性能浪费。为了解决性能问题，如果针对服务器性能优化，主要就是针对硬件进行优化，但取决于硬件条件，价格高昂，不适用于资金紧张的初创团队。并且由于网络情况复杂多变，无法对访问应用的用户网络条件进行有效约束，且不同浏览器对超文件标记语言(Hypertext Markup Language，简称为HTML)的渲染流程不尽相同，适配难度高。
为了解决上述问题，本发明实施例梳理Vue的全生命周期，从全路径出发提供一种优化思路，减少性能浪费，缩短页面加载时长，提升用户体验，在本实施例中提供了一种阻塞处理方法，图2是根据本发明实施例的阻塞处理方法的流程图(一)，该流程包括如下步骤：
步骤S202，分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；
步骤S204，在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载。
通过上述步骤，分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载。也就是说通过分析目标框架的源代码，确定目标框架的全生命周期中的节点，在节点阻塞的情况下，通过异步加载的方式处理目标节点对应的目标代码。采用上述技术方案，解决在访问网页的过程中，页面加载时间较长等问题。进而在节点阻塞的时候，通过异步加载的方式处理，缩短了页面加载时长。
进一步地，所述目标节点包括以下至少之一：入口文件、路由钩子函数、页面组件生命周期钩子函数。
需要说明的是，上述步骤S202分析目标框架的源代码，具体是为了了解目标框架整个生命周期中的行为操作，从而分析整个生命周期中哪些环节会有耗时过高的可能，耗时过高就会发生阻塞，当一个节点发生阻塞的概率超过了预设阈值，就将这个节点当成目标节点。即分析目标框架的源代码是为了确定所述目标框架的全生命周期中的目标节点，其中，目标节点的环节耗时高的几率大，发生阻塞的概率超过了预设阈值，需要说明的是，所述目标节点包括以下至少之一：入口文件、路由钩子函数、页面组件生命周期钩子函数；针对可能耗时过高的环节进行检测，在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载，从而保证代码执行效率。
可选的，上述步骤S204在对所述任一目标节点对应的代码进行异步加载之前，还包括：对所有所述目标节点对应的代码进行分析，得到分析结果；根据所述分析结果确定所有所述目标节点中存在阻塞的任一目标节点。
在本实施例中，需要对目标框架全生命周期中可能出现阻塞的环节的目标节点的代码进行分析，例如可能出现阻塞的节点为：入口文件、路由钩子函数、页面组件生命周期钩子函数，对这三个节点的代码进行分析，得到分析结果，从而根据分析结果确定哪些节点存在阻塞。为了更好的理解，阻塞的判断需要具体到业务中进行分析，例如，如果读取文件、请求接口都采用了同步加载的方式，此时就会造成阻塞。
需要说明的是，在一个可选的实施例中，对所有所述目标节点对应的代码进行分析，得到分析结果，包括：通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包；对于所有所述目标节点中的任一目标节点，对所述任一目标节点的所述不同包进行分析，得到分析结果。
在本实施例中，需要对不同的页面资源代码进行单独打包，以使不同页面的资源代码对应不同包，从而使用户访问某个页面的时候不需要同步加载其他页面资源，进而对所述任一目标节点的对应的不同包进行分析，得到分析结果。
进一步的，在一个可选的实施例中，通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包，包括：确定对所述不同页面的资源代码进行打包的模块打包器；通过所述模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包。
在本实施例中，在通过模块打包器对不同页面的资源代码单独打包以前，需要先确定模块打包器，可选的，模块打包器可以是Webpack。
可选的，通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包之后，还包括：确定所述不同包中的关键资源和非关键资源，其中，所述关键资源用于指示在第一时间在所述目标框架对应的页面上显示的资源，所述非关键资源用于指示在第二时间在所述目标框架对应的页面上显示的资源，所述第一时间早于所述第二时间；异步加载所述非关键资源。
在本实施例中，在目标框架对应的页面组件内部，有非关键资源和关键资源，即在不同的包中，需要确定首先确定出哪些资源的关键资源，哪些资源是非关键资源，异步加载所述非关键资源，进而在打开页面以后，让第一关键资源先出现在页面上，进而非关键资源再出现在页面上，从而可以提高用户体验。
需要说明的是，在一个可选的实施例中，上述步骤S204在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载之后，还包括：确定所述目标框架所使用的骨架屏，并在所述目标框架对应的页面上显示所述骨架屏；响应页面程序发送的数据请求，加载所述数据请求对应的页面资源；在所述数据请求对应的页面资源加载成功的情况下，隐藏所述骨架屏。
在本实施例中，可以通过给页面编写骨架屏，避免无数据时渲染复杂的DOM结构造成的性能浪费，需要说明的是，具体增加骨架屏的方式本实施例中不做限定。可选的，具体的可以先确定目标框架所使用的骨架屏，编写骨架屏的组件，在页面代码中引入骨架屏组件，从而可以在目标框架对应的页面上显示所述骨架屏，即在页面程序请求接口之前展示骨架屏，且不渲染真实页面文档对象模型(Document Object Model，简称为DOM)结构，在响应页面程序发送的数据请求，加载所述数据请求对应的页面资源，并在所述数据请求对应的页面资源加载成功的情况下，隐藏骨架屏，渲染真实页面。
上述实施例，通过分析目标框架的源代码，确定目标框架全生命周期中可能存在耗时过高的目标节点，在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载，从而保证代码执行效率，并通过给页面编写骨架屏，避免无数据时渲染复杂的DOM结构造成的性能浪费。即从全路径出发，提供一种优化思路，减少性能浪费，解决在访问网页的过程中，页面加载时间较长等问题，提升了用户体验。
显然，上述所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。为了更好的理解上述阻塞处理方法，以下结合实施例对上述过程进行说明，但不用于限定本发明实施例的技术方案，具体地：
在一个可选的实施例中，为了解决在访问网页的过程中，页面加载时间较长等问题，可以梳理Vue框架(相当于上述实施例中的目标框架)的全生命周期，从初始化、数据绑定、DOM挂载、资源加载等多个方面入手，在Vue的入口文件、路由组件以及页面组件暴露出的多个钩子函数里进行优化，同时配合打包工具Webpack提供的代码分割、异步加载等机制，最终形成一套标准化流程，适用于任何一套基于Vue的前端应用。
具体的优化如下，如：优化一，通过打包工具Webpack的代码分割能力，将每个页面的资源代码单独打包，使得用户访问某个页面的时候不需要同步加载其他页面资源；优化二，应用入口文件里避免出现任何阻塞性代码，在出现任何阻塞性代码的时候，更换为异步方案，保证代码执行效率；优化三，页面组件内部，非关键渲染路径资源异步加载；优化四，增加骨架屏方案，避免无数据时渲染复杂的DOM结构造成的性能浪费。
图3是根据本发明实施例的阻塞处理方法的原理图，如图3所示，解析Vue源码，分析初始化、双向绑定原理、DOM挂载流程；分析Vue的全生命周期，找到可能存在阻塞的节点，如入口文件、路由钩子函数、页面组件生命周期钩子函数等，分析可能出现阻塞的节点，避免阻塞或耗时代码，在出现阻塞的情况下，通过异步方案替代；全页面引入骨架屏，避免无数据情况下，无效的复杂DOM渲染。
在一个可选的实施例中，图4是根据本发明实施例的阻塞处理方法的流程图(二)，具体步骤如下：
步骤S402：开始；
步骤S404：入口文件分析；
步骤S406：判断入口文件分析是否阻塞，若阻塞，执行步骤S408，若没有阻塞，执行步骤S410；
步骤S408：处理阻塞，异步取代；
步骤S410：不同路由页面代码分割；
步骤S412：路由钩子函数分析；
步骤S414：判断路由钩子函数是否阻塞，若阻塞，执行步骤S416，若没有阻塞，执行步骤S418；
步骤S416：处理阻塞，异步取代；
步骤S418：页面组件代码分割；
步骤S420：页面组件生命周期钩子函数分析；
步骤S422：判断页面组件生命周期钩子函数是否阻塞，若阻塞，执行步骤S424，若没有阻塞，执行步骤S426；
步骤S424：处理阻塞，异步取代；
步骤S426：页面引入骨架屏；
步骤S428：结束。
简而言之，即分析Vue框架应用入口文件，检查阻塞代码，若有阻塞，用异步加载方案替代，进而分割各个路由页面代码，用户访问某页面时只需要加载该页面资源，不需要加载其他页面资源；进一步地，分析路由钩子函数，检查阻塞代码，若有阻塞，用异步加载方案替代；进一步地分割页面组件代码，非关键资源异步加载，随后分析页面组件生命周期钩子函数，检查阻塞代码，若有阻塞，用异步加载方案替代，最后引入骨架屏，避免无数据时渲染复杂的DOM结构。
需要说明的是，上述步骤S404，S410，S418并不用于限定步骤的执行顺序，只要上述入口文件，路由钩子函数，或页面组件生命周期钩子函数的任意一个可能出现阻塞的情况下，可以优先执行对应的步骤，例如，在先检测到出现阻塞的情况下，可以先执行S410，然后判断入口文件和页面组件生命周期钩子函数哪一个先发生了阻塞，如果是页面组件生命周期钩子函数，则先执行步骤S418。
此外，本发明实施例的上述技术方案，根据Vue全生命周期暴露出的钩子函数，配合Webpack异步加载和骨架屏，适用于所有Vue应用的性能优化策略，可以统一技术团队优化规范，并且从源码梳理Vue生命周期，提供全路径优化策略，利用代码分割和骨架屏，减少关键渲染路径资源，提升了性能。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例的方法。
在本实施例中还提供了一种阻塞处理装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的设备较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。
图5是根据本发明实施例的阻塞处理装置的结构框图，该装置包括：
确定模块52，用于分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；
处理模块54，用于在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载。
通过上述模块，分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载。也就是说通过分析目标框架的源代码，确定目标框架的全生命周期中的节点，在节点阻塞的情况下，通过异步加载的方式处理目标节点对应的目标代码。采用上述技术方案，解决在访问网页的过程中，页面加载时间较长等问题。进而在节点阻塞的时候，通过异步加载的方式处理，缩短了页面加载时长。
进一步地，所述目标节点包括以下至少之一：入口文件、路由钩子函数、页面组件生命周期钩子函数。
需要说明的是，上述确定模块52用于分析目标框架的源代码，具体是为了了解目标框架整个生命周期中的行为操作，从而分析整个生命周期中哪些环节会有耗时过高的可能，耗时过高就会发生阻塞，当一个节点发生阻塞的概率超过了预设阈值，就将这个节点当成目标节点。即分析目标框架的源代码是为了确定所述目标框架的全生命周期中的目标节点，其中，目标节点的环节耗时高的几率大，发生阻塞的概率超过了预设阈值，需要说明的是，所述目标节点包括以下至少之一：入口文件、路由钩子函数、页面组件生命周期钩子函数；针对可能耗时过高的环节进行检测，在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载，从而保证代码执行效率。
可选的，上述处理模块54用于对所有所述目标节点对应的代码进行分析，得到分析结果；根据所述分析结果确定所有所述目标节点中存在阻塞的任一目标节点。
在本实施例中，需要对目标框架全生命周期中可能出现阻塞的环节的目标节点的代码进行分析，例如可能出现阻塞的节点为：入口文件、路由钩子函数、页面组件生命周期钩子函数，对这三个节点的代码进行分析，得到分析结果，从而根据分析结果确定哪些节点存在阻塞。为了更好的理解，阻塞的判断需要具体到业务中进行分析，例如，如果读取文件、请求接口都采用了同步加载的方式，此时就会造成阻塞。
需要说明的是，在一个可选的实施例中，上述处理模块54还用于通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包；对于所有所述目标节点中的任一目标节点，对所述任一目标节点的所述不同包进行分析，得到分析结果。
在本实施例中，需要对不同的页面资源代码进行单独打包，以使不同页面的资源代码对应不同包，从而使用户访问某个页面的时候不需要同步加载其他页面资源，进而对所述任一目标节点的对应的不同包进行分析，得到分析结果。
进一步的，在一个可选的实施例中，上述处理模块54还用于确定对所述不同页面的资源代码进行打包的模块打包器；通过所述模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包。
在本实施例中，在通过模块打包器对不同页面的资源代码单独打包以前，需要先确定模块打包器，可选的，模块打包器可以是Webpack。
可选的，上述处理模块54还用于确定所述不同包中的关键资源和非关键资源，其中，所述关键资源用于指示在第一时间在所述目标框架对应的页面上显示的资源，所述非关键资源用于指示在第二时间在所述目标框架对应的页面上显示的资源，所述第一时间早于所述第二时间；异步加载所述非关键资源。
在本实施例中，在目标框架对应的页面组件内部，有非关键资源和关键资源，即在不同的包中，需要确定首先确定出哪些资源的关键资源，哪些资源是非关键资源，异步加载所述非关键资源，进而在打开页面以后，让第一关键资源先出现在页面上，进而非关键资源再出现在页面上，从而可以提高用户体验。
需要说明的是，在一个可选的实施例中，上述处理模块54还用于确定所述目标框架所使用的骨架屏，并在所述目标框架对应的页面上显示所述骨架屏；响应页面程序发送的数据请求，加载所述数据请求对应的页面资源；在所述数据请求对应的页面资源加载成功的情况下，隐藏所述骨架屏。
在本实施例中，可以通过给页面编写骨架屏，避免无数据时渲染复杂的DOM结构造成的性能浪费。需要说明的是，具体增加骨架屏的方式本实施例中不做限定。可选的，具体的可以先确定目标框架所使用的骨架屏，编写骨架屏的组件，在页面代码中引入骨架屏组件，从而可以在目标框架对应的页面上显示所述骨架屏，即在页面程序请求接口之前展示骨架屏，且不渲染真实页面文档对象模型(Document Object Model，简称为DOM)结构，在响应页面程序发送的数据请求，加载所述数据请求对应的页面资源，并在所述数据请求对应的页面资源加载成功的情况下，隐藏骨架屏，渲染真实页面。
通过本实施例中的上述模块，分析目标框架的源代码，确定目标框架全生命周期中可能存在耗时过高的目标节点，在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载，从而保证代码执行效率，并通过给页面编写骨架屏，避免无数据时渲染复杂的DOM结构造成的性能浪费。即从全路径出发，提供一种优化思路，减少性能浪费，解决在访问网页的过程中，页面加载时间较长等问题，提升了用户体验。
本发明的实施例还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有计算机程序，其中，该计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。
可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的计算机程序：
S1，分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；
S2，在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载。
在一个示例性实施例中，上述计算机可读存储介质可以包括但不限于：U盘、只读存储器(Read-Only Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、移动硬盘、磁碟或者光盘等各种可以存储计算机程序的介质。
本实施例中的具体示例可以参考上述实施例及示例性实施方式中所描述的示例，本实施例在此不再赘述。
本发明的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。
可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：
S1，分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；
S2，在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载。
在一个示例性实施例中，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。
本实施例中的具体示例可以参考上述实施例及示例性实施方式中所描述的示例，本实施例在此不再赘述。
显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (8)
1.一种阻塞处理方法，其特征在于，包括：
分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；
在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载，
其中，对所述任一目标节点对应的代码进行异步加载之前，所述方法还包括：
对所有所述目标节点对应的代码进行分析，得到分析结果；
根据所述分析结果确定所有所述目标节点中存在阻塞的任一目标节点，
其中，对所有所述目标节点对应的代码进行分析，得到分析结果，包括：
对所述目标框架的入口文件进行分析，得到对所述入口文件的分析结果；
在所述分析结果指示所述入口文件未阻塞，或者已经对所述入口文件进行异步加载的情况下，通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包；
对于所述不同包进行分析，确定对路由钩子函数的分析结果；
对于所述不同页面中的每个页面，在所述每个页面对应的所述不同包的分析结果指示所述路由钩子函数未阻塞，或者已经对所述路由钩子函数进行异步加载的情况下，对所述每个页面的页面组件代码进行分割，并分析页面组件生命周期钩子函数，得到所述页面组件生命周期钩子函数的分析结果。
2.根据权利要求1所述的阻塞处理方法，其特征在于，所述目标节点包括以下至少之一：入口文件、路由钩子函数、页面组件生命周期钩子函数。
3.根据权利要求1所述的方法，其特征在于，通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包，包括：
确定对所述不同页面的资源代码进行打包的模块打包器；
通过所述模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包。
4.根据权利要求1所述的方法，其特征在于，通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包之后，所述方法还包括：
确定所述不同包中的关键资源和非关键资源，其中，所述关键资源用于指示在第一时间在所述目标框架对应的页面上显示的资源，所述非关键资源用于指示在第二时间在所述目标框架对应的页面上显示的资源，所述第一时间早于所述第二时间；
异步加载所述非关键资源。
5.根据权利要求1所述的方法，其特征在于，在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载之后，还包括：
确定所述目标框架所使用的骨架屏，并在所述目标框架对应的页面上显示所述骨架屏；
响应页面程序发送的数据请求，加载所述数据请求对应的页面资源；
在所述数据请求对应的页面资源加载成功的情况下，隐藏所述骨架屏。
6.一种阻塞处理装置，其特征在于，包括：
确定模块，用于分析目标框架的源代码，以确定所述目标框架的全生命周期中的目标节点，其中，所述目标节点发生阻塞的概率超过预设阈值；
处理模块，用于在确定出所述目标节点中的任一目标节点存在阻塞的情况下，对所述任一目标节点对应的目标代码进行异步加载，其中，所述处理模块，还用于对所有所述目标节点对应的代码进行分析，得到分析结果；
根据所述分析结果确定所有所述目标节点中存在阻塞的任一目标节点，
其中，所述处理模块，还用于对所述目标框架的入口文件进行分析，得到对所述入口文件的分析结果；
在所述分析结果指示所述入口文件未阻塞，或者已经对所述入口文件进行异步加载的情况下，通过模块打包器对不同页面的资源代码单独打包，以使不同页面的资源代码对应不同包；
对于所述不同包进行分析，确定对路由钩子函数的分析结果；
对于所述不同页面中的每个页面，在所述每个页面对应的所述不同包的分析结果指示所述路由钩子函数未阻塞，或者已经对所述路由钩子函数进行异步加载的情况下，对所述每个页面的页面组件代码进行分割，并分析页面组件生命周期钩子函数，得到所述页面组件生命周期钩子函数的分析结果。
7.一种计算机可读的存储介质，其特征在于，所述计算机可读的存储介质包括存储的程序，其中，所述程序运行时执行上述权利要求1至5任一项中所述的方法。
8.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行所述权利要求1至5任一项中所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110572923.4A CN113282295B (zh) | 2021-05-25 | 2021-05-25 | 阻塞处理方法及装置、存储介质及电子装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110572923.4A CN113282295B (zh) | 2021-05-25 | 2021-05-25 | 阻塞处理方法及装置、存储介质及电子装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113282295A CN113282295A (zh) | 2021-08-20 |
| CN113282295B true CN113282295B (zh) | 2024-02-23 |
Family
ID=77281458
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110572923.4A Active CN113282295B (zh) | 2021-05-25 | 2021-05-25 | 阻塞处理方法及装置、存储介质及电子装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113282295B (zh) |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105446755A (zh) * | 2014-08-06 | 2016-03-30 | 阿里巴巴集团控股有限公司 | 一种用于Android系统上快速加载Activity数据的方法和装置 |
| CN106933640A (zh) * | 2017-04-26 | 2017-07-07 | 携程旅游网络技术（上海）有限公司 | 在移动终端的浏览器内加载Web页面的方法及系统 |
| WO2017202255A1 (zh) * | 2016-05-22 | 2017-11-30 | 广州市动景计算机科技有限公司 | 页面展示方法、装置和客户端设备 |
| CN109359256A (zh) * | 2018-09-29 | 2019-02-19 | 北京城市网邻信息技术有限公司 | 页面加载方法、装置、设备及存储介质 |
| CN109800020A (zh) * | 2019-02-02 | 2019-05-24 | 北京字节跳动网络技术有限公司 | 一种程序开发的代码自动调整方法、装置、设备和介质 |
| CN110058897A (zh) * | 2019-03-15 | 2019-07-26 | 平安普惠企业管理有限公司 | 页面操作控制方法、装置、计算机设备及存储介质 |
| CN110187878A (zh) * | 2019-05-29 | 2019-08-30 | 北京三快在线科技有限公司 | 一种页面生成方法和装置 |
| CN111143729A (zh) * | 2019-12-11 | 2020-05-12 | 中国平安财产保险股份有限公司 | 基于单页面应用的优化方法、装置、设备及存储介质 |
| CN112612982A (zh) * | 2021-01-05 | 2021-04-06 | 上海哔哩哔哩科技有限公司 | 网页预加载方法、装置及计算机设备 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8429655B2 (en) * | 2005-04-29 | 2013-04-23 | Microsoft Corporation | System and method for asynchronous processing in page lifecycle |
| US8321533B2 (en) * | 2009-08-03 | 2012-11-27 | Limelight Networks, Inc. | Systems and methods thereto for acceleration of web pages access using next page optimization, caching and pre-fetching techniques |
-
2021
- 2021-05-25 CN CN202110572923.4A patent/CN113282295B/zh active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105446755A (zh) * | 2014-08-06 | 2016-03-30 | 阿里巴巴集团控股有限公司 | 一种用于Android系统上快速加载Activity数据的方法和装置 |
| WO2017202255A1 (zh) * | 2016-05-22 | 2017-11-30 | 广州市动景计算机科技有限公司 | 页面展示方法、装置和客户端设备 |
| CN106933640A (zh) * | 2017-04-26 | 2017-07-07 | 携程旅游网络技术（上海）有限公司 | 在移动终端的浏览器内加载Web页面的方法及系统 |
| CN109359256A (zh) * | 2018-09-29 | 2019-02-19 | 北京城市网邻信息技术有限公司 | 页面加载方法、装置、设备及存储介质 |
| CN109800020A (zh) * | 2019-02-02 | 2019-05-24 | 北京字节跳动网络技术有限公司 | 一种程序开发的代码自动调整方法、装置、设备和介质 |
| CN110058897A (zh) * | 2019-03-15 | 2019-07-26 | 平安普惠企业管理有限公司 | 页面操作控制方法、装置、计算机设备及存储介质 |
| CN110187878A (zh) * | 2019-05-29 | 2019-08-30 | 北京三快在线科技有限公司 | 一种页面生成方法和装置 |
| CN111143729A (zh) * | 2019-12-11 | 2020-05-12 | 中国平安财产保险股份有限公司 | 基于单页面应用的优化方法、装置、设备及存储介质 |
| CN112612982A (zh) * | 2021-01-05 | 2021-04-06 | 上海哔哩哔哩科技有限公司 | 网页预加载方法、装置及计算机设备 |
Non-Patent Citations (5)
| Title |
|---|
| Improving Scalability of Web Applications by Utilizing Asynchronous I/O;Gjorgji Rankovski等;ICT Innovations 2016;第211–218页 * |
| User acceptance testing for Agile-developed web-based applications: Empowering customers through wikis and mind maps;I. Otaduy等;Journal of Systems and Software;第133卷;第212-229页 * |
| 基于作文检索和赏析系统的前端性能优化实践;胡亚倩;中国优秀硕士学位论文全文数据库 信息科技辑(第12期);I139-175 * |
| 基于携程旅行APP特卖汇项目的前端优化设计与实现;郭慧敏;中国优秀硕士学位论文全文数据库 信息科技辑(第5期);I138-856 * |
| 大卫·弗拉纳根.《JavaScript指南 原书第7版》.机械工业出版社,2021,(第7版),第574-575页. * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113282295A (zh) | 2021-08-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN101539911B (zh) | 加快浏览器网页显示的装置及方法 | |
| CN109614569B (zh) | 页面渲染方法、装置及智能终端 | |
| US10567407B2 (en) | Method and system for detecting malicious web addresses | |
| CN106164866B (zh) | 客户端侧web状态的高效迁移 | |
| US10915637B2 (en) | Method, client, and system for testing application | |
| US20110054878A1 (en) | Automated performance prediction for cloud services | |
| Ravindranath et al. | Procrastinator: pacing mobile apps' usage of the network | |
| CN109213948B (zh) | 网页加载方法、中间服务器和网页加载系统 | |
| CN109388766A (zh) | 页面加载的方法和装置 | |
| CN104111847A (zh) | 一种提高游戏运行速度的方法及装置 | |
| US10291492B2 (en) | Systems and methods for discovering sources of online content | |
| CN105468412A (zh) | 动态打包方法和装置 | |
| CN113742551A (zh) | 一种基于scrapy和puppeteer的动态数据抓取方法 | |
| CN113282295B (zh) | 阻塞处理方法及装置、存储介质及电子装置 | |
| Mangas et al. | WoTemu: An emulation framework for edge computing architectures based on the Web of Things | |
| CN109344351A (zh) | 网页加载方法、中间服务器和网页加载系统 | |
| CN111191225B (zh) | 一种切换隔离对象的方法、装置、介质和电子设备 | |
| CN108470043A (zh) | 一种业务结果的获取方法及装置 | |
| CN116781586A (zh) | 一种gRPC流量解析方法、装置、设备及介质 | |
| CN106528733A (zh) | 网页页面展现方法及装置 | |
| CN106055571A (zh) | 网站识别方法及系统 | |
| CN113590217B (zh) | 基于引擎的函数管理方法、装置、电子设备及存储介质 | |
| CN115168770A (zh) | 一种页面生成方法、装置、电子设备及介质 | |
| CN109492146A (zh) | 一种防web爬虫的方法和装置 | |
| CN113791870A (zh) | 一种WebAssembly虚拟机分布式系统细粒度迁移方法及系统 |
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 |