前端体系复习-html和css(一)一、邂逅前端开发 1.1软件开发、软件开发体系专业的软件定义：一系列按照特定顺序组

一、邂逅前端开发

1.1软件开发、软件开发体系

专业的软件定义：一系列按照特定顺序组织的计算机数据和指令，是电脑的非有型部分。

软件开发是什么呢？就是告诉计算机一系列的指令，这些指令也称之为程序。

我们经常听说软件（software）开发和应用程序（Application）开发，它们有什么区别呢？

软件包括操作系统及虚拟机、编程（语言）、算法、应用程序等，软件是应用程序的超集。应用程序是一种直接面向用户的软件。

1.2完善的应用程序包括哪些？

包括服务器端、IOS端、Android端、IPad端、网页端、PC端（主要是win端和IOS端）等。

二、邂逅Web开发

2.1网站和网页的关系：

网页

网页的专业术语叫做web Page 打开浏览器查看到的页面，就是网络中的一页，网页的内容包括：文字、连接、图片、音乐、视频等等

网站

是由多个网页组成的

2.2网页的显示过程

这个从两个角度来说：一、用户角度：

用户在浏览器输入一个网站
浏览器会找到对应的服务器地址，请求静态资源（可以存放在世界上任何一个地方）；
服务器返回静态资源给浏览器；
浏览器对静态资源进行解析和展示；

那么就有一个问题？这些静态资源来自哪里？这些静态资源就由我们前端工程师来完成

开发项目（HTML、CSS、Javascript、Vue、react）
打包、部署项目到服务器上面也就是又了静态资源

那么你肯定有个疑惑？服务器是什么？

我们日常生活接触到的基本都属于客户端、前端的内容：比如浏览器、微信、QQ、小程序；

我们知道自己的手机并不可能存放哪些多的数据和资源：比如你用《网易云听音乐》，音乐数据大部分都是存在“服务器”中的；

那么服务到底是什么呢？

服务器本质上也是一台类似于你电脑一样的主机；

不过有这些特点：

二十四小时不关机的（稳定运行）；
没有显示器的；
一般装的是Linux操作系统（比如centos）；目前公司大部分用的是云服务器（比如阿里云、腾讯云、华为云）；

2.3网页的组成部分

html：网页的骨骼，负责网页的内容结构
css：网页的外表，负责网页的视觉体验和网页的美化
JavaScript：网页的灵魂，负责网页的交互处理

2.4浏览器和浏览器内核

浏览器的作用就是解析这些代码，并渲染成多彩的网页

但是他的核心部分其实就是浏览器内核，也叫做渲染引擎，负责解析网页语法，并渲染网页

不同的浏览器的内核：

Trident （三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
Gecko（壁虎）：Mozilla Firefox；
Presto（急板乐曲）-> Blink （眨眼）：Opera
Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
Webkit -> Blink ：Google Chrome

2.5 整理出网页从编写到浏览器显示的整个过程（重要）

1⃣️前端工程师编写HTML/CSS/JS代码 -> 2⃣️打包发布到服务器作为静态资源 -> 3⃣️用户在浏览器输入域名 -> 4⃣️浏览器先发送资源请求-> 5⃣️DNS -> 6⃣️浏览器找到服务器的IP地址，服务器返回静态资源给浏览器 -> 7⃣️浏览器解析和渲染静态资源，显示网页

补充 URL和URL

补充：步骤5⃣️

DNS 中所说的记录，指的是域名和 IP 的对应关系。根据使用场景，有不同类型的记录：

A记录：地址记录。如果一个域名配置了 A 记录，DNS 就会把域名解析成 A 记录指定的 IP 地址。
CNAME 记录：规范名称记录。如果一个域名配置了 CNAME 记录，DNS 就会把域名解析成 CNAME 记录指定的另外一个域名。A 记录和 CNAME 记录是互斥的，不能共存
NS 记录：域名服务器记录。返回保存下一级域名信息的服务器地址，它指定该域名应该由哪一台 DNS 服务器进行解析。
MX 记录：邮件记录。返回接收电子邮件的服务器地址。
PTR 记录：逆向查询记录。只用于从IP地址查询域名。

DNS 的工作机制（未引入 CDN）

DNS 有两种查询方式，一种是递归查询，一种是迭代查询。

递归查询如下图所示。可以看到，每次的查询主体都在改变，请求层层转发，再层层响应，最后一定由根DNS 返回结果给本地 DNS

迭代查询如下图所示。查询主体始终是本地DNS，所有的请求都由它发出，其它的 DNS 只是告诉它要向谁发送请求。

下面以这张图为例重点解释 DNS 的迭代查询：

我们在浏览器中直接输入的是域名，但是浏览器必须知道服务器的 ip 地址，才能建立 TCP 连接并进而发送 http 请求。那么，如何根据服务器域名查找服务器的 ip 地址呢？

浏览器地址栏中输入 join.qq.com，按下回车
浏览器从 url 中提取出域名 join.qq.com，查找浏览器缓存中（chrome://net-internals/#dns）是否存在该域名到 ip 地址的映射。若没有，进入下一步
查找操作系统缓存中是否存在该域名到 ip 地址的映射（命令行下 ipconfig/displaydns）。若没有，进入下一步
查找本机的 host 文件是否存在该域名到 ip 地址的映射。若没有，进入下一步
向本地 dns 发送查询请求，看本地 dns 是否缓存了该域名到 ip 地址的映射。若没有，进入下一步，开始进行域名的迭代解析
本地 dns 将域名发送给根dns，根dns 发现域名中包含 com，于是返回负责解析 com 的顶级dns 的 ip 地址
本地 dns 将域名发送给顶级dns，顶级dns 发现域名中包含 qq.com，于是返回负责解析 qq.com 的权威dns 的 ip 地址
本地 dns 将域名发送给权威dns，权威dns 发现域名中包含 join.qq.com，于是查找 A 记录，发现有一条 A 记录保存着 join.qq.com 到 ip 地址的映射，于是返回这个 ip 地址给本地 dns
本地 dns 将这个 ip 地址回传给浏览器
自此，浏览器已经拿到了服务器的 ip 地址，于是通过三次握手与服务器建立 TCP 连接，接着发送 http 请求

PS：顶级 dns 解析的是 .com，权威 dns 解析的是 join.qq.com，那么一开始根 dns 解析的是什么呢？其实它解析的是 .root，.root 是所有域名共有的后缀，即 join.qq.com 实际上是 join.qq.com.root，不过一般都是省略不写的。

DNS 的工作机制（引入 CDN）

远距离通信时，通信效率是非常低的，所以一般会使用 CDN —— 在全球多个节点架设代理服务器，客户端就近向代理服务器（而不是源服务器）发送请求。

关于 CDN，有一些概念要了解一下：

命中和回源：当 CDN 网络中的节点服务器刚好缓存了客户端所需要的资源，并且没有过期时，则称为命中缓存；否则，节点服务器还是需要转发请求到源服务器，回到源服务器请求资源，这个叫做回源。

命中和回源各自对应着命中率和回源率，这是衡量 CDN 质量的两个指标。显然，好的 CDN 应该具有较高的命中率，具有较低的回源率。
CDN 的分类：
- 按照拓扑结构划分：一个是分散式 CDN，即在全球部署尽可能多的代理服务器；另一种是整合式 CDN，只在主要的数据中心有少量节点，但节点性能更强大，包括网络、吞吐量以及抗 DDoS 的能力。
- 按照内容分发方式划分：一个是 Push CDN，一个是 Pull CDN。前者是由内容服务器提前把内容 push 到 CDN 缓存起来；后者则是在用户访问内容时 CDN 才去 pull 目标资源并缓存起来

由于引入 CDN 之后，我们不再是向源服务器发送请求，所以需要的不再是源服务器的 ip 地址了，因此，DNS 的解析过程也发生了变化。

首先，前面的步骤还是一样的：

浏览器地址栏中输入 join.qq.com，按下回车
浏览器从 url 中提取出域名 join.qq.com，查找浏览器缓存中（ chrome://net-internals/#dns）是否存在该域名到 ip 地址的映射。若没有，进入下一步
查找本机缓存中是否存在该域名到 ip 地址的映射（命令行下 ipconfig/displaydns）。若没有，进入下一步
查找本机的 host 文件是否存在该域名到 ip 地址的映射。若没有，进入下一步
向本地 dns 发送查询请求，看本地 dns 是否缓存了该域名到 ip 地址的映射。若没有，进入下一步，开始进行域名的迭代解析
本地 dns 将域名发送给根dns，根dns 发现域名中包含 com，于是返回负责解析 com 的顶级dns的 ip 地址
本地 dns 将域名发送给顶级dns，顶级dns 发现域名中包含 qq.com，于是返回负责解析 qq.com 的权威dns 的 ip 地址

从第八步开始，发生了变化：

本地 dns 将域名发送给权威dns，权威dns 发现域名中包含 join.qq.com，于是查找 CNAME 记录和它对应的 A 记录。CNAME 记录的 name 是域名，value 是域名的一个别名，指示着一个全局负载均衡系统（GSLB），而 A 记录的 name 则是这个别名，value 是这个 GSLB 的 ip 地址。权威 dns 最终将这个 ip 地址返回给本地 dns
本地 dns 向 GSLB 发送请求。GSLB 根据本地 dns 的 ip 地址推测其地理位置，找出这个位置里最佳的本地负载均衡系统（SLB），并将 SLB 的 ip 地址返回给本地 dns
本地 dns 将这个 ip 地址回传给浏览器
浏览器向 SLB 发送请求。SLB 综合各种因素（距离、负载情况、响应速度、健康程度等），找出最佳的代理服务器节点，并返回这个节点的 ip 地址
浏览器向这个节点发送请求
节点判断自己的缓存中是否有浏览器请求的资源，若有的话是否已经过期，若存在且不过期，则命中；否则需要回源

DNS 优化方案

减少 DNS 的请求次数

DNS 预解析：

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.img.com">
<link rel="dns-prefetch" href="//www.api.com">
<link rel="dns-prefetch" href="//www.test.com">

3.例子：（京东）

前端体系复习-html和css(一)