百度首页秒开
我们打开手机端看百度首页，搜索框，新闻，图片，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中，又可以节省网络请求
