一种网页渲染方法及装置制造方法及图纸

本发明专利技术实施例提供了一种网页渲染方法及装置，所述方法包括：获取网页的主资源文件，解析所述主资源文件得到所述网页的CSS文件个数N，所述N为大于0的整数；在所述N大于预设阈值的情况下，获取第i个CSS文件时，解析所述第i个CSS文件，获取所述第i个CSS文件对应的第i个解析结果，所述i取值为1、……、N；根据当前已获取的第1到第i个解析结果进行布局处理，获取布局结果i；根据所述布局结果i，对所述网页进行绘制显示。

A web page rendering method and device

The embodiment of the invention provides a method and device for web page rendering, the method comprises a main resource file to access the page, the main resource file is the web page CSS file number N, wherein N is an integer greater than 0 is greater than the preset threshold; in the case of N, access the I CSS file, the I of the CSS file, the I analysis result to obtain the I of the CSS file corresponding to the I value of 1,...... N; according to the current first to I parsing results, layout results are obtained, and layout result I is obtained; according to the layout result I, the web page is displayed and displayed.

【技术实现步骤摘要】
一种网页渲染方法及装置
本专利技术涉及计算机领域，尤其涉及一种网页渲染方法及装置。
技术介绍
目前，浏览器对网页进行渲染的效果主要是依赖于网页自身的层叠样式表(CascadingStyleSheets，CSS)，所述CSS用于提供网页的样式结构(例如输入框的位置和大小等)。大部分情况下，浏览器对网页进行渲染的过程如下：浏览器接收到网页主资源后，解析主资源得到需要继续加载的CSS文件的序列，并按照该序列依次加载这些CSS文件，浏览器每接收到一个CSS文件就对该CSS文件进行样式解析，然后按照解析结果进行布局处理，等所有CSS文件对应的接收、解析、布局过程结束后，浏览器才会根据最后的布局结果进行网页的绘制，并在浏览窗口显示出绘制完成的网页。上述渲染过程中，浏览器要等所有CSS文件对应的接收、解析、布局过程结束后，才会根据最后的布局结果进行网页的绘制，如果CSS文件较多，浏览器接收完成所有的CSS就需要耗费较长的时间，且还要进行所有CSS文件的解析和对应的网页布局后才进行网页的绘制，这就会导致浏览器在加载网页时出现白屏并等待很长时间才出现网页画面的情况。为了避免出现长时间的白屏现象，现有一种常见的优化方法是浏览器接收到网页主资源后，不等CSS文件的接收、解析、布局，而是直接根据主资源按照缺省样式对应的布局结果进行网页的绘制和显示，等完成所有的CSS文件解析后的样式布局后，再重新进行网页绘制和显示。上述优化方法虽然可以避免出现长时间的白屏现象，但是，采用缺省样式对应的布局结果对网页进行绘制，容易出现布局混乱的网页，如网页上有乱码等。
技术实现思路
为解决现有存在的技术问题，本专利技术实施例提供一种网页渲染方法及装置，可以即避免长时间的白屏又避免布局混乱。为达到上述目的，本专利技术实施例的技术方案是这样实现的：一种网页渲染方法，所述方法包括：获取网页的主资源文件，解析所述主资源文件得到所述网页的CSS文件个数N，所述N为大于0的整数；在所述N大于预设阈值的情况下，获取第i个CSS文件时，解析所述第i个CSS文件，获取所述第i个CSS文件对应的第i个解析结果，所述i取值为1、……、N；根据当前已获取的第1到第i个解析结果进行布局处理，获取布局结果i；根据所述布局结果i，对所述网页进行绘制显示。上述方案中，所述根据当前已获取的第1到第i个解析结果进行布局处理，获取布局结果i，包括：确定所述第i个解析结果对应的第i组标签元素；在所述第i组标签元素中包括预设的大范围标签元素或者所述i等于所述N时，根据当前已获取的第1至i个解析结果进行布局处理，获取布局结果i。上述方案中，所述方法还包括：在所述第i组标签元素不包括预设的大范围标签元素且所述i不等于所述N时，存储所述第i个解析结果。上述方案中，所述方法还包括：在解析所述主资源文件时，还得到文档对象模型DOM树，所述DOM树中记录有对象对应的标签元素；所述解析结果中包括样式对象；相应地，所述确定所述第i个解析结果对应的第i组标签元素，包括：查找所述DOM树，确定所述第i个解析结果中的样式对象对应的标签元素。上述方案中，所述方法还包括：在所述N小于等于预设阈值的情况下，获取第i个CSS文件时，解析所述第i个CSS文件，获取所述第i个CSS文件对应的第i个解析结果；根据所述第1至N个解析结果进行布局处理，获取最终的布局结果；根据所述最终的布局结果，对所述网页进行绘制显示。一种网页渲染装置，所述装置包括：获取模块，用于获取网页的主资源文件以及第i个CSS文件；解析模块，用于解析所述获取模块获取的所述主资源文件得到所述网页的CSS文件个数N，并在所述获取模块获取到所述第i个CSS文件时，解析所述第i个CSS文件，获取所述第i个CSS文件对应的第i个解析结果，所述N为大于0的整数，所述i取值为1、……、N；处理模块，用于确定所述解析模块得到的所述N是否大于预设阈值；布局模块，用于在所述处理模块确定所述N大于预设阈值时，根据所述解析模块当前已获取的第1到第i个解析结果进行布局处理，获取布局结果i；绘制模块，用于根据所述布局模块获取的所述布局结果i，对所述网页进行绘制显示。上述方案中，所述处理模块，还用于确定所述解析模块获取的所述第i个解析结果对应的第i组标签元素，并确定所述第i组标签元素中是否包括预设的大范围标签元素以及所述i是否等于所述N；所述布局模块，具体用于在所述处理模块确定所述第i组标签元素中包括预设的大范围标签元素或者所述i等于所述N时，根据所述解析模块当前已获取的第1至i个解析结果进行布局处理，获取布局结果i。上述方案中，所述装置还包括：存储模块，其中，所述存储模块，用于在所述处理模块确定第i组标签元素不包括预设的大范围标签元素且所述i不等于所述N时，存储所述第i个解析结果。上述方案中，所述解析结果中包括样式对象；所述解析模块，还用于在解析所述主资源文件时，得到文档对象模型DOM树，所述DOM树中记录有对象对应的标签元素；相应地，所述处理模块，用于查找所述DOM树，确定所述第i个解析结果中的样式对象对应的标签元素。上述方案中，所述布局模块，还用于在所述处理模块确定所述N小于等于预设阈值时，根据所述第1至N个解析结果进行布局处理，获取最终的布局结果；所述绘制模块，还用于根据所述布局模块获取的最终的布局结果，对所述网页进行绘制显示。本专利技术实施例提供了一种网页渲染方法及装置，在获取网页的主资源文件后，解析所述主资源文件得到所述网页的CSS文件个数N，在所述N大于预设阈值的情况下，获取第i个CSS文件时，解析所述第i个CSS文件，获取所述第i个CSS文件对应的第i个解析结果，所述i取值为1、……、N；根据当前已获取的第1到第i个解析结果进行布局处理，获取布局结果i；根据所述布局结果i，对所述网页进行绘制显示；即在网页对应的CSS文件过多的情况下，终端上的渲染引擎不再等所有的CSS文件都完成解析，并按照解析结果进行布局处理后再进行绘制，而是每获取一个CSS文件解析出一个解析结果后，就根据当前已获取的所有解析结果进行布局处理，获取一个布局结果，并根据该布局结果，对网页进行绘制，在终端浏览器的浏览窗口显示绘制的网页，避免由于CSS文件过多出现的长时间白屏现象，并且，终端是根据该网页对应的部分CSS文件进行的网页绘制，不会出现布局混乱的现象。附图说明图1为本专利技术实施例1提供的一种网页渲染方法的流程示意图；图2为本专利技术实施例2提供的一种网页渲染方法的流程示意图；图3为本专利技术实施例3提供的一种网页渲染装置的结构框图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述。实施例1本专利技术实施例提供了一种网页渲染方法，如图2所示，本实施例方法的处理流程包括以下步骤：步骤S101、获取网页的主资源文件，解析所述主资源文件得到所述网页的CSS文件个数N。这里，用户在终端(如智能手机、电脑等)上进行一操作打开某网页时，终端响应用户的操作，获取该网页的标识，并将该网页的标识携带在资源请求中发送给服务器，服务器接收到该资源请求后，就会根据该网页的标识向终端返回该网页的主资源文件。这里，终端获取到该网页的主资源文件后，会对所述主资源文件进行解析，从解析后的主资源文件中本文档来自技高网...

【技术保护点】
一种网页渲染方法，其特征在于，所述方法包括：获取网页的主资源文件，解析所述主资源文件得到所述网页的CSS文件个数N，所述N为大于0的整数；在所述N大于预设阈值的情况下，获取第i个CSS文件时，解析所述第i个CSS文件，获取所述第i个CSS文件对应的第i个解析结果，所述i取值为1、……、N；根据当前已获取的第1到第i个解析结果进行布局处理，获取布局结果i；根据所述布局结果i，对所述网页进行绘制显示。

【技术特征摘要】
1.一种网页渲染方法，其特征在于，所述方法包括：获取网页的主资源文件，解析所述主资源文件得到所述网页的CSS文件个数N，所述N为大于0的整数；在所述N大于预设阈值的情况下，获取第i个CSS文件时，解析所述第i个CSS文件，获取所述第i个CSS文件对应的第i个解析结果，所述i取值为1、……、N；根据当前已获取的第1到第i个解析结果进行布局处理，获取布局结果i；根据所述布局结果i，对所述网页进行绘制显示。2.根据权利要求1所述的方法，其特征在于，所述根据当前已获取的第1到第i个解析结果进行布局处理，获取布局结果i，包括：确定所述第i个解析结果对应的第i组标签元素；在所述第i组标签元素中包括预设的大范围标签元素或者所述i等于所述N时，根据当前已获取的第1至i个解析结果进行布局处理，获取布局结果i。3.根据权利要求2所述的方法，其特征在于，所述方法还包括：在所述第i组标签元素不包括预设的大范围标签元素且所述i不等于所述N时，存储所述第i个解析结果。4.根据权利要求2所述的方法，其特征在于，所述方法还包括：在解析所述主资源文件时，还得到文档对象模型DOM树，所述DOM树中记录有对象对应的标签元素；所述解析结果中包括样式对象；相应地，所述确定所述第i个解析结果对应的第i组标签元素，包括：查找所述DOM树，确定所述第i个解析结果中的样式对象对应的标签元素。5.根据权利要求1所述的方法，其特征在于，所述方法还包括：在所述N小于等于预设阈值的情况下，获取第i个CSS文件时，解析所述第i个CSS文件，获取所述第i个CSS文件对应的第i个解析结果；根据所述第1至N个解析结果进行布局处理，获取最终的布局结果；根据所述最终的布局结果，对所述网页进行绘制显示。6.一种网页渲染装置，其特征在于，所述装置包括：获取模块，用于获取网页的主资源文件以及第i个CSS文件；解析模块，用于解析所述获取模块获...

【专利技术属性】
技术研发人员：曹刚，
申请(专利权)人：中兴通讯股份有限公司，
类型：发明
国别省市：广东,44