web前端页面展示是如何实现的

 昨天看到有人用很浅显和概括的话描述了前端页面显示

网站从输入网址开始，先请求到静态服务器（获取页面）==》发送请求到动态服务器（获取数据）==》JS渲染数据到页面==》最终呈现

感觉也有一定的道理，但不是很认可。我就在网上查了查。

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

在《javascriptDOM编程艺术》这本书中，作者以创建一个图片库实例的形式向我们展示了DOM编程的精髓。以前在编写代码时，往往是结构、行为与表示乱放一通，不注重分离，使得代码冗长且可读性降低，还导致网页不具有健壮性，用户体验也不好。为减少滥用DOM，作者提出两项原则：

• 渐进增强    此原则基于这样一种思想：你应该总是从最核心的部分，也就是内容开始，应该根据内容使用标记实现良好的结构‘然后再逐步加强这些内容。这些增强工作既可以是通过CSS改进呈现效果，也可以通过DOM添加各种行为。如果你正在使用DOM添加核心内容，那么你添加的时机未免太迟了，内容应该在开始编写文档时就成为文档的组成部分。
• 平稳退化    渐进增强的实现必然支持平稳退化。如果你按照渐进增强的原则去充实内容，你为内容添加的样式的行为就自然支持平稳退化，那些缺乏必要的CSS和DOM支持的访问者仍可以访问到你的核心内容。如果你用JavaScript去添加这些重要内容，它就没法支持平稳退化，不支持javascript，就看不到内容。这好像是一种限制，其实不是，利用DOM去生成内容有着广泛的用途。

在了解了网页的基本设计之后，我们来看看它是如何展现的。

1，浏览器首先会查询本机的系统，获取主机名对应的IP地址。

2，若本机查询不到相应的IP地址，则会发起DNS请求，获取主机名对应的IP地址。

3，使用查询到的IP地址，直接访问目标服务器。　

4，浏览器发送HTTP请求。

　　HTTP请求由三部分组成，分别是：请求行、消息报头、请求正文

5， 从请求信息中获得客户机想访问的主机名。

6，从请求信息中获取客户机想要访问的web应用。（web应用程序指提供浏览器访问的程序，简称web应用）

7，从请求信息中获取客户机要访问的web资源。（web资源，即各种文件，图片，视频，文本等）

8，读取相应的主机下的web应用，web资源。

9，用读取到的web资源数据，创建一个HTTP响应。

10，服务器回送HTTP响应。

　　HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文

11，客户浏览器解析回送的资源，并显示结果。