Giter Site home page Giter Site logo

interview's Introduction

Interview

准备面试

interview's People

Contributors

wuqiren avatar

Watchers

 avatar

interview's Issues

vw和百分比有什么区别

vw是根据屏幕大小来
而百分比是根据父元素的变量,也就是说百分比的父元素可以随意,根据我们自己来定,但是vw的父元素只能是window

总结:如下

百分比是有继承关系的,vw只和设备的宽度或者高度有关系

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 50%;
            height: 100%;
        }
        .vm{
            height: 50px;
            background: red;
            width: 50vw;
        }
        .baifen{
            height: 50px;
            background: yellow;
            width: 50%;
        }
    </style>
    <div class="main">

        <div class="vm">vm</div>
        <div class="baifen">百分比</div>

    </div>
</body>
</html>

进程和线程

什么是并行处理?

计算中的并行处理就是同一时刻处理多个任务

比如下面代码
A=1+2; B=20-1 C=1-0;;;

单线程处理的话一共是四步,前三步计算各个任务数值,最后一步在显示最后的计算结果
如果是多线程一共就两步,第一步计算 第二步显示计算结果

线程VS进程

多线程可以并行处理任务,但是线程是不能单独存在的,它是由进程来启动和管理的。

那什么又是进程呢?

一个进程就是一个程序的运行实例。详细解释就是,启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这样的一个运行环境叫进程。

线程是依附于进程的,而进程中使用多线程并行处理能提升运算效率

进程和线程之间的关系有四个特点
1 进程中的任意一线程执行出错,都会导致整个进程的崩溃
2 线程之间共享进程中的数据
3 当一个进程关闭之后,操作系统会回收进程所占用的内存

(即使进程中任意线程因为操作不当导致内存泄漏,当进程退出时,这些内存也会被正确回收)

4 进程之间的内容相互隔离

进程隔离是为保护操作系统中进程互不干扰的技术,每一个进程只能访问自己占有的数据,也就避免出现进程 A 写入数据到进程 B 的情况。正是因为进程之间的数据是严格隔离的,所以一个进程如果崩溃了,或者挂起了,是不会影响到其他进程的。如果进程之间需要进行数据的通信,这时候,就需要使用用于进程间通信(IPC)的机制了。

目前浏览器进程架构

浏览器进程

主要负责界面显示、用户交互、子进程管理,同时提供存储等功能

渲染进程

核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中,默认情况下,Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑,渲染进程都是运行在沙箱模式下。

GPU进程

其实,Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果,只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制,这使得 GPU 成为浏览器普遍的需求。最后,Chrome 在其多进程架构上也引入了 GPU 进程。

网络进程

主要负责页面的网络资源加载,之前是作为一个模块运行在浏览器进程里面的,直至最近才独立出来,成为一个单独的进程。

插件进程

主要是负责插件的运行,因插件易崩溃,所以需要通过插件进程来隔离,以保证插件进程崩溃不会对浏览器和页面造成影响。

多线程模型带来的问题

1 更高的资源占用

2 更复杂的体系架构(浏览器各模块之间耦合性高,扩展性差,目前的架构很难适应新的需求)

什么是同构(ssr概念)

服务器端返回的HTML文本中包括了一组打包过后的JS,这个JS其实就是对应的相关事件和脚本,我们只需要打包过后将JS绑定的HTML中即可。这也叫做同构,是服务器端渲染的核心概念 ,同一套React的代码在服务器端渲染一遍,然后在客户端再执行一遍。服务端负责静态DOM的拼接,而客户端负责事件的绑定,不仅是模板页面渲染,路由,数据的请求都会涉及通过的概念。

可以理解为服务端渲染都是基于同构去展开的

DNS域名解析全过程((DNS寻址过程)

二种方式解析
1 递归查询

主机向本地域名服务器的查询一般都是采用递归查询。
所谓递归查询就是:如果主机所查询的本地域名服务器不知道被查询域名的IP地址,那么本地域名服务器就以DNS客户的身份,向其他根域名服务器继续发出查询的请求报文(即替该主机继续查询),而不是该主机自己进行下一步的查询,因此,递归查询返回的查询结果或者是所要查询的IP地址,或者是报错,表示无法查询所需的IP地址

2 迭代查询

本地域名服务器向根域名服务器查询通常是采用迭代查询。
迭代查询的特点是这样的:当根域名服务器收到本地域名服务器发出的迭代查询请求报文时,要么给出所要查询的IP地址,要么告诉本地域名服务器:"你下一步应当向哪一个域名服务器进行查询"。然后让本地域名服务器进行后续的查询(而不是代替本地域名服务器进行后续的查询)。根域名服务器通常是把自己知道的顶级域名服务器的IP地址告诉本地域名服务器。让本地域名服务器再向顶级域名服务器查询。顶级域名服务器在收到本地域名服务器的查询请求后,那么给出所要查询的IP地址,要么告诉本地域名服务器下一步应当向哪一个权限域名服务器进行查询,本地域名服务器就这样进行迭代查询,最后,知道了所要解析的域名的IP地址,然后把这个结果返回给查询的主机。当然,本地域名服务器也可以采用递归查询,这取决于最初的查询请求报文的设置是要求使用哪一种查询方式

  1. 浏览器先检查自身缓存中有没有被解析过的这个域名对应的IP地址,如果有解析结束,同时域名被缓存的时间也可通过TTL属性来设置。
  2. 如果浏览器缓存中没有命中(没有),浏览器会检查操作系统缓存中有没有对应的已解析的结果。而操作系统也有一个域名解析的过程,在windows中可通过C盘里面一个叫做hosts的文件来设置,如果你在这里指定一个域名对应的IP地址,那浏览器会首先使用这个IP地址。但是这种操作系统级别的域名解析过程也被很多黑客利用,通过修改你的hosts文件里的内容吧特定的域名解析到他指定的IP地址还是那个,造成所有的域名劫持。所以在window7中将hosts文件设置成了readonly,防止恶意篡改
  3. 如果还没有命中域名,才会真正的请求本地域名服务器(DNS)来解析和这个域名,这个服务器一般在你的城市的某个角落,距离不是很远,而且这台服务器的性能很好,一般都会缓存域名解析结果,大约80%的域名解析到这里就完成了。浏览器(主机)向其本地域名服务器进行的是递归查询。
  4. 本地域名服务器采用迭代查询,它先向下一个根域名服务器查询
  5. 根域名服务器如果有查询的IP的值则返回,没有命中,则告诉本地域名服务器,下一次查询的顶级域名服务器的IP的值
  6. 本地域名服务器向收到的顶级域名服务器进行查询
  7. 顶级域名服务器如果有查询的IP地址则返回,没有命中,则告诉本地域名服务,下一次查询的权限域名服务器的IP的地址
  8. 本地域名服务器向权限域名服务器进行查询
  9. 权限域名服务器告诉本地域名服务器,所查询的IP地址
  10. 本地域名服务器最后把查询的结果告诉浏览器(主机)。

这10个步骤,后面的八个步骤一共使用了8个UDP用户数据报的报文。

域名

baidu.com 4399.com等,这些都是域名,但是如果前面加上www. 那么它们就不是域名了。

解析http://www.163.com/index.html

1.http:// 这个是协议,也是HTTP超文本传输协议,也就是网页在网上传输的协议.
2.www 这个是服务器名,代表超文本服务器
3.163.com这是一个域名,用来定位网站的独一无二的名字
4.www.163.com这是一个网站名,有服务器名+域名组成
5./这个是根目录,也就是说,通过网站名找到服务器,然后在服务器存放网页的根目录
6.index.html这个是根目录下的默认网页
7.http://www.163.com/index.html 这个是URL,统一资源定位符,全球性地址,用于定位网上的资源.

三次握手和四次挥手

TCP三次握手的过程

image

1 客户端发送一个SYN=1,Seq=X的数据包到服务器端口(第一次握手,有浏览器发起,告诉服务器我要发送请求了)

2 服务器发回一个带SYN=1,ACK=X+1,Seq=Y的响应包以示传达确认信息(第二次握手,由服务器发起,告诉浏览器我准备好了,你赶紧发送吧)

3 客户端再回传一个带ACK=Y+1,Seq=Z的数据包,代表 握手结束(第三次握手,由浏览器发送,告诉服务器,我马上发了,准备接受吧)

为啥需要三次握手

主要是为了防止已失效的连接请求突然又传送到服务器上。
所谓"已失效的链接请求报文段"是这样产生的,考虑一种正常情况:客户端发出连接请求,但因连接请求报文丢失而未收到确认,于是客户端再重传一次链接请求,后来收到了确认,建立了连接。数据传输后,就释放了连接。客户端共发送了两个连接请求报文,其中一个丢失,另一个到达了服务器,这样是没有失效的连接请求。

但是如果出现一种异常情况,即客户端发出的第一个连接请求报文文段没有丢失,而是在某个网络节点长时间滞留(网差),以致延误到连接释放以后的某个时间才到达服务器,本来这是一个早就已失效的报文段,但服务器收到失效的连接请求报文后,就误以为客户端又发出一次新的连接请求,于是就向客户端发出确认报文段,同意建立连接,假定不采用报文握手,那么只要服务器发出确认就建立连接,新的连接就建立了。

由于现在客户端并没有发出建立连接的请求,因此不会理会服务器的确认,也不会向服务器发送数据,但是服务器确认为新的运输连接已经建立,并一直等待客户端发来数据,服务器的很多资源就会被浪费。

TCP四次挥手的过程

image

客户端向服务器端发送报文Fin=1,seq=u表示已经没有数据传输了,并进入FIN-WAIT-1(终止等待1)状态(第一次挥手:客户端发起,发送给服务器)

服务器发送报文ACK=1,seq=v ack=u+1表示同意关闭请求,服务器端就进入了CLOSE-WAIT(关闭等待)状态,TCP服务器通知高层的应用进程,客户端想服务器的方向就释放了,这时候处于半关闭状态,即客户端已经没有数据要发送了。但是这个时候服务器若发送数据,客户端依然要接受,这个状态还有持续一段时间,也就是整个CLOSE-WAIT状态持续的时间,客户端收到服务器的确认请求后,此时客户端就进入FIN-WAIT2(终止等待2)状态,等待服务器发送连接释放报文(第二次挥手 由服务器发起,告诉浏览器,我请求报文接收完了,你准备关闭,你也准备吧)

服务器向客户端发送报文FIN ACK等请求关闭连接,进入LAST—ACK状态(最后确认状态) (第三次挥手:由服务器发起,告诉客户端,我的响应报文发送完了你准备关闭吧)

客户端向服务器发送报文段,然后进入TIME_WAIT状态,服务器收到请求后就关闭连接,客户端等待一段时间未收到回复,就正常关闭(第四次挥手:由客户端发起,告诉服务器,我响应报文接受完了,我准备关闭,你也关闭吧)

为什么客户端在TIME_WAIT状态必须当代2MSL的时间

1 为了保证客户端发送的最后一个ACK报文段能够到达服务器,这个ACK报文段有可能丢失,因为使处于LAST-ACK状态的服务器收不到对方发送的FIN+ACK报文段,服务器会超时重传FIN+ACK这个报文段,而客户端就能在2MSL时间内收到这个报文,然后重传,重新启动2MSL计时器,最后,客户端和服务器都正常进入到CLOSED状态。
如果客户端没有等待一段时间,就无法收到服务器发送的重传报文,因而不会再次发送去确认报文,那么服务器就无法按照正常步骤进入CLOSED状

2 防止已失效连接请求报文段,出现在本连接中,客户端发送完最后一个ACK报文后,再经时间2MSL,就可以是本地连接持续的时间内所产生的所有报文都从网络中消失,这样就不会在下一个新连接中出现失效的连接请求报文

为什么连接的时候是三次握手,关闭的时候却是四次握手?

因为当Server端收到Client端的SYN连接请求报文后,可以直接发送SYN+ACK报文。其中ACK报文是用来应答的,SYN报文是用来同步的。但是关闭连接时,当Server端收到FIN报文时,很可能并不会立即关闭SOCKET,所以只能先回复一个ACK报文,告诉Client端,“你发的FIN报文我收到了”。只有等到我Server端所有的报文都发送完了,我才能发送FIN报文,因此不能一起发送。故需要四步握手。

如果已经建立了连接,但是客户端突然出现故障了怎么办?

TCP还设有一个保活计时器,显然,客户端如果出现故障,服务器不能一直等下去,白白浪费资源。服务器每收到一次客户端的请求后都会重新复位这个计时器,时间通常是设置为2小时,若两小时还没有收到客户端的任何数据,服务器就会发送一个探测报文段,以后每隔75分钟发送一次。若一连发送10个探测报文仍然没反应,服务器就认为客户端出了故障,接着就关闭连接。

简述一下CSS的盒模型

CSS 的盒模型主要包括以下两种,可通过 box-sizing 属性进行配置:

content-box:默认属性。width 只包含 content
border-box:width 包含 (content、padding、border)

padding和maring有什么不同?

两者作用的对象不同
padding是作用本身
margin是作用域外部对象
image

注意点:border表示物体的边界
padding的示例图
image

margin的示例图
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.