前端知识点

HTML及其他基础知识部分

• 渲染页面的流程
  1.解析HTML，获得Dom树，快
  2.解析Css，获得Cssom树，快
  3.将两者整合成渲染树，快
  4.布局：根据渲染树计算节点位置，慢
  5.绘制：根据计算好的信息绘制页面，慢

• 前端存储方法

  1. localstorage：永久生命周期
  2. sessionstorage：域名下所有选项卡被关闭时被清除
  3. cookie：由后端设置，通过response发送给前端
  4. indexedDB：js对象，空间大，可二进制

• 各个图像格式的区别是什么？

  1. jpg/jpeg：有损压缩方案，将不易被人眼察觉的图像颜色删除进行压缩；
  2. gif：分为静态和动画两种，支持透明背景图像；
  3. bmp：未经压缩，通用格式；

• HTTP1.0，1.1，2.0的区别

  1. 长连接：1.0默认关闭，需要在http头加入"Connection: Keep-Alive”才能启用；而1.1是默认开启的
  2. 节约带宽：1.1支持只发送header信息，当客户端收到服务器返回的100时才开始把body发送到服务器
  3. 多路由复用：Http2.0的并发请求数量比1.1大
  4. 数据压缩：HTTP2.0支持header的数据压缩
  5. 服务器推送：HTTP2.0支持在web server请求时顺便把客户需要的资源推送至客户端

---

Js部分

• es6常用新语法

  1. let / const
  2. for(let i in Array)
  3. 函数默认值

  function demo(data = 1) {
    // ...
  }
  
  demo(); // 此时data默认为1
  

  4. 箭头函数

  demo = (a, b) => a + b;
  

  5. 对象

  const name = 'andy';
  const age = 24;
  const Andy= {
    // 1. key和value同名时可以省略
    name,
    age,
    // 2. 函数可以省略function
    do() {
      // do sth.    
    }
  }
  
  // 3. 解构，对初始化的逆向操作
  const Peter = {
    name: 'Peter',
    age: '20'
  }
  const {name: peterName, age: peterAge} = Peter;
  console.log(peterName, peterAge); // Peter 20
  

  6. 拓展运算符(…)：用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

  const arr1 = [1, 2];
  const arr2 = [...arr1];
  

  7. 面向对象

  class Person{
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
    show() {
      console.log(this.name, this.age)  
    }
  }
  
  // 实例化
  const andy = new Person('andy', 24);
  andy.show(); // andy 24
  
  // 继承
  class Staff extends Person{
    constructor(name, age, id) {
      super(name, age);
      this.id = id;
    }
  }
  const peter = new Staff('Peter', 21, 233);
  console.log(peter); // Peter 21
  

• 闭包：能够读取其他函数内部变量的函数，即定义在一个函数内部的函数，内部函数持有外部函数内变量的引用，并让这些变量始终保存在内存中；

• js链式作用域：子对象会一级一级向上寻找所有父对象的变量，反之不行。

• 变量提升：在js解析时，在函数内部定义的变量都会提升到该函数的最开始的地方进行申明，在执行到时再进行赋值操作。

• 如何确定一个值是null？

const data = null;
console.log(typeof(data));
// Object
// 这里是一个Js的历史遗留问题，所以不能单纯的用typeof来验证

if(!Object.is(data, undefined) && Object.is(data, data)) {
  // data is null
}

• Content-Type的类型
  1. 常用：text/html, text/javascript, image/jpeg, image/png, image/gif
  2. Ajax请求：application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml
  3. 表单：application/x-www-form-unlencoded
  4. post请求、form提交等：application/x-www-form-unlencoded
• NaN定义：Not a Number，typeof输出Number
• typeof系列
  1. typeof(undefined) ：undefined
  2. typeof(null)：object
  3. typeof(NaN)：Number
• Promise / async - await
  1. Promise是异步编程解决方案，状态凝固
  2. promise实例有then方法，用于异步计算，队列化，返回一个新的promise
  3. async用于申明一个函数是异步的
  4. await只能用于async内，表示在等待promise的返回结果再继续执行
  5. 引用：.then()要写一大串的，可以用await一行一行写清
• 数组api：.concat连接两个，.join以指定规则组成字符串，.pop删除最后一个，.shift删除第一个，.push尾+1，.splice(index, howmany)删除并插入一个新的
• 继承的6种方式
  1. 原型链继承：让新实例的原型等于父类的实例
  2. 借用构造函数继承：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））
  3. 组合继承（组合原型链继承和借用构造函数继承）
  4. 原型式继承：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象
  5. 寄生式继承：给原型式继承外面套了个壳子
  6. 寄生组合式继承
• 如何解决跨域：
  1. 起因：同源策略：浏览器安全策略，同协议、ip、端口的脚本才会执行
  2. 方案1：通过jsonp(填充式json)跨域：动态创建