面试题、笔试题

1.setTimeout足够精确吗？不精确，因为调用的函数本身执行需要时间，所以为了让定时器精确，可以在调用的函数开头和结尾分别调用new Date（）方法，然后计算出差值，最后在定时器中设定的时间减去差值。

2.浏览器端保存用户数据的方法，cookie 两个storage。

3.js为什么是单线程

简书博客

4.原型链

5.闭包

6.js事件执行顺序

7.position

比较特殊的是static，默认属性，top left right bottom z-index无效

菜鸟教程

8.es6新增的内容

9.类

10.js基本数据类型MDN

7中原始类型：

Boolean

Null

Undefined

Number

String

Biglnt

Symbol(ES6)

js引用数据类型也就是对象类型Object：Object array function data等

11.找质数算法

12.冒泡排序算法

13.ajax

14.vue数据驱动双向绑定原理、生命周期等等

vue生命周期图片：

15.元素水平垂直居中的方式：

a.父元素:{

text-align:center;

line-height:xxx;

vertical-align:middle;

}

需要知道父元素的高度。

b.父元素:{

display:flex;

justify-content:center;

align-items:center;

}

c.父元素:{

position:relative;

}

子元素:{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

如果知道子元素的宽高2x,2y，可以将transform:translate(-50%,-50%);替换为margin-left:-x;margin-top:-y;

d.父元素:{

position:relative;

}

子元素:{

width:x,

height:y;

postion:absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

}

这里如果子元素没有宽高的话，会自动填满整个父元素。

还有一个小知识点就是行内元素当设置了position:fixed/absolute;时，会转换为块级元素，于是可以设置宽高。

16.promise有几种状态

pending/reslove/reject

17.行内元素（内联元素inline）块级元素（block）

常见行内元素：

a img span input label select textarea

常见块级元素：

h1 ~ h6 hr p pre ul ol dl table form div

行内元素上下边距上下外边距都无效。

块级元素（block）可以设置宽高，行内元素（inline）不行。

但是有些行内元素可以设置宽高，比如：img/textarea/input/label/select/button这些元素被称为可置换元素（Replaced element）。

18.元素在什么状态下调整宽高会无效？block,flex,inline,inline-block

17就是答案

19.性能优化的方式 dns分发、gzip压缩、

20.HTTP协议HTTPS协议

http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

SSL(Secure Sockets Layer)被标准化之后叫做TLS(Transport Layer Security)。二者是同一个协议。

https需要申请证书，费用较高。但是谷歌和百度都明确表示采用https协议网站排名会比http高。

21.访问网站经过的步骤 参考文章

利用DNS协议进行域名解析=》建立TCP协议三次握手=》客户端发出请求=》服务器响应请求=》断开TCP协议四次挥手

DNS：domain name system；域名系统（服务）协议（DNS）是一种分布式网络目录服务，主要用于域名与 IP 地址的相互转换，以及控制因特网的电子邮件的发送。

DNS参考文章

DNS英文文章

DNS解析（将域名解析为IP地址）：HOSTS表=》本地DNS=》上层DNS（包括根DNS）。

域名服务器：根域名服务器、顶级域名服务器、权限域名服务器。

DNS迭代查询和递归查询：DNS与本地DNS是递归查询，本地DNS与外网是迭代查询；递归查询返回的结果是：成功或者失败，迭代查询又称作重指引，返回最佳的查询点或主机地址。

DNS缓存机制：浏览器缓存和操作系统缓存（OS缓存）；先查找浏览器缓存再查找OS缓存。DNS记录会有一个ttl值(time to live)，单位是秒，意思是这个记录最大有效期是多少。经过实验，OS缓存会参考ttl值，但是不完全等于ttl值，而浏览器DNS缓存的时间跟ttl值无关，每种浏览器都使用一个固定值。

HOSTS表是储存域名与IP的映射关系的，比DNS优先级要高。

TCP协议的三次握手四次挥手：参考文章

TCP三次握手：SYN（synchronous）

客户端发送连接请求：SYN=1,ACK=0;表示只发送SYN，此时客户端处于SYN-SENT状态。

服务端收到请求，进行回应：SYN=1,ACK=1表示发送了SYN+ACK，此时服务端处于SYN-RCVD状态。

客户端收到ACK后再次发送ACK信号以回复服务端的SYN：发送SYN=0,ACK=1表示只发送ACK，此时客户端处于ESTABLISHED状态。

服务端收到ACK后也进入ESTABLISHED状态。

TCP四次挥手：FIN（finally）

客户端发送断开请求：FIN=1，此时客户端处于FIN-WAIT-1状态。

服务端收到FIN信号，发送ACK=1，同意断开，此时服务端进入CLOSE-WAIT状态。现在客户端向服务端的TCP连接已经关闭。

客户端收到ACK信号后进入FIN-WAIT-2状态，等待服务端发出断开信号。

服务端发出自己的FIN信号，服务端进入LAST-ACK状态。

客户端收到FIN信号后，给出回应信号ACK，接受服务端的断开请求，此时客户端进入TIME-WAIT状态，等待2*MSL就自动进入CLOSED状态。

服务端收到ACK信号后，直接进入CLOSED状态。

MSL(最大分段生存期)指明TCP报文在Internet上最长生存时间，每个具体的TCP实现都必须选择一个确定的MSL值。RFC 1122建议是2分钟。 为什么客户端要等待2*MSL时间再进入CLOSED状态

a.防止最后一个服务端发送的ACK丢失。

b.确认一个数据及其相应的丢弃需要两倍的MSL。

TCP/IP协议

22.vue实现动态路由：（回归官方文档）

配置router.js

常规的是：

{

path:’/detail’,

name:‘detail’,

component:() => import(’…’)

}

带有id传值

{

path:’/detail/:id’,

name:‘detail’,

component:() =>import(’…’)

}

23.js是基于对象还是面向对象？（未解决）

面向对象的三大特征：封装、继承、多态

24.重绘和回流（重排）：

如果修改的样式不会影响排版，就是重绘，反之则会回流，回流必定会重绘，重绘不一定回流。

25.怎么判断当前浏览器是否为chrome?

navigator.userAgent.toLowerCase().indexOf(‘chrome’)

26.event.preventDefault() MDN

在事件流的任何阶段调用preventDefault()都会取消事件，这意味着任何通常被该实现触发并作为结果的默认行为都不会发生。

27.window.onload和document.onDOMContentLoaded

window.onload是所有资源都加载完毕，包括DOM 样式表 脚本 图片和flash等。

document.onDOMContentLoaded仅仅是DOM树构建完毕，不包括样式表 图片和flash。有点像vue生命周期的created。

28.CSS盒子模型的属性：

content padding margin border

29.dom和bom参考文章

bom包含dom

bom（浏览器对象模型）：navigato history screen location window

dom（文档对象模型）:window.document

30.TPC/IP协议是传输层协议，主要解决数据如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据。

31.移动端vw和vh以及在vue.js里面对应的插件。

last：

出现的问题：其实这样搜搜答案背下来敷衍一下是可以的，但是如果要问的更深，比如17.中的置换元素是啥？干啥用的，还有js到底是面向对象的还是基于对象的？嗯~网上找的答案其实并不统一，也不权威，哎，为什么还不开学！我要去图书馆借书啊！！！！！