文章目录
  2. 一，我们可以从哪里做性能优化？
  3. 二、性能体系和技术
  4. 三，代码实例
    1. 图片懒加载：

一，我们可以从哪里做性能优化？

  • 加载：
    • 减少http请求（精灵图，文件的合并）
    • 减少文件大小（资源压缩，图片压缩，代码压缩）
    • CDN（第三方库、大文件、大图）
    • SSR服务端渲染、预优化
    • 懒加载
    • 分包
  • 减少DOM操作，避免回流，文档碎片
  • 动画与操作性能（是否流畅无卡顿）
  • 内存占用（内存如果占用过大浏览器会崩掉）
  • 电量消耗（游戏页面）

二、性能体系和技术

image-20230222120919139

image-20230222120942951

三，代码实例

图片懒加载：

<style>
    img{
        display:block;
        margin-bottom:50px;
        width:400px;
        height:400px;
    }
</style>
<body>
    <img src="./img/loading.gif" data-src="./img/1.jpg" alt=""/>
    <img src="./img/loading.gif" data-src="./img/2.jpg" alt=""/>
    <img src="./img/loading.gif" data-src="./img/3.jpg" alt=""/>
    <img src="./img/loading.gif" data-src="./img/4.jpg" alt=""/>
    <img src="./img/loading.gif" data-src="./img/5.jpg" alt=""/>
</body>
<script>
    let imgs = document.getElementsByTagName('img')
    let num = img.length
    let n = 0;
    window.scroll = lazyLoad;
    function lazyLoad(){
        //获取用户视口高度
        let seeHeight = document.documentElement.clientHeight
        //获取滚动条距离视口顶部的高度距离
        let scrollTop = document.documentElement.scrollTop||document.body.scrollTop
        for(let i = n;i < num; i++){
            if(imgs[i].offsetTop < seeHeight + scrollTop){
                if(imgs[i].getAttribute('src')=="./img/loading.gif"){
                    //data-src存放的是真正的图片地址，src存放的是加载地址
                    imgs[i] = img[i].getAttribute("data-src")
                }
                //n是为了防止图片重复加载
                n = i + 1
            }
        }
    }
</script>