获取页面元素位置与宽高?
- element.clientWidth = content + padding
- element.clientHeight = content + padding
- element.getBoundingClientRect() 返回值情况
- left:包围盒左边 border 以外的边缘距页面左边的距离
- right:包围盒右边 border 以外的边缘距页面左边的距离
- top:包围盒上边 border 以外的边缘距页面顶部的距离
- bottom:包围盒下边 border 以外的便于距页面顶部的距离
- width: content + padding + border
- height: content + padding + border
- 注意,设置外边距时外边距合并的情况
requestAnimationFrame 原理?是同步还是异步?
异步,传入的函数在重绘之前调用
js事件机制?点击屏幕上一个按钮,事件是如何传播的?
冒泡
下面代码输出结果?为什么?
Function.prototype.a = 'a';Object.prototype.b = 'b';function Person(){}; var p = new Person(); console.log('p.a: '+ p.a); // p.a: undefined console.log('p.b: '+ p.b); // p.b: b
下面代码输出结果?为什么?
const person = { namea: 'menglinghua', say: function (){ return function (){ console.log(this.namea); }; } }; person.say()(); // undefined
const person = { namea: 'menglinghua', say: function (){ return () => { console.log(this.namea); }; } }; person.say()(); // menglinghua
下面代码输出结果?为什么?
setTimeout(() => console.log('a'), 0); var p = new Promise((resolve) => { console.log('b'); resolve(); }); p.then(() => console.log('c')); p.then(() => console.log('d')); console.log('e'); // 结果:b e c d a // 任务队列优先级:promise.Trick()>promise的回调>setTimeout>setImmediate
async function async1() { console.log("a"); await async2(); //执行这一句后,await会让出当前线程,将后面的代码加到任务队列中,然后继续执行函数后面的同步代码 console.log("b"); } async function async2() { console.log( 'c'); } console.log("d"); setTimeout(function () { console.log("e"); },0); async1(); new Promise(function (resolve) { console.log("f"); resolve(); }).then(function () { console.log("g"); }); console.log('h'); // 谁知道为啥结果不一样????????????? // 直接在控制台中运行结果: d a c f h g b e // 在页面的script标签中运行结果:d a c f h b g e
js bind 实现机制?手写一个 bind 方法?
function bind(fn, context){ return function (){ return fn.apply(context, arguments); } }
实现 vue 中的 on,emit,off,once,手写代码。
用 js 实现双链表,手写代码?
vue 的双向绑定机制?详细介绍。
哪些操作会引起浏览器重绘和重排?
- postion:absolute; left:100px;会不会引起?
- translateX:100px;会不会引起?
- getBoundingClientRect会不会引起?
- getClientWidth、getClientHeight会不会引起?