前端轻语

目前我们常用的鉴权有四种：

• HTTP Basic Authentication
• session-cookie
• Token 验证
• OAuth(开放授权)

HTTP Basic Authentication

HTTP Basic Authentication 概念

HTTP Basic Authentication 授权方式是浏览器遵守 http 协议实现的基本授权方式，HTTP 协议进行通信的过程中，HTTP 协议定义了允许 HTTP 服务器对客户端进行用户身份验证的方法。

原文链接 https://juejin.im/post/5d8cc378f265da5ba0776f36

前言

前端页面性能是一个非常核心的用户体验指标。本文介绍阿里 UC 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是 Navigation Timing API 以及 sendBeacon 等方法。

为什么要监控页面性能

原文链接：https://juejin.im/post/5e6a1f406fb9a07cae13781e

数据类型与内存

数据类型分类

主要分为两大类：基本数据类型、复杂数据类型，详细分类如下。

• 基本数据类型: String、Number、Boolean、Null、Undefined、Symbol
• 复杂数据类型: Object 以及所有继承自 Object 的类型

上两章分析了 Vue 的 update 阶段，本章我们以点击 点击让第二个App组件卸载 触发 hide 执行 this.isShow = false 为例，分析 Vue 的 destroyed 阶段。

前面逻辑同 update 阶段一致，触发该属性的订阅即 渲染 watcher 执行 run 方法，在 updateComponent 里先执行 vm._render 得到最新 vnode，然后执行 vm._update 更新 dom。

在 updateChildren 循环里遍历比较子 vnode，可以看出只有最后一个 vnode 不同：旧 vnode 为 App 组件 vnode，新 vnode 为注释 vnode。 则先调用 createElm 根据注释 vnode 创建真实 dom 并插入到对应位置；然后在 while 下次循环时，对旧的 App 组件 vnode 执行 removeVnodes 移除。

removeVnodes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function removeVnodes(vnodes, startIdx, endIdx) {
  for (; startIdx <= endIdx; ++startIdx) {
    var ch = vnodes[startIdx];

    if (isDef(ch)) {
      if (isDef(ch.tag)) {
        removeAndInvokeRemoveHook(ch);
        invokeDestroyHook(ch);
      } else {
        // Text node
        removeNode(ch.elm);
      }
    }
  }
}

接上文，得到 vnode 后执行 vm._update。因为 vm._vnode 存在即已经渲染过，则走更新方法：

1
2

// updates
vm.$el = vm.__patch__(prevVnode, vnode);

vm.__patch__ 即 patch 方法，进入 patch 流程。

sameVnode

1
2
3
4
5
6
7

function sameVnode(a, b) {
  return (
    a.key === b.key &&
    ((a.tag === b.tag && a.isComment === b.isComment && isDef(a.data) === isDef(b.data) && sameInputType(a, b)) ||
      (isTrue(a.isAsyncPlaceholder) && a.asyncFactory === b.asyncFactory && isUndef(b.asyncFactory.error)))
  );
}

前面七章分析了 vue demo 的整个初始化过程，本文开始分析当数据（model）发生变化时，Vue 的处理过程。

我们以点击 dom 触发 plus 执行 this.info.age++ 为例，分析 Vue 的 update 阶段。

proxyGetter && proxySetter

此时读取 this.info，则触发在 ininState->initData->proxy(vm, "_data", key) 监听的 proxyGetter:

1
2
3
4
5
6
7
8
9
10
11

function proxy(target, sourceKey, key) {
  sharedPropertyDefinition.get = function proxyGetter() {
    return this[sourceKey][key];
  };

  sharedPropertyDefinition.set = function proxySetter(val) {
    this[sourceKey][key] = val;
  };

  Object.defineProperty(target, key, sharedPropertyDefinition);
}

vnode 渲染为真实 dom

接上文，vm._render 通过 render 生成 vnode 后，然后执行 vm._update(vm._render(),hydrating) 来首次渲染成真实 dom，里面执行：

1
2
3
4
5
6
7

if (!prevVnode) {
  // initial render
  vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */);
} else {
  // updates
  vm.$el = vm.__patch__(prevVnode, vnode);
}

此处为初始渲染，执行第一个分支 vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */); 即执行 patch。

patch 中因为 oldVnode 即 vm.$el 是真实节点，则 oldVnode 替换为空 vnode，然后执行：

接上文，在触发生命周期钩子 beforeMount 后，执行：

实例化 渲染 watcher

然后根据 config.performance 及 mark 是否存在，得到不同的 updateComponent，此处为：

1
2
3

updateComponent = function () {
  vm._update(vm._render(), hydrating);
};

然后实例化 渲染 watcher：

接上文，在触发生命周期钩子 created 后，执行：

1
2
3

if (vm.$options.el) {
  vm.$mount(vm.$options.el);
}

该句执行完后，_init 方法（位置在 src/core/instance/init.js）执行结束。

$mount 简述

判断是否有 $options.el，如果有就直接执行：vm.$mount(vm.$options.el)。在前面已经提到 $mount 方法与平台相关，所以在本例会执行 entry-runtime-with-compiler.js 中的 $mount。

接上文继续分析，在触发生命周期钩子 beforeCreate 后，执行：

1
2
3
4

initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');

initInjections

依赖注入，用于层级组件间传值，不可响应。

判断是否存在 $options.inject，然后在 resolveInject 里递归向上各级父元素中查找 vm._provided 属性值里是否有对应的注入值。找到最新值后放在实例下监听， set 方法设置无法重写，即不能更改注入值。