Web Development Basics

https://www.internetingishard.com/html-and-css/introduction/languages-vs-web-dev-b849db.png

Introduction | HTML & CSS Is Hard (internetingishard.com)

Introduction

在开始我们的Web开发旅程之前，让我们先来聊一聊啥是 Web，希望能让大家先有一个感性的认知。首先，可以做这样一个比喻，Web 就是一个复杂的城市交通网络，Web 中的客户端，就像你在这座城市中的家，而服务器就像你想去的城市中的某个商店，那么就可以试着把一些 web 中的术语/组成部分放进这样一个context中：

https://en.wikipedia.org/wiki/Internet_protocol_suite

https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_domain_name

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works/simple-client-server.png

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works

没事儿多逛逛 MDN (https://developer.mozilla.org/)，在里面你能够看到对很多技术细节/名词的权威解读

经过了对Web的宏观性描述，接下来让我们再逐个深入Web世界里的一些专业名词和重要技术（为了保证意义的准确传达，以下内容保留了部分英文原版描述，相信各位大佬阅读起来应该也不会有太大障碍，的吧）

World Wide Web

Web Server

网络服务器（Web server）可以代指硬件或软件，或者是它们协同工作的整体

  1. 硬件部分 (商场里存放商品的货架)：一个网络服务器是一台存储了网络服务软件以及网站的组成文件（比如，HTML文档、图片、CSS样式表和 JavaScript 文件）的计算机。它接入到互联网并且支持与其他连接到互联网的设备进行物理数据的交互。
  2. 软件部分 (商场内部的商品库存管理系统，可与电商平台对接)：网络服务器包括控制网络用户如何访问托管文件的几个部分，至少他要是一台 HTTP 服务器。一台 HTTP 服务器是一种能够理解 URL 和 HTTP 的软件。通过服务器上存储的网站的域名（比如mozilla.org）可以访问这个服务器，并且他还可以将他的内容分发给不同用户的设备

基本上，当浏览器需要一个 托管 在网络服务器上的文件的时候，浏览器通过 HTTP 请求这个文件。当这个请求到达正确的网络服务器（硬件）时，HTTP 服务器（软件）收到这个请求，找到这个被请求的文档（如果这个文档不存在，那么将返回一个404响应）， 并把这个文档通过 HTTP 发送给浏览器 (可以想象成是一个网购下单收货的过程)。在之后学习 Spring Boot 的时候，你将会对这一过程有更加深刻的理解。

https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/What_is_a_web_server

Web Browser (Client)

浏览器是一种通过 URL 获取 Web 资源并将其以某种可视化的方式展示在用户设备上的应用软件。在 Web 世界里，有一个叫宿主环境的概念，简单来说，它就是我们编写的 JavaScript 代码执行的具体环境，或者说是一种运行时环境 (runtime environment)，而浏览器就是其中一种，除此之外还有像 Node.js 等服务器端的宿主环境，感兴趣的同学可以自行了解

更多关于浏览器的内容会在之后的 “浏览器中页面的渲染过程” 部分进行介绍

Uniform Resource Locators (URL)

a form of URI (Uniform Resource Identifier), provide a path to, or location of, a resource

Formats

The text http:// indicates that HTTP should be used to obtain the resource. Next in the URL is the server’s fully qualified hostname (e.g. www.deitel.com) — the name of the web-server computer on which the resource resides. The hostname www.deitel.com is translated into an IP address — a numerical value that uniquely identifies the server on the Internet. An Internet Domain Name System (DNS) server maintains a database of hostnames and their corresponding IP addresses and performs the translations automatically.

Tips

Untitled.png

Self Learning: URI, URL, URN 三者的关系与区别

Path 路径

absolute path 绝对路径 a path that includes all directories along the way

relative path 相对路径 relative to some base path that is specified in the configuration files of the server

Tips

Multipurpose Internet Mail Extensions (MIME) 文件类型

specifies the forms of documents received from a server (attached to the beginning of the document by server, servers determine the type of a document by using the file name extension as the key into a table of types)

form: type/subtype (e.g. text/html, text/plain)

Self Learning: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types

相信现在的你对 Web 技术的全貌已经有了一定的了解，是时候深入 HTTP 这一 Web 的底层协议了 (Web原理的精髓部分)。理解这个协议的细节无论对于前端开发还是后端开发都是十分重要的！

不过，由于课程长度的限制，很多 HTTP 的衍生技术点无法在此逐个展开，感兴趣的同学可以移步相应内容下方的链接

Hyper Text Transfer Protocol (HTTP)

超文本传输协议（HTTP）是一个基于 TCP 协议的用于传输超媒体文档（例如 HTML）的 应用层协议（作为最顶层的协议，它隐藏了很多网络层和传输层的细节，详见 Bonus 中的 OSI模型）。它是为了约束/规范 Web 浏览器与 Web 服务器之间的通信而设计的，但也可以用于其他目的。HTTP 遵循经典的 客户端-服务端模型，客户端打开一个连接以发出请求，然后等待直到收到服务器端响应，就像两个人谈话一问一答的回合制形式。HTTP 是 无状态协议，这意味着服务器不会在两个请求之间保留任何数据（状态），即一般情况下服务器无法分辨多次请求的发起人分别是谁

Untitled 1.png

Self Learning: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

报文 作为 HTTP 传输数据最重要的一种形式，有着自己的一套规范化的数据格式，让我们一起来看一下它们由哪些部分构成 (它就像我们平时对话时所使用的语言，有着自己的语法和语义，理解它对于你理解客户端服务端之间的信息交流非常有帮助)

Request Phase 请求报文

Untitled 2.png

Request methods 请求方法

Method Description
GET Returns the contents of a specified document
POST Executes a specified document, using the enclosed data
HEAD Returns the header information for a specified document
PUT Replaces a specified document with the enclosed data
DELETE Deletes a specified document

Self Learning: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods

Header fields 头部

e.g.

Self Learning: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers

Response Phase 响应报文

First digits of HTTP status codes:

First Digit Category
1 informational
2 success
3 redirection
4 client error
5 server error

Untitled 3.png

Self Learning: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

让我们把请求和响应的报文再放在一起比对一下

Untitled 4.png

HTTPS

HTTPS = HTTP + SSL/TLS (Transport Layer Security) 会话层协议

HTTPS 有两个作用，一是确定请求的目标服务端身份，二是保证传输的数据不会被网络中间节点窃听或者篡改。

HTTPS 是使用加密通道来传输 HTTP 的内容，即 HTTPS 首先会与服务端建立一条 TLS 加密通道。TLS 构建于 TCP 协议之上，它实际上是对传输的内容做一次加密 (非对称加密)，所以从传输内容上看，HTTPS 跟 HTTP 没有任何区别。

Self Learning: https://zh.wikipedia.org/wiki/超文本传输安全协议

Caching (HTTP 缓存)

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术 (空间换时间)。当 web 缓存发现请求的资源已经被存储，它会拦截请求，返回该资源的拷贝，而不会去服务器重新下载。对于网站来说，缓存是达到高性能的重要组成部分。同时，缓存需要合理配置，因为并不是所有资源都是永久不变的，重要的是对一个资源的缓存应截止到其下一次发生改变（即不能缓存过期的资源）

Self Learning: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching

HTTP历史演进：HTTP/0.9 → HTTP/1.0 → HTTP/1.1 → HTTP/2.0 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP

动手试一试：

https://developer.chrome.com/docs/devtools/network/ | chrome 浏览器的网络查看工具，按下 F12, magic happens !

https://hoppscotch.io/ | 超好用的在线抓包工具，看报文超方便 !

Programming the World Wide Web (8th edition)

Internet and World Wide Web How to program (2011)

理解 HTTP 协议 | 被删的前端游乐场 (godbasin.github.io)

可能前面的这些内容会让你有一些 overwhelmed，不用担心，接下来我们就把这些知识点放置到 浏览器渲染 这一实际场景中，将他们按照逻辑顺序串联起来，厘清他们之间的关系，并做一些适当的拓展 (此部分内容会涉及到一些前端三大件的内容，且当是给接下来的课程做一下预热吧，不完全理解也没关系)

浏览器中页面的渲染过程

实际上当我们在浏览器输入网页地址，按下回车键后，浏览器的处理过程是这样子的：

  1. DNS 域名解析（此处涉及 DNS 的寻址过程），找到网页的存放服务器
  2. 浏览器与服务器建立 TCP 连接
  3. 浏览器发起 HTTP 请求
  4. 服务器响应 HTTP 请求，返回该页面的 HTML 内容
  5. 浏览器解析 HTML 代码，并请求 HTML 代码中的资源（如 JavaScript、CSS、图片等，此处可能涉及 HTTP 缓存）
  6. 浏览器对页面进行渲染呈现给用户（此处涉及浏览器的渲染原理）

进一步分析，我们可以将浏览器中页面的渲染过程分为两大部分 (详见 Bonus)

对浏览器渲染的整体流程有了一定理解之后，我们再来深入看一看网页从0到1的生命周期吧~ (提前了解一下浏览器提供给我们的两个重要 API - DOM 和 BOM，任何前端框架的底层都离不开和这两个家伙打交道 ! 哦对了，还有浏览器的事件机制，一名合格的前端工程师应该掌握它 !)

Untitled 5.png

Untitled 6.png

Untitled 7.png

浏览器对象模型（Browser Object Model），简称 BOM，表示由浏览器（宿主环境）提供的用于处理文档（document）之外的所有内容的其他对象 (浏览器在 JavaScript 中的表示形式)

文档对象模型（Document Object Model），简称 DOM，将所有页面内容表示为可以修改的对象。document 对象是页面的主要“入口点”。我们可以使用它来更改或创建页面上的任何内容 (HTML 标签在 JavaScript 中的表示形式)

Untitled 8.png

动手试一试：

按下 F12，在控制台 console 里敲入 window 或 document，看看会出现什么

Self Learning: https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction

Untitled 9.png

Events 事件 (Event-driven 事件驱动)

Self Learning:

https://zh.javascript.info/introduction-browser-events

https://zh.javascript.info/event-loop

Secrets of the JavaScript Ninja, (Second Edition) - JOHN RESIG BEAR BIBEAULT and JOSIP MARAS

https://zh.javascript.info/browser-environment | 学习 JavaScript，有这一个网站就足够了

Bonus

加餐环节，按需食用~

软件架构设计模式

MVC (Model View Controller)

MVP (Model View Presenter)

MVVM (Model View View-Model) (现代前端工程师必须了解的 View-Model 双向绑定)

https://github.com/livoras/blog/issues/11

World Wide Web Consortium (W3C)

作为Web领域的布道者以及标准制定者，W3C组织是每一个 web programmer 都应该知晓并了解的组织。尽管 web 编程相对来说更为自由和开放，但是若没有统一的标准来约束不同技术的创造者和使用者，那么这种 freedom 将会变成一种令人苦恼的 chaos

职责与使命

标准制定

Web technologies standardized by the W3C is called Recommendations (这些标准并非强制性的). Current and forthcoming W3C Recommendations include the Hyper-Text Markup Language 5 (HTML5), Cascading Style Sheets 3 (CSS3) and the Extensible Markup Language (XML). A recommendation is not an actual software product but a document that specifies a technology’s role, syntax rules and so forth.

https://www.w3.org

页面导航过程

当用户在地址栏中输入内容时，浏览器内部会进行以下处理：

  1. 首先浏览器进程的 UI 线程会进行处理：如果是 URI，则会发起网络请求来获取网站内容；如果不是，则进入搜索引擎
  2. 如果需要发起网络请求，请求过程由网络线程来完成。HTTP请求响应如果是 HTML 文件，则将数据传递到渲染器进程；如果是其他文件则意味着这是下载请求，此时会将数据传递到下载管理器
  3. 如果请求响应为 HTML内容，此时浏览器应导航到请求站点，网络线程便通知 UI 线程数据准备就绪
  4. 接下来，UI 线程会寻找一个渲染器进程来进行网页渲染。当数据和渲染器进程都准备好后，HTML 数据通过 IPC (Inter-process Communication) 从浏览器进程传递到渲染器进程中。
  5. 渲染器进程接收 HTML 数据后，将开始加载资源并渲染页面
  6. 渲染器进程完成渲染后，通过 IPC 通知浏览器进程页面已加载

https://s0.lgstatic.com/i/image6/M01/3B/B5/Cgp9HWCGemeAeLIdAAGeyyv3jvM989.png

页面渲染过程

  1. 解析 (Parser)：解析 HTML/CSS/JavaScript 代码。
  2. 布局 (Layout)：定位坐标和大小、是否换行、各种 position/overflow/z-index 属性等计算。
  3. 绘制 (Paint)：判断元素渲染层级顺序。
  4. 光栅化 (Raster)：将计算后的信息转换为屏幕上的像素。

Self Learning: https://coolshell.cn/articles/9666.html

OSI (Open Systems Interconnection) 七层网络模型

https://i.loli.net/2021/08/17/L2BTUIw8OsboxXt.jpg

前端学习路线 (入门到入土版)

https://6772-grp2020-4glv8fo5cd87cf9a-1302562267.tcb.qcloud.la/fullstack-roadmap/1.jpg?sign=0d3fbfe6acbfa9cc6c8899b36b3b7461&t=1622128974