2021年前端知识点提炼：七月份

一、本地开发环境证书免费制作mkcert 官网

安装跳过
进入一个新建CA文件夹目录，终端第一步指令：mkcert -install
第二步指令，最后指向的是你本地开发的ip地址：mkcert localhost 192.168.31.233
前端webpack配置https服务，devserverhttps

二、域名及七牛云cname解析绑定

一个域名购买后理论上可以分出无数个二级/三级等子域名，先用完成主域名对服务器ip解析规则添加。但这个又涉及到服务器443端口Nginx的设置，先不讨论证书及443端口配置的问题。

• 首先我在腾讯云购买域名后，完成域名备案。备案通过后添加解析记录，绑定主域名主机记录@保持直接解析主域名mboke.top，类型A，记录值为服务器ip地址。

  • 

• 完成了对服务器ip地址的域名解析，用主域名去解析服务器ip地址。

七牛云对象存储空间域名

• 先到七牛云，对你创建的存储空间做域名绑定(普通域名)，但是这个域名是一个你主域名的子域名，比如你可以创建为kodo.mboke.top。然后我们会拿到一个CNAME信息，拿着这个CNAME信息去腾讯云处绑定此子域名。

• 解析主机记录值填写kodo，记录类型选择CNAME，记录值填写给您分配的这样

  • 

• 下面的实际解析过一会就会自动生成，在七牛云处完成HTTPS一键配置就可以了

三、数字证书

证书类型：

• DV证书就是通常意义上给网站颁发的证书，审核不是很严格，一般免费居多。
• OV证书一般收费，因为要给申请的企业做审核，这样会在证书的使用者字段中填写O = BeiJing Baidu Netcom Science Technology Co., Ltd这样的形式。
• EV证书更多的体现是在浏览器显示上面，除了OV等协议体现的小绿锁之外，还有在地址栏显示绿色以及地址栏显示企业的名称等。

通常情况：证书和域名关系是一对一的关系，即证书和服务器ip公网也是一对一的关系。在这里，科普知识点，一个服务器ip公网可以绑定多个域名，但是一个域名却不能绑定多个服务器ip公网。这里的假设一对一的前提：默认为一个域名就是对应一个服务器ip公网。
不通常的情况：证书是可以服务于多个域名，也可以通过方法服务于多个服务器ip公网。

• 通配型证书：例对domain.com下属的所有子域名都适配的证书，例如A.domain.com以及B.domain.com都是其子域名，这类证书往往在申请的时候，填写的是.domain.com这样适配所有子域名的形式，因此可以在使用者这一栏目看到CN=.domain.com。

• 多域名证书： 指一个证书可以应用于多个不同的域名，和通配型不同的是，这里面的多个不同域名往往强调不是其子域名，而是指domian.net,domain.com,domain.xyz等。

  • 应用情况一：同一企业共用同一证书，例如hao123.com和nuomi.com都是百度集团，使用者均是baidu.com。
  • 应用情况二：虚拟主机使用一个证书，则该物理主机上面个的网站都使用该证书，目前租用云服务的应用不在少数，使用者也会是同一个名字。例如使用阿里云，七牛云，亚马逊云都存在这个可能。
  • 应用情况三：使用SSL加速的网站，一般情况是在SSL加速设备上使用一个证书，使其和客户端秘密通信。而SSL加速设备和企业网内部的各个域名服务器之间明文通信。而我对www.baidu.com抓包发现client hello请求域名为ss1.bdstatic.com，因此初步确认百度有可能使用了类似的加速服务。

四、域名备案SSL证书安装部署 腾讯云CentOS部署官方指导

1、此处省略域名购买，SSL证书免费版DV证书的购买，域名备案，域名解析，解析成功后取到用于Nginx配置的SSL证书等步骤。
2、以Ubuntu 16.04版本为例子，与CentOS部署有所不同。
3、/etc/nginx下创建一个cert文件夹，把下载到的Nginx版本的.crt和.key文件放入cert中
4、sudo vim /etc/nginx/sites-available/default配置如下

server {
        #SSL 访问端口号为 443
        listen 443 ssl; 
        #填写绑定证书的域名
        server_name mboke.top; 
        #证书文件名称
        ssl_certificate cert/1_mboke.top_bundle.crt;
        #私钥文件名称
        ssl_certificate_key cert/2_mboke.top.key;
        ssl_session_timeout 5m;
        #请按照以下协议配置
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
        #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;
                
        location / { 
                #alias /home/ubuntu/www;
                root /home/ubuntu/www;
                index index.html index.htm;
        }
                
        location /api/ {
                rewrite ^/api/(.*)$ /$1 break;
                proxy_pass http://146.56.251.74:7001;
        }               

}
# 将 HTTP 请求自动重定向到 HTTPS
# Nginx 支持 rewrite 功能。若您在编译时没有去掉 pcre，您可在 HTTP 的 server 中增加 return 301 https://$host$request_uri;，即可将默认80端口的请求重定向为 HTTPS。
server {
        listen 80;
        #填写绑定证书的域名
        server_name mboke.top;
        #把http的域名请求转成https
        return 301 https://$host$request_uri;
}

5、sudo nginx -s reload 重启Nginx

另：比如微信小程序平台需要提供一个https接口地址。我们不需要通过cluster直接在后端项目中放入证书（首次部署的时候我才用了这种），我们也通过nginx的反向代理来做，如下也就实现了后端服务器被反向代理到443端口，直接提供给https服务：

server {
        #SSL 访问端口号为 443
        listen 443 ssl; 
        #填写绑定证书的域名
        server_name mboke.top; 
        #证书文件名称
        ssl_certificate cert/1_mboke.top_bundle.crt;
        #私钥文件名称
        ssl_certificate_key cert/2_mboke.top.key;
        ssl_session_timeout 5m;
        #请按照以下协议配置
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
        #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;
                
        location / { 
                proxy_pass http://146.56.251.74:7001;
                root html;
                index index.html index.htm;
        }           

}
# 将 HTTP 请求自动重定向到 HTTPS
# Nginx 支持 rewrite 功能。若您在编译时没有去掉 pcre，您可在 HTTP 的 server 中增加 return 301 https://$host$request_uri;，即可将默认80端口的请求重定向为 HTTPS。
server {
        listen 80;
        #填写绑定证书的域名
        server_name mboke.top;
        #把http的域名请求转成https
        return 301 https://$host$request_uri;
}

五、用transparent透明实现箭头绘制

transparent：

用来指定全透明色彩，想当于rgba（0,0,0,0）。
background-color的默认值。
CSS3可以应用于所有带颜色设置的属性。

border形成原理:

我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容易让大家对border的形成方式产生误解，即认为元素的border是由四个矩形边框拼接而成。以为如下图：

• 

实际上：元素的border是由三角形组合而成，为了说明这个问题，我们可以增大border的宽度，并为各border边设置不同的颜色。

div {
    width: 50px;
    height: 50px;
    border: 40px solid;
    border-color: orange blue red green;
}

• 

把元素的内容尺寸设置为0会发生什么情况呢？

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: orange blue red green;
}

• 

我们将惊奇地发现，此时元素由上下左右4个三角形“拼接”而成；那么，为了实现最终的效果，即保留最下方的三角形，还应该怎么做？很简单，我们只需要把其它border边的颜色设置为白色或透明色。

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}

• 
• 

六、进入Docker容器内部，并查看日志文件

sudo docker exec -it [容器ID] /bin/bash
日志存于/root/logs中
用Vim编辑打开logs中的日志查看问题

但你会发现vim在容器中并未安装，可能需要下面的方式把容器内的日志拷贝到宿主机上进行Vim查看

如果容器中的日志存在于/root/logs中
sudo docker cp [容器ID]:/root/logs /home/ubuntu/logs
把日志复制到宿主机的/home/ubuntu/logs中

七、微任务与宏任务

• 宏任务task主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、setImmediate(Node.js 环境)
• 微任务microtask主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)

我们的JavaScript的执行过程是单线程的，所有的任务可以看做存放在两个队列中——执行队列和事件队列。

执行队列里面是所有同步代码的任务，事件队列里面是所有异步代码的宏任务，而我们的微任务，是处在两个队列之间。

当JavaScript执行时，优先执行完所有同步代码，遇到对应的异步代码，就会根据其任务类型存到对应队列（宏任务放入事件队列，微任务放入执行队列之后，事件队列之前）；当执行完同步代码之后，就会执行位于执行队列和事件队列之间的微任务，然后再执行事件队列中的宏任务。

题目举例：

console.log('script start');

setTimeout(function() {
  console.log('timeout1');
}, 10);

new Promise(resolve => {
    console.log('promise1');
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
})

console.log('script end');

以上代码来源于博主的该篇博客，比较具有代表性，因为包含了宏任务、微任务、同步代码。在我们分析输出时，可以给所有的任务划分归类，结果如下：

console.log('script start');   //同步输出——1

setTimeout(function() {
  console.log('timeout1');   //异步宏任务，推入事件队列——5
}, 10);

new Promise(resolve => {
    console.log('promise1');   //同步输出——2
    resolve();   //同步执行 
    setTimeout(() => console.log('timeout2'), 10);   //异步宏任务，推入事件队列——6
}).then(function() {
    console.log('then1')     //异步微任务， 在执行队列之后，事件队列之前执行——4
})