Web前端开发(1) Internet and WWW
2023-08-09 14:53:19 # NJU # Web前端开发

0-Introduction

1 浏览器Browsers

1.1 背景

1.1.1 拥抱不确定性

  • 十年前：微软垄断下严格限定的边界
  • 现在：宽松，比如响应式web设计、渐进渐强
  • 放弃所谓绝对的解决方案：不同设备，不同的浏览器，不同规格的屏幕访问

1.1.2 从微软独家垄断到今天百花齐放

  • 第一次浏览器大战：1995-1999
  • 后.com大战：2000-2005，IE占据了90%左右的市场份额
  • 今天：Chrome, Firefox，Opera，Safari，IE；移动设备的大规模增长；浏览器版本更新频率极快

1.1.3 我们现在所处的位置

  • 可变因素：屏幕分辨率 像素深度 浏览器兼容性 屏幕大小 人机交互输入框类型…

1.2 浏览器

  • 四大派系，核心是布局引擎，用以决定文档和样式如何渲染
    • 微软的Trident，IE的内核
    • 基于开源项目WebKit的浏览器
    • 基于Blink开源项目的浏览器
      • 2013从WebKit中派生，是最新版的Chrome和Opera的布局引擎
    • Mozilla公司的Gecko，Firefox的内核

1.3 JavaScript引擎

  • Chakra：IE
  • SquirrelFish Extreme／Nitro：Webkit
  • V8：Chrome和Opera
    • 第⼀个在执行前将JS编译为原生代码的JS引擎
  • SpiderMonkey：Firefox

1.4 因此

  • 测试尽可能多的浏览器是必要
  • 然而为特定浏览器或浏览器版本开发或写特定的代码，很少奏效。这是⼀个过于庞大的清单
  • 需要考虑的是特性，特性检测

1.1-Internet

1 互联网

  • 互联网与万维网有何不同
    • WWW = HTML* + HTTP(S)
    • 包含CSS，JavaScript，以及其他浏览器内容

1.1 简要发展史

  • 万维网，1989-91由Tim Berners-Lee创造：This is for Everyone
  • 发布流行的浏览器：Netscape 1994, IE 1995
  • Amazon.com 1995 -> Google 1996 -> .COM 2000-2002 -> web2.0 2004 -> web3.0 2016

1.2 相关组织

  • Internet Engineering Task Force (IETF)：互联网协议标准
  • Internet Corporation for Assigned Names and Numbers (ICANN)：顶级域名
  • World Wide Web Consortium (W3C)：Web标准

2 常用协议

2.1 网际互连协议(IP)

  • IPv4
  • IPv6

2.2 传输控制协议(TCP)

  • 是⼀种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793定义。
  • 命令：netstat (Windows)、CurrPorts

2.3 用户数据报协议(UDP)

  • User Data Protocol，是传输层协议
  • ⼀个简单的面向数据报的传输层协议，提供的是非面向连接的、不可靠的数据流传输
  • 没有超时重发等机制，故而传输速度很快

2.4 域名系统(DNS)

  • DNS是域名系统,Domain Name System的缩写
  • 因特网上作为域名和IP地址互相映射的⼀个分布式数据库
  • DNS系统的作用
    • 正向解析：根据主机名称(域名)查找对应的IP地址
    • 反向解析：根据IP地址查找对应的主机域名

2.4.1 DNS之前…

… hosts.txt文件

  • DNS 之前(直到1985), name-to-IP地址是通过使用FTP从中央服务器下载单个文件(hosts.txt)完成的
    • hosts.txt中的名称不是结构化的
    • hosts.txt文件在大多数操作系统上仍然可以⼯作，可用于定义本地名称
      • Windows: C:\Windows\system32\drivers\etc\hosts
      • Mac: /private/etc/hosts
      • Linux: /etc/hosts

2.4.2 解析器与名称服务器

  • 主机上的应用程序通过DNS客户端访问域名系统，称为解析器
  • 解析器联系DNS服务器，称为名称服务器
  • DNS服务器返回IP地址给解析器，解析器将IP地址传递给应用程序
  • 反向查找也可以，即查找给定IP地址的主机名

image-20221114233154115

2.4.3 DNS名称层次结构

  • DNS层次结构可以用树表示

  • 根域名和顶级域名由互联网中央名称注册机构(ICANN)管理。

  • 在顶级域名(TLD，TopLevel Domain)之下，名称空间的管理被委派给不同的组织

  • 每个组织都可以进⼀步授权

image-20221114233239657

2.4.4 域名

  • 主机和DNS域名根据其在域名树中的位置命名

  • DNS域名树中的每个节点都可以通过唯⼀的全限定域名(FQDN)来标识。FQDN给出了在DNS树中的位置。

    • software.nju.edu.cn or software.nju.edu.cn.

  • ⼀个FQDN由标签(“software”，“nju”， “edu”， “cn”)组成，标签之间用句号(“.”)隔开。

    • 结尾可以有⼀个句号(“.”)。
    • 每个标签最多可以有63个字符
    • FQDN包含字符、数字和破折号(“ - “)
    • fFQDN不区分大小写

2.4.5 名称服务器的层次结构

  • 层次名称空间的解析是由层次化的名称服务器完成的

  • 每个服务器负责(授权)DNS名称空间的⼀个连续部分，称为区域。

  • 区域是子树的⼀部分

  • DNS服务器对其所属区域内的主机进行应答

image-20221114233847492

2.4.6 主名称服务器和辅名称服务器

  • 对于每个区域，必须有⼀个主名称服务器和辅助名称服务器
    • 主服务器(主服务器)维护⼀个区域文件，其中包含关于区域的域名信息。对主服务器进行更新。
    • 辅服务器复制存储在主服务器上的数据。
  • 添加⼀个主机: 当⼀个新主机(“xxx.cs.xxx.edu.cn”)被添加到⼀个区域时，管理员将该主机的IP信息(IP地址和名称)添加到主服务器上的配置文件中

image-20221114233955965

2.4.7 根域名服务器

  • 互联网的顶级域名解析服务由根服务器完成
  • 只有13个根域名服务器
  • 根服务器对网络安全、运行稳定至关重要，被称为互联网的“中枢神经”

2.4.8 域名解析

  • 用户程序发出主机名到IP地址的请求
  • 本地解析器向主机的名称服务器提出DNS查询
  • 名称服务器检查它是否被授权回答查询。
    • 如果是，它会响应。
    • 否则，它将从根树开始查询其他名称服务器
  • 当名称服务器得到答案时，它将其发送到解析器。

2.4.9 递归和迭代查询

  • 查询有两种类型: 递归查询、迭代(非递归)查询
  • 递归查询:如果主机所询问的本地域名服务器不知道被查询的域名的IP地址，那么本地域名服务器就以DNS客户的身份，向其它根域名服务器继续发出查询请求报文(即替主机继续查询)，而不是让主机自己进行下⼀步查询。
  • 迭代查询:当根域名服务器收到本地域名服务器发出的迭代查询请求报文时，要么给出所要查询的IP地址，要么告诉本地服务器：“你下⼀步应当向哪⼀个域名服务器进行查询” 。

image-20221114234325153

2.4.10 缓存

  • 为了减少DNS流量，名称服务器会缓存域名/IP地址映射信息
  • 当查询的条目在缓存中时，服务器不会联系其他服务器

2.4.11 资源记录(Resource Records)

  • 分布式数据库的数据库记录称为资源记录(RR)。
  • 资源记录存储在名称服务器上的配置文件(分区文件)中。
  • DNS数据库包含的不仅仅是主机名到地址的记录:
    • 名称服务器记录 ns
    • 主机名别名 CNAME
    • 邮件服务器 mx
    • 主机信息 hinfo

3 资源标识符

  • 统⼀资源标识符
    • Uniform Resource Identifier，URI
    • 用于标识某⼀互联网资源名称的字符串，该种标识允许用户对任何(包括本地和互联网)的资源通过特定的协议进行交互操作。
  • 统⼀资源定位符
    • Uniform Resource Locator，URL
    • URL是⼀种URI，它标识⼀个互联网资源，并指定对其进行操作或获取该资源的方法。
  • 统⼀资源名称
    • Uniform Resource Name，URN
    • 定义某事物的身份
    • URN仅用于命名，而不指定地址

3.1 URI

  • RFC 2396
  • URI可被视为定位符(URL)，名称(URN)或两者兼备
  • URI格式由URI协议名(例如http、ftp、mailto、file)，⼀个冒号，和协议对应的内容所构成

image-20221114235136029

3.2 URN

  • URN是基于某名字空间通过名称指定资源的URI
  • 位置⽆关
  • 需要基础设施，因而未被⼴泛应用
  • Example URN：urn:ietf:rfc:2141

3.3 URL

  • 统⼀资源定位符 URL 是对可以从因特网上得到的资源的位置和访问方法的⼀种简洁的表示。
  • URL 给资源的位置提供⼀种抽象的识别方法，并用这种方法给资源定位。

3.3.1 URL的一般形式

  • 协议 (http:): 标识用于获取内容的协议.
  • 主机 (//host.company.com): 要连接到的计算机的名称.
  • 端口 (80): 允许多个服务器在同⼀台机器上运行.
  • 路径(/a/b/c.html): 服务器用于查找内容.
  • 查询字段 (?user=Alice&year=2008): 提供其他参数
  • 片段标识符(p2): 单页面路由，锚点定位

3.3.2 URL协议

  • http、https、file、mailto

  • 还有其他几种协议，比如ftp，但已经不常用了

3.3.3 URL路径(/a/b/c.html)

  • 传递到web服务器进行解释。早期的web服务器:

    • 静态HTML文件的路径名。
    • 生成HTML内容的程序的路径名(例如foo.php)。

  • 路由信息

    • 将层次位置映射到要执行的函数以及函数的参数
  • 应用程序编程接口(API)设计，示例:
    • /user/create
    • /user/list
    • /user/0x23490
    • /user/delete/0x23433

3.3.4 查询字段

  • 查询字段是指在URL的末尾加上用于向服务器发送信息的字符串(变量)。 将“?”放在URL的末尾，然后再加上“参数 = 值”，想加上多个参数的话，使用“&”。

  • 网站访问分析(被动参数)

    • 被动参数对显示的内容没有影响。
    • 为了了解用户从哪里到达了自己的网站，设定固有的参数来统计。
    • 通常，当想要分析网站流入的来源以吸引客户，或者想要知道来自搜索引擎⼴告的流入客户时，可以使用它。

  • 显示动态页面结果(活动参数)

    • 会影响显示的内容。换句话说，添加参数将改变网站上显示的内容

3.3.5 URL的使用

  • 加载页面，在浏览器地址栏输入URL
  • 加载图像: <img src="..." />
  • 加载样式表: <link rel="stylesheet" type="text/css" href="...">
  • 嵌入页面: <iframe src="http://www.google.com">

3.3.6 URL编码

  • URL编码将字符转换为可通过因特网传输的格式。
  • URL只能使用 ASCII 字符集通过因特网进行发送。
  • 由于URL通常包含 ASCII 集之外的字符，因此必须将URL转换为有效的 ASCII 格式。
  • URL编码使用后跟⼗六进制数字的 “%” 替代不安全的 ASCII 字符。
  • URL不能包含空格。URL 编码通常使用加号(+)或 %20 替代空格。

4 超文本Hypertext

  • 超文本是用超链接的方法，将各种不同空间的文字信息组织在⼀起的网状文本。
  • 超链接是Web页面区别于其他媒体的重要特征之⼀，网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象，且超链接的数量是不受限制的。
  • 用标签<a>来实现

image-20221114235831918

4.1 种类

  • 网页上的超链接⼀般分为三种：
    • 绝对URL的超链接
    • 相对URL的超链接
    • 同⼀网页的超链接，锚点链接/书签链接。

1.2 WWW

1 Web

1.1 Web服务器和浏览器

  • Web服务器

    • Apache
    • Microsoft Internet Information Server (IIS) (part of Windows)

  • Web浏览器: 从Web服务器获取/显示文档

    • Microsoft Internet Explorer (IE)
    • Mozilla Firefox
    • Apple Safari
    • Google Chrome
    • Opera

1.2 Web的表现形式

image-20221116234212980

1.3 互联网的影响

  • 改变生活方式、改变交流方式、改变购物方式、改变娱乐方式、改变教育方式、改变医疗方式

1.4 Web发展历程

Text -> Web 1.0 -> Web 2.0 -> Web 3.0

2 Web1.0 Web2.0 Web3.0

image-20221117000428194

2.1 演变

image-20221117000444817

2.2 Web 2.0

2.2.1 Web 2.0特点

  • Web2.0是⼀个架构在知识上的环境，人与人之间交互而产生出的内容，经由在服务导向的架构中的程序，在这个环境中被发布、管理和使用。

2.2.2 Web 2.0典型应用

  • Facebook，Wiki百科，豆瓣，土豆网，微博

2.2.3 Web 2.0的局限性

  • 传播端过剩，过度饱和
  • 概念偏差
  • 时间
  • 互动模式
  • 数据确权和授权

2.2.4 用户缺乏自主权

  • 用户对数字身份缺乏自主权
    • 不同账户体系间相互独⽴
    • 联邦身份管理模式，减少重复开户的次数
  • 用户对个人数据缺乏自主权
    • 弱势，“要么同意，要么不服务”的选择
    • 被采集甚至过度采集
  • 用户在算法面前缺乏自主权
    • 算法滥用、算法作恶，比如大数据杀熟
    • 滥用人性弱点，过度激励、诱导用户消费

2.3 Web 3.0

Tim Berners-Lee:

“人们不停地质问Web 3.0到底是什么。我认为当可缩放矢量图形在 Web 2.0的基础上大面积使用——所有东西都起波纹、被折叠并且看起来没有棱角——以及⼀整张语义网涵盖著大量的数据，你就可以访问这难以置信的数据资源。

Google CEO 埃里克施密特定义是：

Web 3.0是⼀系列组合在⼀起的应用，对于个人用户来讲互联网将更具有可管理性，也意味着，互联网将由⼀系列的标准化Web组件拼装起来。

以太坊的联合创始人加文·伍德(Gavin Wood)：

“Web3.0是⼀组兼容的协议。这些协议为用户提供了强大并且可验证的保证，保护他们接收和发送的信息以及他们的支付信息。通过授权用户在低门槛市场中为自己行动，我们可以确保审查和垄断机会的减少。”

2.3.1 Web 3.0特征

  • 语义化、3D、人工智能、去中心化
Prev
2023-08-09 14:53:19 # NJU # Web前端开发
Next