前端面试

1.Vue的理解,总结

2.用css2和css3分别写一下垂直居中和水平居中
body中的结构

	<body>
		<div class="box"></div>
	</body>

CSS2:

<style>
			html,body{
				width: 100%;
				height: 100%;
				position: relative;
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -100px;
				margin-top: -100px;
			}
		</style>

CSS3:

<style>
			html,body{
				width: 100%;
				height: 100%;
				position: relative;
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		</style>

扩展:flex布局垂直水平居中

html,body{
				width: 100%;
				height: 100%;
				display:flex;
				justify-content: center;
				align-items: center; 
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: red;			
			}

3.你对计算机网络的认识怎么样

1.概念
	计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备,
	通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,
	实现资源共享和信息传递的计算机系统
2.计算机网络组成
	资源子网:实现资源共享功能的设备及其软件集合;
	通信子网:各种传输介质、通信设备和相应协议;
3.计算机网络功能
	数据通信:最基本和最重要的功能;
	资源共享、分布式处理、提高可靠性、负载均衡;
4.计算机网络分类
	按分布范围:广域网、城域网、局域网;
	按交换技术:电路交换、报文交换、分组交换;
5.计算机网络性能指标
	带宽(Hz)、端到端时延(包括传输、传播、排队、处理时延)、往返时延(RTT)、吞吐量、比特率(bps);
6.计算机网络层次
	五层模型:物理层(bit)、链路层(帧)、网络层(datagram报文/分组,IP协议)、运输层(TCP/UDP)、应用层(使用协议包括DNS、FTP、SMTP、HTTP等);
	七层模型:增加了表示层、会话层;
	物理层、链路层、网络层——通信子网、应用层——资源子网;
7.HTTP协议(无状态协议)
	请求报文头部:请求行、请求头部、空行、需求数据;
	响应报文头部:状态行、请求头部、空行、响应行;
	基本发送顺序:建立TCP连接(TCP/IP协议簇,端口号80)、发送请求命令(eg:GET HTTP/1.1)、发送请求头部(空行通知browser头部发送结束);
	基本响应顺序:服务器应答第一部分包括协议版本号和状态码(eg:HTTP/1.1 200 OK)、服务器应答请求头部的数据、服务器发送实际所请求的数据、
				 关闭TCP连接(若有connection:keep-alive则不关闭);
	持续连接:所有的请求及响应都通过同一个TCP连接发送传输,该连接持续打开;
	非持续连接:每条请求/响应都需要建立一条新的TCP连接;
8.cookie
	四大组件:HTTP请求报文中的cookie首部行、HTTP响应报文中的cookie首部行、用户端系统中保留的cookie文件、位于web站点的后端数据库;
9.DNS协议
	工作过程:同一台用户主机上运行DNS应用客户端、浏览器将该URL中抽取出主机名并传给DNS应用客户端、
	DNS客户端向DNS服务器发送一个包含主机名的请求、服务器将包含对应主机名IP的响应报文发送给客户端;
	
原文:https://blog.csdn.net/qq_42172815/article/details/84432680 

4.讲述一下计算机网络的七层

OSI模型有7层结构,每层都可以有几个子层。
	OSI的7层从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输层 3 网络层 2 数据链路层 1 物理层 ;
	其中高层(即7、6、5、4层)定义了应用程序的功能,下面3层(即3、2、1层)主要面向通过网络的端到端的数据流。
	应用层 (Application)
		网络服务与最终用户的一个接口。
		协议有:HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP
		
	表示层(Presentation Layer)
		数据的表示、安全、压缩。(在五层模型里面已经合并到了应用层)
		格式有,JPEG、ASCll、DECOIC、加密格式等
		
	会话层(Session Layer)
		建立、管理、终止会话。(在五层模型里面已经合并到了应用层)
		对应主机进程,指本地主机与远程主机正在进行的会话

	传输层 (Transport)
		定义传输数据的协议端口号,以及流控和差错校验。
		协议有:TCP UDP,数据包一旦离开网卡即进入网络传输层

	网络层 (Network)
		进行逻辑地址寻址,实现不同网络之间的路径选择。
		协议有:ICMP IGMP IP(IPV4 IPV6) ARP RARP

	数据链路层 (Link)
		建立逻辑连接、进行硬件地址寻址、差错校验[2] 等功能。(由底层网络定义协议)
		将比特组合成字节进而组合成帧,用MAC地址访问介质,错误发现但不能纠正。

	物理层(Physical Layer)
		建立、维护、断开物理连接。(由底层网络定义协议)
	
转载:https://www.cnblogs.com/aeolian/p/7698754.html

5.TCP和UDP的区别是什么

TCP是面向连接的协议,UDP是无连接协议;
TCP是可靠、有序、无界的,而UDP不可靠、无序、有界;
TCP有流量控制(拥塞控制),而UDP 没有;
TCP传输速度慢,而UDP传输速度快;
TCP是重量级的,UDP是轻量级的,TCP的头部比 UDP大;
TCP面向字节流,而UDP面向报文;
TCP是点对点连接的,而UDP一对一,一对多,多对多都可以;
TCP适合用于网页,邮件等,而UDP适合用于视频,语音广播等。

6.TCP和UDP属于计算机网络中的哪一层

网际层协议:IP协议、ICMP协议、ARP协议、RARP协议
传输层协议:TCP协议、UDP协议
应用层协议:FTP、Telnet、SMTP、HTTP、RIP、NFS、DNS

7.HTTPS是什么?HTTPS和HTTP的区别

HTTP:超文本传输协议(英文:HyperText Transfer Protocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议[1]。
	HTTP是万维网的数据通信的基础。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。通过HTTP或者HTTPS协议请求的资源由统一资源标识符(Uniform Resource Identifiers,URI)来标识。
超文本传输安全协议(英语:Hypertext Transfer Protocol Secure,缩写:HTTPS,常称为HTTP over TLS,HTTP over SSL或HTTP Secure)是一种通过计算机网络进行安全通信的传输协议。
	HTTPS经由HTTP进行通信,但利用SSL/TLS来加密数据包。HTTPS开发的主要目的,是提供对网站服务器的身份认证,保护交换数据的隐私与完整性。现在HTTPS开始广泛使用于保护所有类型网站上的网页真实性,保护账户和保持用户通信,身份和网络浏览的私密性。

HTTP和HTTPS的差异
	HTTP是不安全的,且攻击者通过监听和中间人攻击等手段,可以获取网站帐户和敏感信息等。
	HTTPS被设计为可防止前述攻击,并在正确配置时被认为是安全的。  
HTTP的URL由“http://”起始且默认使用端口80,而HTTPS的URL由“https://”起始且默认使用端口443。  
HTTP协议运行在TCP之上,所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份。
HTTPS是运行在SSL/TLS之上的HTTP协议,SSL/TLS运行在TCP之上。所有传输的内容都经过加密,加密采用对称加密,但对称加密的密钥用服务器方的证书进行了非对称加密。

原文:https://blog.csdn.net/zgh0711/article/details/81567818 

8.介绍几种常见的状态码

	1XX(临时响应):表示临时响应并需要请求者继续执行操作的状态代码;
		100(继续):请求者应当继续提出请求;
		101(切换协议):请求者要求服务器切换协议;
	2XX(成功):表示成功处理了请求的状态代码;
		201(已创建):请求成功并且服务器创建了新资源;
		202(已接受):服务器已接受请求,但尚未处理;
		203(非授权信息):服务器已成功处理了请求,但返回信息可能来自另一来源;
		204(无内容):服务器成功处理了请求,但没有返回任何内容;
		205(重置内容):服务器成功处理了请求,但没有返回内容,要求请求者重置内容;
	3XX(重定向):表示要完成请求,需要进一步操作;
		300(多种选择):针对请求,服务器可执行多种操作;
		301(永久移动):请求的网页已永久移动到新位置;
		302(临时移动):服务器目前从不同的位置的网页响应请求;
		304(未修改):自从上次请求后,请求的网页未修改过;
	4XX(请求错误):表示请求可能出错,妨碍了服务器的处理;
		400(错误请求):服务器不理解请求的语法;
		401(未授权):请求要求身份验证;
		403(禁止):服务器禁止请求;
		404(未找到):服务器找不到请求的网页;
	5XX(服务器错误):表示服务器在尝试处理请求时发生内部错误;
		500(服务器内部错误):服务器运到错误,无法完成请求;
		502(错误网关):服务器作为网关或代理,从上游服务器收到无效响应;
		503(服务不可用):服务器目前无法使用;
		504(网关超时):服务器作为网关或代理,但是没有及时从上游服务器收到请求。
		
	原文:https://blog.csdn.net/zgh0711/article/details/81567818 

9.闭包是什么

概念
	(1)闭包指的是一个函数作用域
	(2)闭包包含一个函数,且这个函数调用了作用域里的内容
	同时满足才叫闭包
例子:
		<script>
			function f1() {
				var a = 1;

				function f2() {
					console.log(a);
				}
				return f2;
			}

			var a = 2;
			var f = f1();
			f()  // 1
		</script>
特点
	1.闭包内的变量不会影响到全局变量,也不会被全局变量所影响
	2.闭包中被函数引用的局部变量不会被垃圾回收机制回收
	3.可以创建私有变量和私有函数
	4.可以把需要公开的变量和方法绑定在window上放出来
补充
	闭包的用途:可以读取函数内部的变量,并且让这些变量的值始终保持在内存中。
	垃圾回收机制的原理:确定变量中哪些还在继续使用的,哪些已经不用的,然后垃圾收集器每隔固定的时间就会清			理一下,释放内存。
	需要看一下这个文章 https://www.cnblogs.com/afrog/p/4276709.html
	
转载:https://segmentfault.com/a/1190000009594773

10.NaN是什么,用typeof会输出什么

NaN   Not a Number   
typeof(NaN)  输出Number

11.js的隐性转换和显性转换

JS中的数据类型呦简单数据类型和复杂数据类型
			简单数据类型有 String Boolean Null Undefined NaN
			复杂数据类型有Object 
			各种数据类型的typeof
				typeof(string)     string
				typeof(a)          undefined   //a没有定义或者没有初始化
				typeof(true)       Boolean
				typeof(null)       Object      //object 可能是null也可能是对象
				typeof(object)     object
				typeof(number)      number
				typeof(function)    function
			显示转换
				Boolean()    转换成布尔值
				Number()  parseInt()  parseFloat()   转换成数值类型
				toString()  String()   //转换成字符串  toString()对于Null和Undefine类型的数值的不起作用
			隐式转换
				转成string类型:   +(字符串连接符)
				转成number类型:   ++/--(自增自减运算符) + - * / %(算术运算符) > < >= <= == != === !=== (关系运算符)
				转成boolean类型:!(逻辑非运算符)

12.跨域问题如何解决

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。
	同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。
	1. 通过jsonp跨域
		jsonp在页面上引入不同域上的js脚本文件实现请求不同域上的数据
		(1) 通过script标签引入一个js文件
		(2) js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入
		注:需要服务器端的页面进行相应的配合
	2. 通过修改document.domain来跨子域
	3. 使用window.name来进行跨域
		window对象有个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,
		每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。

13.babel

Babel 是一个 JavaScript 编译器,可以实现将ES6编译为ES5代码

14.用js实现判断一个变量是否为整数的函数

1.
function done(num) {
  return (typeof num === 'number') && (num % 1 === 0);
}
2.
function done(num) {
  return Math.round(num) === num;
}
3.(如果参数传递的是一个Number对象的话,就不能进行正确判断了,下面对代码进行一下改善,2的完善)
var a="12";
var b=12;
var obj=new Number(13);
function done(num){
  if(Object.prototype.toString.call(num).slice(8,-1)=="Number"){
    if(num.toString()%1===0){
      return true;
    }
  }
  return false;
}
console.log(done(a));
console.log(done(b));
console.log(done(obj));

15.进程和线程是什么

对于操作系统来说,一个任务就是一个进程(Process),比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程,
	打开两个记事本就启动了两个记事本进程,打开一个Word就启动了一个Word进程。
	有些进程还不止同时干一件事,比如Word,它可以同时进行打字、拼写检查、打印等事情。
	在一个进程内部,要同时干多件事,就需要同时运行多个“子任务”,我们把进程内的这些“子任务”称为线程(Thread)。
	由于每个进程至少要干一件事,所以,一个进程至少有一个线程
	区别:
	地址空间:同一进程的线程共享本进程的地址空间,而进程之间则是独立的地址空间。
	资源拥有:同一进程内的线程共享本进程的资源如内存、I/O、cpu等,但是进程之间的资源是独立的。
     一个进程崩溃后,在保护模式下不会对其他进程产生影响,但是一个线程崩溃整个进程都死掉。所以多进程要比多线程健壮。
     进程切换时,消耗的资源大,效率高。所以涉及到频繁的切换时,使用线程要好于进程。同样如果要求同时进行并且又要共享某些变量的并发操作,
		 只能用线程不能用进程
	执行过程:每个独立的进程程有一个程序运行的入口、顺序执行序列和程序入口。但是线程不能独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。
	线程是处理器调度的基本单位,但是进程不是。
	两者均可并发执行。

16.死锁是什么

概念:
	死锁是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞的现象,
	若无外力作用,它们都将无法推进下去。此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等待的进程称为死锁进程
产生死锁的四个必要条件:
	(1) 互斥条件:一个资源每次只能被一个进程使用。
	(2) 请求与保持条件:一个进程因请求资源而阻塞时,对已获得的资源保持不放。
	(3) 不剥夺条件:进程已获得的资源,在末使用完之前,不能强行剥夺。
	(4) 循环等待条件:若干进程之间形成一种头尾相接的循环等待资源关系。

17.Left Join、Right Join、Inner Join 指的是什么

LEFT JOIN 关键字会从左表那里返回所有的行,即使在右表中没有匹配的行
RIGHT JOIN 关键字会右表那里返回所有的行,即使在左表中没有匹配的行
在表中存在至少一个匹配时,INNER JOIN 关键字返回行

18.一个div垂直居中,其距离屏幕左右两边各10px,其高度始终是宽度的50%,
div中有文本’A’,其font—size:20px,文本水平垂直居中

<div class="box">
    <div class="Abox">A</div>
</div>
*{
    padding:0;
    margin: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
.box{
    position: relative;
    background: red;
    width: 100%;
    height: 100%;
}
.Abox{
    margin-left:10px;
    width: calc(100vw - 20px);
    height: calc(50vw - 10px);
    position: absolute;
    background: yellow;
    top:50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

19.函数中的arguments是数组吗?类数组转数组的方法了解一下?

arguments当然不是数组啦,转数组的方法有:
[...arguments]
Array.from(arguments)
  1. call的用法和this的指向
在这里插入代码片
if([]==false){console.log(1)};
if({}==false){console.log(2)};
if([]){console.log(3)}
if([1]==[1]){console.log(4)}

答案:1 3
== 是非严格比较操作符,false会转换为0,[]会转换成’’,{}会转换为"[object Object]",
所以会输出1,不输出2

22.移动端怎么适配达到真正的1px,
23.深拷贝,
24.随手写一个布局,
25.网站优化
26.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章