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、右侧宽度牢固，左侧自适应
第一种：
<style>
body{
display: flex;
}
.left{
background-color: rebeccapurple;
height: 200px;
flex: 1;
}
.right{
background-color: red;
height: 200px;
width: 100px;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
第二种
<style>
div {
height: 200px;
}
.left {
float: right;
width: 200px;
background-color: rebeccapurple;
}
.right {
margin-right: 200px;
background-color: red;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>————————————————————————————————————————————————————————
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以后有用（这个题没答出来??）
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
var ulNode = document.getElementById("ul");
ulNode.addEventListener('click', function (e) {
if (e.target && e.target.nodeName.toUpperCase() == "LI") {
alert(e.target.innerHTML);
}
}, false);————————————————————————————————————————————————————————
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、你能完成一下双向绑定吗？
<body>
<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div>
<script>
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show-txt').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
</body>————————————————————————————————————————————————————————
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是不是一致来推断资本是不是在两次要求之间有过修正，假如没有修正，则掷中协商缓存）
————————————————————————————————————————————————————————
假如喜好请给个赞吧，您的赞会是我们继承分享的动力！
