[发明专利]控制页面资源执行的方法及装置

说明书

本公开涉及一种控制页面资源执行的方法及装置。该方法包括：针对组件化页面的非叶子节点页面，将非叶子节点页面的DOM加载并渲染作为非叶子节点页面的第一异步过程，将对非叶子节点页面的工具类脚本加载并执行作为非叶子节点页面的第二异步过程；针对组件化页面的非叶子节点页面，分别执行非叶子节点页面的第一异步过程及第二异步过程；响应于非叶子节点页面的第一异步过程完成且非叶子节点页面的第二异步过程完成且非叶子节点页面的所有直接子页面的页面初始化脚本执行完成，执行非叶子节点页面的页面初始化脚本，由于资源异步加载且脚本按照组件化页面的树形嵌套结构按序执行，实现了加快页面响应速度的目的。

技术领域

本公开涉及计算机应用领域，具体地，涉及一种控制页面资源执行的方法及装置。

背景技术

在网页中，页面不仅有自己的DOM，往往还要引用不同的javascript资源，这些javascript资源大致可分为两类，一类是用作工具类的脚本，一类是用于实现页面逻辑的脚本。通常情况下，用于实现页面逻辑的脚本都包含一段页面初始化脚本，用于初始化页面的数据和状态。

随着需求的不断增加，页面也越来越复杂，一个页面往往需要许多个页面通过页面组件化的方式来组装完成。这些作为组件的每一个页面都有自己的DOM，自己依赖的工具类脚本、自己的页面初始化脚本。为了满足页面资源之间的依赖，目前，一般是在发布版本时根据依赖关系将组件化页面的所有页面的页面资源打包为一个文件进行加载，并根据依赖关系通过同步过程来按序执行，从而保证执行顺序满足依赖关系。但是这种方式一次性加载的资源过大，使首屏页面响应速度相对较慢，甚至在网络不稳定的时候页面可能会无法渲染。

发明内容

有鉴于此，本公开的目的是提供一种控制页面资源执行的方法及装置，以实现加快页面响应速度的目的。

本公开第一方面提供了一种控制页面资源执行的方法。该方法包括：根据组件化页面的树形嵌套结构，针对组件化页面的非叶子节点页面，将所述非叶子节点页面的DOM加载并渲染作为所述非叶子节点页面的第一异步过程，将对所述非叶子节点页面的工具类脚本加载并执行作为所述非叶子节点页面的第二异步过程；针对所述组件化页面的非叶子节点页面，分别执行所述非叶子节点页面的所述第一异步过程及所述第二异步过程；根据组件化页面的树形嵌套结构，针对所述组件化页面的非叶子节点页面，响应于所述非叶子节点页面的所述第一异步过程完成且所述非叶子节点页面的所述第二异步过程完成且所述非叶子节点页面的所有直接子页面的页面初始化脚本执行完成，执行所述非叶子节点页面的页面初始化脚本。

可选地，所述方法还包括：根据所述组件化页面的树形嵌套结构，针对所述组件化页面的叶子节点页面，将对所述叶子节点页面的DOM加载并渲染作为所述叶子节点页面的第三异步过程，将对所述叶子节点页面的工具类脚本加载并执行作为所述叶子节点页面的第四异步过程；针对所述组件化页面的叶子节点页面，分别执行所述叶子节点页面的所述第三异步过程及所述第四异步过程；根据组件化页面的树形嵌套结构，针对所述组件化页面的叶子节点页面，响应于所述叶子节点页面的第三异步过程完成且所述叶子节点页面的第四异步过程完成，执行所述叶子节点页面的页面初始化脚本。

可选地，所述根据组件化页面的树形嵌套结构，针对组件化页面的非叶子节点页面，响应于所述非叶子节点页面的所述第一异步过程完成且所述非叶子节点页面的所述第二异步过程完成且所述非叶子节点页面的所有直接子页面的页面初始化脚本执行完成，执行所述非叶子节点页面的页面初始化脚本包括：根据组件化页面的树形嵌套结构，针对所述组件化页面的非叶子节点页面，为所述非叶子节点页面的第一异步过程、第二异步过程、用于执行所述非叶子节点页面的所有直接子页面的页面初始化脚本的异步过程分别创建对应的promise对象；根据所述promise对象的状态，分别判断出对应的所述非叶子节点页面的第一异步过程、第二异步过程、用于执行所述非叶子节点页面的所有直接子页面的页面初始化脚本的异步过程是否完成；在判定所述非叶子节点页面的第一异步过程完成且第二异步过程完成且所述用于执行非叶子节点页面的所有直接子页面的页面初始化脚本的异步过程完成的情况下，执行所述非叶子节点页面的页面初始化脚本。