了解预加载和懒加载、学会缓动动画

预加载:在加载页面时会有很多链接、图片等，提前加载资源--同源加载的优化。

懒加载: 资源先不加载 等条件成立时再加载，如我们的网页滑倒某个位置就开始加载。

现在先了解一下就行。

缓动动画

匀速改变元素的样式是匀速动画；非匀速的改变元素的样式就是缓动动画。

要实现缓动动画非常简单，记住一个公式就行：

设定值=当前值+（目标值-当前值）*百分比

配合计时器使用，每次加的越来越少，实现缓动。

小例子：

底部缓动滑入

<style>
        .box{
           margin: 100px auto;
           width: 300px;
           position: relative;
           height: 450px;
           overflow: hidden;
           

       }
       img{
           width: 300px;

       }
       .info{
           position: absolute;
           top: 450px;
           height:150px;
           width: 100%;
           background-color: rgba(255,255,255,0.8);
           display: flex;
           flex-direction: column;
           justify-content: space-around
       }
       .info div{
           height: 40px;
           color: gray;
           text-align: center;
       }
       .info div span{
           color: orange;
           margin-left:20px ;
       }
   </style>
    <div class="box">
        <img src="../img/明星7.jpg" alt="">
        <div class="info">
                 <div>古力娜扎 <span>年薪：***<span></div>
                <div>演员 舞者 少男杀手</div>
                <div>入职***有限公司</div>
        </div>
    </div>
    <script>
        var info=document.querySelector(".info")
        var box=document.querySelector(".box")
        var timer1=null
        var timer2=null
        box.onmouseenter=function(){
            clearInterval(timer2)
            timer1 = setInterval(function(){
                var nowcsstop=parseInt(window.getComputedStyle(info).top)
            // console.log(nowcsstop);
            info.style.top=nowcsstop +(300-nowcsstop)*0.5+"px"
            
            },100)

        }
        box.onmouseleave=function(){
            clearInterval(timer1)
           timer2 = setInterval(function(){
                info.style.top=parseInt(info.style.top)+(450-parseInt(info.style.top))*0.5+"px"
            },100)
           
        }
    </script>