初衷:

大脑中一直存在误区:一个Web前端工作者只要完美实现产品所提需求,至于浏览器究竟是怎么工作或者其中间都经历了些什么事情,就不用刨根问底了。直到最近看见前端大神winter老师关于浏览器部分的系列文章后,方才意识到浏览器的这些知识,还得好好研究一番。

刨根问底:

1.浏览器如何工作的?

对于浏览器实现者来说,他们所做的事情就是把一个URL链接变成用户眼睛所能看见的网页。

主要过程描述:

1.浏览器首先使用HTTP或者HTTPS协议,向服务器端请求页面;

2.把请求回来的HTML解析,构建为DOM树;

3.计算DOM树上的CSS属性,对元素逐个进行渲染,得到内存中的位图;

4.合成位图,绘制到页面上。

2.http报文头部有哪些字段? 有什么意义 ?

2.1 HTTP报文:它是HTTP应用程序之间发送的数据块。这些数据块以一些文本形式的元信息开头,这些信息描述了报文的内容及含义,后面跟着可选的数据部分。这些报文都是在客户端、服务器和代理之间流动。

2.2 所有的HTTP报文都可以分为两类,请求报文和响应报文。它俩结构大致相同,只是起始行的语法不同。

请求报文的格式:

起始行: <method> <request-URL> <version>

头部:   <headers>

主体:   <entity-body>
响应报文的格式:

起始行:  <version> <status> <reason-phrase>

头部:    <headers>

主体:    <entity-body>

主要的http报文头部字段以及其含义:



3.HTTP状态码

3.1详细的HTTP状态码解释请看这里

3.2最早之前看过有位大神写过的文章中,描述的简单易记忆版的:

1XX:Informational(信息性状态码)           接收的信息正在处理

2XX:Success(成功状态码)                  请求正常处理完毕

3XX:Redirection(重定向状态码)            需要进行附加操作已完成请求

4XX:Client Error(客户端错误状态码)        服务器无法处理请求

5XX:Server Error(服务器错误状态码)        服务器处理请求出错

4.TCP三次握手、四次的过程

4.1:

①TCP:Transmission Control Protocol.传输控制协议

TCP共有6个标志位,分别是:SYN(synchronous),建立联机;ACK(acknowledgement),确认;PSH(push),传输;FIN(finish),结束;RST(reset),重置;URG(urgent),紧急。

Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源。Client端接收到ACK报文后也向Server段发生ACK报文,并分配资源,这样TCP连接就建立了。

②TCP在传输之前会进行三次沟通,一般称为“三次握手”;传输数据断开的时候需要进行四次沟通,一般称为“四次挥手”。

断开连接端可以是Client端,也可以是Server端

假设Client端发起中断连接请求,就先发送FIN报文。Server端接到FIN报文后,但是如果还有数据没有发送完成,则不必急着关闭Socket,可以继续发送数据。所以服务器端先发送ACK,告诉Client端:请求已经收到了,但是我还没准备好,请继续等待停止的消息。这个时候Client端就进入FIN_WAIT状态,继续等待Server端的FIN报文。当Server端确定数据已发送完成,则向Client端发送FIN报文,告诉Client端:服务器这边数据发完了,准备好关闭连接了。Client端收到FIN报文后,就知道可以关闭连接了,但是他还是不相信网络,所以发送ACK后进入TIME_WAIT状态, Server端收到ACK后,就知道可以断开连接了。Client端等待了2MSL后依然没有收到回复,则证明Server端已正常关闭,最后,Client端也可以关闭连接了至此,TCP连接就已经完全关闭了!

参考文章:这里

5. get post请求的区别:

HTTP协议中的两种发送请求的方法;这里更详细

6.浏览器事件有哪些过程? 为什么一般在冒泡阶段, 而不是在捕获阶段注册监听? addEventListener 参数分别是什么 ?

浏览器事件一般经历的过程:事件捕获、处于目标阶段、事件冒泡阶段。

考虑浏览器的兼容性

addEventListener可接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值若为true,表示在捕获阶段调用事件处理程序;若为false,表示在冒泡阶段调用事件处理程序。

……(再补)

结语:

干瘪的海绵叶叶,迅速膨大吧!

Web浏览器里的那些事的更多相关文章

  1. 关于Web开发里并发、同步、异步以及事件驱动编程的相关技术

    一.开篇语 我的上篇文章<关于如何提供Web服务端并发效率的异步编程技术>又成为了博客园里“编辑推荐”的文章,这是对我写博客很大的鼓励,也许是被推荐的原因很多童鞋在这篇文章里发表了评论,有 ...

  2. web浏览器工作原理

    HTML在浏览器里的渲染原理 我们打开的页面(Web页面)在各种不同的浏览器中运行,浏览器载入.渲染页面的速度直接影响着用户体验,简单地说下页面渲染,页面渲染就是浏览器将html代码根据CSS定义的规 ...

  3. 第十一章:WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  4. web浏览器中的javascript 1

    Html 文档嵌入客户端有4种方式. 1. 内联.放置在<script>和</script>标签对之间. 2.放置在<script>标签的src属性指定的外部文件中 ...

  5. web浏览器中javascript

    1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; ...

  6. SeaJS:一个适用于 Web 浏览器端的模块加载器

    什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definit ...

  7. 从晶体管到web浏览器

    几年前写了这个,想放到网上,招聘很困难,很多现代计算机科学教育真的很糟,很难找到懂得现代计算机堆栈的第一(基本)原理的人. 如果我曾经再次得到了12周的自由,我会提供这个作为课余学习的play,我也想 ...

  8. web.xml里welcome-file欢迎页面配置及web.xml简介

    web项目欢迎页面的配置 <welcome-file-list> <welcome-file>/WEB-INF/index.html</welcome-file> ...

  9. JavaScript权威指南--WEB浏览器中的javascript

    知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...

随机推荐

  1. Java基础知识总结--final、finally、finalize的区别

    谈谈final.finally.finalize的区别 1.final修饰符:如果一个类被声明为final,意味着这个类不能再被派生出新的子类,不能作为父类被别的类继承.因此,一个类不能即被声明为ab ...

  2. js的几个补充事件

    在这里我做几个前面文章当中没有介绍的javascript补充事件 1.onscroll:当元素滚动条滚动时执行的事件: <div class="container"> ...

  3. gitbook build 报错

    如下图所示 解决方案,通过 everythings 找到 copyPluginAssets.js,然后搜索 confirm,将其值  true –> false 参考链接:https://git ...

  4. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  5. 微信小程序判断用户是否需要再次授权获取个人信息

    一.index.js设置如下 //获取用户的授权信息,放到本地缓存中 wx.getSetting({ success: (res) => { if(res.authSetting['scope. ...

  6. jvm理论-运行时数据区

    三大流行jvm sun HotSpot ibm j9 BEA JRockit Oracle 会基于HotSpot整合 JRockit. jvm运行时数据区 java虚拟机所管理的内存将会包括以下几个运 ...

  7. Linux远程执行shell命令

    Linux远程执行shell命令   在Linux系统中,我们经常想在A机器上,执行B机器上的SHELL命令. 下面这种方案,是一种流行可靠的方案. 1.SSH无密码登录 # 本地服务器执行(A机器) ...

  8. 【iOS】ARC-MRC下的单例及其应用

    单例的应用十分普遍,单例模式使一个类仅仅有一个实例. *易于供外界訪问. *方便控制实例个数,节约系统资源. *OC中的常见单例: 如:UIApplication,  NSNotificationCe ...

  9. HDU 1022.Train Problem I【栈的应用】【8月19】

    Train Problem I Problem Description As the new term comes, the Ignatius Train Station is very busy n ...

  10. 画图必备numpy函数

    给定一堆数字,需要统计这些数字中每个数字的个数. 如果这些数字是整数,那自然可以精确统计出来. 如果这些数字是浮点数,如果精确统计会发现几乎每个数字都只出现了一次.所以浮点数就要通过区间的方式进行统计 ...