1.静态文件放置
百度首页没有外链css,js也很少,是为了减少http请求,一般首屏所需要的js与css,全部在上线前编译内联至HTML中,如下图:
2.缓存 cookie,localstorage
如果html,css,js一直不变,就直接缓存到客户端localstorage中去,下次加载如果只需读取本地存储的内容。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<div data-local="test1">
这部分内容非常多将会缓存起来
这部分内容非常多将会缓存起来
这部分内容非常多将会缓存起来
</div>
<script>
function cacheOne(attrid) {
var content = document.querySelector('[data-local="' + attrid + '"]').outerHTML;
localStorage.setItem(attrid, content);
}
cacheOne('test1');
</script>
</body>
</html>
下次获取本地存储:
<script type="text/javascript" data-local="test1">
function readOne(attrid) {
var content = localStorage.getItem(attrid);
document.querySelector('[data-local="' + attrid + '"]').outerHTML = content;
}
readOne('test1');
</script>
那什么时候读localStorage,什么时候写localStorage
在写入localStorage的时候,同时在cookie中写下当前所有要缓存的版本号,cookie会在同步访问的时候传送到服务端的,而localStorage不会,所以服务端决定要传送内容还是传送读取localStorage的代码就靠cookie了,这里简单使用php试验下:
如果cookie中有version,证明存储过cookie,有本地存储localStorage,只需要传读取localStorage并且写入的代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<?php $curversion='1'?>
<?php if ($_COOKIE['localversion'] !== $curversion) {?>
<div data-local="test1">
这部分内容非常多将会缓存起来
这部分内容非常多将会缓存起来
这部分内容非常多将会缓存起来
</div>
<script>
function cacheOne(attrid) {
var content = document.querySelector('[data-local="' + attrid +'"]').outerHTML
;
localStorage.setItem(attrid, content);
}
cacheOne('test1');
document.cookie="localversion=<?php echo $curversion?>;";
</script>
<?php } else {?>
<script type="text/javascript" data-local="test1">
function readOne(attrid) {
var content = localStorage.getItem(attrid);
document.querySelector('[data-local="' + attrid + '"]').outerHTML = content
;
}
readOne('test1');
</script>
<?php }?>
</body>
</html>
3.外链(将所有js/css)等静态文件通过一个接口返回。
可以达到合并外链请求目的,又可以将这些静态文件缓存到localStorage中。
每个文件都会返回个版本号。
前端首屏加载完成后,会用这些版本号与localStorage中进行一一对比,发现不一致的js/css文件,会一起发送一个合并请求,更新下缓存内容,保证每个文件的缓存与版本迭代,同时避免了过多的外链。
4.缓存DOM
模版也会缓存到localStorage中
5.使用iconfont或字体图标
6.按需加载与缓存
先加载首屏,用户下拉在加载更多,将不变的html/css/js存储到了localStorage中,异步加载底部内容时,如果内容不变,服务端就不要返回了。
7.减少DNS解析
少量的静态文件域名,百度logo以及iconfont图片域名均是在m.baidu.com域下的,这样节省了DNS的解析。
8.极小图片转成base64
对于小于1k的图片,我们将其转换为base64,并写入csss中,一起缓存到localStorage中去,这样即节省网络请求,同时图片也可以缓存到本地。