总结Ⅻ-计算机基础

153 阅读18分钟

一、在地址栏里输入一个URL,到这个页面呈现出来,中间会发生什么?

图解版

image.png


文字版

一、DNS域名解析

根据输入的 URL 域名找到真实 IP 地址,在查找的过程中,浏览器首先会寻找缓存,查看缓存中是否有记录,缓存的查找记录为:

浏览器缓存-》操作系统缓存-》路由器缓存; 缓存中没有则查找系统的hosts文件中是否有记录; 如果没有则查询DNS服务器,首先从顶级域名(一般顶级域名已经在缓存中了),再到二级域名,以此类推。

二、建立TCP连接

根据 IP 地址,客户端与服务端进行三次握手,建立连接。

为了准确无误地把数据送达目标处,TCP采用了三次握手策略:用TCP把数据包发送出去后,TCP不会对传送后的数据置之不理,它一定会向对方确认是否成功送达

发送端首先给接收端发送一个带SYN标志的数据包。

接收端收到后,回传一个带有SYN/ACK标志的数据包以表示正确传达,并确认信息。

最后,发送端再回传一个带ACK标志的数据包,代表“握手”结束。

注:

握手过程中使用了TCP的标志,即SYN和ACK

若在握手过程中的某个阶段莫名中断,TCP会再次以相同的顺序发送相同的数据包

三、传输数据

连接后,客户端向服务端发起 HTTP 请求,服务器接收到请求后,返回请求静态资源,并同时调用 apache 服务器请求接口数据。

注:得到服务器的IP 地址后,浏览器根据这个IP 以及相应的端口号,构造一个HTTP 请求,这个请求报文会包括这次请求的信息,主要是请求方法,请求说明和请求附带的数据,并将这个HTTP 请求封装在一个TCP包中,这个TCP包会依次经过传输层,网络层,数据链路层,物理层到达服务器。

四、关闭TCP连接

数据传输完成,客户端与服务端进行四次挥手,关闭连接。

断开一个TCP连接则需要“四次挥手”:

第一次挥手:主动关闭方发送一个FIN,用来关闭主动关闭方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方,主动关闭方已经不会再给被动关闭方发送数据了(当然,在FIN包之前发送出去的数据,如果没有收到对应的ACK确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可以接收数据。

第二次挥手:被动关闭方收到FIN包后,给对方发送一个ACK,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。

第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,被动关闭方的数据也发送完了,不会再给主动关闭方发送数据了。

第四次挥手:主动关闭方收到FIN后,给被动关闭方发送一个ACK,确认序号为收到序号+1,至此,完成四次握手。

五、渲染页面

对于浏览器根据服务端返回的静态资源,浏览器使用 Native GUI 引擎渲染 HTML 和 CSS ;使用 JS 引擎加载 JS 。

将 HTML 节点解析成 DOM 树结构

在DOM树的构建过程中如果遇到JS脚本和外部JS连接,则会停止构建DOM树来执行和下载相应的代码,这会造成阻塞,这就是为什么推荐JS代码应该放在html代码的后面。

从 HTML 字节码到 DOM 树结构的流程:字节(Bytes) => 字符串(Characters) => Tokens => 节点(Nodes) => DOM

计算机只能识别0和1的字节,根据字节的编码规则将字节转换成字符串,再将字符串转化为 W3C 定义的各种标签,生成 tokens(令牌),匹配字符串,将 tokens 按照规则转换为包含属性和规则的节点对象(nodes),根据每个节点的层次关系(父子节点关系)和规则转换为直观的树形结构。HTML 是增量构建的,在 HTML 文件还在传输时,这个转换过程就已经开始了。最终得到完整的 DOM(Document Object Module文档对象模型)

将 CSS 解析成 CSSOM 规则树

这里主要做的是排除非视觉节点,比如script,meta标签和排除display为none的节点;有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系

CSS 构建的过程跟 DOM 差不多,只不过 CSS 会涉及到复杂的计算,如 CSS 的属性来源,匹配不同的类(id 或者 class),确认复写规则及权重,最后确定每个节点的样式值,形成 CSSOM(CSS Object Module CSS对象模型)。

将 DOM 与 CSSOM 组合成 Render-tree(渲染树)

布局:计算出每个节点在屏幕中的位置

绘制:即遍历render树,并使用UI后端层绘制每个节点

六、加载 JavaScript 脚本

虽然 HTML\CSS 与 JS 是通过不同的引擎加载,但是却是互斥的,即加载 HTML\CSS 时,JS 会停止加载,相反亦然,这是因为 JS 引擎可以操作 DOM,改变样式、内容等。所以当执行了 JS 之后,渲染树要重新构建。

当然在这些所有的请求中我们还需要关注的就是缓存,缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间,Expires使用的是基于服务器端的绝对时间,因为存在时差问题,一般采用Cache-Control,在请求这些有设置了缓存的数据时,会先查看是否过期,如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修改,如果上一次 响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验,如果一致,继续校验 Last-Modified,没有设置ETag则直接验证Last-Modified,再决定是否返回304

二、HTTPS通信(握手)过程

  • 客户端向服务器发起请求,请求中包含使用的协议版本号、生成的一个随机数、以及客户端支持的加密方法
  • 服务器端接收到请求后,确认双方使用的加密方法、并给出服务器的证书、以及一个服务器生成的随机数
  • 客户端确认服务器证书有效后,生成一个新的随机数,并使用数字证书中的公钥,加密这个随机数,然后发给服务器。并且还会提供一个前面所有内容的 hash 的值,用来供服务器检验。
  • 服务器使用自己的私钥,来解密客户端发送过来的随机数。并提供前面所有内容的 hash 值来供客户端检验。
  • 客户端和服务器端根据约定的加密方法使用前面的三个随机数,生成对话秘钥,以后的对话过程都使用这个秘钥来加密信息。

三、TCP三次握手和四次挥手

三次握手(SYN)

所谓三次握手(Three-way Handshake),是指建立一个 TCP 连接时,需要客户端和服务器总共发送3个包。

  • 第一次握手:客户端尝试连接服务器,向服务器发送 syn 包(同步序列编号Synchronize Sequence Numbers),syn=j,客户端进入 SYN_SEND 状态等待服务器确认

  • 第二次握手:服务器接收客户端syn包并确认(ack=j+1),同时向客户端发送一个 SYN包(syn=k),即 SYN+ACK(确认包) 包,此时服务器进入 SYN_RECV 状态

  • 第三次握手:第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手


简化:

四次挥手(FIN)

  • 第一次挥手:主动关闭方发送一个FIN(控制位置为1),用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不会再给你发数据了(当 然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但此时主动关闭方还可以接受数据。
  • 第二次挥手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。此时还可以传送数据。
  • 第三次挥手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了
  • 第四次挥手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。

形象化:

A:我有事儿要挂电话了!(发送Fin结束报文,1次挥手)

B:好吧(发送ACK确认报文,2次挥手),对了,还有个事儿要跟你说!

......

B:好了,就这些了,挂了吧!(发送Fin结束报文,3次挥手)

A:行,挂了吧!(发送ACK确认报文,4次挥手)

四、TCP和UDP的区别

1. 对比

UDPTCP
是否连接无连接面向连接
是否可靠不可靠传输,不使用流量控制和拥塞控制可靠传输,使用流量控制和拥塞控制
连接对象个数支持一对一,一对多,多对一和多对多交互通信只能是一对一通信
传输方式面向报文面向字节流
首部开销首部开销小,仅8字节首部最小20字节,最大60字节
适用场景适用于实时应用(IP电话、视频会议、直播等)适用于要求可靠传输的应用,例如文件传输

2. 总结

  • TCP向上层提供面向连接的可靠服务 ,UDP向上层提供无连接不可靠服务。
  • 虽然 UDP 并没有 TCP 传输来的准确,但是也能在很多实时性要求高的地方有所作为
  • 对数据准确性要求高,速度可以相对较慢的,可以选用TCP

五、怎么看网站的性能如何

检测页面加载时间一般有两种方式,一种是被动去测:就是在被检测的页面置入脚本或探针,当用户访问网页时,探针自动采集数据并传回数据库进行分析,另一种主动监测的方式,即主动的搭建分布式受控环境,模拟用户发起页面访问请求,主动采集性能数据并分析,在检测的精准度上,专业的第三方工具效果更佳,比如说性能极客

六、OSI七层模型

从上到下分别是:

应用层(Application Layer):文件传输,常用协议HTTP,snmp,FTP ,

表示层(Presentation Layer):数据格式化,代码转换,数据加密,

会话层(Session Layer):建立,解除会话

传输层(Transport Layer):提供端对端的接口,tcp,udp

网络层(Network Layer):为数据包选择路由,IP,icmp

数据链路层(Data link Layer):传输有地址的帧

物理层(Physical Layer);二进制的数据形式在物理媒体上传输数据

七、WebSocket的实现和应用

在实现websocket连线过程中,需要通过浏览器发出websocket连线请求,然后服务器发出回应,这个过程通常称为“握手” 。在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:

  1. Header

    互相沟通的Header是很小的-大概只有 2 Bytes

  2. Server Push

    服务器的推送,服务器不再被动的接收到浏览器的请求之后才返回数据,而是在有新数据时就主动推送给浏览器。

请求的返回头里面,用于浏览器解析的重要参数就是OSS的API文档里面的返回http头,决定用户下载行为的参数。

八、web Quality(无障碍)

无障碍网页

这些指导方针的目标是易用性(accessibility),但是也有助于使 web 内容可用于更多的浏览器(语音浏览器、移动电话、手持设备),以及更多工作于困难环境的用户(非手持式的、强光、黑暗、弱视、噪音等)。


alt 属性

允许你为图像(也可以为其它的元素)提供一条相对应的文字。

实例:

<img src="images/banana.jpg" alt="Banana">

有时候浏览器会无法显示图像。具体的原因有:

  • 用户关闭了图像显示
  • 浏览器是不支持图形显示的迷你浏览器
  • 浏览器是语音浏览器(供盲人和弱视人群使用) 如果您使用了 alt 属性,那么浏览器至少可以显示或读出有关图像的描述

请勿使用很小的默认字体尺寸

一些网站会使用很小的文字尺寸,这样就可以向每张页面“塞”入更多的内容,或者使页面看上去更“时髦”。

再次重申,使用不同的设备(显示器)、不同的浏览环境(光线)以及可能的残疾(弱视),都可能对用户造成阅读障碍。

请不要逼迫用户每次访问你的站点时都要放大文本的尺寸。


始终使用一致的背景颜色

大部分网页都会为不同的文本元素使用颜色。标题和链接的颜色通常与正文的文本颜色是不同的。

作为一位 web 设计者,您应当意识到的事实是,您的访问者能够修改默认的颜色选项。

如果您为 web 元素定义了颜色,那么同样应当定义背景颜色。

如果不定义背景颜色,那么您的网站可能会被糟糕的颜色组合搞砸(比如红色背景上面的亮红文字,或者深色文本搭配的深色背景)。

如果您不规定背景颜色,可能会使文本很难被识别。

九、说几个很实用的BOM属性对象方法?

什么是Bom? Bom是浏览器对象。有哪些常用的Bom属性呢?

(1)location对象

  • location.href-- 返回或设置当前文档的URL
  • location.search -- 返回URL中的查询字符串部分。例如 www.dreamdu.com/dreamdu.php… 返回包括(?)后面的内容?id=5&name=dreamdu
  • location.hash -- 返回URL#后面的内容,如果没有#,返回空
  • location.host -- 返回URL中的域名部分,例如www.dreamdu.com
  • location.hostname -- 返回URL中的主域名部分,例如dreamdu.com
  • location.pathname -- 返回URL的域名后的部分。例如 www.dreamdu.com/xhtml/ 返回/xhtml/
  • location.port -- 返回URL中的端口部分。例如 www.dreamdu.com:8080/xhtml/ 返回8080
  • location.protocol -- 返回URL中的协议部分。例如 www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
  • location.assign -- 设置当前文档的URL
  • location.replace() -- 设置当前文档的URL,并且在history对象的地址列表中移除这个URL location.replace(url);
  • location.reload() -- 重载当前页面

(2)history对象

  • history.go() -- 前进或后退指定的页面数 history.go(num);
  • history.back() -- 后退一页
  • history.forward() -- 前进一页

(3)Navigator对象

  • navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
  • navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

十、fetch发送2次请求的原因

fetch发送post请求的时候,总是发送2次,第一次状态码是204,第二次才成功?

原因很简单,因为你用fetch的post请求的时候,导致fetch 第一次发送了一个Options请求,询问服务器是否支持修改的请求头,如果服务器支持,则在第二次中发送真正的请求。

十一、说一下web worker

JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。

Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。

Worker 线程一旦新建成功,就会始终运行,不会被主线程上的活动(比如用户点击按钮、提交表单)打断。这样有利于随时响应主线程的通信。但是,这也造成了 Worker 比较耗费资源,不应该过度使用,而且一旦使用完毕,就应该关闭

十二、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

一、Doctype作用是什么?

<!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。


二、严格模式与混杂模式如何区分?它们有何意义?

严格模式: 又称标准模式,是指浏览器按照 W3C 标准解析代码。

混杂模式: 又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。

如何区分: 浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。

  1. 如果文档包含严格的 DOCTYPE ,那么它一般以严格模式呈现。 (严格 DTD ——严格模式)
  2. 包含过渡 DTD 和 URI 的 DOCTYPE ,也以严格模式呈现,但有过渡 DTD 而没有 URI (统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。 (有 URI 的过渡 DTD ——严格模式;没有 URI 的过渡 DTD ——混杂模式)
  3. DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。 (DTD不存在或者格式不正确——混杂模式)
  4. HTML5 没有 DTD ,因此也就没有严格模式与混杂模式的区别,HTML5 有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。 ( HTML5 没有严格和混杂之分)

意义: 严格模式与混杂模式存在的意义与其来源密切相关,如果说只存在严格模式,那么许多旧网站必然受到影响,如果只存在混杂模式,那么会回到当时浏览器大战时的混乱,每个浏览器都有自己的解析模式。

十三、移动端300ms点击延迟的原因和解决方案

重点:由于移动端会有双击缩放的这个操作,因此浏览器在click之后要等待300ms,看用户有没有下一次点击,也就是这次操作是不是双击。

浏览器开发商的解决方案:

方案一:禁用缩放

方案二:更改默认的视口宽度

十四、一句话概括RESTFUL

用 URL 定位资源,用 HTTP 动词(GET,POST,DELETE,PUT)描述操作。

具体来讲:REST 指的是 一组架构约束条件和原则,如果一个架构符合 REST 的约束条件和原则,就称之为 RESTful 架构。

十五、一个图片url访问后直接下载怎样实现?(不是很理解这里)

和OSS有关,下载的情况下:

1. x-oss-object-type:

    Normal

2. x-oss-request-id:

    598D5ED34F29D01FE2925F41

3. x-oss-storage-class:

    Standard