1. What is event bubbling and event capturing, and what is the difference?

Bubbling from bottom to top, clicking on a child element event responds to the current element event and then responds to it layer by layer. Capture from top to bottom. Click on the current element event to respond first to the parent element and last to the current element event. Event.stoppropagation ()Copy the code

2. What is cross-domain and how to deal with cross-domain

http://www.taobao.com/index.html called http://www.tencent.com/server.php (taobao/tencent cross-domain) the main domain name is different http://www.taobao.com/index.html called http://zzz.taobao.com/server.php (WWW/z cross-domain) different subdomains http://www.taobao.com:8080/index.html called http://www.taobao.com:8088/server.php (8080/8088, Cross domain) port different http://www.123.com/index.html call https://www.123.com/server.php (different protocol: HTTP/HTTPS, cross-domain) please note: Localhost and 127.0.0.1, while both point to the local machine, are cross-domain. Solution: 1. Jsonp 2. Background setting allows cross-domain access-Control-allow-OriginCopy the code

3. What is throttling and anti-shaking and how to achieve it

Throttling: multiple triggers, fixed time, fixed number of executions. For example, if the command is triggered multiple times within five seconds, the command is executed only once every second. I'm going to execute it five times. Anti - shake: Trigger multiple times, perform only the last time. For example, multiple fires within 5 seconds will only execute the last event. The solution, in fact, is a classic 'closure' application.Copy the code
// throttle to test the page with browser default scrolling, scrolling through the page. It is executed only once in a second.function test(fn, t) {
  let timer = false;
  return () => {
    console.log('Scrolling triggered');
    if (timer) return;
    timer = setTimeout(() => {
      fn();
      timer = false; }, t); }; } window.addEventListener('scroll'.test(() => {console.log('I'm only going to do it once a second.'); }, 1000),false);
Copy the code
/ / image stabilizationfunction test(fn, t) {
  let timer = null;
  return() = > {if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn();
      }, t);
  };
}
window.addEventListener('scroll'.test(() => {console.log('I'm not going to get out of here until you stop rolling, and I'm going to get out in a second.'); }, 1000),false);
Copy the code

4. Browser cache

Cookie: 4K too small, unsafe localStorage: 5M, will not be transmitted to the background. Long term. SessionStorage: 5M, will not be transferred to the background. At the session level, the page is cleared when closed.

5. What happens when you enter the URL from the browser

6. Why does HTTPS make data transfer more secure

You can’t talk about HTTPS without talking about its opposite, HTTP. HTTP is characterized by plaintext transmission, so data may be stolen or tampered with by a third party in every link of transmission. To be specific, HTTP data may be obtained and tampered with by middlemen in all these links after passing through TCP layer, WIFI router, carrier and target server. This is what we call a man-in-the-middle attack.

To protect against such attacks, we had to introduce a new encryption scheme, HTTPS.

HTTPS is not a new protocol, but an enhanced version of HTTP. The principle is to establish an intermediate layer between HTTP and TCP, when HTTP and TCP communication is not as direct as before, directly through an intermediate layer for encryption, the encrypted packets to TCP, response, TCP must decrypt the packets, to the above HTTP. This middle layer is also called the security layer. The core of the security layer is data encryption and decryption.

7. Hand write a call apply bind

Function.prototype.myAplly = function(... arr) { let fn = '_new' + Math.random() * 10000; arr[0][fn] = this; let params = arr.slice(1); params = params.constructor === Array ? params[0] : params; arr[0][fn](... params); delete arr[0][fn]; }; Function.prototype.myCall = function(... arr) { this.myAplly(arr[0], arr.slice(1)); }; Function.prototype.myBind = function(... arr) { let that = this; return function(params = []) { return that.myAplly(arr[0], arr.slice(1).concat(params)); }; };Copy the code

8. Manually implement deep copy

    mycapy(data) {
      let arr = data.constructor === Object ? {} : [];
      let keys = Object.keys(data);
      keys.forEach((r) => {
        arr[r] = [Array, Object].includes(data[r].constructor) ? this.mycapy(data[r]) : data[r];
      });
      return arr;
    }
Copy the code

9. Bubble sort

    mySort(arr) {
      let len = arr.length;
      for (let i = len; i > 1; i--) {
        for (let n = 0; n < i - 1; n++) {
          if (arr[n] > arr[n + 1]) {
            [arr[n], arr[n + 1]] = [arr[n + 1], arr[n]];
          }
        }
      }
      return arr;
    }
Copy the code

10. Select sort

    mySort(arr) {
      let len = arr.length;
      for (let i = 0; i < len - 1; i++) {
        for (let n = i; n < len; n++) {
          if (arr[n] < arr[i]) {
            [arr[n], arr[i]] = [arr[i], arr[n]];
          }
        }
      }
      return arr;
    }
Copy the code

11. Insert sort

    mySort(arr) {
      let len = arr.length;
      for (let i = 1; i < len; i++) {
        for (let n = i; n > 0; n--) {
          if (arr[n] >= arr[n - 1]) break;
          [arr[n], arr[n - 1]] = [arr[n - 1], arr[n]];
        }
      }
      return arr;
    }
Copy the code

12. Quicksort (as fast as sort)

      if (arr.length <= 1) return arr;
      let i = parseInt(arr.length / 2);
      let [num, left, right] = [arr.splice(i, 1)[0], [], []];
      for (let n = 0; n < arr.length; n++) {
        arr[n] < num ? left.push(arr[n]) : right.push(arr[n]);
      }
      let _left = this.mySort4(left);
      let _right = this.mySort4(right);
      return _left.concat([num], _right);Copy the code