【每日十分钟前端】基础篇20,HTTP与HTTPS、文字小于12px、执行上下文和执行栈
admin
2024-03-22 20:04:31
0

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矢量图不失真。

这里是text这里是tspan的使用

css新特性size-adjust

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

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

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

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

对特定字符进行缩放,设置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对象;
函数每调用一次就会产生一个新的执行上下文环境。

相关内容

热门资讯

如何引导孩子走出早恋误区 如何引导孩子走出早恋误区孩子有早恋倾向怎么和他沟通    从青少年心理成长角度来看,有早恋的倾向是一...
清新靓丽实用,东南得利卡改装床... 大家好,我是老杳,一个理想主义者。自驾游兴起以后露营车发展迅速,有很多车型可以改装,每个人的需求不同...
暑假去西藏七天之旅最佳路线,西... 暑假去西藏七天之旅最佳路线,西藏7日游旅游攻略,第一次去必看 暑假,是一年中最适合出游的时节之一。而...
马小玲被鬼上的短文 马小玲被鬼上的短文你要说的是不是,我和僵尸有个约会 ?...
王守仁儿子哪个妻子所生 王守仁儿子哪个妻子所生根据公开资料,王守仁的儿子是王正亿,没有提到谁是王正亿的母亲。诸氏。王守仁原配...
俺娘田小草大结局 这个结局挺好... 俺娘田小草大结局 这个结局挺好的 1、电视剧《俺娘田小草》的大结局是:看着小旺二十年后重新站在...
为什么手机看小说出现 打开文件... 为什么手机看小说出现 打开文件失败(错误,文件过大)你什么手机啊?
铺了地砖的房间最快多久能入住?... 铺了地砖的房间最快多久能入住?当天铺完当天安放家具可以吗?当天铺地砖,铺好后当天能把家具安放进去并且...
天津有没有算命的啊 尤其是蓟县... 天津有没有算命的啊 尤其是蓟县地区算命的又称周易,是老祖宗流传下来的好东西,一定要信的,但是真懂的不...
八八在社会上混得好的女人都具有... 八八在社会上混得好的女人都具有怎样的特点霸气、成熟、情商高容貌身材中上。情商高。甘愿服软,但是内心强...
觉得自己性格古怪很极端,怎么办... 觉得自己性格古怪很极端,怎么办?很古怪,很极端,很正常。等以后吃点亏上点当,后悔后悔就好了。也可以跑...
二月二龙抬头,龙指的是什么?他... 二月二龙抬头,龙指的是什么?他的化身是什么?抬头在文中指什么?可口可乐了开课啦接龙魔女嘉莉
95后的年轻人,你们都听过哪些... 95后的年轻人,你们都听过哪些老歌?我听过梁咏琪的《短发》,听过游鸿明的《寻你》《荒芜心田》,听过孙...
列举有关诚信的成语或格言 比如... 列举有关诚信的成语或格言 比如史记故事里的:烽火戏诸侯、尾生抱柱、曾子杀猪、立木为信.列举有关诚信的...
汉武帝晚年发生的“巫蛊之祸”,... 汉武帝晚年发生的“巫蛊之祸”,究竟是怎么回事呢?汉武帝当年在忙着求仙问药让自己长生不老,没工夫过问巫...
《刺杀小说家》全员集结预告,这... 《刺杀小说家》全员集结预告,这部电影还没播出就这么火,它到底讲了什么?讲了一个小说家在文字里虚构了一...
大家对许凯有什么看法? 大家对许凯有什么看法?许凯长的很端正啊,很清秀(好像形容男孩子不太好但就是很好看,很精致),演技也挺...
关于新疆母亲的纪录片 其中... 关于新疆母亲的纪录片 其中有拐卖儿童的你的问题是纪录片的名字么 ?貌似   《躯壳》  老外拍的...
羊和草有什么关系? 羊和草有什么关系? 哈哈,这可是国家一级教授才能回答的问题呀!相同性:羊和草都是我们这个地球上的生...
牙齿的漫画,牙齿怎么画? 牙齿的漫画,牙齿怎么画?求求你们了!急死了!!!!1喜欢吗向左转|向右转