好搜首页的cache研究
前言
现在jquery
这么火,很多大公司也逐渐的“放弃”自己类库而使用jquery
了,比如百度,360好搜(以下简称好搜)等,于是某天想看看他们用的哪个版本,百度源码里一搜,很明显的外链了jquery-1.10.2
,而在360里源码居然没有找到,使我好奇心猛的上来了,于是我就查呀查。
本以为是用类型requirejs
之类的工具处理了,可是抓取他的网络请求里也没有,且发现个怪异的问题,好搜的网络请求里的流量是异常的少,这是做什么处理了吗?于是。。。
思路
我查看好搜cookie
发现一些资源标识,查看localStorage
发现里面有大量代码,于是我想到了,可能是把代码放在localStorage
里了,之前也见过类似的形式,但大多出现在移动端,主要是为了省流量,后来回过头再看百度,发现localStorage
里的代码更多。那么好搜是如何处理的呢?又如何兼容的呢?
标识截图:
我把浏览器的cookie
禁止后发现,好搜源码里内镶了jquery
,用的版本跟百度的一样,哈哈。
禁用cookie
后截图:
大概思路是这样的:每个资源(包括js,css)都有自己的uri
标识,并且不会重复,后端在渲染页面的时候先判断cookie
里有没有这个uri
的信息,如果有则说明加载过了,则忽略,如果没有则加载这个uri
的代码片段,当然需要js
做一些事,大概伪代码是这样的:
// 后端渲染页面
// 如果cookie中存在,则证明已经加载并缓存过
if(cookie.get(uri)){
<script>
// 读取这个uri信息输出到页面
cache.get(uri);
</script>
} else {
// 这里是大量的uri的代码片段
<script>
// 写入缓存
cache.set(uri);
// 写入cookie
cookie.set(uri);
</script>
}
优点和注意
- 这样就充分的利用缓存来减少网络的成本,带来的好处大大的
- 只要
cache.js
位置靠前,加载页面整个css
都没问题,测试demo中加载同link
方式加载效果一致,没有出来闪烁、卡顿的问题 - 要注意做版本控制,时间控制,比如现在要上线项目,如何让用户访问到最新的
- 需要注意到用户禁用
cookie
的时候,别出现如:
感谢 @乱码
</>