克服首屏空白的源码填充方法和平台与流程

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

背景技术：

前端开发是创建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的命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

所述隐式访问网页为后台访问网页，而不是打开一个浏览器去访问网页。

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

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

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

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

所述填充模块还用于利用开发版chromium提供的接口对网页的源代码进行抓取，经过设定算法加工后，得到用户需要的内容，将这些内容再注入到作为网页代码的打包生成的html文件中。这样，用户正常访问就可以直接看到内容，不会出现首屏空白的问题从而无需等待加载网页所耗费的时间。chromium是一个由google主导开发的网页浏览器。以bsd许可证等多重自由版权发行并开放源代码。chromium的开发可能早自2006年即开始，设计思想基于简单、高速、稳定、安全等理念，在架构上使用了apple发展出来的webkit排版引擎、safari的部份源代码与firefox的成果，并采用google独家开发出的v8引擎，以提升解译javascript的效率，而且设计了“沙盒”、“黑名单”、“无痕浏览”等功能，来实现稳定与安全的网页浏览环境。chromium是google为发展自家的浏览器googlechrome（以下简称chrome）而开启的计划，所以chromium相当于chromium的工程版或称实验版（尽管chrome自身也有β版阶段），新功能会率先在chromium上实现，待验证后才会应用在chrome上，故chrome的功能会相对落后、稳定。chromium的更新速度很快，每隔数小时即有新的开发版本发布，而且可以免安装，下载zip封装版后解压缩即可使用（windows下也有安装版）。

所述用所述谷歌的puppeteer无头浏览器的开发版chromium提供的接口来隐式访问网页，包括：

利用npm的第三方库puppeteer.launch()方法来启动开发版chromium,利用puppeteer.newpage()来新建一个页面窗口，利用puppeteer.goto()来访问指定页面。

所述再次利用开发版chromium提供的接口对网页的源代码进行抓取，包括：

利用puppeteer的newpage方法会产生一个当前页面的实例page,而利用page.content()获取当前页面的源代码；

所述设定算法，包括：利用开源工具html-minifier对抓取的内容进行格式化,其中包括removecomments,collapsewhitespace,minifyjs,minifycss这样的函数方法。html-minifier是一个高度可配置的，经过良好测试的，基于javascript的html在线压缩工具，用棉绒般的能力。在它的核心，minifier依赖于johnresig的html解析器。这个解析器能够处理非常复杂的文档。

其中，上述实施例的方法涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。

基于相同的技术构思，本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序包含至少一段代码，该至少一段代码可由终端执行，以控制终端用以实现上述实施例的方法。

基于相同的技术构思，本申请实施例还提供一种计算机程序，当该计算机程序被终端执行时，用以实现上述实施例的方法。

所述程序可以全部或者部分存储在与处理器封装在一起的存储介质上，也可以部分或者全部存储在不与处理器封装在一起的存储器上。

基于相同的技术构思，本申请实施例还提供一种处理器，该处理器用以实现上述实施例的方法。上述处理器可以为芯片。

结合本申请实施例公开内容所描述的方法或者算法的步骤可以硬件的方式来实现，也可以是由处理器执行软件指令的方式来实现。软件指令可以由相应的软件模块组成，软件模块可以被存放于随机存取存储器(randomaccessmemory，ram)、闪存、只读存储器(readonlymemory，rom)、可擦除可编程只读存储器(erasableprogrammablerom，eprom)、电可擦可编程只读存储器(electricallyeprom，eeprom)、寄存器、硬盘、移动硬盘、只读光盘(cd-rom)或者本领域熟知的任何其它形式的存储介质中。一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于asic中。另外，该asic可以位于网络设备中。当然，处理器和存储介质也可以作为分立组件存在于网络设备中。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本申请实施例所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。计算机可读介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

另外，以上以用实施例说明的过程对本发明作了描述，本领域的技术人员应当理解，本公开不限于以上描述的实施例，在不偏离本发明的范围的状况下，能够做出每种变动、改变和替换。

以上以用实施例说明的过程对本发明作了描述，本领域的技术人员应当理解，本公开不限于以上描述的实施例，在不偏离本发明的范围的状况下，能够做出每种变动、改变和替换。