html5注册阿里巴巴作业,面试分享：2018阿里巴巴前端面试总结(题目+答案)

该楼层疑似违规已被系统折叠隐藏此楼查看此楼

使用js实现一个持续的动画效果

最开始的思路是用定时器实现，最后没有想的太完整，面试官给出的答案是用 requestAnimationFrame。

var e = document.getElementById('e')

var flag = true;

var left = 0;

setInterval(() => {

left == 0 ? flag = true : left == 100 ? flag = false : ''

flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`

}, 1000 / 60)

requestAnimationFrame

由于之前没有用过这个 API 所以是现学的。

//兼容性处理

window.requestAnimFrame = (function(){

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function(callback){

window.setTimeout(callback, 1000 / 60);

};

})();

var e = document.getElementById("e");

var flag = true;

var left = 0;

function render() {

left == 0 ? flag = true : left == 100 ? flag = false : '';

flag ? e.style.left = ` ${left++}px` :

e.style.left = ` ${left--}px`;

}

(function animloop() {

render();

requestAnimFrame(animloop);

})();

不足之处请指正(毕竟是现学的)顺便查了一下优势：

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果

解决毫秒的不精确性

避免过度渲染(渲染频率太高、 tab 不可见暂停等等) 注： requestAnimFrame 和定时器一样也头一个类似的清除方法cancelAnimationFrame。

html5注册阿里巴巴作业,面试分享：2018阿里巴巴前端面试总结(题目+答案)相关推荐

2018年前端面试总结
再有两个月,2018就快过完了,因而有必要在年末对2018年的前端学习做一个总结,本文主要从前端面试中的一些基础知识来对前端进行相关的总结.本文根据网络面试题进行总结. 基础知识本部分主要从以下几个 ...
一次有趣的面试经历，当前端面试碰到后端面试官会发生什么？
前言金九银十,又是一年跑路季.先介绍下个人情况,一年半经验,计算机专业的大专.凭着对前端的热爱,基本每天都会抽点时间来学习,基础还算可以.其实上家公司呆着还是挺舒服的,没有加班,唯一不好就是不偏技术 ...
小米前端面试、字节跳动前端面试、百分点前端面试-面试总结
小米前端开发面试(社招,南京) 小米面试问的问题都会涉及到具体的原理,每个技术点都要求深入的理解.小米的前端社招面试基本会经过四轮技术面试,面试通过之后HR会和你联系询问你的薪资期望,之后小米会有两天 ...
用html5做一个介绍自己家乡的页面_（近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备...
作者 | Jeskson来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变 ...
2018实用前端面试问题集锦
1. 常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera. (Q2) 内核:Trident,Gecko,P ...
前端程序员怎么面试找工作？前端面试技巧分享
我面试过很多前端程序员,非常了解面试者和面试官的心理,我可以很负责的告诉你: 就算面试你的人说你只能拿8K,但是你完全可以通过各种方法去拿到10K以上的薪资! 面试的时候面试官都是什么样的心理? 大多 ...
2018秋季前端面试问题总结
记录一下最近面试遇到的问题 2018-08-18 上传图片压缩使用canvas.drawImage()方法将图片进行压缩,再使用canvas.toDataURL()方法将canvas画布转为base ...
面试分享：手机收费问题面试
题目: 周一到周五10:00-22:00第分钟3毛周一到周五22:00-10:00第分钟2毛周六周天全天1毛5 一.测试方法 1.等价类 1.1.以周一到周五视为一类,周六和周天视为一类: 1.2 ...
分享一篇前端面试常会问及的 WEB 安全
大家好,今天给大家介绍一下,Web安全领域常见的一些安全问题. 1.SQL 注入 SQL注入攻击的核心在于让Web服务器执行攻击者期望的SQL语句,以便得到数据库中的感兴趣的数据或对数据库进行读取.修 ...
面试官日记：前端面试（80% 应聘者不及格系列) 之JS 面试题
一位大佬在做面试官这 2 年多的时间内,面试了数百个前端工程师,惊讶的发现,超过 80% 的候选人对下面这道题的回答情况连及格都达不到.这究竟是怎样神奇的一道面试题?他考察了候选人的哪些能力?对正 ...

html5注册阿里巴巴作业,面试分享：2018阿里巴巴前端面试总结(题目+答案)

html5注册阿里巴巴作业,面试分享：2018阿里巴巴前端面试总结(题目+答案)相关推荐

最新文章

热门文章