CN106777055A - 一种实现网站接口化渲染的方法与装置 - Google Patents
一种实现网站接口化渲染的方法与装置 Download PDFInfo
- Publication number
- CN106777055A CN106777055A CN201611131599.8A CN201611131599A CN106777055A CN 106777055 A CN106777055 A CN 106777055A CN 201611131599 A CN201611131599 A CN 201611131599A CN 106777055 A CN106777055 A CN 106777055A
- Authority
- CN
- China
- Prior art keywords
- interface
- block
- rendered
- page
- website
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明提供了一种实现网站接口化渲染的方法与装置，该方法包括以下步骤：1)浏览器接收服务器响应的HTML内容，加载网站页面首屏完毕后，由前端脚本获取页面中待接口化渲染的区块；2)前端脚本找到了页面中待接口化渲染的区块后，将这些区块缓存起来，同去本地配置文件中找到对应的接口地址；3)根据缓存的区块和区块对应的接口，前端脚本将会分批请求各个区块所对应的接口地址，从服务器上获取各个区块的HTML内容；完成渲染；4)当所有待接口化渲染的区块完成渲染或被删除处理后，结束。本发明方法使用接口进行渲染，利于网站页面的首屏渲染加速和降低网络带宽消耗，还能便于网站的SEO扩展。
Description
技术领域
本发明涉及互联网技术，尤其涉及一种实现网站接口化渲染的方法与装置。
背景技术
目前互联网弹幕直播网站的页面渲染逻辑一般都是：客户端浏览器发送请求给网站服务器，服务器收到请求并完成页面内容渲染，然后服务器响应内容给客户端浏览器，浏览器再解析服务器响应的内容并渲染展示给用户。当页面内容越来越多，服务器上渲染页面内容的时间会增长，同时服务器与客户端浏览器之间的数据传输时间会变长，不仅影响用户体验，而且极大的增加的网站的带宽消耗。
发明内容
本发明要解决的技术问题在于针对现有技术中的缺陷，提供一种实现网站接口化渲染的方法与装置。
本发明解决其技术问题所采用的技术方案是：一种实现网站接口化渲染的方法，包括以下步骤：
1)浏览器接收服务器响应的HTML内容，加载网站页面首屏完毕后(即window.onload事件)，由前端脚本获取页面中待接口化渲染的区块；
所述页面中待接口化渲染的区块是前端预先定义好的有data-async-render属性的HTML DIV元素；
前端脚本通过寻找当前网页中所有包含data-async-render属性的DIV元素，以此来收集当前网页中待接口渲染的容器；如果前端脚本没有找到了待接口化渲染的区块，则终止执行，否则进入步骤2)
2)前端脚本找到了页面中待接口化渲染的区块后，将这些区块缓存起来，同时根据区块的data-async-render属性的值，去本地配置文件中找到对应的接口地址，所述本地配置文件是前端提前定义好的js文件，在页面初始化的时候会被页面加载；
3)根据缓存的区块和区块对应的接口，前端脚本将会分批请求各个区块所对应的接口地址，从服务器上获取各个区块的HTML内容；
如果接口返回正确，前端脚本将从服务器上获得的各个区块的HTML内容插入到对应的各个区块中去，浏览器会自动完成渲染；
反之如果请求失败，前端脚本将会从页面中和缓存中删除对应的区块；
4)当所有待接口化渲染的区块完成渲染或被删除处理后，结束。
按上述方案，所述步骤1)DIV元素中data-async-render属性，其属性的值是唯一的，用于区分其它的区块。
按上述方案，所述步骤3)中分批请求区块所对应的接口地址时，每批请求一个区块所对应的接口地址。
一种实现网站接口化渲染的装置，包括：
获取模块，用于获取网页页面中待接口化渲染的区块；具体如下：浏览器接收服务器响应的HTML内容，加载网站页面首屏完毕后，由前端脚本获取页面中待接口化渲染的区块；
所述页面中待接口化渲染的区块是前端预先定义好的有data-async-render属性的HTML DIV元素；
前端脚本通过寻找当前网页中所有包含data-async-render属性的DIV元素，以此来收集当前网页中待接口渲染的容器；
接口地址查询模块，用于当前端脚本找到了页面中待接口化渲染的区块后，将这些区块缓存起来，同时根据区块的data-async-render属性的值，去本地配置文件中找到对应的接口地址；所述本地配置文件是前端提前定义好的js文件，在页面初始化的时候会被页面加载；
渲染模块，用于根据缓存的区块和区块对应的接口，由前端脚本将会分批请求各个区块所对应的接口地址，从服务器上获取各个区块的HTML内容；
如果接口返回正确，前端脚本将从服务器上获得的各个区块的HTML内容插入到对应的各个区块中去，浏览器会自动完成渲染；
反之如果请求失败，前端脚本将会从页面中和缓存中删除对应的区块。
按上述方案，所述获取模块中DIV元素中data-async-render属性，其属性的值是唯一的，用于区分其它的区块。
按上述方案，所述渲染模块中分批请求区块所对应的接口地址时，每批请求一个区块所对应的接口地址。
本发明产生的有益效果是：本发明提供了实现网站接口化渲染的方法，开发者通过本方法可以将网站中的每个页面非核心的内容，使用接口进行渲染，这样既可以达到网站页面的首屏渲染加速和降低网络带宽消耗，还能便于网站的SEO扩展。由于网站页面中被接口渲染的模块，不会被搜索引擎爬取到，所以从另一方面增加了网站的信息安全性。
附图说明
下面将结合附图及实施例对本发明作进一步说明，附图中：
图1是本发明实施例的方法流程图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
用户在浏览器端输入域名，按下回车，此时浏览器会解析域名并发送请求给服务器，服务器接到请求并处理，响应HTML内容给浏览器，浏览器接收到HTML并渲染出来。在浏览器渲染HTML的过程中，前端的js脚本开始执行，此时js脚本根据网站开发者预先定义的代码内容开始执行。js脚本通过浏览器原生提供的BOM对象操作浏览器原生支持的DOM对象。
接口是服务器端对外提供的WEB接口，用于提供在浏览器端运行的js脚本的请求
如图1所示，一种实现网站接口化渲染的方法，包括以下步骤：
1)浏览器接收服务器响应的HTML内容，加载网站页面首屏完毕后(即window.onload事件)，由前端脚本获取页面中待接口化渲染的区块；
所述页面中待接口化渲染的区块是前端预先定义好的有data-async-render属性的HTML DIV元素；每个DIV元素中data-async-render属性，其属性的值是唯一的，用于区分其它的区块。开发者在HTML DIV元素上面加上属性data-async-render的属性，表示当前DIV需要被接口化渲染。
前端脚本通过寻找当前网页中所有包含data-async-render属性的DIV元素，以此来收集当前网页中待接口渲染的容器；如果前端脚本没有找到了待接口化渲染的区块，则终止执行，否则进入步骤2)；
代码如下：
2)前端脚本找到了页面中待接口化渲染的区块后，将这些区块缓存起来，同时根据区块的data-async-render属性的值，去本地配置文件中找到对应的接口地址，所述本地配置文件是前端提前定义好的js文件，在页面初始化的时候会被页面加载；
3)根据缓存的区块和区块对应的接口，前端脚本将会分批(每批请求一个，总批次没有限制)请求各个区块所对应的接口地址，从服务器上获取各个区块的HTML内容；
如果接口返回正确，前端脚本将从服务器上获得的各个区块的HTML内容插入到对应的各个区块中去，浏览器会自动完成渲染；
反之如果请求失败，前端脚本将会从页面中和缓存中删除对应的区块。
代码如下：
4)根据DIV元素中data-async-render属性值，遍历接口化渲染的区块，当所有待接口化渲染的区块完成渲染或被删除处理后，结束。
根据以上方法，本发明还提供一种实现网站接口化渲染的装置，包括：
获取模块，用于获取网页页面中待接口化渲染的区块；具体如下：浏览器接收服务器响应的HTML内容，加载网站页面首屏完毕后，由前端脚本获取页面中待接口化渲染的区块；
所述页面中待接口化渲染的区块是前端预先定义好的有data-async-render属性的HTML DIV元素；对于DIV元素中data-async-render属性，其属性的值是唯一的，用于区分其它的区块。
前端脚本通过寻找当前网页中所有包含data-async-render属性的DIV元素，以此来收集当前网页中待接口渲染的容器；
接口地址查询模块，用于当前端脚本找到了页面中待接口化渲染的区块后，将这些区块缓存起来，同时根据区块的data-async-render属性的值，去本地配置文件中找到对应的接口地址；所述本地配置文件是前端提前定义好的js文件，在页面初始化的时候会被页面加载；
渲染模块，用于根据缓存的区块和区块对应的接口，由前端脚本将会分批请求各个区块所对应的接口地址，从服务器上获取各个区块的HTML内容；
如果接口返回正确，前端脚本将从服务器上获得的各个区块的HTML内容插入到对应的各个区块中去，浏览器会自动完成渲染；
反之如果请求失败，前端脚本将会从页面中和缓存中删除对应的区块。
应当理解的是，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，而所有这些改进和变换都应属于本发明所附权利要求的保护范围。
Claims (6)
1.一种实现网站接口化渲染的方法，其特征在于，包括以下步骤：
1)浏览器接收服务器响应的HTML内容，加载网站页面首屏完毕后，由前端脚本获取页面中待接口化渲染的区块；
所述页面中待接口化渲染的区块是前端预先定义好的有data-async-render属性的HTML DIV元素；
前端脚本通过寻找当前网页中所有包含data-async-render属性的DIV元素，以此来收集当前网页中待接口渲染的容器；如果前端脚本没有找到待接口化渲染的区块，则终止执行，否则进入步骤2)；
2)前端脚本找到了页面中待接口化渲染的区块后，将这些区块缓存起来，同时根据区块的data-async-render属性的值，去本地配置文件中找到对应的接口地址，所述本地配置文件是前端提前定义好的js文件，在页面初始化的时候会被页面加载；
3)根据缓存的区块和区块对应的接口，前端脚本将会分批请求各个区块所对应的接口地址，从服务器上获取各个区块的HTML内容；
如果接口返回正确，前端脚本将从服务器上获得的各个区块的HTML内容插入到对应的各个区块中去，浏览器会自动完成渲染；
反之如果请求失败，前端脚本将会从页面中和缓存中删除对应的区块；
4)当所有待接口化渲染的区块完成渲染或被删除处理后，结束。
2.根据权利要求1所述的实现网站接口化渲染的方法，其特征在于，所述步骤1)DIV元素中data-async-render属性，其属性的值是唯一的，用于区分其它的区块。
3.根据权利要求1所述的实现网站接口化渲染的方法，其特征在于，所述步骤3)中分批请求区块所对应的接口地址时，每批请求一个区块所对应的接口地址。
4.一种实现网站接口化渲染的装置，其特征在于，包括：
获取模块，用于获取网页页面中待接口化渲染的区块；具体如下：浏览器接收服务器响应的HTML内容，加载网站页面首屏完毕后，由前端脚本获取页面中待接口化渲染的区块；
所述页面中待接口化渲染的区块是前端预先定义好的有data-async-render属性的HTML DIV元素；
前端脚本通过寻找当前网页中所有包含data-async-render属性的DIV元素，以此来收集当前网页中待接口渲染的容器；
接口地址查询模块，用于当前端脚本找到了页面中待接口化渲染的区块后，将这些区块缓存起来，同时根据区块的data-async-render属性的值，去本地配置文件中找到对应的接口地址；所述本地配置文件是前端提前定义好的js文件，在页面初始化的时候会被页面加载；
渲染模块，用于根据缓存的区块和区块对应的接口，由前端脚本将会分批请求各个区块所对应的接口地址，从服务器上获取各个区块的HTML内容；
如果接口返回正确，前端脚本将从服务器上获得的各个区块的HTML内容插入到对应的各个区块中去，浏览器会自动完成渲染；
反之如果请求失败，前端脚本将会从页面中和缓存中删除对应的区块。
5.根据权利要求4所述的实现网站接口化渲染的装置，其特征在于，所述获取模块中DIV元素中data-async-render属性，其属性的值是唯一的，用于区分其它的区块。
6.根据权利要求4所述的实现网站接口化渲染的装置，其特征在于，所述渲染模块中分批请求区块所对应的接口地址时，每批请求一个区块所对应的接口地址。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611131599.8A CN106777055B (zh) | 2016-12-09 | 2016-12-09 | 一种实现网站接口化渲染的方法与装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611131599.8A CN106777055B (zh) | 2016-12-09 | 2016-12-09 | 一种实现网站接口化渲染的方法与装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106777055A true CN106777055A (zh) | 2017-05-31 |
| CN106777055B CN106777055B (zh) | 2021-01-01 |
Family
ID=58879732
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611131599.8A Active CN106777055B (zh) | 2016-12-09 | 2016-12-09 | 一种实现网站接口化渲染的方法与装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106777055B (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110489695A (zh) * | 2019-07-30 | 2019-11-22 | 广东分利宝金服科技有限公司 | 模块驱动视图数据的方法及装置 |
| CN112163175A (zh) * | 2020-10-14 | 2021-01-01 | 南京焦点领动云计算技术有限公司 | 一种网站移动端速度优化方法 |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101963984A (zh) * | 2010-09-28 | 2011-02-02 | 北京伟库电子商务科技有限公司 | 页面局部区块渲染方法和系统 |
| CN102662966A (zh) * | 2012-03-08 | 2012-09-12 | 中国科学院计算机网络信息中心 | 一种面向主题的获取动态页面内容的方法及系统 |
| CN104765855A (zh) * | 2015-04-21 | 2015-07-08 | 车智互联（北京）科技有限公司 | 一种应用于浏览器的首屏性能优化方法 |
| CN105069132A (zh) * | 2015-08-17 | 2015-11-18 | 中国海洋大学 | 一种基于静态外壳的网页实现方法 |
| CN105426204A (zh) * | 2015-11-05 | 2016-03-23 | 浪潮软件集团有限公司 | 一种基于国产CPU、操作系统和浏览器的Web高速加载渲染方法 |
| US20160094609A1 (en) * | 2001-04-09 | 2016-03-31 | Mercury Kingdom Assets Limited | Server-based browser system |
| CN105630795A (zh) * | 2014-10-30 | 2016-06-01 | 镇江华扬信息科技有限公司 | 一种基于JQuery框架的Web查询视图方法 |
| CN105760405A (zh) * | 2014-12-19 | 2016-07-13 | 阿里巴巴集团控股有限公司 | 用于加载web页面的网络资源获取方法、缓存方法及装置 |
| CN105893160A (zh) * | 2016-06-24 | 2016-08-24 | 合信息技术（北京）有限公司 | 一种多接口数据的调度方法 |
| US20160323217A1 (en) * | 2015-04-28 | 2016-11-03 | Dropbox, Inc. | Inserting content into an application from an online synchronized content management system |
| CN106155602A (zh) * | 2015-03-24 | 2016-11-23 | 阿里巴巴集团控股有限公司 | 一种页面模块的渲染方法、装置以及显示设备 |
-
2016
- 2016-12-09 CN CN201611131599.8A patent/CN106777055B/zh active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160094609A1 (en) * | 2001-04-09 | 2016-03-31 | Mercury Kingdom Assets Limited | Server-based browser system |
| CN101963984A (zh) * | 2010-09-28 | 2011-02-02 | 北京伟库电子商务科技有限公司 | 页面局部区块渲染方法和系统 |
| CN102662966A (zh) * | 2012-03-08 | 2012-09-12 | 中国科学院计算机网络信息中心 | 一种面向主题的获取动态页面内容的方法及系统 |
| CN105630795A (zh) * | 2014-10-30 | 2016-06-01 | 镇江华扬信息科技有限公司 | 一种基于JQuery框架的Web查询视图方法 |
| CN105760405A (zh) * | 2014-12-19 | 2016-07-13 | 阿里巴巴集团控股有限公司 | 用于加载web页面的网络资源获取方法、缓存方法及装置 |
| CN106155602A (zh) * | 2015-03-24 | 2016-11-23 | 阿里巴巴集团控股有限公司 | 一种页面模块的渲染方法、装置以及显示设备 |
| CN104765855A (zh) * | 2015-04-21 | 2015-07-08 | 车智互联（北京）科技有限公司 | 一种应用于浏览器的首屏性能优化方法 |
| US20160323217A1 (en) * | 2015-04-28 | 2016-11-03 | Dropbox, Inc. | Inserting content into an application from an online synchronized content management system |
| CN105069132A (zh) * | 2015-08-17 | 2015-11-18 | 中国海洋大学 | 一种基于静态外壳的网页实现方法 |
| CN105426204A (zh) * | 2015-11-05 | 2016-03-23 | 浪潮软件集团有限公司 | 一种基于国产CPU、操作系统和浏览器的Web高速加载渲染方法 |
| CN105893160A (zh) * | 2016-06-24 | 2016-08-24 | 合信息技术（北京）有限公司 | 一种多接口数据的调度方法 |
Non-Patent Citations (5)
| Title |
|---|
| GONGQI: "探索react native首屏渲染最佳实践", 《博客园》 * |
| TODAYHAPPY: "关于window.onload的一些小理解", 《博客园》 * |
| VAJOY: "浅谈WEB页面提速（前端向）", 《HTTPS://WWW.CNBLOGS.COM/VAJOY/P/4183569.HTML》 * |
| WINDOW_NET: "jQuery实现AJAX定时刷新局部页面实例", 《博客园》 * |
| 无: "HTML 5 的data-* 自定义属性 (/archives/4715)", 《WEB前端开发》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110489695A (zh) * | 2019-07-30 | 2019-11-22 | 广东分利宝金服科技有限公司 | 模块驱动视图数据的方法及装置 |
| CN112163175A (zh) * | 2020-10-14 | 2021-01-01 | 南京焦点领动云计算技术有限公司 | 一种网站移动端速度优化方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106777055B (zh) | 2021-01-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9794242B2 (en) | Method, apparatus and application platform for realizing logon to an application service website | |
| CN107341160B (zh) | 一种拦截爬虫的方法及装置 | |
| CN103139292B (zh) | 在http代理中处理图片的方法、代理服务器及系统 | |
| US20150058407A1 (en) | Systems, methods, and apparatuses for implementing the simultaneous display of multiple browser client cursors at each browser client common to a shared browsing session | |
| CN104184832B (zh) | 网络应用中的数据提交方法及装置 | |
| WO2016173200A1 (zh) | 用于检测恶意网址的方法和系统 | |
| CN105072123B (zh) | 一种集群环境下的单点登陆退出方法及系统 | |
| CN110020062B (zh) | 一种可定制的网络爬虫方法及系统 | |
| CN107341395B (zh) | 一种拦截爬虫的方法 | |
| CN102761554B (zh) | 向客户端推送信息的方法、装置及系统 | |
| CN103139137B (zh) | 网络服务提供方法及装置 | |
| CN103455478A (zh) | 加速网页访问的方法和装置 | |
| WO2018001124A1 (zh) | 网页文件发送方法、网页渲染方法及装置、网页渲染系统 | |
| CN107040584B (zh) | 客户端下载图片的方法及装置 | |
| US20170093828A1 (en) | System and method for detecting whether automatic login to a website has succeeded | |
| CN111339456B (zh) | 预加载方法和装置 | |
| CN109359231A (zh) | 一种分布式网络爬虫的信息爬取方法、服务器及存储介质 | |
| DE102015101062B4 (de) | Serversystem, Verfahren zur Steuerung eines Serversystems und Speichermedium | |
| CN112637361A (zh) | 一种页面代理方法、装置、电子设备及存储介质 | |
| CN103716319B (zh) | 一种Web访问优化的装置和方法 | |
| US20140006918A1 (en) | Method and system for web page rearrangement | |
| CN108632361A (zh) | 一种网页上线方法、服务器、系统和存储介质 | |
| CN106777055A (zh) | 一种实现网站接口化渲染的方法与装置 | |
| CN106411868A (zh) | 一种自动识别web爬虫的方法 | |
| CN106899689A (zh) | 一种信息预下发的方法及服务器 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |