本文主要介绍

目录

浏览器

服务器

用户访问网站原理及流程

描述从浏览器打开http://www.baidu.com地址回车发送请求到看到页面的过程（面试题）

DNS解析

TCP三次握手原理

HTTP请求报文

响应报文

网页资源

大规模网站集群架构细节

tcp的四次挥手

部分摘自 https://www.jianshu.com/p/f6da3875834b

浏览器

定义（百度百科）

浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。

它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像，可以是连接其他网址的超链接，用户可迅速及轻易地浏览各种信息。大部分网页为HTML格式。

一个网页中可以包括多个文档，每个文档都是分别从服务器获取的。大部分的浏览器本身支持除了HTML之外的广泛的格式，例如JPEG、PNG、GIF等图像格式，并且能够扩展支持众多的插件（plug-ins）。另外，许多浏览器还支持其他的URL类型及其相应的协议，如FTP、Gopher、HTTPS（HTTP协议的加密版本）。HTTP内容类型和URL协议规范允许网页设计者在网页中嵌入图像、动画、视频、声音、流媒体等。

浏览器是最经常使用到的客户端程序。

简史

第一个Web浏览器

出自Berners-Lee之手，这是他为NeXT计算机创建的（这个Web浏览器原来取名叫WorldWideWeb，后来改名为Nexus），并在1990年发布给CERN的人员使用。Berners-Lee和Jean-Francois Groff将WorldWideWeb移植到C，并把这个浏览器改名为libwww。

20世纪90年代初出现了许多浏览器，包括Nicola Pellow编写的行模式浏览器（这个浏览器允许任何系统的用户都能访问Internet，从Unix到Microsoft DOS都涵盖在内），还有Samba，这是第一个面向Macintosh的浏览器。

当时，网页浏览器被视为能够处理CERN庞大电话簿的实用工具。在与用户互动的前提下，网页浏览器根据gopher和telnet协议，允许所有用户能轻易地浏览别人所编写的网站。可是，其后在浏览器中加插图像的举动，使之成为了互联网的“杀手级应用”。

各类浏览器

NCSA Mosaic使互联网得以迅速发展。它最初是一个只在Unix运行的图像浏览器；很快便发展到在Apple Macintosh和Microsoft Windows亦能运行。1993年9月发表了1.0版本。NCSA中Mosaic项目的负责人Marc Andreesen辞职并建立了网景通讯公司。

网景公司在1994年10月发布了他们的旗舰产品网景导航者。但第二年Netscape的优势就被削弱了。

错失了互联网浪潮的微软在这个时候匆促的购入了Spyglass公司的技术，改成Internet Explorer，掀起了软件巨头微软和网景之间的浏览器大战。这同时加快了万维网发展。

这场战争把网络带到了千百万普通电脑用户面前，但同时显露了互联网商业化如何妨碍统一标准的制定。微软和网景都在他们的产品中加入了许多互不相容的HTML扩展代码，试图以这些特点来取胜。1998年，网景公司承认其市场占有率已无法挽回，这场战争便随之而结束。微软能取胜的其中一个因素是它把浏览器与其操作系统一并出售（OEM，原始设备制造）；这亦使它面对反垄断诉讼。

网景公司以开放源代码迎战，创造了Mozilla，但此举未能挽回Netscape的市场占有率。在1998年底美国线上收购了网景公司。在发展初期，Mozilla计划为著吸引开发者而挣扎；但至2002年，它已发展成一个稳定而强大的互联网套件。Mozilla 1.0的出现被视为其里程碑。同年，衍生出Phoenix（后改名Firebird，最后又改为Firefox）。Firefox 1.0于2004年发表。及至2008年，Mozilla及其衍生产品约占20%网络交通量。

Opera是一个灵巧的浏览器。它发布于1996年。2013年它在手持电脑上十分流行。它在个人电脑网络浏览器市场上的占有率则稍微较小。

Lynx浏览器仍然是Linux市场上十分流行的浏览器。它是全文字模式的浏览器，视觉上并不讨好。还有一些有着进阶功能的同类型浏览器，例如Links和它的分支ELinks。

Konqueror是一个由KDE开发的浏览器，KDE开发人员在开发KDE2时意识到一个良好的桌面环境必须搭配一个良好的网络浏览器及档案管理员，便投入不少力量开发了Konqueror，这个浏览器使用了自家开发的排版引擎KHTML，由于Konqueror是属于KDE的一员，并只常见于Unix-like下的KDE桌面环境，所以Konqueror并未普及；纵然Macintosh的浏览器市场亦同样被Internet Explorer和Firefox占据，但2013年以后有可能会是苹果电脑自行推出的Safari的世界。Safari是基于Konqueror这个开放源代码浏览器的KHTML排版引擎而制成的。

Safari是Mac OS X的默认浏览器。

现状

最新数据统计

主流浏览器内核

不同的浏览器有不同的浏览器内核，浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现

IE内核 Trident
谷歌内核 WebKit / Blink
火狐内核 Gecko
Safari内核 WebKit
欧朋内核 Presto

服务器

360百科定义

服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

在网络环境下，根据服务器提供的服务类型不同，分为文件服务器，数据库服务器，应用程序服务器，WEB服务器等。

用户访问网站原理及流程

描述从浏览器打开http://www.baidu.com地址回车发送请求到看到页面的过程（面试题）

打开浏览器输入网址回车，到看到页面的过程
大纲：

1、用户访问网站流程框架
2、DNS解析原理 *****
3、tcp/ip三次握手原理 *****
4、http协议原理（www服务的请求过程）请求报文细节！
5、大规模网站集群架构细节。
6、http协议原理（www服务的响应过程）响应报文细节！
7、tcp/ip四次挥手过程原理 *****

当我们打开浏览器输入网址回车，到看到网页页面，主要有两大步骤：第一，将域名解析成ip的过程，第二，通过ip找到网站服务器，请求打开具体的网页，服务器响应请求，客户端浏览器收到响应报文后，渲染html文档，最终得到我们看到的网页页面。

DNS解析

首先：说一下DNS解析的流程。

大家都知道，计算机之间只能通过ip相互通信，因为ip不好记，于是才使用DNS服务器把域名解析为相应的ip，这里以解析www.oldboyedu.com为例，当我们输入这个网址回车的时候，浏览器会首先查询浏览器的缓存，这个缓存存活时间可能只有1分钟，如果没找到，则去查询本地的DNS缓存和hosts文件，如果有www.oldboyedu.com这个域名对应的ip，则直接通过这个ip访问网站服务器。

如果本地的DNS缓存和hosts文件没找到，这时候就会把请求发送给，网卡配置信息里的DNS服务器，默认有两个，只有当DNS1不能访问时，才会使用DNS2。我们也称网卡配置信息里的DNS为local DNS，这时候local DNS会先查询它的缓存，有没有www.oldboyedu.com相应的记录，如果有，则返回给用户，如果没有，就会访问根域名服务器.

世界一共有13台根域名服务器，根域名服务器一看，是找.com的，于是会把.com的顶级域名服务器的ip发送给local DNS，这时local DNS再次访问.com的顶级域名服务器，.com的顶级域名服务器一看，是找一级域名oldboyedu.com的，于是再将oldboyedu.com的ip发送给local DNS，然后继续往下找，直到找到www.oldboyedu.com的权威DNS的A记录或者cname,这时候local DNS会把找到的www.oldboyedu.com的ip发送给客户端，并记录在缓存中，这样的话，下次如果有其他的用户访问www.oldboyedu.com这个域名时，local DNS的缓存中就有记录了。客户端收到local DNS发送过来的ip就会通过ip去访问服务器，并将这个ip记录在dns缓存中。
以上就是dns解析的原理。

TCP三次握手原理

通过DNS解析之后，拿到了ip，就可以通过ip向服务器发送http请求了，因为http是工作在第七层应用层，tcp是工作在第四层传输层，所以发生http请求之前，还会进行tcp的三次握手。

tcp的三次握手是：客户端首先向服务器发送一个带有SYN标识和一个seq的随机数，服务端收到后，需要给客户端回应一个ack，ack的值就是刚才的seq随机数的值+1，在回应包里，还包含一个SYN的标识和一个seq随机数。客户端收到服务端发过来的回应包之后，再给服务端发送一个ack,ack的值就是刚才服务端发过来的seq的值+1。上面三步完成之后，三次握手就完成了，下面就可以开始传数据了
这里就是开始发送http请求报文了

HTTP请求报文

http的请求报文，主要包括，请求行，请求头部，空行，请求主体
请求行又包括，请求方法，url，协议版本，请求方法主要有GET、HEAD、POST、PUT、DELETE、MOVE，url就是统一资源定位符，通过这个能在服务器上找到唯一的网页资源，协议版本，目前主流的是http1.1,开始流行的协议版本是http1.0，相对应http1.0，http1.1主要从可扩展性、缓存处理、带宽优化、持久连接、host头、错误通知、消息传递、内容协商等多方面做了一些优化，以上是请求行的内容

请求头部主要有媒体类型，语言类型、支持压缩、客户端类型、主机名等，媒体类型主要有文本文件，图片文件，视频文件等，语言类型就是告诉服务器客户端的接受的语言，支持压缩的话，可以节省带宽，客户端类型，会显示客户端浏览器的版本信息，操作系统信息等
空行，代表请求头部的结束，也代表着请求主体的开始
请求报文主体，只有使用POST提交表单的时候，才有对应的，服务器收到请求报文之后，就会给出响应报文。

响应报文

主要包含起始行、响应头部、空行、响应报文主体起始行一般包含http版本号，数字状态码，状态情况。而数字状态码，常见有以下几种

200 代表ok

301 永久跳转

403 没权限

404 没有这个文件

500 未知的错误

502 网关错误

503 服务器超载，停机维护

504 网关超时

响应头部，主要包括，服务器的web软件版本，服务器时间，长连接还是短连接，设置字符集等等
这里的空行和请求报文空行一样
在报文主体中包装载了要返回给客户端的数据

网页资源

常见的网页资源有三种，分别是静态网页，动态网页，伪静态
静态网页就是没有后台数据库，不含php，jsp，asp等程序，不可交互的，开发者编写的是啥，显示的就是啥，不会有任何改变
动态网页，有后台数据库，支持更多的功能，如用户注册，登录，发帖，订单，博客等，

动态网页并不独立存在于服务器上的网页文件，而是当用户请求服务器上的动态程序时，服务器解析这些程序，并调用数据库来返回一个完整的网页内容，它跟静态网页的url不同，它的url中包含？、&等特殊符号，搜索引擎收录的时候存在一定的问题

伪静态，动态网页为了方便收录，常常会利用rewrite技术，把动态网页的URL伪装成静态网页URL，这就是伪静态。

不同的网页资源，打开的流程不一样。

下面假设我们访问的是一个静态网站：
客户端会通过http协议，下载服务器上的html文件，然后去读这个html文件，根据html页面中的链接，自上而下的请求，每一个请求是一个链接，如果是图片的话，会下载边渲染，遇到js，就会加载js，当js比较内容较复杂时，浏览器就会等待，鼠标在转圈，我们称这个为js阻塞，当js下载完毕并执行完成之后，才会显示我们看到的网页。

当我们访问的是一个动态网页时，首先用户发出一个请求，服务器收到这个请求之后，这里假设服务器使用的是nginx，nginx会把这个请求转给php，php就会去查询数据库，根据数据库返回的值，生成一个完整的网页内容，发送给用户，用户收到之后，也是边下载边渲染，加载js，执行完毕之后，才会显示我们看到的网页

大规模网站集群架构细节

当服务器的访问量达到亿级PV时，这个访问的过程就更复杂了，用户的请求会先访问全国的CDN节点，通过CDN挡住全国80%的请求，当CDN上没有时，在访问服务器集群，这个集群一般都有一个4层的代理，这个4层的代理，使用软件来完成的话，就是LVS，使用硬件就是F5，4层的代理，后面才是7层的负载均衡，常用的是haproxy,nginx，然后才是多台web服务器，web服务器比较多的时候，就有两个问题，一个是用户数据的一致性，不能因为不同的web服务器提供服务，而导致数据不同步，这时候，我们就需要使用NFS共享存储，第二个问题是session，不能因为不同的web服务器提供服务，session找不到了，这时候，我们就需要使用memcached来存放并共享session。由于用户访问量太大，这时候的瓶颈就是数据库的压力，我们一般都是使用分布式缓存memcache,redis等，另外数据库还需要做读写分离等优化，后面的过程与访问动态网页类似

tcp的四次挥手

当浏览器加载一个完整的页面时，还需要与服务器断开连接，这个过程就是tcp的四次挥手
首先客户端会发送一个带有FIN标识和一个seq随机数，服务端收到之后，会回应一个ack，ack的值等于刚才的seq的值+1，发送之后，服务器会再发一个包，这个包里面也带有FIN标识和一个seq随机数，客户端收到之后，回应一个ack，ack的值等于刚才的seq值+1，以上完成之后，服务器和客户端的4次挥手就完成了！

网页知识入门-浏览器和网页生成相关推荐

网络知识入门，探讨DNS服务器在网页请求中的作用（二）
上一篇文章讲到网络请求是基于http协议传输的,消息请求包含了"对什么"和"做什么操作",于是一个网页请求就这么发送出去了.但是在发送消息之前,我们还需要对域名 ...
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
课时3.浏览器访问网页原理（理解）
浏览器访问网页原理(理解) 第一次打开IE6,发现系统自动生成了一个文件夹,所以我们可以得出这个文件夹必然和IE6有一定的关系先删除Internet Cache下的所有文件夹,然后通过IE6打开百度 ...
《HTML5+CSS3网页设计入门必读》——1.13 测验
本节书摘来自异步社区<HTML5+CSS3网页设计入门必读>一书中的第1章,第1.13节,作者: [美]Julie Meloni更多章节内容可以访问云栖社区"异步社区" ...
Python+django网页设计入门（20）：使用WebSocket创建多人在线聊天室
2019年3月8日-10日公众号送书活动:中小学生Python课应该学什么 ================ 前导课程: Python+django网页设计入门(19):创建新模型扩展自带用户表的字段 ...
Python+django网页设计入门（18）：自定义模板过滤器
前导课程: Python+django网页设计入门(17):模板语法及应用 Python+django网页设计入门(16):优化设计复用分页代码 Python+django网页设计入门(15):公用模 ...
Python+django网页设计入门（15）：公用模板设计与使用
前导课程: Python+django网页设计入门(14):使用中间件对抗爬虫 Python+django网页设计入门(13):表单.修改密码 Python+django网页设计入门(12):使用Bo ...
Python+django网页设计入门（13）：表单、修改密码
前导课程: Python+django网页设计入门(12):使用Bootstrap和jQuery Python+django网页设计入门(11):在线考试与自动评分 Python+django网页设计 ...
Python+django网页设计入门（12）：使用Bootstrap和jQuery
文中有源码下载方式,请仔细寻找. 前导课程: Python+django网页设计入门(11):在线考试与自动评分 Python+django网页设计入门(10):分页显示 Python+django网 ...
Python+django网页设计入门（11）：在线考试与自动评分
前导课程: Python+django网页设计入门(10):分页显示 Python+django网页设计入门(9):自定义反爬虫功能 Python+django网页设计入门(8):网站项目文件夹布局 ...

网页知识入门-浏览器和网页生成

浏览器