1、defer && async

  • 都并行加载，不阻塞html解析渲染
  • defer下载实现之后，待html解析实现之后，DOMContentLoaded之前（读取完</html>之前），依照程序执行
  • async下载完之后立刻执行，不能保障依照script标签程序执行
  • 如何抉择
    脚本之间有程序依赖时采纳defer，否则用async。理论生产中，第三方库打到vendor，pdd根底库打到common，页面打到一个js，是有程序依赖的，采纳defer。

2、原型的了解

  • 实例对象都存在隐式原型__proto__,函数办法存在原型对象prototype，函数作为构造函数来结构实例对象时，实例对象的__proto__会指向构造函数的prototype。
  • 读取对象属性和办法时，当本身不存在时会到prototype中去查找，实现原型对象属性和办法的继承。

3、作用域的了解 -> 变量、函数存储和读取的规定

  • 变量申明，编译器会在以后作用域申明一个变量，并为引擎生成运行时代码，便于引擎后续对该变量进行操作。
  • 作用域读取规定：引擎执行代码到对某一变量的操作时，会询问以后作用域中是否存在，存在则应用，否则到下层作用域查找，直到查找到为止，到全局作用域还未找到则抛错。

4、http协定
5、同源策略，跨域、跨站

  • 浏览器安全策略
  • access-control-allow-origin 通知浏览器哪个域容许；access-control-allow-credential 通知浏览器是否带上cookie

社招面筋一篇
1、typeof原理

  • js在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息，typeof就是通过机器码判断类型

2、浏览器缓存的地位及其区别

  • service worker cache 独立于js主线程之外，可自定义缓存规定
  • memory cache 存储、读取效率高、但空间限度，个别缓存一些小资源文件或内存利用较低时采纳，在过程完结时会开释
  • disk cache 存储空间大，读取效率绝对慢一些，不会开释
  • 1.对于大文件来说，大概率是不存储在内存中，反之优先 2.当零碎内存使用率高的时候，文件优先存到硬盘
  • http/2.0 push cache

3、xss与csrf

  • xss（https://tech.meituan.com/2018...）

  • 类型

    • 反射型 -> 将xss代码提交到一个变量，前端间接将变量插入到html；依赖用户输出，用户不输出恶意代码个别没问题，个别产生在搜寻框
    • 存储型 -> 攻击者在留言板将恶意代码提交到服务器，服务器长久存储，被攻击者拜访都会被注入攻打
    • dom型 -> 以后页面脚本批改dom树，在dom树中引入歹意xss。前端行为，不与服务器交互，服务端无奈进攻

  • 结构

    • script标签
    • a标签的javascript协定
    • img标签的加载谬误回调

  • 进攻

    • 输出过滤
    • 数据消毒【实体本义、黑白名单】
  • react底层对于xss的进攻
  • csrf

4、axios库了解

  • axios和Axios关系

    • axios是Axios.prototype.request绑定context返回的函数办法，将Axios原型对象上的办法和实例属性都挂到该函数上，性能上实现了Axios实例化；

  • instance和axios

    • axios.create创立出一个axios，和默认axios一样，既能够当函数，又能够当对象去应用

  • 执行流程

    • request -> dispatchRequest -> xhrAdapter
  • 申请响应拦截器

  • axios能够通过new Axios实列的模式应用，原理是什么？

    • axios是一个Axios原型对象中的request办法绑定一个实例对象的函数，并且将Axios类的所有实例属性和办法绑定到了该函数对象上，axios调用实质及调用了Axios类的实例办法，只不过扩大了应用，axios既能够当做函数也能够当做对象应用
    • 间接new一个Axios对象也能够通过对象调用申请办法，只不过不能作为函数应用

5、防抖 && 节流

  • 防抖（返回新的函数，该函数一段时间内不再触发则执行原函数，否则刷新定时器）

  • 节流（返回新的函数，该函数在一段时间内间断触发只执行第一次）

      // 防抖实现：  function debounce(fn, delay) {      var timer = null;      return function () {          if (timer) {              clearTimeout(timer);          }          timer = setTimeout(() => {              fn.apply(this, arguments);          }, delay)      }  }  // 节流 - 工夫戳实现  function throttle(fn, interval) {      var start = 0;      return function() {          if(Date.now() - start < interval) {              return;          }                    var result = fn.apply(this, arguments);          start = Date.now();          return result;      }  }  // 节流 - 定时器版本  function throttle(fn, interval) {      var timer = null;      return function() {          // 以后定时器不存在，从新触发时新起一个定时器          if (!timer) {              timer = setTimeout(() => {                  fn.apply(this, arguments);                  timer = null;              }, interval);          }      }  }

6、手写快排
7、手写event emitter

  • 实现思路：
    class EventEmitter {
    constructor() {

      this.eventBus = {};

    }

    subscribe(event, callback) {

      if(!this.eventBus[event]) {      this.eventBus[event] = [];  }  this.eventBus[event].push(callback);

    }

    emit(event, ...rest) {

      this.eventBus[event].forEach(cb => {      cb.apply(this, rest);  });

    }
    }

8、http/1.1 与 http/2.0的区别

  • http/0.9 申请行 仅反对get
  • http/1.0 http版本 申请/响应头 connection：keep-alive须要手动设置实现连贯复用
  • http/1.1 默认反对连贯复用，反对管道机制同时发送多个申请，但只能一一回应，存在“队头阻塞问题”,content-length,流传输transfer-encoding
  • http/2.0 多工通信（双向的、实时的通信）、数据流（响应ID，数据流id）、头信息压缩（压缩、索引表索引代替）、服务器推送