2018阿里前端面试总结（有详细解答）

最新推荐文章于 2024-08-21 09:53:46 发布

Carrie_zzz

最新推荐文章于 2024-08-21 09:53:46 发布

阅读量4.2k

点赞数 4

分类专栏：前端面试合集（有讲解）文章标签：面试

本文链接：https://blog.csdn.net/Carrie_zzz/article/details/80201131

版权

本文总结了2018年阿里巴巴前端面试的重点，涵盖CSS动画、JavaScript实现动画、DOM操作、变量作用域、模块化、前端框架、数据结构等多个方面，深入探讨了各种技术的运用和理解。

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

2018阿里巴巴前端面试

（1）使用CSS实现一个持续的动画效果
部分代码：

animation: zz 5s infinite;
@keyframes zz {
                from {
                    left: 0px
                }
                to {
                    left: 100px
                }

主要考察animation的用法：

animation-name——>规定需要绑定到选择器的keyframe名称
animation-duration——>规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function——>规定动画的速度曲线
animation-delay——>规定在动画开始之前的延迟
animation-iteration-count——>规定动画应该播放的次数
animation-direction——>规定是否应该轮流反向播放动画

全部代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            div {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                animation: zz 5s infinite;
            }
            @keyframes zz {
                from {
                    left: 0px
                }
                to {
                    left: 100px
                }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

（2）：使用JS实现一个持续的动画效果
给的答案是：requestAnimationFrame

与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。
HTML5新增的定时器requestAnimationFrame
计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，循环间隔还要足够长，这样才能确保浏览器有能力渲染产生的变化
　大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms
而setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那动画代码就要等前面的任务完成后再执行
requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

特点：

requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

使用：
　requestAnimationFrame的用法与settimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
　

requestID = requestAnimationFrame(callback); 
//控制台输出1和0
var timer = requestAnimationFrame(function(){
   
    console.log(0);
}); 
console.log(timer);//1

cancelAnimationFrame方法用于取消定时器

//控制台什么都不输出
var timer = requestAnimationFrame(function(){
   
    console.log(0);
}); 
cancelAnimationFrame(timer);

也可以直接使用返回值进行取消

　var timer = requestAnimationFrame(function(){
   
    console.log(0);
}); 
cancelAnimationFrame(1);

IE9-浏览器不支持该方法，可以使用setTimeout来兼容
简单兼容：

if (!window.requestAnimationFrame) {
    requestAnimationFrame = function(fn) {
        setTimeout(

最低0.47元/天解锁文章

Carrie_zzz

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录