百度移动端首页秒开学习

百度首页秒开

我们打开手机端看百度首页，搜索框，新闻，图片，tab标签... 秒开... 那他是怎么做到呢？

• 静态文件放置

百度首页是没有外链的，js，css代码在上线之前都编译到了html里

• 缓存

对于一些页面不变的静态文件，例如html/css/javascript如果有些不变的，就会把它存到本地，例如localStorage，可以通过对标签添加一些属性data-local='aaa',来标识内容，等到，再次加载的时候，就从localStorage中找到对应的内容，进行渲染

存：
<script>
    function cacheOne(attrid) {
        var content = document.querySelector('[data-local="' + attrid + '"]').outerHTML;
        localStorage.setItem(attrid, content);
    }
    cacheOne('aaa');
</script>
取：
<script type="text/javascript" data-local="test1">
    function readOne(attrid) {
        var content = localStorage.getItem(attrid);
        document.querySelector('[data-local="' + attrid + '"]').outerHTML = content;
    }
    readOne('aaa');
</script>

• 外链
  如果都存本地的话，那手机内存会暴，所以有些静态文件又通过一个借口返回，通过外链一些静态资源和本地存的资源减少了页面加载的时间，但是问题又来了，如果请求的资源不同于本地存的，那岂不又炸了...
  所以，会给每个文件以自己的内容生成的版本号为戳，标识自己的唯一性，每次服务端返回页面时，会把当前在服务器上的所有静态文件版本号，返给前端，首屏加载完成后，会用这些版本号与local中进行一一比较，如果发现不一致，就发起一个合并请求，这样可以保证每个文件的缓存与版本迭代，同时，避免了过多的外链。
• 缓存Dom
  不变的数据，例如dom就缓存，render树基本不发生变化就进行缓存，对于可变的就不能缓存
• 使用iconfont
  如果有很多icon图标我们最好使用iconfont，节省一些资源
• 卡片的异步加载与缓存
  首屏显示几个卡片，等到下拉的时候在加载更多的卡片
• 不在首屏的就要异步化
  当然，这种是我们经常用到的，首屏人人都会看到 但是滑到底部就人少了，所以这种情况我们就按需加载
• 少量静态文件的域名
  例如一些iconfont，图片就放在别的域名下，虽然节省了DNS的解析，但请求图片的时候会携带cookie所以我们要减少cookie，来提升性能
• 极小的图片base64化
  小的图片我们base64化存到本地localStorage中，又可以节省网络请求

原文 https://segmentfault.com/a/11...