克服首屏空白的源码填充方法和平台技术

一种克服首屏空白的源码填充方法和平台，包括运行在处理终端上，包括如下步骤：在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文件中。进一步的，所述用所述谷歌的puppeteer无头浏览器的开发版chromium提供的接口来隐式访问网页，包括：利用npm的第三方库puppeteer.launch()方法来启动开发版chromium,利用puppeteer.newPage()来新建一个页面窗口，利用puppeteer.goto()来访问指定页面。所述再次利用开发版chromium提供的接口对网页的源代码进行抓取，包括：利用puppeteer的newPage方法会产生一个当前页面的实例page,而利用page.content()获取当前页面的源代码；所述设定算法，包括：利用开源工具html-minifier对抓取的内容进行格式化,其中包括removeComments,collapseWhitespace,minifyJS,minifyCSS这样的函数方法。本专利技术的有益效果为：本专利技术通过预先加载对应的页面，抓取网页源码填充到打包生成的html文件中，就能解决首屏空白问题，提高用户体验。附图说明图1为克服首屏空白的源码平台的填充方法的基本流程图。图2为克服首屏空白的源码平台的填充方法的详细流程图。具体实施方式下面将结合附图和实施例对本专利技术做进一步地说明。如图1-图2所示，克服首屏空白的源码平台的填充方法，运行在处理终端上，包括如下步骤：为了取消这一段首屏空白的空白期，就在H5前端开发的项目构建阶段，利用无头浏览器，预先加载对应的页面，并抓取网页源码填充到打包生成的html文件中。所述处理终端能够是计算机、笔记本电脑、单片机、服务器或者平板电脑。这样通过预先加载对应的页面，抓取网页源码填充到打包生成的html文件中，就能解决首屏空白问题，提高用户体验。所述无头浏览器为谷歌的puppeteer无头浏览器。所述利用无头浏览器，预先加载对应的页面，并抓取网页源码填充到打包生成的html文件中的方法，包括：在网页发布前，用所述谷歌的puppeteer无头浏览器的开发版chromium提供的接口来隐式访问网页，当网页加载完成之后，再次利用开发版chromium提供的接口对网页的源代码进行抓取，经过设定算法加工后，得到用户需要的内容，将这些内容再注入到作为网页代码的打包生成的html文件中。这样，用户正常访问就可以直接看到内容，不会出现首屏空白的问题从而无需等待加载网页所耗费的时间。本方法适用的场景包括：不同的网页页面需要对应多个html，网页页面内容不与用户信息强关联。而在所述不与用户信息强关联方面，有一些网页的页面的展示是跟用户信息强关联的，就像某个抽奖活动页面，每个人的id，抽奖次数，奖品等信息都不同。如果做静态渲染，每个人看到的都是同一个人的信息，这样显然有悖业务要求。可以用本方法在开发阶段标识出这些展示个人信息的DOM节点，在静态渲染的代码植入阶段，避开这些DOM节点或者展示默认信息，比如默认头像等。HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。html的文本是由HTML命令组成的描述性文本，html的命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源本文档来自技高网...

【技术保护点】
1.一种克服首屏空白的源码平台的填充方法，其特征在于，运行在处理终端上，包括如下步骤：/n在H5前端开发的项目构建阶段，利用无头浏览器，预先加载对应的页面，并抓取网页源码填充到打包生成的html文件中；/n所述无头浏览器为谷歌的puppeteer无头浏览器；/n所述利用无头浏览器，预先加载对应的页面，并抓取网页源码填充到打包生成的html文件中的方法，包括：/n在网页发布前，用所述谷歌的puppeteer无头浏览器的开发版chromium提供的接口来隐式访问网页，当网页加载完成之后，再次利用开发版chromium提供的接口对网页的源代码进行抓取，经过设定算法加工后，得到用户需要的内容，将这些内容再注入到作为网页代码的打包生成的html文件中。/n

【技术特征摘要】
1.一种克服首屏空白的源码平台的填充方法，其特征在于，运行在处理终端上，包括如下步骤：
在H5前端开发的项目构建阶段，利用无头浏览器，预先加载对应的页面，并抓取网页源码填充到打包生成的html文件中；
所述无头浏览器为谷歌的puppeteer无头浏览器；
所述利用无头浏览器，预先加载对应的页面，并抓取网页源码填充到打包生成的html文件中的方法，包括：
在网页发布前，用所述谷歌的puppeteer无头浏览器的开发版chromium提供的接口来隐式访问网页，当网页加载完成之后，再次利用开发版chromium提供的接口对网页的源代码进行抓取，经过设定算法加工后，得到用户需要的内容，将这些内容再注入到作为网页代码的打包生成的html文件中。


2.根据权利要求1所述的克服首屏空白的源码平台的填充方法，其特征在于，所述隐式访问网页为后台访问网页。


3.一种克服首屏空白的源码平台，其特征在于，包括：运行在处理终端上的加载模块和填充模块；
所述加载模块用于利用无头浏览器，预先加载对应的页面；
所述填充模块用于抓取网页源码填充到打包生成的html文件中；所述加载模块还用于在网页发布前，用所述谷歌的p...

【专利技术属性】
技术研发人员：刘敏，樊伟伟，李恒，孙建，朱晓明，杭建，
申请(专利权)人：随身云南京信息技术有限公司，
类型：发明
国别省市：江苏;32