Note: Some of the answers are self-collated and the correctness is unknown. Run the result part of the code by hand, no problem.

Get page element position and width?

  • element.clientWidth = content + padding
  • element.clientHeight = content + padding
  • Element. GetBoundingClientRect () returns a value
    • Left: The distance between the left edge of the bounding box and the left side of the page
    • Right: The distance between the right border of the bounding box and the left side of the page
    • Top: The distance between the top of the page and the edge of the bounding box other than the border
    • Bottom: Easy distance from the top of the page beyond the border below the bounding box
    • width: content + padding + border
    • height: content + padding + border
    • Notice how margins merge when margins are set

RequestAnimationFrame principles? Is it synchronous or asynchronous?

Asynchronous, incoming functions are called before redrawing.

  • http://web.jobbole.com/91578/
  • https://my.oschina.net/bghead/blog/850692
  • http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3 % 95 /

Js event mechanism? How does an event propagate by clicking a button on the screen?

Capture the bubbling

The following code outputs the result? Why is that?

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
Copy the code

The following code outputs the result? Why is that?

const person = {
  namea: 'menglinghua'.say: function (){
    return function (){
      console.log(this.namea); }; }}; person.say()();// undefined
Copy the code
const person = {
  namea: 'menglinghua'.say: function (){
    return (a)= > {
      console.log(this.namea); }; }}; person.say()();// menglinghua
Copy the code

The following code outputs the result? Why is that?

setTimeout((a)= > console.log('a'), 0);
var p = new Promise((resolve) = > {
  console.log('b');
  resolve();
});
p.then((a)= > console.log('c'));
p.then((a)= > console.log('d'));
console.log('e');
// result: b e C D a
Trick()> Promise callback >setTimeout>setImmediate
Copy the code
async function async1() {
    console.log("a");
    await  async2(); // After this statement, await will get rid of the current thread, add the following code to the task queue, and continue with the synchronization code following the function
    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');
// Who knows why the result is different ？？？？？？？？？？？？？
D a C f h g b e
D a C f h b g e
Copy the code

Js bind Hand write a bind method?

// Code from the book "javaScript Patterns"
if (typeof Function.prototype.bind === "undefined") {Function.prototype.bind = function (thisArgs){
    var fn = this,
        slice = Array.prototype.slice,
        args = slice.call(arguments.1);
    return function (){
      return fn.apply(thisArgs, args.concat(slice.call(arguments))); }}}Copy the code

Vue implementation of on,emit,off,once, handwritten code.

// Reference vue source code implementation
var EventEmiter = function (){
  this._events = {};
};
EventEmiter.prototype.on = function (event, cb){
  if (Array.isArray(event)){
    for (let i = 0, l = event.length; i < l; i++){
      this.on(event[i], cb); }}else{(this._events[event] || (this._events[event] = [])).push(cb);
  }
  return this;
};
EventEmiter.prototype.once = function (event, cb){
  function on () {
    this.off(event, cb);
    cb.apply(this.arguments);
  }
  on.fn = cb;
  this.on(event, on);
  return this;
};
EventEmiter.prototype.off = function (event, cb){
  if (!arguments.length){
    this._events = Object.create(null);
    return this;
  }
  if (Array.isArray(event)){
    for (let i = 0, l = event.length; i < l; i++){
      this.off(event[i],cb);
    }
    return this;
  }
  if(! cb){this._events[event] = null;
    return this;
  }
  if (cb){
    let cbs = this._events[event];
    let i = cbs.length;
    while(i--){
      if (cb === cbs[i] || cb === cbs[i].fn){
        cbs.splice(i, 1);
        break; }}return this; }}; EventEmiter.prototype.emit =function (event){
  let cbs = this._events[event];
  let args = Array.prototype.slice.call(arguments.1);
  if (cbs){
    for (let i = 0, l = cbs.length; i < l; i++){
      cbs[i].apply(this,args); }}};Copy the code

Js double linked list, handwritten code?

Vue’s bidirectional binding mechanism? Detailed introduction.

What actions cause the browser to redraw and rearrange?

  • postion:absolute; left:100px; Will it cause?
  • translateX:100px; Will it cause?
  • Does getBoundingClientRect cause?
  • Can getClientWidth and getClientHeight be caused?

Page performance monitoring?