百度移动端首页秒开学习

百度首页秒开

咱们打开手机端看百度首页，搜索框，新闻，图片，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...