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

最新推荐文章于 2024-10-25 09:09:29 发布

Jqlender

最新推荐文章于 2024-10-25 09:09:29 发布

阅读量1.5k

点赞数

分类专栏：前端优化文章标签：前端优化首屏加载

本文链接：https://blog.csdn.net/qq_34035425/article/details/84959828

版权

本文探讨了百度移动端首页的前端优化策略，包括静态文件内联、缓存利用localStorage、合并外链请求、缓存DOM、使用iconfont、按需加载、减少DNS解析和极小图片转base64等方法，旨在提升首屏加载速度和用户体验。

摘要由CSDN通过智能技术生成

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 +