浏览器访问网站
浏览器访问网站的流程:
- 用户在浏览器地址栏输入地址或者点击一个超链接
- 浏览器向服务器发送HTTP请求(如果是第一次访问该服务器,则还会有向DNS请求IP地址的过程)。
- 服务器接受并处理请求,如果查询字段(GET请求)或者请求体(POST请求)中有参数,需要考虑这些参数。
- 服务器根据请求内容更新获取或转换数据库里的数据。
- 服务器以HTML、JSON等格式生成一个HTTP响应返回给客户端。
- 客户端接受响应,并且解析内容,并且对网页进行渲染,最后以页面的方式呈现给用户。
简单来说:
- 浏览器发送HTTP请求给服务器
- 服务器解析请求,生成HTTP响应返回给浏览器
- 浏览器解析数据,并做处理
下面的是这个过程的详解[1]:
输入网址:1
http://www.zhihu.com/question/22689579
访问过程如下:
相关知识
HTML、CSS和JavaScript
HTML
浏览器获得HTML的内容(即上图中服务器发送HTTP响应的body(也有可能是其他内容)),会根据浏览器设置对其进行渲染。HTML(Hypertext Markup Language,超文本链接标示语言)是一种标记语言而不是编程语言,类似的还有markdown,xml等,是用来描述内容结构和格式的标记。
请求的网站HTML如下:
浏览器获取到HTML文本之后,会根据浏览器的设置渲染出网页并显示,如果去掉CSS,会按照浏览器的默认设置显示标签:
CSS
一般的网页都会自定义标签的样式,这时候就需要用到CSS(Cascading Style Sheets,层叠样式表)来控制内容的显示方式和格式。
一般有三种嵌入css的方法:内联,即通过每个标签的style属性修改样式(十分不建议使用);在head标签中加入style标签,在其中加入css描述;外嵌,即用link标签链接一个css文件。
如网站上的蓝色导航条的css描述:
含义为:
- 指定了导航条的位置为左上角(left,top值为0)
- 固定的(position:fixed)
- 指定了导航栏的长宽(height,width)
- 背景色为渐变蓝色(background)
浏览器根据这些CSS来显示出对应的内容
JavaScript
通过HTML和CSS,可以得到一个静态的页面,当我们点击某个链接或图片的时候,浏览器会重新发新的请求,然后浏览器重定向到返回的新页面。而很多比较特殊的效果,比如淘宝广告的推荐,发布微博,评论等,不需要重定向到新网页就能实现,这就是动态网页。这时候就需要JavaScript来实现了,如下
这样的效果只要写JS代码,保存在js文件中,然后在整个页面的最后(<\body>
前)利用script标签把脚本引入即可。
这个效果是通过如下过程实现的:
- 鼠标悬停到标签上时创建一个新的
<div>
小窗口 - JS代码想服务器发送一个请求,得到小窗口的数据,放在小窗口中,这实际上利用了AJAX的技术(异步JavaScript和XML,Asynchronous Javascript And XML)即可以在不重新加载整个网页的情况下,产生局部更新的效果。
HTTP协议
HTTP协议,即超文本传输协议,是一种用来规定请求和响应内容的规范。
下面是一个HTTP响应的例子:
请求和响应返回的内容格式是一致的:
- 请求行或者响应行
- HTTP header
/r/n
- HTTP body
对于浏览器发出的请求,会有请求行:
请求方法 路径 HTTP版本
其中请求方法有:GET,POST(PUT,DELETE,OPTIONS,CONNECT,TRACE等,但是都不常用,因为不安全),其中GET方法会把表单内容放在请求行的路径中,而POST方法则会将表单内容放在HTTP body中,这也是这两种方法最大的区别。
路径为请求路径,即URL。
HTTP header提供了一些浏览器附带的额外描述,
对于服务器返回的响应,会有响应行:
HTTP版本 状态码 状态描述
HTTP版本,HTTP1.1、HTTP1.0
状态码:对请求资源的响应。
- 200 表示请求的内容正常响应
- 404 表示请求资源未找到
- 301 表示永久重定向
- 302 表示暂时重定向(和301的区别是,301重定向后,重定向的网址会缓存下来,之后每次访问该网页时,会直接读取缓存中指向的内容,302则会每次都向服务器重新发送请求)。
- 2XX 请求内容成功
- 3XX 重定向
- 4XX 客户端错误
- 5XX 服务器错误
状态描述,专业术语并不叫这个,但是这个没什么用,就是告诉用户服务器响应的情况的,实际上服务器端的脚本可以随意设置这段内容。
后记
最近发现一个前端的大神张秋怡(其实可以说是我的女神了),简单的浏览了一下她的事迹以及她在知乎的回答。跟我一个岁数,但是别人在本科的时候就远远超过我了,技术方面很强,进了阿里,现在离职自由职业,并且是Node.js社区核心技术委员会在国内首位的成员,英语能力很强,好像还会日语韩语(?)。想想虽然是同岁,别人真的远远超过我了,好多我想做的事她已经做的非常好了。再翻翻她的博客,我现在做的东西最多才她大一大二的水平。真的优秀的人又聪明,又一直push自己,所以才到了别人无法企及的高度,所以要变强,一定要不断的push自己去学习,一直呆在安逸的环境里无法成长。
顺便吐槽一下,hexo这个框架改图片格式好不方便啊,等之后空了记得修改图片。
这篇文章的部分内容和所有图片参考张秋怡的第一个知乎回答。