CN112765507A - 一种页面首屏渲染与资源加载方法、装置和电子设备 - Google Patents
一种页面首屏渲染与资源加载方法、装置和电子设备 Download PDFInfo
- Publication number
- CN112765507A CN112765507A CN202110109930.0A CN202110109930A CN112765507A CN 112765507 A CN112765507 A CN 112765507A CN 202110109930 A CN202110109930 A CN 202110109930A CN 112765507 A CN112765507 A CN 112765507A
- Authority
- CN
- China
- Prior art keywords
- resource
- cache
- loading
- cache resource
- rendering
- 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.)
- Granted
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 100
- 238000000034 method Methods 0.000 title claims abstract description 77
- 238000009877 rendering Methods 0.000 title claims abstract description 45
- 230000008569 process Effects 0.000 claims abstract description 43
- 230000032683 aging Effects 0.000 claims description 5
- 238000010586 diagram Methods 0.000 description 10
- 238000004590 computer program Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 239000003795 chemical substances by application Substances 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000003054 catalyst Substances 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000000926 separation method Methods 0.000 description 1
Images
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/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
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
技术领域
本发明涉及计算机技术领域，尤其涉及一种页面首屏渲染与资源加载方法、装置和电子设备。
背景技术
当今智能手机成为普及的随身之物，手机浏览网页和网页应用程序广泛应用在手机端作为载体服务于每一个手机用户，也是各个服务商获取流量和高效运营的一种技术方案，当手机浏览器在用户阅览时首先需要请求资源响应，随着网页应用程序日新月异的变化使其功能和用途越来越丰富，业务承载更为复杂，加之前后端分离主流技术背景下，前端资源愈发庞大，在这一个过程中如何做好给用户一个快速流畅响应体验是获取用户量的前提，在用户操作使用网页应用程序过程中如何做好流程关键步骤的资源加载以及性能优化，是用户是否能得到优质交互体验服务的指标，美好的交互体验和快速高效流程体验是流量转化为价值用户的催化剂，我们应当竭尽全力追求运用最好的技术手段从流量入口首屏渲染获取用户，在流程过程中高效转化用户并给予用户正回馈，与此同时我们也考虑企业的运营成本和服务器开销，还有用户的网络流量损耗和手机运行性能开销。
发明内容
本发明提供了一种页面首屏渲染与资源加载方法、装置和电子设备，用于在加载过程中会以最快速度直接拉取缓存资源和数据进行渲染，减少企业的运营成本和服务器开销，以及减少用户的网络流量损耗和手机运行性能开销。
本说明书实施例提供一种页面首屏渲染与资源加载方法，包括：
于服务器获取首屏数据；
对所述首屏数据进行编译和渲染，并执行脚本注册；
发送资源加载请求，所述脚本根据所述资源加载请求判断是否命中缓存资源；
根据判断结果对所述缓存资源加载和/或缓存。
优选的，所述于服务器获取首屏数据，包括：
客户端向服务器发起请求指令；
所述服务器根据所述请求指令生成所述客户端能识别渲染的首屏数据，并将所述首屏数据以预设格式发送至所述客户端。
优选的，所述根据判断结果对所述缓存资源加载和/或缓存，包括：
所述缓存资源包括第一缓存资源和第二缓存资源；
如果所述缓存资源命中，则判断所述第一缓存资源是否有相对应的缓存资源；
如果所述缓存资源未命中，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
优选的，所述判断所述第一缓存资源是否有相对应的缓存资源，包括：
当所述第一缓存资源不存在相对应的缓存资源，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存；
当所述第一缓存资源存在相对应的缓存资源，则进行资源时效对比拉取所述缓存资源进行加载和/或缓存；
所述第一缓存资源为客户端的缓存资源，所述第二缓存资源为服务器的缓存资源。
优选的，所述进行资源时效对比拉取所述缓存资源进行加载和/或缓存，包括：
当所述第一缓存资源有效，则于所述第一缓存资源拉取所述缓存资源进行加载；
当所述第一缓存资源无效，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
优选的，当加载和缓存所述缓存资源时，对所述缓存资源进行分段式加载和缓存；
当用户操作抵达到N阶段流程，则请求加载和缓存N阶段流程涉及到的所述缓存资源；
当用户从未操作抵达N阶段流程，则不加载也不缓存N阶段以及N阶段之后流程的所述缓冲资源；
当用户操作未到达N阶段流程，根据资源必要性，则预先加载和缓存N+1阶段流程必要所述缓冲资源，不加载也不缓存N+2及之后阶段流程的所述缓冲资源。
优选的，当网络处于离线或信号差的情况时，则加载所述第一缓存资源。
本说明书实施例还提供一种页面首屏渲染与资源加载装置，其特征在于，包括：
首屏数据获取模块，于服务器获取首屏数据；
渲染模块，对所述首屏数据进行编译和渲染，并执行脚本注册；
资源请求模块，发送资源加载请求，所述脚本根据所述资源加载请求判断是否命中缓存资源；
资源加载模块，根据判断结果对所述缓存资源加载和/或缓存。
优选的，所述于服务器获取首屏数据，包括：
客户端向服务器发起请求指令；
所述服务器根据所述请求指令生成所述客户端能识别渲染的首屏数据，并将所述首屏数据以预设格式发送至所述客户端。
优选的，所述根据判断结果对所述缓存资源加载和/或缓存，包括：
所述缓存资源包括第一缓存资源和第二缓存资源；
如果所述缓存资源命中，则判断所述第一缓存资源是否有相对应的缓存资源；
如果所述缓存资源未命中，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
优选的，所述判断所述第一缓存资源是否有相对应的缓存资源，包括：
当所述第一缓存资源不存在相对应的缓存资源，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存；
当所述第一缓存资源存在相对应的缓存资源，则进行资源时效对比拉取所述缓存资源进行加载和/或缓存；
所述第一缓存资源为客户端的缓存资源，所述第二缓存资源为服务器的缓存资源。
优选的，所述进行资源时效对比拉取所述缓存资源进行加载和/或缓存，包括：
当所述第一缓存资源有效，则于所述第一缓存资源拉取所述缓存资源进行加载；
当所述第一缓存资源无效，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
优选的，当加载和缓存所述缓存资源时，对所述缓存资源进行分段式加载和缓存；
当用户操作抵达到N阶段流程，则请求加载和缓存N阶段流程涉及到的所述缓存资源；
当用户从未操作抵达N阶段流程，则不加载也不缓存N阶段以及N阶段之后流程的所述缓冲资源；
当用户操作未到达N阶段流程，根据资源必要性，则预先加载和缓存N+1阶段流程必要所述缓冲资源，不加载也不缓存N+2及之后阶段流程的所述缓冲资源。
优选的，当网络处于离线或信号差的情况时，则加载所述第一缓存资源。
一种电子设备，其中，该电子设备包括：
处理器以及存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行上述任一项所述的方法。
一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现上述任一项所述的方法。
其有益效果在于：
本发明在加载过程中会以最快速度直接拉取缓存资源和数据进行渲染，无需经过漫长请求经服务器处理响应后再渲染和执行；从流量入口首屏渲染获取用户，在运行过程中高效转化用户并给予用户正回馈，同时减少企业的运营成本和服务器开销，以及减少用户的网络流量损耗和手机运行性能开销。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1为本说明书实施例提供的一种页面首屏渲染与资源加载方法的原理示意图；
图2为本说明书实施例提供的一种页面首屏渲染与资源加载装置的结构示意图；
图3为本说明书实施例提供的一种电子设备的结构示意图；
图4为本说明书实施例提供的一种计算机可读介质的原理示意图。
具体实施方式
现在将参考附图更全面地描述本发明的示例性实施例。然而，示例性实施例能够以多种形式实施，且不应被理解为本发明仅限于在此阐述的实施例。相反，提供这些示例性实施例能够使得本发明更加全面和完整，更加便于将发明构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的元件、组件或部分，因而将省略对它们的重复描述。
在符合本发明的技术构思的前提下，在某个特定的实施例中描述的特征、结构、特性或其他细节不排除可以以合适的方式结合在一个或更多其他的实施例中。
在对于具体实施例的描述中，本发明描述的特征、结构、特性或其他细节是为了使本领域的技术人员对实施例进行充分理解。但是，并不排除本领域技术人员可以实践本发明的技术方案而没有特定特征、结构、特性或其他细节的一个或更多。
附图中所示的图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
术语“和/或”或者“及/或”包括相关联的列出项目中的任一个或多者的所有组合。
参照图1为本说明书实施例提供的一种页面首屏渲染与资源加载方法的原理示意图，包括：
S101：于服务器获取首屏数据；
在本发明较佳的实施例中，客户端浏览器发送一个获取首屏数据的请求，node中间服务器将获取首屏数据的请求转送至后端服务器，然后服务器对其请求进行响应，返回给node中间服务器响应的首屏数据，最后node中间服务器根据返回的首屏数据生成所述客户端浏览器能识别渲染的首屏数据，并将首屏数据以预设格式发送至客户端浏览器。
S102：对所述首屏数据进行编译和渲染，并执行脚本注册；
在本发明较佳的实施例中，客户端浏览器的引擎对获取的预设格式的首屏数据进行编译，然后直接渲染，并于渲染后执行service-worker注册，将service-worker作为资源请求代理，监听资源是否匹配请求。
S103：发送资源加载请求，所述脚本根据所述资源加载请求判断是否命中缓存资源；
在本发明较佳的实施例中，service-worker中的脚本执行脚本任务，当service-worker接收到用户的资源加载请求，service-worker中的脚本会执行与用户的资源加载请求相对应的脚本任务，判断资源加载请求是否命中服务器缓存资源或客户端缓存资源，或是服务器缓存资源或客户端缓存资源均未命中。
S104：根据判断结果对所述缓存资源加载和/或缓存。
在本发明较佳的实施例中，如果所述缓存资源命中，则判断客户端缓存资源是否有相对应的缓存资源，当客户端缓存资源不存在相对应的缓存资源，则于服务器缓存资源拉取所述缓存资源至客户端进行加载和缓存；当客户端缓存资源存在相对应的缓存资源，则进行资源时效对比拉取所述缓存资源进行加载和/或缓存；如果所述缓存资源未命中，则于服务器缓存资源拉取所述缓存资源至客户端进行加载和缓存。
进一步地，所述于服务器获取首屏数据，包括：
客户端向服务器发起请求指令；
所述服务器根据所述请求指令生成所述客户端能识别渲染的首屏数据，并将所述首屏数据以预设格式发送至所述客户端。
在本发明较佳的实施例中，客户端浏览器向node中间服务器发送一个获取首屏数据的请求指令，node中间服务器将获取首屏数据的请求指令转送至后端服务器，然后服务器对其请求指令进行响应，返回给node中间服务器相应的首屏数据，最后node中间服务器根据返回的首屏数据生成所述客户端浏览器能识别渲染的首屏数据，并将首屏数据以预设格式发送至客户端浏览器。
进一步地，所述根据判断结果对所述缓存资源加载和/或缓存，包括：
所述缓存资源包括第一缓存资源和第二缓存资源；
如果所述缓存资源命中，则判断所述第一缓存资源是否有相对应的缓存资源；
如果所述缓存资源未命中，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
在本发明较佳的实施例中，当资源请求命中缓存资源，则判断资源请求命中的缓存资源是否是客户端缓存资源，若不是，则命中的缓存资源存在于服务器缓存资源，于服务器缓存资源拉取缓存资源至客户端进行加载和缓存；当资源请求未命中缓存资源，则直接于服务器缓存资源拉取缓存资源至客户端进行加载和缓存。
进一步地，所述判断所述第一缓存资源是否有相对应的缓存资源，包括：
当所述第一缓存资源不存在相对应的缓存资源，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存；
当所述第一缓存资源存在相对应的缓存资源，则进行资源时效对比拉取所述缓存资源进行加载和/或缓存；
所述第一缓存资源为客户端的缓存资源，所述第二缓存资源为服务器的缓存资源。
在本发明较佳的实施例中，当客户端缓存资源不存在相对应的缓存资源，则于服务器缓存资源拉取所述缓存资源至客户端进行加载和缓存；当客户端缓存资源存在相对应的缓存资源，则进行资源时效对比，当客户端缓存资源有效，则于客户端缓存资源拉取所述缓存资源至进行加载；当客户端缓存资源无效，则于服务器缓存资源拉取所述缓存资源至客户端进行加载和缓存。
进一步地，所述进行资源时效对比拉取所述缓存资源进行加载和/或缓存，包括：
当所述第一缓存资源有效，则于所述第一缓存资源拉取所述缓存资源进行加载；
当所述第一缓存资源无效，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
在本发明较佳的实施例中，当客户端缓存资源有效，则于客户端缓存资源拉取所述缓存资源至进行加载；当客户端缓存资源无效，则于服务器缓存资源拉取所述缓存资源至客户端进行加载和缓存。
进一步地，当加载和缓存所述缓存资源时，对所述缓存资源进行分段式加载和缓存；
当用户操作抵达到N阶段流程，则请求加载和缓存N阶段流程涉及到的所述缓存资源；
当用户从未操作抵达N阶段流程，则不加载也不缓存N阶段以及N阶段之后流程的所述缓冲资源；
当用户操作未到达N阶段流程，根据资源必要性，则预先加载和缓存N+1阶段流程必要所述缓冲资源，不加载也不缓存N+2及之后阶段流程的所述缓冲资源。
在本发明较佳的实施例中，当用户操作网页应用程序抵达到N阶段流程，则请求加载和缓存N阶段流程涉及到的缓存资源；当用户从未操作抵达网页应用程序的N阶段流程，则不加载也不缓存N阶段以及N阶段之后流程的缓冲资源；当用户操作未到达网页应用程序的N阶段流程，则根据资源必要性，预先加载和缓存N+1阶段流程必要所述缓冲资源，不加载也不缓存N+2及之后阶段流程的缓冲资源。当从服务器拉取缓存资源时，需要在加载缓存后对客户端的缓存资源进行更新。
进一步地，当网络处于离线或信号差的情况时，则加载所述第一缓存资源。
在本发明较佳的实施例中，当用户使用网页程序网络处于离线或信号差的情况时，脚本会执行直接加载客户端缓存资源，由于主流程会根据资源匹配缓存对应资源和数据，所以程序可正常使用与展示，涉及到需实时数据通信完成的功能，则需要做出对应网络提示交互。
本发明在加载过程中会以最快速度直接拉取缓存资源和数据进行渲染，无需经过漫长请求经服务器处理响应后再渲染和执行；从流量入口首屏渲染获取用户，在运行过程中高效转化用户并给予用户正回馈，同时减少企业的运营成本和服务器开销，以及减少用户的网络流量损耗和手机运行性能开销。
图2为本说明书实施例提供的一种页面首屏渲染与资源加载装置的结构示意图，包括：
首屏数据获取模块201，于服务器获取首屏数据；
在本发明较佳的实施例中，客户端浏览器发送一个获取首屏数据的请求，node中间服务器将获取首屏数据的请求转送至后端服务器，然后服务器对其请求进行响应，返回给node中间服务器响应的首屏数据，最后node中间服务器根据返回的首屏数据生成所述客户端浏览器能识别渲染的首屏数据，并将首屏数据以预设格式发送至客户端浏览器。
渲染模块202，对所述首屏数据进行编译和渲染，并执行脚本注册；
在本发明较佳的实施例中，客户端浏览器的引擎对获取的预设格式的首屏数据进行编译，然后直接渲染，并于渲染后执行service-worker注册，将service-worker作为资源请求代理，监听资源是否匹配请求。
资源请求模块203，发送资源加载请求，所述脚本根据所述资源加载请求判断是否命中缓存资源；
在本发明较佳的实施例中，service-worker中的脚本执行脚本任务，当service-worker接收到用户的资源加载请求，service-worker中的脚本会执行与用户的资源加载请求相对应的脚本任务，判断资源加载请求是否命中服务器缓存资源或客户端缓存资源，或是服务器缓存资源或客户端缓存资源均未命中。
资源加载模块204，根据判断结果对所述缓存资源加载和/或缓存。
在本发明较佳的实施例中，如果所述缓存资源命中，则判断客户端缓存资源是否有相对应的缓存资源，当客户端缓存资源不存在相对应的缓存资源，则于服务器缓存资源拉取所述缓存资源至客户端进行加载和缓存；当客户端缓存资源存在相对应的缓存资源，则进行资源时效对比拉取所述缓存资源进行加载和/或缓存；如果所述缓存资源未命中，则于服务器缓存资源拉取所述缓存资源至客户端进行加载和缓存。
进一步地，所述于服务器获取首屏数据，包括：
客户端向服务器发起请求指令；
所述服务器根据所述请求指令生成所述客户端能识别渲染的首屏数据，并将所述首屏数据以预设格式发送至所述客户端。
进一步地，所述根据判断结果对所述缓存资源加载和/或缓存，包括：
所述缓存资源包括第一缓存资源和第二缓存资源；
如果所述缓存资源命中，则判断所述第一缓存资源是否有相对应的缓存资源；
如果所述缓存资源未命中，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
进一步地，所述判断所述第一缓存资源是否有相对应的缓存资源，包括：
当所述第一缓存资源不存在相对应的缓存资源，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存；
当所述第一缓存资源存在相对应的缓存资源，则进行资源时效对比拉取所述缓存资源进行加载和/或缓存；
所述第一缓存资源为客户端的缓存资源，所述第二缓存资源为服务器的缓存资源。
进一步地，所述进行资源时效对比拉取所述缓存资源进行加载和/或缓存，包括：
当所述第一缓存资源有效，则于所述第一缓存资源拉取所述缓存资源进行加载；
当所述第一缓存资源无效，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
进一步地，当加载和缓存所述缓存资源时，对所述缓存资源进行分段式加载和缓存；
当用户操作抵达到N阶段流程，则请求加载和缓存N阶段流程涉及到的所述缓存资源；
当用户从未操作抵达N阶段流程，则不加载也不缓存N阶段以及N阶段之后流程的所述缓冲资源；
当用户操作未到达N阶段流程，根据资源必要性，则预先加载和缓存N+1阶段流程必要所述缓冲资源，不加载也不缓存N+2及之后阶段流程的所述缓冲资源。
进一步地，当网络处于离线或信号差的情况时，则加载所述第一缓存资源。
本发明在加载过程中会以最快速度直接拉取缓存资源和数据进行渲染，无需经过漫长请求经服务器处理响应后再渲染和执行；从流量入口首屏渲染获取用户，在运行过程中高效转化用户并给予用户正回馈，同时减少企业的运营成本和服务器开销，以及减少用户的网络流量损耗和手机运行性能开销。
基于同一发明构思，本说明书实施例还提供一种电子设备。
下面描述本发明的电子设备实施例，该电子设备可以视为对于上述本发明的方法和装置实施例的具体实体实施方式。对于本发明电子设备实施例中描述的细节，应视为对于上述方法或装置实施例的补充；对于在本发明电子设备实施例中未披露的细节，可以参照上述方法或装置实施例来实现。
参照图3为本说明书实施例提供的一种电子设备的结构示意图。下面参照图3来描述根据本发明该实施例的电子设备300。图3显示的电子设备300仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图3所示，电子设备300以通用计算设备的形式表现。电子设备300的组件可以包括但不限于：至少一个处理单元310、至少一个存储单元320、连接不同装置组件(包括存储单元320和处理单元310)的总线330、显示单元340等。
其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元310执行，使得所述处理单元310执行本说明书上述处理方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元310可以执行如图1所示的步骤。
所述存储单元320可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)3201和/或高速缓存存储单元3202，还可以进一步包括只读存储单元(ROM)3203。
所述存储单元320还可以包括具有一组(至少一个)程序模块3205的程序/实用工具3204，这样的程序模块3205包括但不限于：操作装置、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线330可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备300也可以与一个或多个外部设备400(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备300交互的设备通信，和/或与使得该电子设备300能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口350进行。并且，电子设备300还可以通过网络适配器360与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器360可以通过总线330与电子设备300的其它模块通信。应当明白，尽管图3中未示出，可以结合电子设备300使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID装置、磁带驱动器以及数据备份存储装置等。
通过以上的实施方式的描述，本领域的技术人员易于理解，本发明描述的示例性实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本发明实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个计算机可读的存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、或者网络设备等)执行根据本发明的上述方法。当所述计算机程序被一个数据处理设备执行时，使得该计算机可读介质能够实现本发明的上述方法，即：如图1所示的方法。
参照图4为本说明书实施例提供的一种计算机可读介质的原理示意图。
实现图1所示方法的计算机程序可以存储于一个或多个计算机可读介质上。计算机可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的装置、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行装置、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
综上所述，本发明可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)等通用数据处理设备来实现根据本发明实施例中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，应理解的是，本发明不与任何特定计算机、虚拟装置或者电子设备固有相关，各种通用装置也可以实现本发明。以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。
以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。
Claims (10)
1.一种页面首屏渲染与资源加载方法，其特征在于，包括：
于服务器获取首屏数据；
对所述首屏数据进行编译和渲染，并执行脚本注册；
发送资源加载请求，所述脚本根据所述资源加载请求判断是否命中缓存资源；
根据判断结果对所述缓存资源加载和/或缓存。
2.如权利要求1所述的一种页面首屏渲染与资源加载方法，其特征在于，所述于服务器获取首屏数据，包括：
客户端向服务器发起请求指令；
所述服务器根据所述请求指令生成所述客户端能识别渲染的首屏数据，并将所述首屏数据以预设格式发送至所述客户端。
3.如权利要求1或2所述的一种页面首屏渲染与资源加载方法，其特征在于，所述根据判断结果对所述缓存资源加载和/或缓存，包括：
所述缓存资源包括第一缓存资源和第二缓存资源；
如果所述缓存资源命中，则判断所述第一缓存资源是否有相对应的缓存资源；
如果所述缓存资源未命中，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
4.如权利要求1-3中任一项所述的一种页面首屏渲染与资源加载方法，其特征在于，所述判断所述第一缓存资源是否有相对应的缓存资源，包括：
当所述第一缓存资源不存在相对应的缓存资源，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存；
当所述第一缓存资源存在相对应的缓存资源，则进行资源时效对比拉取所述缓存资源进行加载和/或缓存；
所述第一缓存资源为客户端的缓存资源，所述第二缓存资源为服务器的缓存资源。
5.如权利要求1-4中任一项所述的一种页面首屏渲染与资源加载方法，其特征在于，所述进行资源时效对比拉取所述缓存资源进行加载和/或缓存，包括：
当所述第一缓存资源有效，则于所述第一缓存资源拉取所述缓存资源进行加载；
当所述第一缓存资源无效，则于第二缓存资源拉取所述缓存资源至客户端进行加载和缓存。
6.如权利要求1-5中任一项所述的一种页面首屏渲染与资源加载方法，其特征在于，当加载和缓存所述缓存资源时，对所述缓存资源进行分段式加载和缓存；
当用户操作抵达到N阶段流程，则请求加载和缓存N阶段流程涉及到的所述缓存资源；
当用户从未操作抵达N阶段流程，则不加载也不缓存N阶段以及N阶段之后流程的所述缓冲资源；
当用户操作未到达N阶段流程，根据资源必要性，则预先加载和缓存N+1阶段流程必要所述缓冲资源，不加载也不缓存N+2及之后阶段流程的所述缓冲资源。
7.如权利要求1-6中任一项所述的一种页面首屏渲染与资源加载方法，其特征在于，当网络处于离线或信号差的情况时，则加载所述第一缓存资源。
8.一种页面首屏渲染与资源加载装置，其特征在于，包括：
首屏数据获取模块，于服务器获取首屏数据；
渲染模块，对所述首屏数据进行编译和渲染，并执行脚本注册；
资源请求模块，发送资源加载请求，所述脚本根据所述资源加载请求判断是否命中缓存资源；
资源加载模块，根据判断结果对所述缓存资源加载和/或缓存。
9.一种电子设备，其中，该电子设备包括：
处理器以及存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行根据权利要求1-7中任一项所述的方法。
10.一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现权利要求1-7中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110109930.0A CN112765507B (zh) | 2021-01-27 | 2021-01-27 | 一种页面首屏渲染与资源加载方法、装置和电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110109930.0A CN112765507B (zh) | 2021-01-27 | 2021-01-27 | 一种页面首屏渲染与资源加载方法、装置和电子设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112765507A true CN112765507A (zh) | 2021-05-07 |
| CN112765507B CN112765507B (zh) | 2023-12-26 |
Family
ID=75707442
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110109930.0A Active CN112765507B (zh) | 2021-01-27 | 2021-01-27 | 一种页面首屏渲染与资源加载方法、装置和电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112765507B (zh) |
Citations (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1889737A (zh) * | 2006-07-21 | 2007-01-03 | 华为技术有限公司 | 一种资源管理的方法和系统 |
| WO2014134234A1 (en) * | 2013-03-01 | 2014-09-04 | Facebook, Inc. | Caching pagelets of structured documents |
| CN104065637A (zh) * | 2013-07-10 | 2014-09-24 | 腾讯科技（深圳）有限公司 | 网页游戏运行的方法及装置 |
| US20150215417A1 (en) * | 2012-08-20 | 2015-07-30 | International Business Machines Corporation | Managing a Data Cache for a Computer System |
| CN106095521A (zh) * | 2016-08-02 | 2016-11-09 | 北京奇虎科技有限公司 | 插件加载方法及装置 |
| CN106936930A (zh) * | 2017-04-25 | 2017-07-07 | 杭州禹乐网络科技有限公司 | 一种网页游戏的防断线方法及装置 |
| US20170346876A1 (en) * | 2016-05-27 | 2017-11-30 | Microsoft Technology Licensing, Llc | Web page accelerations for web application hosted in native mobile application |
| CN107526751A (zh) * | 2016-06-22 | 2017-12-29 | 广州市动景计算机科技有限公司 | 网页的加载方法、客户端、网页服务器及可编程设备 |
| CN107729516A (zh) * | 2017-10-26 | 2018-02-23 | 北京百度网讯科技有限公司 | 单页应用展示方法和装置、服务器、设备及可读介质 |
| CN108762833A (zh) * | 2018-05-16 | 2018-11-06 | 北京安云世纪科技有限公司 | 安卓系统中的应用启动方法和装置 |
| CN108874922A (zh) * | 2018-05-31 | 2018-11-23 | 康键信息技术（深圳）有限公司 | 客户端设备、基于单页应用的网页渲染方法和存储介质 |
| CN110442811A (zh) * | 2019-08-14 | 2019-11-12 | 广州虎牙科技有限公司 | 一种页面的处理方法、装置、计算机设备和存储介质 |
| CN110442808A (zh) * | 2019-06-28 | 2019-11-12 | 苏宁云计算有限公司 | 页面渲染加速方法和装置 |
| CN110825479A (zh) * | 2019-11-05 | 2020-02-21 | 江苏满运软件科技有限公司 | 页面处理方法、装置、终端设备、服务器和存储介质 |
| CN111143725A (zh) * | 2019-11-15 | 2020-05-12 | 北京字节跳动网络技术有限公司 | 页面生成方法、装置和电子设备 |
| CN111191158A (zh) * | 2019-12-27 | 2020-05-22 | 北京达佳互联信息技术有限公司 | 网页资源缓存方法、装置、计算机设备和存储介质 |
| CN111506844A (zh) * | 2020-04-08 | 2020-08-07 | 聚好看科技股份有限公司 | 页面处理方法、设备及计算机存储介质 |
| CN111639289A (zh) * | 2020-05-13 | 2020-09-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
| CN111708600A (zh) * | 2020-08-20 | 2020-09-25 | 腾讯科技（深圳）有限公司 | 页面显示方法、装置、设备及计算机可读存储介质 |
| CN111880790A (zh) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | 页面渲染方法、页面渲染系统和计算机可读存储介质 |
| CN111966938A (zh) * | 2020-09-11 | 2020-11-20 | 苏州浪潮智能科技有限公司 | 一种实现云平台前端页面加载速度提升的配置方法及系统 |
| CN112149017A (zh) * | 2020-09-14 | 2020-12-29 | 京东数字科技控股股份有限公司 | 一种网页访问方法、装置、系统、电子设备及存储介质 |
| CN112231604A (zh) * | 2020-06-12 | 2021-01-15 | 北京沃东天骏信息技术有限公司 | 一种页面显示方法、装置、电子设备和存储介质 |
-
2021
- 2021-01-27 CN CN202110109930.0A patent/CN112765507B/zh active Active
Patent Citations (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1889737A (zh) * | 2006-07-21 | 2007-01-03 | 华为技术有限公司 | 一种资源管理的方法和系统 |
| US20150215417A1 (en) * | 2012-08-20 | 2015-07-30 | International Business Machines Corporation | Managing a Data Cache for a Computer System |
| WO2014134234A1 (en) * | 2013-03-01 | 2014-09-04 | Facebook, Inc. | Caching pagelets of structured documents |
| CN104065637A (zh) * | 2013-07-10 | 2014-09-24 | 腾讯科技（深圳）有限公司 | 网页游戏运行的方法及装置 |
| US20170346876A1 (en) * | 2016-05-27 | 2017-11-30 | Microsoft Technology Licensing, Llc | Web page accelerations for web application hosted in native mobile application |
| CN107526751A (zh) * | 2016-06-22 | 2017-12-29 | 广州市动景计算机科技有限公司 | 网页的加载方法、客户端、网页服务器及可编程设备 |
| CN106095521A (zh) * | 2016-08-02 | 2016-11-09 | 北京奇虎科技有限公司 | 插件加载方法及装置 |
| CN106936930A (zh) * | 2017-04-25 | 2017-07-07 | 杭州禹乐网络科技有限公司 | 一种网页游戏的防断线方法及装置 |
| CN107729516A (zh) * | 2017-10-26 | 2018-02-23 | 北京百度网讯科技有限公司 | 单页应用展示方法和装置、服务器、设备及可读介质 |
| CN108762833A (zh) * | 2018-05-16 | 2018-11-06 | 北京安云世纪科技有限公司 | 安卓系统中的应用启动方法和装置 |
| CN108874922A (zh) * | 2018-05-31 | 2018-11-23 | 康键信息技术（深圳）有限公司 | 客户端设备、基于单页应用的网页渲染方法和存储介质 |
| CN110442808A (zh) * | 2019-06-28 | 2019-11-12 | 苏宁云计算有限公司 | 页面渲染加速方法和装置 |
| CN110442811A (zh) * | 2019-08-14 | 2019-11-12 | 广州虎牙科技有限公司 | 一种页面的处理方法、装置、计算机设备和存储介质 |
| CN110825479A (zh) * | 2019-11-05 | 2020-02-21 | 江苏满运软件科技有限公司 | 页面处理方法、装置、终端设备、服务器和存储介质 |
| CN111143725A (zh) * | 2019-11-15 | 2020-05-12 | 北京字节跳动网络技术有限公司 | 页面生成方法、装置和电子设备 |
| CN111191158A (zh) * | 2019-12-27 | 2020-05-22 | 北京达佳互联信息技术有限公司 | 网页资源缓存方法、装置、计算机设备和存储介质 |
| CN111506844A (zh) * | 2020-04-08 | 2020-08-07 | 聚好看科技股份有限公司 | 页面处理方法、设备及计算机存储介质 |
| CN111639289A (zh) * | 2020-05-13 | 2020-09-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
| CN111880790A (zh) * | 2020-06-12 | 2020-11-03 | 北京三快在线科技有限公司 | 页面渲染方法、页面渲染系统和计算机可读存储介质 |
| CN112231604A (zh) * | 2020-06-12 | 2021-01-15 | 北京沃东天骏信息技术有限公司 | 一种页面显示方法、装置、电子设备和存储介质 |
| CN111708600A (zh) * | 2020-08-20 | 2020-09-25 | 腾讯科技（深圳）有限公司 | 页面显示方法、装置、设备及计算机可读存储介质 |
| CN111966938A (zh) * | 2020-09-11 | 2020-11-20 | 苏州浪潮智能科技有限公司 | 一种实现云平台前端页面加载速度提升的配置方法及系统 |
| CN112149017A (zh) * | 2020-09-14 | 2020-12-29 | 京东数字科技控股股份有限公司 | 一种网页访问方法、装置、系统、电子设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112765507B (zh) | 2023-12-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11144711B2 (en) | Webpage rendering method, device, electronic apparatus and storage medium | |
| EP3896567B1 (en) | Page pre-rendering method and apparatus, electronic device, and storage medium | |
| US7320023B2 (en) | Mechanism for caching dynamically generated content | |
| CN103092581B (zh) | 一种Web前端本地开发环境的搭建方法和装置 | |
| US20070101061A1 (en) | Customized content loading mechanism for portions of a web page in real time environments | |
| US8621092B2 (en) | Remote portlet consumer with enhanced resource URL processing | |
| JP2012522322A (ja) | ページをレンダリングするための装置および方法 | |
| WO2011041556A1 (en) | Methods and apparatus for producing cross-platform software applications | |
| EP1872208A1 (en) | Method and apparatus to select and deliver portable portlets | |
| CN101799821B (zh) | 一种通过微件实现网页应用的方法及系统 | |
| WO2013130328A1 (en) | Persistent storage of profile data for script compilation | |
| JP2009501372A (ja) | グラフィカル・トポロジ表示としてデータを表現させるための、コンピュータにより実施される方法、システム、およびコンピュータ・プログラム（グラフィカル・トポロジ表示としてデータを表現させるための、コンピュータにより実施される方法） | |
| CN111198996A (zh) | 一种页面展示的方法、装置和电子设备 | |
| CN110795649A (zh) | 目标页面展示方法、装置、系统及电子设备 | |
| CN111949419A (zh) | 一种跨环境资源获取方法、装置和电子设备 | |
| CN111881394B (zh) | 一种应用中间层的请求处理方法及系统 | |
| US9009600B2 (en) | Filter module for a browser history | |
| CN111310005A (zh) | 网络请求的处理方法及装置、服务器和存储介质 | |
| EP3304293B1 (en) | Code caching system | |
| CN102156697A (zh) | 一种通过微件实现网页应用的方法及终端设备 | |
| CN112491940B (zh) | 代理服务器的请求转发方法及装置、存储介质及电子设备 | |
| CN112394907A (zh) | 基于容器的交付系统构建方法、应用交付方法和交付系统 | |
| US20140129666A1 (en) | Preemptive caching of data | |
| CN112765507A (zh) | 一种页面首屏渲染与资源加载方法、装置和电子设备 | |
| JP2009294836A (ja) | Ｗｅｂ検索において選択的に擬似フィードバック処理を適用する検索処理装置、方法及びプログラム |
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 |