渲染方法、装置、设备和存储介质

技术领域

本发明涉及计算机技术领域，特别涉及一种渲染方法、装置、设备和存储介质。

背景技术

浏览器渲染内核决定了浏览器如何显示网页的内容以及页面的格式信息。不同浏览器对网页编写语法的解释也不同，因此同一个网页，同一份前端代码，由不同的浏览器渲染，渲染出的效果也不同。即使，现有的不同浏览器内核，对大部分的网页编写语言是相同的，但是仍没有覆盖全部情况，导致页面渲染可能会出现显示问题，浏览器事件失效等情况。现有的技术方案，就是前端开发工作人员基于一款浏览器内核开发完页面后，还要在其他主流浏览器上进行重新调试，以确保网页在不同浏览器上运行均无问题。

现有方案会导致，在原有开发工期的基础上，还要再加上前端代码在不同版本浏览器上的调试时间，极大的延长了工期。前端开发人员浪费了时间在解决兼容性问题上，而不能将时间利用在更难点、更有价值的技术实现上。并且，即使调试了不同版本浏览器，依然存在以下问题：一是，不能保证覆盖所有浏览器。二是，会有隐藏的问题不能被及时察觉到的风险。如何解决该问题，目前尚无有效解决方案。

发明内容

有鉴于此，本发明期望提供一种渲染方法、装置、设备和存储介质。

本发明实施例的技术实施例是这样实现的：

本发明实施例提供一种渲染方法，应用于浏览器，所述方法包括：

发送网页访问请求，获得网页资源；所述网页资源包括动态资源和静态资源；所述静态资源包括在多个路由下分别正常显示的页面组成的路由图片和所述多个路由分别在所述路由图片中的关系文件；

基于所述动态资源确定所述浏览器渲染出的对比页面，根据所述对比页面、所述路由图片和所述关系文件确定所述对比页面对应的路由在所述路由图片中对应区域的显示页面；

判断所述对比页面与所述显示页面是否有差异，获得判断结果；

在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述对比页面。

在上述方案中，所述方法还包括：

在所述判断结果表明所述对比页面与所述显示页面有差异的情况下，获得所述对比页面与所述显示页面的差异信息；

基于所述差异信息替换所述浏览器的进程，重新渲染出新的对比页面；

根据所述新的对比页面和所述静态资源确定所述新的对比页面对应的路由在所述路由图片中对应区域的显示页面；

判断所述新的对比页面与所述显示页面是否有差异，获得判断结果；

在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述新的对比页面。

在上述方案中，所述基于所述差异信息替换所述浏览器的进程，重新渲染出新的对比页面，包括：

基于所述差异信息确定所述差异信息在所述浏览器中的渲染位置；

根据所述渲染位置重新渲染出新的对比页面。

在上述方案中，所述根据所述渲染位置重新渲染出新的对比页面，包括：

获得所述动态资源中的初始层叠样式表；

根据所述渲染位置确定新的层叠样式表；

将所述新的层叠样式表替换所述初始层叠样式表，重新渲染出新的对比页面。

在上述方案中，所述动态资源包括网页的描述性文本和初始层叠样式表；所述基于所述动态资源确定所述浏览器渲染出的对比页面，包括：

对所述描述性文本和所述初始层叠样式表进行解析，确定所述浏览器进程生成的渲染树；

基于所述渲染树渲染出所述对比页面。

在上述方案中，所述根据所述对比页面和所述静态资源确定所述对比页面对应的路由在所述路由图片中对应区域的显示页面，包括：

基于所述对比页面获得所述对比页面对应的当前路由；

根据所述当前路由和所述关系文件确定所述当前路由在所述路由图片中的位置关系；

根据所述位置关系和所述路由图片确定所述显示页面。

在上述方案中，所述显示所述对比页面，包括：

获得所述对比页面的显示位置；

基于所述显示位置对所述对比页面进行显示。

本发明实施例提供一种渲染装置，应用于浏览器，所述装置包括：获得单元、确定单元、判断单元和显示单元，其中：

所述获得单元，用于发送网页访问请求，获得网页资源；所述网页资源包括动态资源和静态资源；所述静态资源包括在多个路由下分别正常显示的页面组成的路由图片和所述多个路由分别在所述路由图片中的关系文件；

所述确定单元，用于基于所述动态资源确定所述浏览器渲染出的对比页面，根据所述对比页面、所述路由图片和所述关系文件确定所述对比页面对应的路由在所述路由图片中对应区域的显示页面；

所述判断单元，用于判断所述对比页面与所述显示页面是否有差异，获得判断结果；

所述显示单元，用于在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述对比页面。

在上述方案中，所述获得单元，还用于在所述判断结果表明所述对比页面与所述显示页面有差异的情况下，获得所述对比页面与所述显示页面的差异信息；基于所述差异信息替换所述浏览器的进程，重新渲染出新的对比页面；

所述确定单元，还用于根据所述新的对比页面和所述静态资源确定所述新的对比页面对应的路由在所述路由图片中对应区域的显示页面；

所述判断单元，还用于判断所述新的对比页面与所述显示页面是否有差异，获得判断结果；

所述显示单元，还用于在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述新的对比页面。

在上述方案中，所述获得单元，还用于基于所述差异信息确定所述差异信息在所述浏览器中的渲染位置；根据所述渲染位置重新渲染出新的对比页面。

在上述方案中，所述获得单元，还用于获得所述动态资源中的初始层叠样式表；根据所述渲染位置确定新的层叠样式表；将所述新的层叠样式表替换所述初始层叠样式表，重新渲染出新的对比页面。

在上述方案中，所述动态资源包括网页的描述性文本和初始层叠样式表；所述确定单元，还用于对所述描述性文本和所述初始层叠样式表进行解析，确定所述浏览器进程生成的渲染树；基于所述渲染树渲染出所述对比页面。

在上述方案中，所述确定单元，还用于基于所述对比页面获得所述对比页面对应的当前路由；根据所述当前路由和所述关系文件确定所述当前路由在所述路由图片中的位置关系；根据所述位置关系和所述路由图片确定所述显示页面。

在上述方案中，所述显示单元，还用于获得所述对比页面的显示位置；基于所述显示位置对所述对比页面进行显示。

本发明实施例提供一种渲染设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的程序，所述处理器执行所述程序时实现上述所述方法的任一步骤。

本发明实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述所述方法的任一步骤。

本发明提供的渲染方法、装置、设备和存储介质，其中，所述方法包括发送网页访问请求，获得网页资源；所述网页资源包括动态资源和静态资源；所述静态资源包括在多个路由下分别正常显示的页面组成的路由图片和所述多个路由分别在所述路由图片中的关系文件；基于所述动态资源确定所述浏览器渲染出的对比页面，根据所述对比页面、所述路由图片和所述关系文件确定所述对比页面对应的路由在所述路由图片中对应区域的显示页面；判断所述对比页面与所述显示页面是否有差异，获得判断结果；在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述对比页面。采用本发明实施例的技术方案，通过网页请求，访问包括路由图片和关系文件的静态资源，极大的缩减了前端开发周期，并避免了浏览器不兼容导致的页面显示失效的风险。

附图说明

图1为本发明实施例渲染方法实现流程示意图；

图2为本发明实施例渲染方法中路由图片的示意图；

图3为本发明实施例渲染方法中新的css替换原有css的示意图；

图4为本发明实施例渲染方法中浏览器内核中各线程执行顺序及关系的示意图；

图5为本发明实施例渲染方法中又一种浏览器内核中各线程执行顺序及关系的示意图；

图6为本发明实施例渲染方法中工程代码在Chrome中显示效果的示意图；

图7为本发明实施例渲染方法中工程代码在IE8中显示效果的示意图；

图8为本发明实施例渲染方法中替换css样式代码重新渲染后在IE8中显示效果的示意图；

图9为本发明实施例渲染装置的组成结构示意图；

图10为本发明实施例中渲染设备的一种硬件实体结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对发明的具体技术方案做进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。

本实施例提出一种渲染方法，图1为本发明实施例渲染方法实现流程示意图，如图1所示，该方法应用于浏览器，包括：

步骤S101：发送网页访问请求，获得网页资源；所述网页资源包括动态资源和静态资源；所述静态资源包括在多个路由下分别正常显示的页面组成的路由图片和所述多个路由分别在所述路由图片中的关系文件。

需要说明的是，所述渲染方法可以为浏览器渲染方法，作为一种示例，该浏览器渲染方法可以为一种解决兼容性的浏览器渲染方法。

所述浏览器可以为兼容性的浏览器，该浏览器包括决兼容性问题的内核，该内核至少包含以下线程：JS执行线程、解析线程、对比线程、替换线程，展示线程。所有线程之间是互斥的关系。

发送网页访问请求，获得网页资源可以为客户端向服务器端发送网页访问请求，获得服务器端基于所述网页访问请求返回的网页资源。

所述网页资源包括动态资源和静态资源；所述动态资源可以根据实际情况进行确定，在此不做限定，作为一种示例，所述动态资源至少可以包括描述性文本html、层叠样式表css、脚本文本js等；所述静态资源包括在多个路由下分别正常显示的页面组成的路由图片和所述多个路由分别在所述路由图片中的关系文件；其中，所述在多个路由下分别正常显示的页面组成的路由图片可以理解为路由图片是一张分区域与前端路由一一对应的图片，它分区域显示了前端工程中，某路由下页面正常展示的效果。作为一种示例，所述路由图片可以分为四个区域，每个区域为某路由下页面正常显示的页面，例如，该四个区域可以为overview路由正常显示的页面、guide路由正常显示的页面、order路由正常显示的页面、confirm路由正常显示的页面；所述关系文件可以为对应关系json文件，该对应关系json文件可以记录路由与图片区域位置的关系。

在实际应用中，在所述服务器端可以部署静态资源，在客户端请求时，该静态资源可以被访问到。具体的，在服务器端部署一套带有路由图片和对应关系json文件作为静态资源的前端工程代码，同时，在客户端启用了一种可以解决兼容性的浏览器，可正常渲染前端工程页面。作为一种示例，前端开发人员在开发的过程中，需要在前端工程中放入一个路由图片和一个对应关系json文件，客户端请求时，可以作为静态资源访问到。其中，所述路由图片是一张分区域与前端路由一一对应的图片，它分区域显示了前端工程中，某路由下页面正常展示的效果。所述路由图片能反映工程包含所有页面的正常显示效果，所以，客户端请求路由图片资源的时候，只需要建立一次请求。所述对应关系json文件可以记录每个路由与图片区域位置的关系。作为一种示例，为了进一步降低路由图片资源的大小，降低请求时间，可以将该图片等比例缩小，比如：一个页面正常显示宽高为1024*768，则可缩小为256*192。所述对应关系json文件存储了每个路由与图片区域位置的关系，例如，每个路由的路径，每个路由在图片区域的位置，该位置可以为路由图片中顶部距离、左右边距离、高度、宽度等；作为示例，该路径可以记为path；该顶部距离可以记为top；该左边距离可以记为left；该右边距离可以记为right；该高度可以记为height；该宽度可以记为width。例如，path:‘/overview’；top:0；left:0；height:192；width:256。

在实际应用中，可以在前端工程的入口index.html文件中引入路由图片，通过位置定位让它定位显示在显示屏幕之外，这样渲染页面的时候，用户是看不到的。客户端启用了一个可以解决浏览器兼容性的浏览器，它具有一个可以配合页面静态资源中的路由图片及对应关系json文件，去解决兼容性问题的内核。该内核包含以下线程：JS执行线程、解析线程、对比线程、替换线程，展示线程。所有线程之间是互斥的关系。其中，JS执行线程，可以用常规的现有任何一种主流浏览器内核的实现方法来实现。客户端访问网页路径，获取到网页资源，包括html、css、js、静态资源(包括路由图片和对比关系json文件)，首先浏览器内核启动解析线程。

步骤S102：基于所述动态资源确定所述浏览器渲染出的对比页面，根据所述对比页面、所述路由图片和所述关系文件确定所述对比页面对应的路由在所述路由图片中对应区域的显示页面。

需要说明的是，基于所述动态资源确定所述浏览器渲染出的对比页面可以为基于所述动态资源确定渲染参数，根据所述渲染参数确定所述浏览器渲染出的对比页面。作为一种示例，所述动态资源可以包括html、css、js等；所述渲染参数可以包括dom树、cssdom树、render树等。

根据所述对比页面、所述路由图片和所述关系文件确定所述对比页面对应的路由在所述路由图片中对应区域的显示页面可以根据所述对比页面获得所述对比页面对应的路由，根据所述路由和所述关系文件确定所述路由在所述路由图片中的位置关系，基于所述位置关系和所述路由图片确定所述路由在所述路由图片中对应区域的显示页面。为了方便理解，这里示例说明，浏览器中的解析线程，本身具有的一套基本的对网页编写语法的解释，会通过访问页面获取到的html、css资源解析出dom树和cssdom树，并组成render树之后，渲染出的页面定位在显示屏幕之外，并不与获取到的路由图片位置相重叠，用户是看不到的,该页面可称为对比页面。关于并不与获取到的路由图片位置相重叠如何实现，举一个最简单的方式，路由图片在显示屏幕左边，解析进程渲染出的页面在显示屏幕右边。获取到对比页面后，启动对比线程。对比线程，获取到当前路由，将它与对比关系json文件中的值，进行对比，拿到路由图片中与当前路由页面对应的区域，即确定当前路由在图片路由中对应区域的显示页面。

步骤S103：判断所述对比页面与所述显示页面是否有差异，获得判断结果。

需要说明的是，判断所述对比页面与所述显示页面是否有差异，获得判断结果可以为判断所述对比页面与所述显示页面是否有差异，获得所述对比页面与所述显示页面有差异或所述对比页面与所述显示页面没有差异的判断结果。

在实际应用中，判断所述对比页面与所述显示页面是否有差异，获得所述对比页面与所述显示页面有差异或所述对比页面与所述显示页面没有差异的判断结果可以通过将所述对比页面与所述显示页面进行对比来判断所述对比页面与所述显示页面是否有差异，获得所述对比页面与所述显示页面有差异或所述对比页面与所述显示页面没有差异的判断结果。作为一种示例，所述差异也可以称为差异点。可以通过对路由图片中相应区域中的显示页面与对比页面进行对比来判断所述对比页面与所述显示页面是否有差异点，获得所述对比页面与所述显示页面有差异点或所述对比页面与所述显示页面没有差异点的判断结果。

步骤S104：在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述对比页面。

这里，在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述对比页面可以为在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，获得所述对比页面的显示位置；基于所述显示位置对所述对比页面进行显示。

本发明实施例通过在服务器端部署一套带有路由图片和对应关系json文件作为静态资源的前端工程代码，同时，在客户端启用了一种可以解决兼容性的浏览器，可正常渲染前端工程页面。

本发明实施例提供的渲染方法，通过网页请求，访问包括路由图片和关系文件的静态资源，极大的缩减了前端开发周期，并避免了浏览器不兼容导致的页面显示失效的风险。

在本发明一种可选实施例中，所述方法还包括：在所述判断结果表明所述对比页面与所述显示页面有差异的情况下，获得所述对比页面与所述显示页面的差异信息；基于所述差异信息替换所述浏览器的进程，重新渲染出新的对比页面；根据所述新的对比页面和所述静态资源确定所述新的对比页面对应的路由在所述路由图片中对应区域的显示页面；判断所述新的对比页面与所述显示页面是否有差异，获得判断结果；在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述新的对比页面。

需要说明的是，在所述判断结果表明所述对比页面与所述显示页面有差异的情况下，获得所述对比页面与所述显示页面的差异信息；其中，所述差异信息可以根据实际情况进行确定，在此不做限定，作为一种示例，所述差异信息可以包括差异区域的大小、差异的位置、差异的内容等。

基于所述差异信息替换所述浏览器的进程，重新渲染出新的对比页面可以为基于所述差异信息获得所述差异信息在所述浏览器中渲染树中的位置，将所述位置传递给所述浏览器中的替换进程，基于所述替换进程生成新的渲染树，根据所述新的渲染树重新渲染出新的对比页面。

根据所述新的对比页面和所述静态资源确定所述新的对比页面对应的路由在所述路由图片中对应区域的显示页面可以为根据所述新的对比页面、所述路由图片和所述关系文件确定所述新的对比页面对应的路由在所述路由图片中对应区域的显示页面。所述根据所述新的对比页面、所述路由图片和所述关系文件确定所述新的对比页面对应的路由在所述路由图片中对应区域的显示页面可以为根据所述新的对比页面获得所述新的对比页面对应的路由，根据所述路由和所述关系文件确定所述路由在所述路由图片中的位置关系，基于所述位置关系和所述路由图片确定所述路由在所述路由图片中对应区域的显示页面。

判断所述新的对比页面与所述显示页面是否有差异，获得判断结果可以为判断所述新的对比页面与所述显示页面是否有差异，获得所述新的对比页面与所述显示页面有差异或所述新的对比页面与所述显示页面没有差异的判断结果。

在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述新的对比页面可以为在所述判断结果表明所述新的对比页面与所述显示页面没有差异的情况下，获得所述新的对比页面的显示位置；基于所述显示位置对所述新的对比页面进行显示。

为了方便理解，这里示例出一种实际应用场景，通过对路由图片中相应区域的显示页面与对比页面进行对比，对比出差异点。通过对比页面，锁定到相应的差异点在render树的位置，将该位置传递给替换进程，替换进程，根据render位置定位到此处的cssdom，去仓库拉取现有主流浏览器之间此处css解释的差异，拉取到本地后，修改该位置的cssdom树，再启动解析进程，重新生成新的render数，产生新的页面，循环往复，直到没有差异位置。主流浏览器之间css解释的差异，例如：opcaity在IE9以下浏览器不兼容。对比进程会对比出差异，则解析进程到仓库中拉取到新的css，替换掉原有css。

本发明实施例中，一个具有JS执行线程、解析线程、对比线程、替换线程、展示线程的浏览器内核，通过路由图片及对比json文件去标记前端工程。

在本发明一种可选实施例中，所述基于所述差异信息替换所述浏览器的进程，重新渲染出新的对比页面，包括：基于所述差异信息确定所述差异信息在所述浏览器中的渲染位置；根据所述渲染位置重新渲染出新的对比页面。

需要说明的是，基于所述差异信息确定所述差异信息在所述浏览器中的渲染位置可以为通过所述对比页面，锁定所述差异信息在渲染树的位置；所述渲染树可以记为render树。

根据所述渲染位置重新渲染出新的对比页面可以为将所述渲染位置传递给替换进程，基于所述替换进程和所述渲染位置重新生成新的render数，产生新的对比页面。

在本发明一种可选实施例中，所述根据所述渲染位置重新渲染出新的对比页面，包括：获得所述动态资源中的初始层叠样式表；根据所述渲染位置确定新的层叠样式表；将所述新的层叠样式表替换所述初始层叠样式表，重新渲染出新的对比页面。

本发明实施例中，获得所述动态资源中的初始层叠样式表可以为获得所述动态资源中的初始css。

根据所述渲染位置确定新的层叠样式表可以为根据所述渲染位置定位到此渲染位置的cssdom，去仓库拉取现有主流浏览器之间此渲染位置处css解释的差异，确定新的层叠样式表css。

将所述新的层叠样式表替换所述初始层叠样式表，重新渲染出新的对比页面可以为将所述新的层叠样式表css替换所述初始css，重新启动解析进程，重新生成新的render树，根据所述新的render树产生新的对比页面。

在本发明一种可选实施例中，所述动态资源包括网页的描述性文本和初始层叠样式表；所述基于所述动态资源确定所述浏览器渲染出的对比页面，包括：对所述描述性文本和所述初始层叠样式表进行解析，确定所述浏览器进程生成的渲染树；基于所述渲染树渲染出所述对比页面。

需要说明的是，所述描述性文本可以记为html，所述初始层叠样式表可以记为初始css。

对所述描述性文本和所述初始层叠样式表进行解析，确定所述浏览器进程生成的渲染树可以为对html和初始css进行解析，获得dom树和cssdom树；根据所述dom树和cssdom树组成render树；基于所述render树渲染出所述对比页面。在实际应用中，还可以将所述对比页面定位在显示屏幕之外，并不与获取到的路由图片位置相重叠，用户是看不到的,该页面可称为对比页面。

在本发明一种可选实施例中，所述根据所述对比页面和所述静态资源确定所述对比页面对应的路由在所述路由图片中对应区域的显示页面，包括：基于所述对比页面获得所述对比页面对应的当前路由；根据所述当前路由和所述关系文件确定所述当前路由在所述路由图片中的位置关系；根据所述位置关系和所述路由图片确定所述显示页面。

本发明实施例中，基于所述对比页面获得所述对比页面对应的当前路由可以为基于所述对比页面启动对比线程，获得所述对比页面对应的当前路由。

根据所述当前路由和所述关系文件确定所述当前路由在所述路由图片中的位置关系可以为将所述当前路由的参数和所述关系文件中的参数进行对比，确定所述当前路由在所述路由图片中的位置关系。其中，当前路由的参数可以为当前路由的路径、高度、宽度等，所述关系文件中的参数可以为所述路由图片中不同区域的路由的路径、高度、宽度等。

在本发明一种可选实施例中，所述显示所述对比页面，包括：获得所述对比页面的显示位置；基于所述显示位置对所述对比页面进行显示。

本发明实施例中，获得所述对比页面的显示位置可以理解为获得最终的对比页面的显示位置。

基于所述显示位置对所述对比页面进行显示可以为基于所述显示位置展示进程，并展示页面。

本发明实施例，区别于现有前端开发流程，该提案使用最初始前端代码，即可实现功能，不需要考虑不同浏览器兼容性的方法。极大的缩减了前端开发周期，并避免了浏览器不兼容导致的页面显示失效的风险。

为了方便理解，本发明示例出渲染方法为一种解决兼容性的浏览器渲染方法，在服务器端部署一套带有路由图片和对应关系json文件作为静态资源的前端工程代码，同时，在客户端启用了一种可以解决兼容性的浏览器，可正常渲染前端工程页面。具体包括以下步骤：

第一步：前端开发人员在开发的过程中，需要在前端工程中放入一个路由图片和一个对应关系json文件，客户端请求时，可以作为静态资源访问到。

第二步：关于第一步中的路由图片，该图片是一张分区域与前端路由一一对应的图片，它分区域显示了前端工程中，某路由下页面正常展示的效果。

为了方便理解，这里示例说明，图2为本发明实施例渲染方法中路由图片的示意图，如图2所示，路由图片中示例了四个路由下正常显示的页面，依次为overview路由正常显示的页面、guide路由正常显示的页面、order路由正常显示的页面、confirm路由正常显示的页面。

第三步：关于第一步中的路由图片，因为，只需一张就能反映工程包含所有页面的正常显示效果，所以，客户端请求路由图片资源的时候，只需要建立一次请求。为了进一步降低路由图片资源的大小，降低请求时间，可以将该图片等比例缩小，比如：一个页面正常显示宽高为1024*768，则可缩小为256*192。这样原先1024*768的区域就可以显示四个路由下，页面正常展示的效果。

第四步：关于第一步中的对应关系json文件，记录了路由与图片区域位置的关系，假设路由图片的像素为1024*768，则json文件内容如下：

第五步：在前端工程的入口index.html文件中引入路由图片，通过位置定位让它定位显示在显示屏幕之外，这样渲染页面的时候，用户是看不到的。

第六步：客户端启用了一个可以解决浏览器兼容性的浏览器，它具有一个可以配合页面静态资源中的路由图片及对应关系json文件，去解决兼容性问题的内核。

第七步：第六不中的内核包含以下线程：JS执行线程、解析线程、对比线程、替换线程，展示线程。所有线程之间是互斥的关系。

第八步：关于第七步中JS执行线程，可以用常规的现有任何一种主流浏览器内核的实现方法来实现。

第九步：客户端访问网页路径，获取到网页资源，包括html、css、js、静态资源(包括路由图片和对比关系json文件)，首先浏览器内核启动解析线程。

第十步：关于第九步中的解析线程，本身具有的一套基本的对网页编写语法的解释，会通过访问页面获取到的html、css资源解析出dom树和cssdom树，并组成render树之后，渲染出的页面定位在显示屏幕之外，并不与获取到的路由图片位置相重叠，用户是看不到的,该页面可称为对比页面。关于并不与获取到的路由图片位置相重叠如何实现，举一个最简单的方式，路由图片在显示屏幕左边，解析进程渲染出的页面在显示屏幕右边。

第十一步：获取到对比页面后，启动对比线程。对比线程，获取到当前路由，将它与对比关系json文件中的值，进行对比，拿到路由图片中与当前路由页面对应的区域。通过对路由图片中相应区域与对比页面进行对比，对比出差异点。通过对比页面，锁定到相应的差异点在render树的位置，将该位置传递给替换进程。

第十二步：替换进程，根据render位置定位到此处的cssdom，去仓库拉取现有主流浏览器之间此处css解释的差异，拉取到本地后，修改该位置的cssdom树，再启动解析进程，重新生成新的render数，产生新的页面，循环往复，直到没有差异位置。

第十三步：第十二步中的主流浏览器之间css解释的差异。

为了方便理解，这里示例说明，opcaity在IE9以下浏览器不兼容。对比进程会对比出差异，则解析进程到仓库中拉取到新的css，替换掉原有css。该替换内容可以参照图3所示，图3为本发明实施例渲染方法中新的css替换原有css的示意图。

第十四步：当对比进程对比结束后，则在启动展示进程，将最终的对比页面显示位置改变，展示在屏幕显示位置。此时完成整个流程。

为了方便理解，这里示例说明，整个流程可以结合图4进行理解，图4为本发明实施例渲染方法中浏览器内核中各线程执行顺序及关系的示意图。

第十五步：页面渲染结束后，如果触发JS执行线程对页面render树有改变，无非是再重复页面解析、对比、替换、展示的过程。

为了方便理解，这里示例说明重复页面解析、对比、替换、展示的过程可以结合图5进行理解，图5为本发明实施例渲染方法中又一种浏览器内核中各线程执行顺序及关系的示意图。

本发明实施例具备以下有益技术效果：

第一：一个具有JS执行线程、解析线程、对比线程、替换线程、展示线程的浏览器内核，通过路由图片及对比json文件去标记前端工程。

第二：区别于现有前端开发流程，该提案使用最初始前端代码，即可实现功能，不需要考虑不同浏览器兼容性的方法。极大的缩减了前端开发周期，并避免了浏览器不兼容导致的页面显示失效的风险。

为了更好的理解本发明，本实施例提供渲染方法的具体应用场景，现以透明度opacity为例，在IE9以下浏览器不兼容。在此兼容性问题的基础上，用一个div的透明度opacity，分别在不同浏览器中不同显示来探讨解决方案。假设我们开发时用的浏览器是Chrome，而用户打开页面时，用的是IE8。

代码如下：

这段代码在Chrome中显示效果如图6所示，图6为本发明实施例渲染方法中工程代码在Chrome中显示效果的示意图。

这段代码在IE8中显示效果如图7所示，图7为本发明实施例渲染方法中工程代码在IE8中显示效果的示意图。

明显二者显示出的透明度是不同的。

此时的解决办法是，当定位出是opacity这个样式的解释不同，导致在用户面前显示页面与我们希望的效果不同时，尝试替换css样式代码。

此时，重新渲染后，在IE8浏览器中显示效果如图8所示，图8为本发明实施例渲染方法中替换css样式代码重新渲染后在IE8中显示效果的示意图。

本实施例提出一种渲染装置，图9为本发明实施例渲染装置的组成结构示意图，如图9所示，所述装置200包括：获得单元201、确定单元202、判断单元203和显示单元204，其中：

所述获得单元201，用于发送网页访问请求，获得网页资源；所述网页资源包括动态资源和静态资源；所述静态资源包括在多个路由下分别正常显示的页面组成的路由图片和所述多个路由分别在所述路由图片中的关系文件；

所述确定单元202，用于基于所述动态资源确定所述浏览器渲染出的对比页面，根据所述对比页面、所述路由图片和所述关系文件确定所述对比页面对应的路由在所述路由图片中对应区域的显示页面；

所述判断单元203，用于判断所述对比页面与所述显示页面是否有差异，获得判断结果；

所述显示单元204，用于在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述对比页面。

在其他的实施例中，所述获得单元201，还用于在所述判断结果表明所述对比页面与所述显示页面有差异的情况下，获得所述对比页面与所述显示页面的差异信息；基于所述差异信息替换所述浏览器的进程，重新渲染出新的对比页面；

所述确定单元202，还用于根据所述新的对比页面和所述静态资源确定所述新的对比页面对应的路由在所述路由图片中对应区域的显示页面；

所述判断单元203，还用于判断所述新的对比页面与所述显示页面是否有差异，获得判断结果；

所述显示单元204，还用于在所述判断结果表明所述对比页面与所述显示页面没有差异的情况下，显示所述新的对比页面。

在其他的实施例中，所述获得单元201，还用于基于所述差异信息确定所述差异信息在所述浏览器中的渲染位置；根据所述渲染位置重新渲染出新的对比页面。

在其他的实施例中，所述获得单元201，还用于获得所述动态资源中的初始层叠样式表；根据所述渲染位置确定新的层叠样式表；将所述新的层叠样式表替换所述初始层叠样式表，重新渲染出新的对比页面。

在其他的实施例中，所述动态资源包括网页的描述性文本和初始层叠样式表；所述确定单元202，还用于对所述描述性文本和所述初始层叠样式表进行解析，确定所述浏览器进程生成的渲染树；基于所述渲染树渲染出所述对比页面。

在其他的实施例中，所述确定单元202，还用于基于所述对比页面获得所述对比页面对应的当前路由；根据所述当前路由和所述关系文件确定所述当前路由在所述路由图片中的位置关系；根据所述位置关系和所述路由图片确定所述显示页面。

在其他的实施例中，所述显示单元204，还用于获得所述对比页面的显示位置；基于所述显示位置对所述对比页面进行显示。

以上装置实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本发明装置实施例中未披露的技术细节，请参照本发明方法实施例的描述而理解。

需要说明的是，本发明实施例中，如果以软件功能模块的形式实现上述的渲染方法，并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实施例的技术实施例本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台控制服务器(可以是个人计算机、服务器、或者网络服务器等)执行本发明各个实施例所述方法的全部或部分。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read OnlyMemory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。这样，本发明实施例不限制于任何特定的硬件和软件结合。

对应地，本发明实施例提供一种渲染设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述实施例提供的控制方法中的步骤。

对应地，本发明实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例提供的控制方法中的步骤。

这里需要指出的是：以上存储介质和设备实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本发明存储介质和设备实施例中未披露的技术细节，请参照本发明方法实施例的描述而理解。

需要说明的是，图10为本发明实施例中渲染设备的一种硬件实体结构示意图，如图10所示，该渲染设备300的硬件实体包括：处理器301和存储器303，可选地，所述渲染设备300还可以包括通信接口302。

可以理解，存储器303可以是易失性存储器或非易失性存储器，也可包括易失性和非易失性存储器两者。其中，非易失性存储器可以是只读存储器(ROM，Read Only Memory)、可编程只读存储器(PROM，Programmable Read-Only Memory)、可擦除可编程只读存储器(EPROM，Erasable Programmable Read-Only Memory)、电可擦除可编程只读存储器(EEPROM，Electrically Erasable Programmable Read-Only Memory)、磁性随机存取存储器(FRAM，ferromagnetic random access memory)、快闪存储器(Flash Memory)、磁表面存储器、光盘、或只读光盘(CD-ROM，Compact Disc Read-Only Memory)；磁表面存储器可以是磁盘存储器或磁带存储器。易失性存储器可以是随机存取存储器(RAM，Random AccessMemory)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(SRAM，Static Random Access Memory)、同步静态随机存取存储器(SSRAM，Synchronous Static Random Access Memory)、动态随机存取存储器(DRAM，Dynamic Random Access Memory)、同步动态随机存取存储器(SDRAM，SynchronousDynamic Random Access Memory)、双倍数据速率同步动态随机存取存储器(DDRSDRAM，Double Data Rate Synchronous Dynamic Random Access Memory)、增强型同步动态随机存取存储器(ESDRAM，Enhanced Synchronous Dynamic Random Access Memory)、同步连接动态随机存取存储器(SLDRAM，SyncLink Dynamic Random Access Memory)、直接内存总线随机存取存储器(DRRAM，Direct Rambus Random Access Memory)。本发明实施例描述的存储器303旨在包括但不限于这些和任意其它适合类型的存储器。

上述本发明实施例揭示的方法可以应用于处理器301中，或者由处理器301实现。处理器301可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器301中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器301可以是通用处理器、数字信号处理器(DSP，Digital Signal Processor)，或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。处理器301可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本发明实施例所公开的方法的步骤，可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于存储介质中，该存储介质位于存储器303，处理器301读取存储器303中的信息，结合其硬件完成前述方法的步骤。

在示例性实施例中，设备可以被一个或多个应用专用集成电路(ASIC，Application Specific Integrated Circuit)、DSP、可编程逻辑器件(PLD，ProgrammableLogic Device)、复杂可编程逻辑器件(CPLD，Complex Programmable Logic Device)、现场可编程门阵列(FPGA，Field-Programmable Gate Array)、通用处理器、控制器、微控制器(MCU，Micro Controller Unit)、微处理器(Microprocessor)、或其他电子元件实现，用于执行前述方法。

在本发明所提供的几个实施例中，应该理解到，所揭露的方法和装置，可以通过其他的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个观测量，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其他形式的。

上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元，即可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例的目的。

本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、只读存储器(ROM，Read-Only Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

或者，本发明实施例上述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实施例的技术实施例本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台设备(可以是个人计算机、服务器、或者网络设备等)执行本发明各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、磁碟或者光盘等各种可以存储程序代码的介质。

本发明是实例中记载的渲染方法、装置、设备和存储介质只以本发明所述实施例为例，但不仅限于此，只要涉及到该渲染方法、装置、设备和存储介质均在本发明的保护范围。

应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本发明的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。应理解，在本发明的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

本发明所提供的几个方法实施例中所揭露的方法，在不冲突的情况下可以任意组合，得到新的方法实施例。

本发明所提供的几个产品实施例中所揭露的特征，在不冲突的情况下可以任意组合，得到新的产品实施例。

本发明所提供的几个方法或设备实施例中所揭露的特征，在不冲突的情况下可以任意组合，得到新的方法实施例或设备实施例。

以上所述，仅为本发明的实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。