CN110275705A - 生成预加载页面代码的方法、装置、设备及存储介质 - Google Patents
生成预加载页面代码的方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN110275705A CN110275705A CN201910531949.7A CN201910531949A CN110275705A CN 110275705 A CN110275705 A CN 110275705A CN 201910531949 A CN201910531949 A CN 201910531949A CN 110275705 A CN110275705 A CN 110275705A
- Authority
- CN
- China
- Prior art keywords
- code
- page
- occupy
- preloading
- target pages
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 59
- 230000036316 preload Effects 0.000 claims abstract description 16
- 238000004590 computer program Methods 0.000 claims description 7
- 238000001514 detection method Methods 0.000 claims description 7
- 238000004364 calculation method Methods 0.000 claims 1
- 238000011161 development Methods 0.000 abstract description 5
- 230000015572 biosynthetic process Effects 0.000 abstract description 4
- 230000008569 process Effects 0.000 description 7
- 238000013461 design Methods 0.000 description 4
- 239000000203 mixture Substances 0.000 description 4
- 238000013459 approach Methods 0.000 description 3
- 208000019901 Anxiety disease Diseases 0.000 description 2
- 241000933832 Broussonetia Species 0.000 description 2
- 230000036506 anxiety Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000004321 preservation Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 230000001953 sensory effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000003044 adaptive effect Effects 0.000 description 1
- 210000000988 bone and bone Anatomy 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000007796 conventional method Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 239000000686 essence Substances 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000002372 labelling Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
- 238000006467 substitution reaction 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/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computing Systems (AREA)
- Stored Programmes (AREA)
- Devices For Executing Special Programs (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请提供一种生成预加载页面代码的方法、装置、设备及存储介质，其中，所述方法包括：若检测到用于生成目标站点的预加载页面的控制指令，则在浏览器中打开所述目标站点的目标页面；运行预先编写的Java Script脚本文件，所述Java Script脚本文件用于获取所述目标页面中各个元素的位置信息以及尺寸信息；基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码；基于所述图形占位代码生成所述目标站点的预加载页面代码。本申请可以实现自动生成预加载页面代码，因而可以极大的加快预加载页面代码的生成效率。并且可以极大的节省二次开发成本，优化迭代效率。
Description
技术领域
本申请涉及计算机技术领域，尤其涉及一种生成预加载页面代码的方法、装置、设备及存储介质。
背景技术
在进行站点访问时，用户通常需要等待页面全部加载完毕后才能浏览整个站点页面。由于在页面加载过程中的页面通常是白屏，因而用户无法感知到即将呈现的页面，也无法确定等待的时长，容易导致用户产生等待的焦虑感，影响用户体验。
为了提升应用的加载等待这段时间的用户感知体验，当前的部分开发人员使用骨架屏预加载页面的方案，即在目标页面完全渲染完成之前，令用户先看到一个样式简单，描绘有目标页面的大致框架的预加载页面，进而待完整的站点内容全部加载完毕之后再替换掉该预加载页面的图形占位。
然而，现有的制作预加载页面的方案需开发人员手动编写每个页面的预加载页面代码。且当站点页面更新迭代或设计展示有任何变动时，需要开发人员手动编写制作对应于站点的新页面的预加载页面代码，既费时又费力。
发明内容
有鉴于此，本申请提供一种生成预加载页面代码的方法、装置、设备及存储介质，以解决现有的生成预加载页面代码的方案中所存在的问题。
具体地，本申请是通过如下技术方案实现的：
根据本申请的第一方面，提出了一种生成预加载页面代码的方法，包括：
若检测到用于生成目标站点的预加载页面的控制指令，则在浏览器中打开所述目标站点的目标页面；
运行预先编写的Java Script脚本文件，所述Java Script脚本文件用于获取所述目标页面中各个元素的位置信息以及尺寸信息；
基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码；
基于所述图形占位代码生成所述目标站点的预加载页面代码。
在一实施例中，所述方法还包括：
若所述目标页面加载完毕，则执行所述运行预先编写的Java Script脚本文件的操作。
在一实施例中，所述方法还包括：
基于window.onload事件检测所述目标页面是否加载完毕。
在一实施例中，所述获取所述目标页面中各个元素的位置信息以及尺寸信息，包括：
通过document.createTreewalker方法遍历并获取所述目标页面的超文本标记语言HTML DOM结构树中各个元素节点的位置信息以及尺寸信息。
在一实施例中，所述基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码，包括：
利用层叠样式表CSS技术，基于所述元素的位置信息以及尺寸信息，以CSSPosition的绝对absolute定位方式输出所述元素的Div形式的图形占位代码。
在一实施例中，所述基于所述图形占位代码生成所述目标站点的预加载页面代码，包括：
基于所述Div形式的图形占位代码生成所述预加载页面的超文本标记语言HTML代码。
在一实施例中，所述方法还包括：
对所述预加载页面代码进行保存。
根据本申请的第二方面，提出了一种生成预加载页面代码的装置，包括：
目标页面打开模块，用于当检测到用于生成目标站点的预加载页面的控制指令时，在浏览器中打开所述目标站点的目标页面；
脚本文件运行模块，用于运行预先编写的Java Script脚本文件，所述JavaScript脚本文件用于获取所述目标页面中各个元素的位置信息以及尺寸信息；
占位代码获取模块，用于基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码；
页面代码生成模块，用于基于所述图形占位代码生成所述目标站点的预加载页面代码。
根据本申请的第三方面，提出了一种生成预加载页面代码的设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现上述任一所述的生成预加载页面代码的方法。
根据本申请的第四方面，提出了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行上述任一所述的生成预加载页面代码的方法。
由以上技术方案可见，本申请通过当检测到用于生成目标站点的预加载页面的控制指令时，在浏览器中打开所述目标站点的目标页面，并运行预先编写的Java Script脚本文件，以通过所述Java Script脚本文件获取所述目标页面中各个元素的位置信息以及尺寸信息，然后基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码，进而基于所述图形占位代码生成所述目标站点的预加载页面代码，由于无需开发人员手动编写预加载页面代码，而是基于Java Script脚本文件自动获取目标页面的元素信息，进而自动生成预加载页面代码，因而可以极大的加快预加载页面代码的生成效率。并且，当后续目标站点的目标页面更新或设计展示有变动时，开发人员也无需手动重编代码，仅需再次执行本实施例，即可获取到新页面的预加载页面代码，可以极大的节省二次开发成本，优化迭代效率。
附图说明
图1是本申请一示例性实施例示出的一种生成预加载页面代码的方法的流程图；
图2是本申请又一示例性实施例示出的一种生成预加载页面代码的方法的流程图；
图3是本申请另一示例性实施例示出的一种生成预加载页面代码的方法的流程图；
图4是本申请一示例性实施例示出的一种生成预加载页面代码的装置的结构图；
图5是本申请又一示例性实施例示出的一种生成预加载页面代码的装置的结构图；
图6是本申请一示例性实施例示出的一种生成预加载页面代码的设备的结构图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
图1是本申请一示例性实施例示出的一种生成预加载页面代码的方法的流程图；所述方法可以用于服务端(如，一台服务器或多台服务器组成的服务器集群等)。如图1所示，该方法包括以下步骤S101-S104：
在步骤S101中，若检测到用于生成目标站点的预加载页面的控制指令，则在浏览器中打开所述目标站点的目标页面。
在一实施例中，在使用骨架屏预加载目标站点的预加载页面方案之前，开发人员可以通过触发控制指令的方式来制作预加载页面，其中，该控制指令用于生成目标站点的预加载页面的。
在一实施例中，开发人员可以通过点击服务端的预设功能按键来触发上述控制指令，进而服务端可以响应于检测到该控制指令，在浏览器中打开上述目标站点的目标页面。
在一实施例中，上述预加载页面可以包括在上述目标页面完全渲染完成之前，供用户先看到的一个样式简单、且描绘有目标页面的大致框架的预加载页面，进而可以实现后续当完整的站点内容全部加载完毕之后再替换掉该预加载页面的图形占位。
在步骤S102中，运行预先编写的Java Script脚本文件，所述Java Script脚本文件用于获取所述目标页面中各个元素的位置信息以及尺寸信息。
在一实施例中，上述各个元素的位置信息可以为各个元素在页面中的绝对定位信息(如，元素坐标等)；上述各个元素的尺寸信息可以为各个元素在页面中的宽度和/或高度等。
在一实施例中，当上述服务端在浏览器中打开所述目标站点的目标页面后，可以运行预先编写的Java Script脚本文件，其中，该Java Script脚本文件可以用于获取所述目标页面中各个元素的位置信息以及尺寸信息。
在一实施例中，上述Java Script脚本文件可以用于通过document.createTreewalker方法遍历并获取所述目标页面的超文本标记语言HTML DOM结构树中各个元素节点的位置信息以及尺寸信息。
在一实施例中，上述Java Script脚本文件可以包括由开发人员预先编写的、适用于获取各类网页中的元素位置及尺寸信息的脚本文件。
值得说明的是，上述Java Script脚本文件的编写方式可以参见现有技术中的解释和说明，本实施例对此不进行限定。
在一实施例中，上述运行预先编写的Java Script脚本文件的方式还可以参见下述图2所示实施例，在此先不进行详述。
在步骤S103中，基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码。
在一实施例中，当通过运行预先编写的Java Script脚本文件来获取所述目标页面中各个元素的位置信息以及尺寸信息后，可以基于所获取的各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码。
在一实施例中，可以利用层叠样式表CSS技术，基于所述元素的位置信息以及尺寸信息，以CSS Position的绝对absolute定位方式输出所述元素的Div形式的图形占位代码。
在另一实施例中，除了上述利用层叠样式表CSS技术确定元素的图形占位代码的方式之外，开发人员还可以根据实际需要选取其他现有技术中的方案，所得到的元素的图形站位代码同样适用于后续步骤，本实施例对此不进行限定。
在步骤S104中，基于所述图形占位代码生成所述目标站点的预加载页面代码。
在一实施例中，当基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码后，可以基于所述图形占位代码生成所述目标站点的预加载页面代码。
在一实施例中，可以基于所述Div形式的图形占位代码生成所述预加载页面的超文本标记语言HTML代码。
在另一实施例中，除了上述基于所述Div形式的图形占位代码生成所述预加载页面的超文本标记语言HTML代码的方式之外，开发人员还可以根据实际需要选取其他现有技术中的方案生成所述目标站点的预加载页面代码，本实施例对此不进行限定。
由上述描述可知，本实施例通过当检测到用于生成目标站点的预加载页面的控制指令时，在浏览器中打开所述目标站点的目标页面，并运行预先编写的Java Script脚本文件，以通过所述Java Script脚本文件获取所述目标页面中各个元素的位置信息以及尺寸信息，然后基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码，进而基于所述图形占位代码生成所述目标站点的预加载页面代码，由于无需开发人员手动编写预加载页面代码，而是基于Java Script脚本文件自动获取目标页面的元素信息，进而自动生成预加载页面代码，因而可以极大的加快预加载页面代码的生成效率。并且，当后续目标站点的目标页面更新或设计展示有变动时，开发人员也无需手动重编代码，仅需再次执行本实施例，即可获取到新页面的预加载页面代码，可以极大的节省二次开发成本，优化迭代效率。
图2是本申请又一示例性实施例示出的一种生成预加载页面代码的方法的流程图；所述方法可以用于服务端(如，一台服务器或多台服务器组成的服务器集群等)。如图2所示，该方法包括以下步骤S201-S204：
在步骤S201中，若检测到用于生成目标站点的预加载页面的控制指令，则在浏览器中打开所述目标站点的目标页面。
在步骤S202中，若所述目标页面加载完毕，则运行预先编写的Java Script脚本文件，所述Java Script脚本文件用于获取所述目标页面中各个元素的位置信息以及尺寸信息。
在一实施例中，当服务端在浏览器中打开所述目标站点的目标页面后，可以检测上述目标页面是否已加载完毕，进而当确定该目标页面加载完毕时，运行预先编写的JavaScript脚本文件，以获取所述目标页面中各个元素的位置信息以及尺寸信息。
在一实施例中，服务端可以基于window.onload事件等检测上述目标页面是否加载完毕。
具体来说，当目标页面加载完毕时，服务端可以检测到window.onload事件；相反，若目标页面未加载完毕，则服务端无法检测到window.onload事件。因此，服务端可以基于window.onload事件检测上述目标页面是否加载完毕。
在另一实施例中，除了上述基于window.onload事件等检测目标页面是否加载完毕的方式之外，开发人员还可以根据实际需要选取其他现有技术中的方案，所得到的检测结果同样适用于后续步骤，本实施例对此不进行限定。
在步骤S203中，基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码。
在步骤S204中，基于所述图形占位代码生成所述目标站点的预加载页面代码。
其中，步骤S201、S203-S204的相关解释和说明可以参见上述实施例，在此不进行赘述。
由上述描述可知，本实施例通过当目标页面加载完毕时，运行预先编写的JavaScript脚本文件，以获取所述目标页面中各个元素的位置信息以及尺寸信息，可以实现在目标页面加载完毕的情况下获取目标页面中的元素的位置信息以及尺寸信息，可以确保获取信息的完整程度，进而可以提高后续获取各个元素的图形占位代码的准确性，进而可以实现基于所述图形占位代码准确的生成所述目标站点的预加载页面代码。
图3是本申请另一示例性实施例示出的一种生成预加载页面代码的方法的流程图；所述方法可以用于服务端(如，一台服务器或多台服务器组成的服务器集群等)如图3所示，该方法包括以下步骤S301-S305：
在步骤S301中，若检测到用于生成目标站点的预加载页面的控制指令，则在浏览器中打开所述目标站点的目标页面。
在步骤S302中，运行预先编写的Java Script脚本文件，所述Java Script脚本文件用于获取所述目标页面中各个元素的位置信息以及尺寸信息。
在步骤S303中，基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码。
在步骤S304中，基于所述图形占位代码生成所述目标站点的预加载页面代码。
其中，步骤S301-S304的相关解释和说明可以参见上述实施例，在此不进行赘述。
在步骤S305中，对所述预加载页面代码进行保存。
在一实施例中，当基于所述图形占位代码生成所述目标站点的预加载页面代码后，可以对所述预加载页面代码进行保存。
在一实施例中，服务端可以将上述预加载页面代码保存在存在本地数据库中，以供后续使用。
举例来说，当检测到用户访问目标站点的目标页面时，可以基于保存的上述预加载页面代码向用户展示对应的预加载页面，以使用户先看到该样式简单，且描绘有目标页面的大致框架的预加载页面；进而，当该目标页面的内容全部加载完毕之后可以替换掉该预加载页面的图形占位。
由上述描述可知，本实施例通过在基于所述图形占位代码生成所述目标站点的预加载页面代码后，对所述预加载页面代码进行保存，可以实现后续检测到用户访问目标页面时，基于保存的上述预加载页面代码向用户展示对应的预加载页面，可以降低用户在加载页面过程中产生的焦虑感，进而可以提升该过程中的用户感知体验。
图4是本申请一示例性实施例示出的一种生成预加载页面代码的装置的结构图；所述装置可以用于服务端(如，一台服务器或多台服务器组成的服务器集群等)。如图4所示，该装置包括：目标页面打开模块110、脚本文件运行模块120、占位代码获取模块130以及页面代码生成模块140，其中：
目标页面打开模块110，用于当检测到用于生成目标站点的预加载页面的控制指令时，在浏览器中打开所述目标站点的目标页面；
脚本文件运行模块120，用于运行预先编写的Java Script脚本文件，所述JavaScript脚本文件用于获取所述目标页面中各个元素的位置信息以及尺寸信息；
占位代码获取模块130，用于基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码；
页面代码生成模块140，用于基于所述图形占位代码生成所述目标站点的预加载页面代码。
由上述描述可知，本实施例通过当检测到用于生成目标站点的预加载页面的控制指令时，在浏览器中打开所述目标站点的目标页面，并运行预先编写的Java Script脚本文件，以通过所述Java Script脚本文件获取所述目标页面中各个元素的位置信息以及尺寸信息，然后基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码，进而基于所述图形占位代码生成所述目标站点的预加载页面代码，由于无需开发人员手动编写预加载页面代码，而是基于Java Script脚本文件自动获取目标页面的元素信息，进而自动生成预加载页面代码，因而可以极大的加快预加载页面代码的生成效率。并且，当后续目标站点的目标页面更新或设计展示有变动时，开发人员也无需手动重编代码，仅需再次执行本实施例，即可获取到新页面的预加载页面代码，可以极大的节省二次开发成本，优化迭代效率。
图5是本申请又一示例性实施例示出的一种生成预加载页面代码的装置的结构图；其中，目标页面打开模块210、脚本文件运行模块220、占位代码获取模块230以及页面代码生成模块240与前述图4所示实施例中的目标页面打开模块110、脚本文件运行模块120、占位代码获取模块130以及页面代码生成模块140的功能相同，在此不进行赘述。如图5所示，220脚本文件运行模块还可以用于当所述目标页面加载完毕时，执行所述运行预先编写的Java Script脚本文件的操作。
在一实施例中，所述装置还可以包括：
页面加载检测模块250，用于基于window.onload事件检测所述目标页面是否加载完毕。
在一实施例中，Java Script脚本文件还可以用于通过document.createTreewalker方法遍历并获取所述目标页面的超文本标记语言HTML DOM结构树中各个元素节点的位置信息以及尺寸信息。
在一实施例中，占位代码获取模块230还可以用于利用层叠样式表CSS技术，基于所述元素的位置信息以及尺寸信息，以CSS Position的绝对absolute定位方式输出所述元素的Div形式的图形占位代码。
在一实施例中，页面代码生成模块240还可以用于基于所述Div形式的图形占位代码生成所述预加载页面的超文本标记语言HTML代码。
在一实施例中，装置还可以包括：
页面代码保存模块260，用于对所述预加载页面代码进行保存。
值得说明的是，上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。
本发明的生成预加载页面代码的装置的实施例可以应用程序在网络设备上。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的，其中计算机程序可以用于执行上述图1～图3所示实施例提供的生成预加载页面代码的方法。从硬件层面而言，如图6所示，为本发明的生成预加载页面代码的设备的硬件结构图，除了图6所示的处理器、网络接口、内存以及非易失性存储器之外，所述设备通常还可以包括其他硬件，如负责处理报文的转发芯片等等；从硬件结构上来讲该设备还可能是分布式的设备，可能包括多个接口卡，以便在硬件层面进行报文处理的扩展。另一方面，本申请还提供了一种计算机可读存储介质，存储介质存储有计算机程序，计算机程序可以用于执行上述图1～图3所示实施例提供的生成预加载页面代码的方法。
对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。
Claims (10)
1.一种生成预加载页面代码的方法，其特征在于，包括：
若检测到用于生成目标站点的预加载页面的控制指令，则在浏览器中打开所述目标站点的目标页面；
运行预先编写的Java Script脚本文件，所述Java Script脚本文件用于获取所述目标页面中各个元素的位置信息以及尺寸信息；
基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码；
基于所述图形占位代码生成所述目标站点的预加载页面代码。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
若所述目标页面加载完毕，则执行所述运行预先编写的Java Script脚本文件的操作。
3.根据权利要求2所述的方法，其特征在于，所述方法还包括：
基于window.onload事件检测所述目标页面是否加载完毕。
4.根据权利要求1所述的方法，其特征在于，所述获取所述目标页面中各个元素的位置信息以及尺寸信息，包括：
通过document.createTreewalker方法遍历并获取所述目标页面的超文本标记语言HTML DOM结构树中各个元素节点的位置信息以及尺寸信息。
5.根据权利要求1所述的方法，其特征在于，所述基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码，包括：
利用层叠样式表CSS技术，基于所述元素的位置信息以及尺寸信息，以CSS Position的绝对absolute定位方式输出所述元素的Div形式的图形占位代码。
6.根据权利要求5所述的方法，其特征在于，所述基于所述图形占位代码生成所述目标站点的预加载页面代码，包括：
基于所述Div形式的图形占位代码生成所述预加载页面的超文本标记语言HTML代码。
7.根据权利要求1-6任一项所述的方法，其特征在于，所述方法还包括：
对所述预加载页面代码进行保存。
8.一种生成预加载页面代码的装置，其特征在于，包括：
目标页面打开模块，用于当检测到用于生成目标站点的预加载页面的控制指令时，在浏览器中打开所述目标站点的目标页面；
脚本文件运行模块，用于运行预先编写的Java Script脚本文件，所述Java Script脚本文件用于获取所述目标页面中各个元素的位置信息以及尺寸信息；
占位代码获取模块，用于基于所述各个元素的位置信息以及尺寸信息，获取所述各个元素的图形占位代码；
页面代码生成模块，用于基于所述图形占位代码生成所述目标站点的预加载页面代码。
9.一种生成预加载页面代码的设备，其特征在于，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现上述权利要求1-7任一所述的生成预加载页面代码的方法。
10.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序用于执行上述权利要求1-7任一所述的生成预加载页面代码的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910531949.7A CN110275705A (zh) | 2019-06-19 | 2019-06-19 | 生成预加载页面代码的方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910531949.7A CN110275705A (zh) | 2019-06-19 | 2019-06-19 | 生成预加载页面代码的方法、装置、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110275705A true CN110275705A (zh) | 2019-09-24 |
Family
ID=67961313
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910531949.7A Pending CN110275705A (zh) | 2019-06-19 | 2019-06-19 | 生成预加载页面代码的方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110275705A (zh) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110807161A (zh) * | 2019-11-08 | 2020-02-18 | 深圳乐信软件技术有限公司 | 一种页面骨架渲染方法、装置、设备及介质 |
| CN111078198A (zh) * | 2019-11-25 | 2020-04-28 | 网易（杭州）网络有限公司 | 前端页面处理方法、装置、设备及计算机可读存储介质 |
| CN111221610A (zh) * | 2020-01-03 | 2020-06-02 | 中国建设银行股份有限公司 | 一种页面元素采集方法和装置 |
| CN111221525A (zh) * | 2020-01-09 | 2020-06-02 | 北京金山安全软件有限公司 | 一种脚本代码的生成方法、装置、电子设备及存储介质 |
| CN111475156A (zh) * | 2020-04-13 | 2020-07-31 | 北京金堤科技有限公司 | 页面代码生成方法和装置、电子设备和存储介质 |
| CN116069379A (zh) * | 2023-01-28 | 2023-05-05 | 深圳市明源云科技有限公司 | 二次开发功能的识别方法、装置、设备及介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10083218B1 (en) * | 2017-06-30 | 2018-09-25 | Konica Minolta Laboratory U.S.A., Inc. | Repairing tables |
| CN109254773A (zh) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | 骨架页面生成方法、装置、设备和存储介质 |
| CN109298864A (zh) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | 教育平台下的自动化生成项目骨架屏的方法及电子设备 |
| CN109857971A (zh) * | 2019-02-01 | 2019-06-07 | 天津字节跳动科技有限公司 | 页面渲染方法和装置 |
-
2019
- 2019-06-19 CN CN201910531949.7A patent/CN110275705A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10083218B1 (en) * | 2017-06-30 | 2018-09-25 | Konica Minolta Laboratory U.S.A., Inc. | Repairing tables |
| CN109298864A (zh) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | 教育平台下的自动化生成项目骨架屏的方法及电子设备 |
| CN109254773A (zh) * | 2018-09-19 | 2019-01-22 | 广州视源电子科技股份有限公司 | 骨架页面生成方法、装置、设备和存储介质 |
| CN109857971A (zh) * | 2019-02-01 | 2019-06-07 | 天津字节跳动科技有限公司 | 页面渲染方法和装置 |
Non-Patent Citations (1)
| Title |
|---|
| 花满楼的小前端A: ""用纯DOM的方法结合Puppeteer自动生成网页骨架屏"", 《HTTP://WWW.IMOOC.COM/ARTICLE/253387》 * |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110807161A (zh) * | 2019-11-08 | 2020-02-18 | 深圳乐信软件技术有限公司 | 一种页面骨架渲染方法、装置、设备及介质 |
| CN111078198A (zh) * | 2019-11-25 | 2020-04-28 | 网易（杭州）网络有限公司 | 前端页面处理方法、装置、设备及计算机可读存储介质 |
| CN111221610A (zh) * | 2020-01-03 | 2020-06-02 | 中国建设银行股份有限公司 | 一种页面元素采集方法和装置 |
| CN111221525A (zh) * | 2020-01-09 | 2020-06-02 | 北京金山安全软件有限公司 | 一种脚本代码的生成方法、装置、电子设备及存储介质 |
| CN111475156A (zh) * | 2020-04-13 | 2020-07-31 | 北京金堤科技有限公司 | 页面代码生成方法和装置、电子设备和存储介质 |
| CN111475156B (zh) * | 2020-04-13 | 2024-04-02 | 北京金堤科技有限公司 | 页面代码生成方法和装置、电子设备和存储介质 |
| CN116069379A (zh) * | 2023-01-28 | 2023-05-05 | 深圳市明源云科技有限公司 | 二次开发功能的识别方法、装置、设备及介质 |
| CN116069379B (zh) * | 2023-01-28 | 2023-08-04 | 深圳市明源云科技有限公司 | 二次开发功能的识别方法、装置、设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110275705A (zh) | 生成预加载页面代码的方法、装置、设备及存储介质 | |
| CN108304498B (zh) | 网页数据采集方法、装置、计算机设备和存储介质 | |
| CN110442816B (zh) | 网页表单配置方法、装置及计算机可读存储介质 | |
| US11366676B2 (en) | Embedded user assistance for software applications | |
| US20190303269A1 (en) | Methods and systems for testing visual aspects of a web page | |
| US20080127097A1 (en) | Method and devices for url command testing and for scenario testing | |
| CN104956362A (zh) | 分析web应用程序的结构 | |
| EP3559820A1 (en) | Systems and methods for conversion of web content into reusable templates and components | |
| CA2911670A1 (en) | System and method for identifying web elements present on a web-page | |
| US9275018B2 (en) | Techniques for analyzing web pages to determine font subsets | |
| CN108595697B (zh) | 网页集成方法、装置及系统 | |
| CN112417240A (zh) | 网站链接检测方法、装置、计算机设备 | |
| CN106155654B (zh) | 屏蔽网页操作的方法、装置及电子设备 | |
| US10248392B2 (en) | Replicating a web technology | |
| US10970465B2 (en) | Web page manipulation | |
| CN111797336A (zh) | 一种网页解析方法、装置、电子设备及介质 | |
| CN104899217B (zh) | 一种自定义功能的实现方法及装置 | |
| WO2016118142A1 (en) | In-line editor insertion | |
| CN106033387A (zh) | 测试flash内部控件的方法和装置 | |
| US20080155493A1 (en) | Method for ensuring unique identification of program elements across multiple executions | |
| CN109558123A (zh) | 网页转化电子书的方法、电子设备、存储介质 | |
| JP4890051B2 (ja) | ブラウザ画面の表示装置およびそのためのプログラム | |
| EP3262531A1 (en) | Element identifier generation | |
| CN110399077A (zh) | 元素处理方法及装置、存储介质、电子装置 | |
| US11550990B2 (en) | Machine first approach for identifying accessibility, non-compliances, remediation techniques and fixing at run-time |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190924 |