摘要:使用实现一个持续的动画效果最开始的思路是用定时器实现,最后没有想的太完整,面试官给出的答案是用。参考链接封装一个函数,参数是定时器的时间,执行回调函数。规范规定,每个模块内部,变量代表当前模块。
1、使用css实现一个持续的动画效果
————————————————————————————————————————————————————————
animation:mymove 5s infinite; @keyframes mymove { from {top:0px;} to {top:200px;} }
主要考: animation 用法
值 描述 animation-name 规定需要绑定到选择器的 keyframe 名称。 animation-duration 规定完成动画所花费的时间,以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画。
————————————————————————————————————————————————————————
2、使用js实现一个持续的动画效果
最开始的思路是用定时器实现,最后没有想的太完整,面试官给出的答案是用 requestAnimationFrame。
var e = document.getElementById("e") var falg = true; var left = 0; setInterval(() => { left == 0 ? falg = true : left == 100 ? falg = false : "" falg ? 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。
————————————————————————————————————————————————————————
3、右边宽度固定,左边自适应
第一种:
第二种
————————————————————————————————————————————————————————
4、水平垂直居中
#container{ position:relative; } #center{ width:100px; height:100px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
第二种
#container{ position:relative; } #center{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }
第三种
#container{ position:relative; } #center{ position:absolute; margin:auto; top:0; bottom:0; left:0; right:0; }
第四种 flex
#container{ display:flex; justify-content:center; align-items: center; }
————————————————————————————————————————————————————————
5、四种定位的区别
static 是默认值 relative 相对定位 相对于自身原有位置进行偏移,仍处于标准文档流中 absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指 position不是 static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以 body元素为偏移参照基准, 完全脱离了标准文档流。 fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。
————————————————————————————————————————————————————————
6、Flex布局用的多吗?
因为项目考虑兼容 IE9 所以直接说用的不多
————————————————————————————————————————————————————————
7、移动端适配怎么做的?
使用媒体查询做的响应式布局,根据不同屏幕宽度加载不同 css.
————————————————————————————————————————————————————————
8、let与var的区别?
let 为 ES6 新添加申明变量的命令,它类似于 var,但是有以下不同:
var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升 let 不允许重复声明.
————————————————————————————————————————————————————————
9、为什么 var 可以重复声明?(这个就不知道了)
当我们执行代码时,我们可以简单的理解为新变量分配一块儿内存,命名为 a,并赋值为 2,但在运行的时候编译器与引擎还会进行两项额外的操作:判断变量是否已经声明:
首先编译器对代码进行分析拆解,从左至右遇见 var a,则编译器会询问作用域是否已经存在叫 a 的变量了,如果不存在,则招呼作用域声明一个新的变量 a,若已经存在,则忽略 var 继续向下编译,这时 a = 2被编译成可执行的代码供引擎使用。 引擎遇见 a=2时同样会询问在当前的作用域下是否有变量 a,若存在,则将 a赋值为 2(由于第一步编译器忽略了重复声明的var,且作用域中已经有 a,所以重复声明会发生值得覆盖而并不会报错)。若不存在,则顺着作用域链向上查找,若最终找到了变量 a则将其赋值 2,若没有找到,则招呼作用域声明一个变量 a并赋值为 2。 参考链接
————————————————————————————————————————————————————————
10、封装一个函数,参数是定时器的时间,.then执行回调函数。
function sleep (time) { return new Promise((resolve) => setTimeout(resolve, time)); }
————————————————————————————————————————————————————————
11、一个关于 this 指向的问题
obj = { name: "a", getName : function () { console.log(this.name); } } var fn = obj.getName obj.getName() var fn2 = obj.getName() fn() fn2()
————————————————————————————————————————————————————————
13 CommonJS 中的 require/exports 和 ES6 中的 import/export 区别?
CommonJS 模块的重要特性是加载时执行,即脚本代码在 require 的时候,就会全部执行。一旦出现某个模块被”循环加载”,就只输出已经执行的部分,还未执行的部分不会输出。 ES6 模块是动态引用,如果使用 import 从一个模块加载变量,那些变量不会被缓存,而是成为一个指向被加载模块的引用,需要开发者自己保证,真正取值的时候能够取到值。 import/export 最终都是编译为 require/exports 来执行的。 CommonJS 规范规定,每个模块内部, module 变量代表当前模块。这个变量是一个对象,它的 exports 属性(即module.exports )是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。 export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
————————————————————————————————————————————————————————
14、 一行代码实现数组去重?
[...new Set([1,2,3,1,"a",1,"a"])]
————————————————————————————————————————————————————————
15、使用addEventListener点击li弹出内容,并且动态添加li之后有效(这个题没答出来??)
————————————————————————————————————————————————————————
16、怎么判断两个对象相等?
obj={ a:1, b:2 } obj2={ a:1, b:2 } obj3={ a:1, b:2 }
最开始的思路是遍历来判断,但是最后好像没有说清楚,查了下,好像可以转换为字符串来判断。
JSON.stringify(obj)==JSON.stringify(obj2);//true JSON.stringify(obj)==JSON.stringify(obj3);//false
————————————————————————————————————————————————————————
17、项目做过哪些性能优化?
减少 HTTP 请求数 减少 DNS 查询 使用 CDN 避免重定向 图片懒加载 减少 DOM 元素数量 减少 DOM 操作 使用外部 JavaScript 和 CSS 压缩 JavaScript 、 CSS 、字体、图片等 优化 CSS Sprite 使用 iconfont 字体裁剪 多域名分发划分内容到不同域名 尽量减少 iframe 使用 避免图片 src 为空 把样式表放在 中 把脚本放在页面底部 欢迎补充。。。
————————————————————————————————————————————————————————
18、模块化开发是怎么做的?
使用命名空间。
————————————————————————————————————————————————————————
19、有没有使用过webpack?
我说Vue项目中使用了,然后就没问了。
————————————————————————————————————————————————————————
20、gulp自己写过任务吗?还是都用的模块?
不知道怎么怎么回答,不都是使用模块来写的么,然后就说是使用模块。
router.go(1) router.push("/")
————————————————————————————————————————————————————————
21、Vue router 跳转和 location.href 有什么区别?
router 是 hash 改变 location.href 是页面跳转,刷新页面
————————————————————————————————————————————————————————
22、Vue 双向绑定实现原理?
通过 Object.defineProperty 实现的
————————————————————————————————————————————————————————
23、你能实现一下双向绑定吗?
————————————————————————————————————————————————————————
24、 React 和 Vue 有什么区别?
————————————————————————————————————————————————————————
25、 Set 和 Map 数据结构
ES6 提供了新的数据结构 Set 它类似于数组,但是成员的值都是唯一的,没有重复的值。 ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说, Object 结构提供了“字符串—值”的对应, Map 结构提供了“值—值”的对应,是一种更完善的 Hash结构实现。
————————————————————————————————————————————————————————
26、WeakMap 和 Map 的区别?
WeakMap 结构与 Map 结构基本类似,唯一的区别是它只接受对象作为键名( null 除外),不接受其他类型的值作为键名,而且键名所指向的对象,不计入垃圾回收机制。 WeakMap 最大的好处是可以避免内存泄漏。一个仅被 WeakMap 作为 key 而引用的对象,会被垃圾回收器回收掉。 WeakMap 拥有和 Map 类似的 set(key, value) 、 get(key)、has(key)、 delete(key) 和 clear() 方法, 没有任何与迭代有关的属性和方法。
————————————————————————————————————————————————————————
27、重排和重绘
部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。 由于节点的几何属性发生改变或者由于样式发生改变,例如改变元素背景色时,屏幕上的部分内容需要更新。这样的更新被称为重绘。
————————————————————————————————————————————————————————
28、什么情况会触发重排和重绘?
添加、删除、更新 DOM 节点 通过 display: none 隐藏一个 DOM 节点-触发重排和重绘 通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘,因为没有几何变化 移动或者给页面中的 DOM 节点添加动画 添加一个样式表,调整样式属性 用户行为,例如调整窗口大小,改变字号,或者滚动。
————————————————————————————————————————————————————————
29、浏览器缓存
浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时,获取缓存的流程如下:
先根据这个资源的一些 http header 判断它是否命中强缓存,如果命中,则直接从本地获取缓存资源,不会发请求到服务器; 当强缓存没有命中时,客户端会发送请求到服务器,服务器通过另一些 request header验证这个资源是否命中协商缓存,称为 http再验证,如果命中,服务器将请求返回,但不返回资源,而是告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取资源; 强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源; 区别是,强缓存不对发送请求到服务器,但协商缓存会。 当协商缓存也没命中时,服务器就会将资源发送回客户端。 当 ctrl+f5 强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存; 当 f5 刷新网页时,跳过强缓存,但是会检查协商缓存;
强缓存
Expires(该字段是 http1.0 时的规范,值为一个绝对时间的 GMT 格式的时间字符串,代表缓存资源的过期时间) Cache-Control:max-age(该字段是 http1.1 的规范,强缓存利用其 max-age 值来判断缓存资源的最大生命周期,它的值单位为秒)
协商缓存
Last-Modified(值为资源最后更新时间,随服务器response返回) If-Modified-Since(通过比较两个时间来判断资源在两次请求期间是否有过修改,如果没有修改,则命中协商缓存) ETag(表示资源内容的唯一标识,随服务器response返回) If-None-Match(服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改,如果没有修改,则命中协商缓存)
————————————————————————————————————————————————————————
如果喜欢请给个赞吧,您的赞会是我们继续分享的动力!
原文转自:https://blog.ihoey.com/posts/...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93108.html
摘要:获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码,也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素,方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~ 别只收藏,点个赞,点个star再走哈~ 持续更新中……,可以关注下github 项目地址 https:...
摘要:作为一个前端人,阿里巴巴,是我最想去的国内公司,我看重的也不是他薪水如何,完全在于他的技术,这一点可以说明一切。阿里是个十分重视基础的公司,和浮躁的前端大环境形成鲜明的对比。我不是第一次投阿里巴巴,所以心态一开始还是挺平和的。 这是去年8月份秋招的面试,五面都面完了,给大家贡献干货吧。我没写问题的答案,有什么问题可以留言区问我。 一面 电话面(1小时)电话面问题不多,但是十分考验对相关...
摘要:作为一个前端人,阿里巴巴,是我最想去的国内公司,我看重的也不是他薪水如何,完全在于他的技术,这一点可以说明一切。阿里是个十分重视基础的公司,和浮躁的前端大环境形成鲜明的对比。我不是第一次投阿里巴巴,所以心态一开始还是挺平和的。 这是去年8月份秋招的面试,五面都面完了,给大家贡献干货吧。我没写问题的答案,有什么问题可以留言区问我。 一面 电话面(1小时)电话面问题不多,但是十分考验对相关...
阅读 3008·2021-11-22 12:06
阅读 595·2021-09-03 10:29
阅读 6520·2021-09-02 09:52
阅读 2012·2019-08-30 15:52
阅读 3409·2019-08-29 16:39
阅读 1187·2019-08-29 15:35
阅读 2058·2019-08-29 15:17
阅读 1413·2019-08-29 11:17