FED

©FrontEndDev.org
2015 - 2024
web@2.22.0 api@2.20.0

好搜首页的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的时候,别出现如:

感谢 @乱码