【前端】提升效率的快捷键，数学知识，ASCLL码等，图片格式，浏览器的渲染流程

❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：

快捷键

1.选中一个单词： 双击即可
2.关闭软件：直接推到右上角
3.alt+方向键：交换上下两行
4.在后面加一行：ctrl+回车
5.在前面加一行：ctrl+shift+回车
6.按住ctrl键就会以单词为单位进行移动
7.按住shift键再移动方向键就可以选中
8.delete键是删除右面的一个单词
9.选中一行：三击即可
10.win+R：运行窗口

二进制

• 逢二进一
• 0 1 10 11 100 101 110 111 1000 1001 1010 1011 1100 1101 1110 1111 10000
• 二转10：1 * 2的x次方 （2进制转16进制四位四位画就行了，因为4位有16钟可能，对应16进制的16 个数）
• 10转2：除2然后从下往上读余数

二进制小数和十进制转换

0.101 -> 0.5+0+0.125（差2倍）
0.15 -> 0.3,0.6,1.2,0.4,0.8,1.6,1.2,0.4…(乘2，只乘小数 )(001001100110011…)

数字信号 与模拟信号

• 模拟信号就是设备里读出来的物理量（电压）直接使用，而数字信号可以理解为01.
• 计算机通过电压传输01二进制，8bit = 1 byte（字节），1024byte = 1k，1024k = 1M(兆)，1024M = 1G，1t ，1p

Ascll

• 编码字母数字等的编号，转成二进制得到ASCLL码，标准ASCII码用一个字节（8位）表示一个字符，并规定其最高位为0，实际只用到7位，码值为00000000~01111111，即 0~127。
• 扩展 ASCII 码用 8 位表示，最高位为 1， 表示的码值范围为 10000000~11111111，即 128~255。 因此也可表示 128个不同字符。EASCII码比ASCII码扩充出来的符号包括表格符号、计算符号、希腊字母和特殊的拉丁符号。
• 空格 32
• a 97
• A 65
• 0 48

GBK/GB2312

• 由于ascll只能表示256个符号，为了显示中文，出现了著名的GB2312，虽然GB2312能满足汉语的基本需求，但是由于古汉语等一些罕见字，不能处理，出现了后来的GBK。GBK只编码自己国家的符号。在别的国家的操作系统上使用，会出现冲突。

Unicode

• 这个是万国码，为全世界每个符号指定了一个编号，我25105，a97，这个只是一个编号的标准
• UNicode只是对全世界的符号指定了唯一的数字，至于这个数字是怎么保存为二进制，unicode是不关心的。因为一个字节不够存unicode，我们可以让一个数字站三个字节，但是消耗太大了，太浪费空间了，而且还和ASCLL码不兼容。
• 所以unicode事件存储的时候都是”变长编码“，而不是定长编码。

UTF-8，UTF16，UTF32

• utf8就相当于编码，怎么样将这个数字高效的转成2进制，这个是对unicode的实现。

图片格式介绍

• 三原色RGB，红色，绿色，蓝色，每个颜色有256个强度级别，一个字节，256的3次方种颜色可以显示

jpg，jpeg

• 这个格式是压缩过的，压缩率很高，大概是bmp格式的十分之一

bmp 格式

• 无压缩，无损，体积巨大，不适合放在网页里。每个点占3个字节（红绿蓝，一个颜色有一个字节的颜色强度 ）

png

• 无损压缩
• 适合存储软件的截图
• 不适合用来保存照片
• 支持透明色（Alpha通道）

gif

• 动图
• 它会有一个颜色表，当原始图片的颜色数量不足256色的时候是无损压缩，但是如果超出256色的话， 就是使用颜色表，优化到图片最需要的256种颜色
• 因为他是一个动图 ，第一帧肯定是存储完整的，第二帧的时候指挥存储了每张图变化了哪些点
• 支持透明，但只支持两种透明，完全透明和完全不透明。

psd（工程文件）

• photoshop
• 无损压缩
• 保存了构造这张图片过程中的所有信息，包括图层，名字，选区等，浏览器是不支持这种格式的

浏览器的渲染流程

• 浏览器会先加载html到浏览器内部，然后进行解析html(从上往下，读到文档声明，就知道以什么标准开始解析)，解析的时候，不会等待link下载的css文件，浏览器会把html解析成一个DOM树形结构，然后css加载完毕，将css附加上去之后，会形成一个新的树结构Render Tree(渲染树)，然后根据渲染树的结构，在浏览器上进行展示(display)

总结

2.计算机为什么使用二进制？
因为使用二进制可以消除误差。也可以表达逻辑，如果通过模拟信号电压大小表达的话不是很方便，并且有可能会有误差，使用二进制可以通过01组合，使我们想要表达的东西表达出来。
3.什么使数字信号，什么是模拟信号？
数字信号即将设备中的模拟量理解成0，1，即为数字信号，数字信号一般是离散的。
模拟信号则是直接将设备中的物理量参与设备的运行及物理量的计算及转换等。模拟信号一般是连续的。
4.编码和编号的区别？
编码特指信息表示成二进制，是一个动词。
编号只是对事务进行编号，如unicode对所有文字符号进行了编号，
ascll对基本的英文标点及符号进行了编号。（与进制无关）
5.Unicode是编码还是编号？
是编号，unicode标准本身并不涉及编码，只是对所有的文字进行了编号。utf-8则是对编号的变长编码规则。
6.bmp格式是如何保存图片的？
以比较直接的方式直接进行保存图片，不压缩，不加密。图片中的每个像素的颜色是直接顺序存储，以二进制存储。
7.bmp文件内有哪些信息？
图片的尺寸，图片的颜色类型信息 （单色/16色/256色/65536色/1670w色（24bit/24位色））
8.gif格式是如何保存图片的？为什么图片放大能看到类似麻点的内容？
git格式会压缩图片，（如果图片超过256色），会建立颜色表，从1670w色中抽出256种颜色用在该图片中。因为只能抽出256种颜色，而其他颜色都是通过256色组合出接近于目标颜色，因此会出现麻点。
9.几种图片格式有什么主要区别？合适的场景？
jpg：适合存储照片，不支持透明
png：适合存储截图，支持256级透明
gif：动图
psd：photoshop工程文件，存储图片创作中的所有信息，所以文件非常大。且浏览器无法识别该格式
10.调制解调器（猫）是啥？
就是猫相当于是中间站，将模拟信号和数字信号相互转换，相当于翻译机一样。
————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章