一种浏览器缓存方法和装置的制造方法_2

文档序号:9375668阅读:来源:国知局
(如淘宝双11,⑶N流量达400G/s)将能大大提闻网站性能。
[0050]经测试,不同浏览器的点击刷新(F5或Ctrl+F5)过程和onload事件执行过程有以下两种情况:
[0051]Chrome浏览器或safari浏览器中,如图2所示,流程如下:
[0052]步骤201:用户点击F5或CtrI+F5 ;
[0053]步骤202:浏览器收到用户点击F5或Ctrl+F5消息,打开刷新状态;
[0054]步骤203:浏览器向服务器发送HTTP资源请求;
[0055]步骤204:服务器返回304消息或网页资源;
[0056]步骤205:浏览器加载网页,并渲染页面;
[0057]本步骤中,如果服务器返回的是304消息,则浏览器在本地缓存目录中读取网页资源进行加载,并渲染页面;如果服务器返回的是网页资源,则浏览器直接根据网页资源加载网页,并渲染页面。
[0058]步骤206:浏览器关闭刷新状态;
[0059]步骤207:浏览器触发onload事件。
[0060]IE系列浏览器中,如图3所示,流程如下:
[0061]步骤301:用户点击F5或Ctrl+F5 ;
[0062]步骤302:浏览器收到用户点击F5或Ctrl+F5消息,打开刷新状态;
[0063]步骤303:浏览器向服务器发送HTTP资源请求;
[0064]步骤304:服务器返回304消息或网页资源;
[0065]步骤305:浏览器加载网页,并渲染页面;
[0066]本步骤中,如果服务器返回的是304消息,则浏览器在本地缓存目录中读取网页资源进行加载,并渲染页面;如果服务器返回的是网页资源,则浏览器直接根据网页资源加载网页,并渲染页面。
[0067]步骤306:浏览器触发onload事件;
[0068]步骤307:浏览器关闭刷新状态。
[0069]可以看出,IE系列浏览器中,浏览器触发onload事件是在浏览器关闭刷新状态之前,Chrome浏览器或safari浏览器中,浏览器触发onload事件是在浏览器关闭刷新状态之后,两种情况中,在用户刷新过程中,浏览器均需要向服务器发送HTTP资源请求,增加了流量开销,并不利于高并发场合下的网站刷新性能。
[0070]本发明实例中,浏览器在首次打开网页时,获取第一页面,加载第一页面中的网页属性后,触发页面加载完成事件,在页面加载完成事件中执行对第二页面的初始化请求;通过所述初始化请求获取第二页面,并缓存第二页面到本地;在再次打开所述网页并触发页面加载完成事件后,直接读取缓存的第二页面。这里,所述第一页面可以称为框架页,包括网页属性、页面加载完成事件,其中,所述网页属性包括:层叠样式表(CSS,CascadingStyle Sheet)标签、JS(javascript)标签等,其中,CSS标签一般是CSS外链请求,JS标签一般是JS外链请求;所述页面加载完成事件一般为onload事件;所述初始化请求包括页面初始化对象请求和静态资源请求;所述第二页面可以称为内容页,包括网页的HTML对象、和/或CSS对象、和/或JS对象、和/或图片等网页内容,其中,所述HTML对象可以是HTML文档,所述CSS对象可以是CSS文档,所述JS对象可以是JS文档。
[0071]另外,所述第一页面与所述第二页面需要部署到同一域名下,所述第二页面的获取可以通过ajax get方式拉取。
[0072]下面通过附图及具体实施例对本发明做进一步的详细说明。
[0073]本发明实施例实现一种浏览器缓存方法,在终端侧,如图4所示,该方法主要包括以下几个步骤:
[0074]步骤401:浏览器在首次打开网页时,获取框架页;
[0075]这里,所述框架页包括:网页属性、页面加载完成事件;浏览器在打开网页时,在本地查找是否有所述网页的缓存内容,如链接地址、图标等,在没有所述网页的缓存内容时,确定所述网页为首次打开,之后向服务器发送框架页请求获取框架页,服务器在返回框架页的同时,还可以返回网页的版本号,浏览器可以根据版本号确定是否可以读取缓存,如:在返回的版本号与缓存中的版本号一致时,可以读取缓存内容,在返回的版本号与缓存中的版本号不一致时,不读取缓存内容。
[0076]本实施例需要预先在配置网页时,将网页拆分成框架页和内容页分别进行配置,框架页的大小要尽可能的小,即框架页仅包括不需要缓存的内容和页面加载完成事件,这样,在重新打开该网页时,请求的框架页的开销将很小;而内容页都是可以缓存的内容,如:HTML对象、CSS对象、JS对象、图片等内容。
[0077]步骤402:浏览器加载框架页中网页属性后,触发页面加载完成事件,在页面加载完成事件中执行对内容页的初始化请求;
[0078]其中,所述加载框架页中网页属性可以包括:读取CSS标签和/或JS标签,在CSS标签为CSS外链请求时,根据所述CSS外链请求获取CSS外链内容,在JS标签为JS外链请求时,根据JS外链请求获取JS外链内容,如图5所示,加载网页属性后的网页会显示出CSS外链内容和/或JS外链内容。
[0079]本步骤中,所述在页面加载完成事件中执行对内容页的初始化请求具体是:预先在页面加载完成事件中加入设置延迟时间(setTimeout)事件,设置的延迟时间可以根据浏览器读取缓存的时间确定,一般可以设置成Ims或2ms,在触发页面加载完成事件后,先执行设置延迟时间事件,在延迟时间内,先在本地查询是否有缓存的内容页,如果没有,则在延迟时间到后向服务器发送对内容页的初始化请求;如果有,则直接读取缓存的内容页,在延迟时间到后也不发送对内容页的初始化请求。这里,由于是首次打开网页,本地一定是没有缓存的内容页的,所以,在延迟时间到后向服务器发送对内容页的初始化请求。
[0080]其中,所述对内容页的初始化请求包括内容页初始化对象请求和静态资源请求。[0081 ] 步骤403:浏览器通过所述初始化请求获取内容页,加载和渲染所述内容页,并缓存内容页到本地;
[0082]其中,所述加载和渲染所述内容页包括:将内容页包括的网页的HTML对象、和/或CSS对象、和/或JS对象、和/或图片等网页内容按照网页的版式排布,并根据所述网页内容的参数进行渲染,所述参数包括:颜色、字体大小等;其中,所述HTML对象可以是HTML文档,所述CSS对象可以是CSS文档,所述JS对象可以是JS文档;如图6所示,加载和渲染内容页后浏览器所打开的网页将显示内容页的所有内容,包括HTML对象、和/或CSS对象、和/或JS对象、和/或图片等。
[0083]其中,浏览器还可以将网页的版本号一起与对应的内容页缓存到本地,这里的本地一般是指本地缓存目录。
[0084]步骤404:在通过点击F5或Ctrl+F5刷新所述网页时,浏览器获取框架页,加载框架页中网页属性后,触发页面加载完成事件,读取缓存的内容页;
[0085]这里,由于步骤403中已经将内容页缓存到本地,浏览器在触发页面加载完成事件之后,在执行设置延迟时间事件过程中,由于触发页面加载完成事件标志着刷新完成,浏览器会读取本地的缓存内容,能够读取到缓存的内容页。
[0086]在上述实施例中,使用框架页和内容页分开的缓存方式,对网页中原业务代码无影响,能够支持大部分主流浏览器,实现简单,并且在点击F5或Ctrl+F5刷新所述网页时,不再一定需要向服务器发送HTTP资源请求和接收服务器返回的响应消息,能有效减少刷新过程的请求和网络流量,在高并发、大流量场景有绝对优势,
当前第2页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1