[发明专利]克服首屏空白的源码填充方法和平台

说明书

一种克服首屏空白的源码填充方法和平台，包括运行在处理终端上，包括如下步骤：在H5前端开发的项目构建阶段，利用无头浏览器，预先加载对应的页面，并抓取网页源码填充到打包生成的html文件中。结合其他结构和方法有效避免了现有技术中H5前端开发会出现首屏空白的缺陷。

技术领域

本发明涉及克服首屏空白的技术领域，也属于源码填充方法技术领域，具体涉及一种克服首屏空白的源码填充方法和平台。

背景技术

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。而普遍运用的H5前端开发是指通过html标记语言来制作网页的过程。

现在的H5前端开发大部分都是通过webpack打包，webpack是以commonJS的形式来书写脚本滴，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。其支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使操作者使用ES6的语法来编写代码;less-loader加载器，可以将less编译成css文件；开发便捷，能替代部分grunt/gulp的工作，比如打包、压缩混淆、图片转base64等。可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。而webpack打包下的首屏一般都是空白的html，然后由加载的js文件，实现页面的渲染，这样就会出现首屏空白的问题。

发明内容

为解决上述问题，本发明提供了一种克服首屏空白的源码填充方法和平台，有效避免了现有技术中H5前端开发会出现首屏空白的缺陷。

为了克服现有技术中的不足，本发明给予了一种克服首屏空白的源码填充方法和平台的解决方案，具体如下：

一种克服首屏空白的源码平台的填充方法，运行在处理终端上，包括如下步骤：

在H5前端开发的项目构建阶段，利用无头浏览器，预先加载对应的页面，并抓取网页源码填充到打包生成的html文件中。

进一步的，所述无头浏览器为谷歌的puppeteer无头浏览器。

进一步的，所述利用无头浏览器，预先加载对应的页面，并抓取网页源码填充到打包生成的html文件中的方法，包括：

在网页发布前，用所述谷歌的puppeteer无头浏览器的开发版chromium提供的接口来隐式访问网页，当网页加载完成之后，再次利用开发版chromium提供的接口对网页的源代码进行抓取，经过设定算法加工后，得到用户需要的内容，将这些内容再注入到作为网页代码的打包生成的html文件中。puppeteer无头浏览器中的puppeteer其实是一整套控制浏览器的 API，可以理解为它是一个无界面的浏览器。无头浏览器通俗点讲就是没有界面的浏览器。通过浏览器提供的API，进行调用，可以实现丰富的功能。网上有使用Puppeteer进行爬虫开发的案例。通过无头浏览器提供的这项功能，就可以很方便的在服务端进行开发，完成一些复杂的网页交互。

进一步的，所述隐式访问网页为后台访问网页。

一种克服首屏空白的源码平台，包括：运行在处理终端上的加载模块和填充模块；

所述加载模块用于利用无头浏览器，预先加载对应的页面；

所述填充模块用于抓取网页源码填充到打包生成的html文件中。

进一步的，所述加载模块还用于在网页发布前，用所述谷歌的puppeteer无头浏览器的开发版chromium提供的接口来隐式访问网页；

所述填充模块还用于利用开发版chromium提供的接口对网页的源代码进行抓取，经过设定算法加工后，得到用户需要的内容，将这些内容再注入到作为网页代码的打包生成的html文件中。