[发明专利]一种实现网站接口化渲染的方法与装置

摘要

本发明提供了一种实现网站接口化渲染的方法与装置，该方法包括以下步骤：1)浏览器接收服务器响应的HTML内容，加载网站页面首屏完毕后，由前端脚本获取页面中待接口化渲染的区块；2)前端脚本找到了页面中待接口化渲染的区块后，将这些区块缓存起来，同去本地配置文件中找到对应的接口地址；3)根据缓存的区块和区块对应的接口，前端脚本将会分批请求各个区块所对应的接口地址，从服务器上获取各个区块的HTML内容；完成渲染；4)当所有待接口化渲染的区块完成渲染或被删除处理后，结束。本发明方法使用接口进行渲染，利于网站页面的首屏渲染加速和降低网络带宽消耗，还能便于网站的SEO扩展。

主权项

一种实现网站接口化渲染的方法，其特征在于，包括以下步骤：1)浏览器接收服务器响应的HTML内容，加载网站页面首屏完毕后，由前端脚本获取页面中待接口化渲染的区块；所述页面中待接口化渲染的区块是前端预先定义好的有data‑async‑render属性的HTML DIV元素；前端脚本通过寻找当前网页中所有包含data‑async‑render属性的DIV元素，以此来收集当前网页中待接口渲染的容器；如果前端脚本没有找到待接口化渲染的区块，则终止执行，否则进入步骤2)；2)前端脚本找到了页面中待接口化渲染的区块后，将这些区块缓存起来，同时根据区块的data‑async‑render属性的值，去本地配置文件中找到对应的接口地址，所述本地配置文件是前端提前定义好的js文件，在页面初始化的时候会被页面加载；3)根据缓存的区块和区块对应的接口，前端脚本将会分批请求各个区块所对应的接口地址，从服务器上获取各个区块的HTML内容；如果接口返回正确，前端脚本将从服务器上获得的各个区块的HTML内容插入到对应的各个区块中去，浏览器会自动完成渲染；反之如果请求失败，前端脚本将会从页面中和缓存中删除对应的区块；4)当所有待接口化渲染的区块完成渲染或被删除处理后，结束。