首页优化加载(聊聊百度移动端首页前端优化)

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中去，这样即节省网络请求，同时图片也可以缓存到本地。