全称 Diffie Hellman密钥交换算法

DH算法属于公钥加密算法，https加密过程客户端C与服务端需要用到dh算法或者RSA算法来协商用户加密数据的session key

在加密数据时使用对称密码算法，密钥管理使用公钥密码技术

CDN(Content Delivery Network)是指内容分发网络，也称为内容传送网络，

组成

CDN由以下几个关键技术组成：

• 内容缓存设备
• 内容交换机
• 内容路由器
• CDN内容管理系统
  阅读全文 »

同源策略

同源的定义：如果两个 URL 的 protocol、port (en-US) (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

哪些请求不受同源策略控制

image（对一半）,script嵌入的跨域脚本 , link,video和audio加载的媒体资源，applet等嵌入的插件，@font-face引入的字体 and iframe载入的任何资源

为什么不受控制

so 要提到浏览器的跨域网络访问

同源策略控制不同源之间的交互，例如在使用XMLHttpRequest 或 标签时则会受到同源策略的约束。这些交互通常分为三类：

• 跨域写操作（Cross-origin writes）一般是被允许的。例如链接（links），重定向以及表单提交。特定少数的HTTP请求需要添加 preflight。
• 跨域资源嵌入（Cross-origin embedding）一般是被允许（后面会举例说明）。
• 跨域读操作（Cross-origin reads）一般是不被允许的，但常可以通过内嵌资源来巧妙的进行读取访问。例如，你可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法，或availability of an embedded resource.

允许跨域访问

• 用cors
• nginx
• webpack的devserver

题外话

如果在canvas调用drawImage跨域的image，canvas是不能把图片导出成base64d，需要给图片添加crossOrigin=anonymous，这样canvas写入的图片才能正确被导出。

1

The image is then configured to allow cross-origin downloading by setting its crossOrigin attribute to "Anonymous"

引入mdn的解释，图片在设置了这个属性之后就被配置成允许跨域下载了。

全局调用g函数发现this为undefined，按照我的理解在全局调用的函数this应该是指向windows，然而这里却输出的是undefined
因此我去查了资料，发现在规范上是这么写的

如果所示class中默认为严格模式，而在严格模式中，未指明this指向的话this是等于undefined的，this是在运行时确定的，而不是在声明的时候确定的，因此这里的g()在全局环境中调用未指明this指向，因此此时输出undefined。

而在function中是可以指定是否是严格模式的

tinymce爬坑记录

Note

1. 非inline模式下的tinymce是可以挂载在shadow dom下的，而inline模式下的tinymce挂载在shadow dom下是无效的，大致原因是浏览器的api selection对于shadow dom的支持还没搞定，具体可以查看tinymce的issue或者selection api的介绍，或者可以查看源代码16100+行左右的applyFormat函数，挂载在shadow dom中和不挂载在shadow dom中走的逻辑是不一样的！。（查了很久orz，然后去issue验证了猜想）
2. 初始化挂载在iframe下的tinymce需要使用当前document挂载的tinymce实例，使用父级窗体加载进来的tinymce在子iframe中是用不了的，因为tinymce在操作格式时会获取当前document下的数据。
3. 如果想要在toolbar添加自定义按钮可以使用ui.addButton.因为看见有人是通过直接操作dom的方式来添加自定义按钮
4. 如果要修改某个类的样式可以在content_style中进行修改，同样看见有人通过获取editor的容器然后遍历子节点来动态修改样式。
5. 假如iframe所在的vue组件加载成功了而加载了tinymce文件的iframe的window没有挂载tinymce时，这时候去初始化inline模式是初始化失败的，用vue的watch貌似是不起作用的，我用的方案是raf来定时获取tinymce，然后初始化数据。（假如有更好的方法告诉我。）

intro

本文介绍vue3 的setup语法糖写法，语法的导入组件以及暴露模版变量均不用显示导出，引入 === 导出

接收属性

defineProps来接收从父级组件传递来的属性以及方法,能接收string类型的数组或者类型对象

计算机网络

OSI五层网络协议体系结构

物理层

• 在物理层上所传送的数据单位是比特。物理层（physical layer）的作用是实现相邻计算机节点之间比特流的透明传送，尽可能屏蔽掉具体传输介质和物理设备的差异。使其上面的数据链路层不必考虑网络的具体传输介质是什么。“透明传送比特流”表示经实际电路传送后的比特流没有发生变化，对传送的比特流来说，这个电路好像是看不见的。

网络层

• 在计算机网络中进行通行的两个计算机之间可能会经过很多个数据链路，也可能还要经过很多的通信子网。网络层的任务就是选择合适的网间路由和交换节点，确保数据能够及时传送。在发送数据时，网络层把运输层产生的报文段或者用户数据报封装程分组和包进行传送。在TCP/IP体系结构中，由于网络层使用IP协议，因此分组也叫IP数据报，简称数据报
  阅读全文 »

Promise.all

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

Promise.all = function (promises) {
  let results = [];
  return new Promise((resolve, reject) => {
    promises.forEach((p, index) => {
      p.then((result) => {
        results.push(result);
        if (index === promises.length - 1) {
          resolve(results);
        }
      }).catch((err) => reject(err));
    });
  });
};

Promise.any

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

Promise.any = function (promises) {
  const result = [];
  return new Promise((resolve, reject) => {
    promises.forEach((item, index) => {
      item
        .then((res) => resolve(res))
        .catch((error) => {
          result.push(error);
          if (index === pro mises.length - 1) {
              // 如果全部都失败，返回结果合集
            reject(result);
          }
        });
    });
  });
};

Web Worker 文献综述

Web Worker 作为浏览器多线程技术, 在页面内容不断丰富, 功能日趋复杂的当下, 成为缓解页面卡顿, 提升应用性能的可选方案.
但她的容颜, 隐藏在边缘试探的科普文章和不知深浅的兼容性背后; 对 JS 单线程面试题倒背如流的前端工程师, 对多线程开发有着天然的陌生感.

业务背景

因为我负责的组件中有个是树组件，那么对于这个树组件有个功能是叫做搜索的功能，一开始的时候在搜索匹配节点的时候是在主线程中去执行代码，但是在遇到计算量大的时候，就会一直占用主线程的资源，导致页面不能及时的跟用户进行响应，那么我就想到了将这个计算的代码放到后台（也就是worker）去执行逻辑，这样的话就不会阻塞页面的渲染工作，因为worker的代码跟主线程的代码是属于并行的关系。

worker介绍

官方对这个web worker的表述是

1
2
3
4

Web Workers makes it possible to run a script operation 
in a background thread separate from the main execution thread 
of a web application.

通过这个其实可以想到的是 并行可以提升执行效率，任务的拆分能减少页面的卡顿

How to Make Badass Shadows

Tips to help create better UI shadows.

Jest

7 Ways to Debug Jest Tests in Terminal