【每日十分钟前端】基础篇20，HTTP与HTTPS、文字小于12px、执行上下文和执行栈

1、[HTML]什么是HTTP? HTTP 和 HTTPS 的区别?
2、[CSS]让浏览器支持小于12px的文字方式（Chrome为例）？区别？
3、[JS]JavaScript中执行上下文和执行栈是什么？

---

1、[HTML]什么是HTTP? HTTP 和 HTTPS 的区别?

HTTP：

HyperText Transfer Protocol
HTTP超文本传输协议（超文本+传输+协议），实现网络通信的一种规范，实际中常用于浏览器和服务器之间传递信息，适用于所有链接互联网的软件的协议。
是一个双向协议，允许“中转”或者“接力”，将a传到b，且a和b中间可以存放很多第三方。
以明文方式（完整的有意义的数据）发送内容，并不是计算机底层中的二进制包，不提供任何方式的数据加密。

特点：
（1）、支持客服端/服务器模式
（2）、简单快速：只需传输请求方法和路径
（3）、灵活：允许传输任意类型的数据
（4）、无连接：每次只处理一个请求
（5）、无状态：无法根据之前的状态进行本次处理

缺点：
（1）、使用明文，会被窃听；
（2）、不验证通信方身份，会遭遇伪装；
（3）、无法证明报文的完整性，会被篡改。

补充：
超文本：文字、图片、音频、视频等数据。

HTTPS：

Hypertext Transfer Protocol Secure
超文本传输安全协议，HTTPS解决了HTTP明文传输并不安全的这个问题。它在HTTP的基础上，利用SSL/TLS来加密数据包，主要对网站服务器的身份进行认证，保护交换数据的隐私与完整性。
即HTTPS=HTTP+SSL/TLS
SSL协议位于TCP/IP协议与各种应用层协议之间。
HTTPS传输的不再是明文而是二进制流。

流程：
（1）、客户端请求https请求，此处与http请求一样，进行三次握手。
（2）、服务器收到请求后发送证书，包含公钥、证书颁发者、到期日期。
（3）、客户收到证书后验证证书的有效性，验证通过后产生随机密钥（一般是对称加密）。
（4）、客户端使用公钥对密钥加密，然后发送给服务端。
（5）、服务器使用自己私钥解密出会话密钥。
（6）、服务器通过密钥加密与客户端之间的通信。

区别：

（1）、HTTP不安全，HTTPS安全
（2）、使用连接方式不一样
（3）、默认端口不同
（4）、HTTPS性能不如HTTP
（5）、HTTPS需要证书

补充：
HTTP/0.9：单线协议
HTTP/1.0：信息RFC
HTTP/1.1：Internet标准
HTTP/2：提高运输性能

2、[CSS]让浏览器支持小于12px的文字方式（Chrome为例）？区别？

原因

Chrome浏览器中文默认最小为12，英文版默认没有限制。因为Chrome团队认为中文小于12px会增加辨识难度。

解决方案

• svg中的text/tspan标签
• css的size-adjust
• zoom
• transform:scale()
• text-size-adjust:none（已失效）

svg中的text/tspan标签

类似绘制一张大图，再缩小，其中svg矢量图不失真。

1
2
3
4
5
6

css新特性size-adjust

@font-face {
    size-adjust: 50%;
}
1
2
3

文字缩小到font-size值的百分之多少，在font-face中使用，改变的是文字文件底层的字形显示。

补充：size-adjust搭配unicode-rang使用

@font-face {
    size-adjust: 50%;
    unicode-range: U+5143;
}
1
2
3
4

对特定字符进行缩放，设置unicode-range:xx这个字符匹配size-adjust规则。

zoom

改变页面上的元素尺寸，真实尺寸。
zoom: 50%;缩小到原来的一半
zoom: 0.5;缩小到原来的一半
非标准属性，有兼容问题，缩放会改变元素的占据的大小，触发重排。

transform:scale()

缩放，只对可以定义宽高的元素生效。
不会改变元素占据的空间大小，页面布局不会发生变化。

text-size-adjust:none （已失效）

设定文字大小是否根据浏览器来自动调整大小
属性值：

• percentage：字体显示的大小
• auto：默认，字体大小会根据浏览器的来自动调整
• none：字体大小不会自动调整
  chrome27.0之后不支持，且只对英文数字生效

3、[JS]JavaScript中执行上下文和执行栈是什么？

执行上下文

一种抽象概念，只要有javascript代码运行，它一定就在执行上下文中。
它包括当前执行环境中的所有元素：变量、函数声明、作用域链、this等。

分类：
（1）、全局执行上下文：默认存在的，只有一个，就是window对象，能被其他任意上下文调用。
（2）、函数执行上下文：可以有任意多个，在函数被调用的时候创建，每次调用都会创建一个新的执行上下文。
（3）、Eval函数执行上下文：运行在eval函数中的代码，几乎不用。

周期：
创建、执行、回收

创建阶段：

指函数被调用，但未执行任何内部代码之前。

（1）、词法环境被创建（Lexical Environment）：
有全局环境和函数环境。
es6定义：

• 词法环境是一种规范类型，基于 ECMAScript 代码的词法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由环境记录器和一个可能的引用外部词法环境的空值组成。

有三个部分：
a)、环境记录（Environment Record）
声明性环境记录器：变量和函数；（函数环境）
对象环境记录器：全局上下文中的变量和函数的关系，包括浏览器提供给对象的属性properties和方法methods；（全局环境）
b）、建立作用域链（Reference to the outer environment）
全局环境：没有外部环境，外部引用为null，有一个全局对象，this指向这个全局对象。
函数环境：外部环境引用可以是全局环境，也可以是包含内部函数的外部函数。
c）、确定this指向（This binding）

（2）变量对象（Variable Environment）
也属于词法环境，有上面此法环境定义的所有属性。
区别就是前者存储let和const变量， 后者存储var变量

执行阶段

执行变量赋值、执行代码。

回收

执行上下文出栈被回收。

执行栈

也叫调用栈，后进先出（LIFO），用于存储代码在执行期间创建的所有执行上下文。
（一个js文件会有多个函数被调用，会产生多个执行上下文，它们以栈的形式被存储起来，以便于处理。可以追踪到哪个函数正在执行，其他函数在调用栈中排队等待执行。）

过程：
第一次遇到js脚本时，创建一个全局上下文；
引擎每当碰到一个函数就会创建一个执行上下文；
引擎会执行位于执行栈栈顶的执行上下文，当函数执行完毕后，对应的执行上下文就会弹出，然后控制流程到达执行栈的下一个执行上下文。

特点：
单线程，只在主线程上运行；
同步执行，从上向下按顺序执行；
全局上下文只有一个：window对象；
函数每调用一次就会产生一个新的执行上下文环境。