一个浏览器是如何工作的?

一个浏览器到底是如何工作的。

  1. 浏览器首先使用 HTTP 协议或者 HTTPS 协议,向服务端请求页面;
  2. 把请求回来的 HTML 代码经过解析,构建成 DOM 树;
  3. 计算 DOM 树上的 CSS 属性;
  4. 最后根据 CSS 属性对元素逐个进行渲染,得到内存中的位图;
  5. 一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度;
  6. 合成之后,再绘制到界面上。

HTTP协议

HTTP协议格式
  • HTTP Method(方法)
方法 介绍
GET 通常用于请求服务器发送某个资源,浏览器通过地址栏访问页面都是 GET 方法,GET 请求的响应是可缓存的
POST 起初是用来向服务器输入数据的。通常用它来支持 HTML 的表单提交。POST 方法的响应是可缓存的。除非响应里有 Cache-Control 或者 Expires 头域指示其响应不可缓存
HEAD 与 GET 类似,但服务器在响应中只返回首部,不返回实体的主体部分,多数由 JavaScript 发起,用来测试超文本链接的有效性,可访问性,和最近的改变。HEAD 请求的响应是可缓存的。
PUT 添加资源。让服务器用请求的主体部分来创建一个由所请求的 URL 命名的新文档,或者,如果那个 URL 已经存在的话,就用干这个主体替代它
DELETE 请求服务器删除请求 URL 指定的资源
CONNECT 多用于 HTTPS 和 WebSocket
OPTIONS 请求 web 服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法
TRACE 主要用于诊断,用于验证请求是否如愿穿过了请求/响应链,多数线上服务都不支持。会在目的服务器端发起一个环回诊断,最后一站的服务器会弹回一个 TRACE 响应并在响应主体中携带它收到的原始请求报文
  • HTTP Status code(状态码)和 Status text(状态文本)

    1. 1xx:信息响应类,代表请求已被接受,需要继续处理。这类响应是临时响应,只包含状态行和某些可选的响应头信息,并以空行结束
       100:Continue,客户端应当继续发送请求。用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝。客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。
       101:Switching Protocols,服务器已经理解了客户端的请求,并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求
    
    2. 2xx:处理成功响应类,代表请求已成功被服务器接收、理解、并接受
       200:OK,请求已成功,请求所希望的响应头或数据体将随此响应返回
       201:Created,请求已经被实现,而且有一个新的资源已经依据请求的需要而建立,且其 URL 已经随 Location 头信息返回
       202:Accepted,服务器已接受请求,但尚未处理,最终该请求可能会也可能不会被执行。返回 202 状态码的响应的目的是允许服务器接受其他过程的请求,常用于异步操作
       204:No Content,服务器成功处理了请求,但返回信息为空,浏览器不用刷新页面,也不用导向新的页面 ,始终以消息头后的第一个空行结尾
       205:Reset Content,服务器成功处理了请求,且没有返回任何内容,要求请求者重置文档视图。该响应主要是被用于接受用户输入后,立即重置表单,以便用户能够轻松地开始另一次输入,始终以消息头后的第一个空行结尾
       206:服务器已经完成了,部分用户的 GET 请求
    
    3. 3xx:重定向响应类,代表需要客户端采取进一步的操作才能完成请求。通常,这些状态码用来重定向,后续的请求地址(重定向目标)在本次响应的 Location 域中指明。
       304:跟客户端缓存没有更新
       300:请求的资源可在多处得到
       301:永久性跳转
       302:临时性跳转
       303:建议客户访问其他 URL 或访问方式
       304:客户端已经执行了 GET ,但文件未变化
       305:请求的资源必须从服务器指定的地址得到
       307:申明请求的资源临时性删除
    
    4. 4xx:客户端错误,客户请求包含语法错误或者是不能正确执行
       400:Bad Request。1. 语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求。2. 请求参数有误。
       401:Unauthorized,当前请求需要用户验证
       403:Forbidden,服务器已经理解请求,但是拒绝执行它。与401响应不同的是,身份验证并不能提供任何帮助,而且这个请求也不应该被重复提交。
       404:Not Found,请求失败,请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。
       414:Request-URI Too Long,请求的URI 长度超过了服务器能够解释的长度
    
    5. 5xx:服务端错误,服务器不能正确执行一个正确的请求
       500:Internal Server Error,服务器产生内部错误
       501:Not Implemented,服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法,并且无法支持其对任何资源的请求
       502:Bad Gateway,服务器暂时不可用,有时是为了防止发生系统过载
       503:Service Unavailable,临时的服务器过载或暂停维修
       504:Gateway Timeout,关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长。某些代理服务器在 DNS 查询超时时会返回 400 或者 500 错误
       505:HTTP Version Not Supported,服务器不支持或拒绝支请求头中指定的 HTTP 版本
    

http协议

  1. http(超文本传输协议)是一个基于请求与响应模式的、无状态的、应用层的协议

  2. 主要特点

    • 简单快速:客户向服务器请求服务时,只需传送请求方法和路径。
    • 灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
    • 无连接:限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
    • 无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快。
    • 支持B/S及C/S模式。
  3. http请求由三部分组成,分别是:请求行、请求头、请求主体

    • 请求行:用来说明请求类型,要访问的资源以及所使用的HTTP版本
    • 请求头:紧接着请求行(即第一行)之后的部分,用来说明服务器要使用的附加信息
    • 空行:请求头后面的空行是必须的,即使第四部分的请求数据为空,也必须有空行
    • 请求主体:也叫请求数据主体,可以添加任意的其他数据
  4. HTTP响应也是由三个部分组成,分别是:状态行、响应头部、响应主体

    • 状态行:由HTTP协议版本号,状态码,状态消息三部分组成
    • 响应头部:用来说明客户端要使用的一些附加信息
    • 响应主体:服务器返回给客户端的文本信息
  5. get请求:请求指定的页面信息,并返回实体主体

  6. post请求:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。

  7. head请求:类似于get请求,只不过返回的响应中没有具体的内容,用于获取报头

  8. GET和POST的区别:

    • GET提交的数据会放在URL之后,以?分割URL和传输数据,参数之间以&相连,POST方法是把提交的数据放在HTTP包的Body中
    • GET提交的数据大小有限制(因为浏览器对URL的长度有限制),而POST方法提交的数据没有限制
    • GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值。
    • GET方式提交数据,会带来安全问题
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容