前端面试题整理

最新推荐文章于 2022-08-13 14:38:02 发布

千夜灬空羽

最新推荐文章于 2022-08-13 14:38:02 发布

阅读量229

点赞数

分类专栏：面试题文章标签：前端面试题

本文链接：https://blog.csdn.net/xin_bao_long/article/details/103919623

版权

面试题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、请你谈谈cookie的·弊端

IE6或更低版本最多拥有20个cookie
IE7和之后的版本可以有50个cookie
FireFox最多50个cookie
chorme和Safari没有硬性限制

优点

通过良好的编程，控制保存在cookie中session对象的大小
通过加密和安全传输技术(SSL),减少cookie被破解的可能性
只在cookie中存放不敏感数据，即使被盗了也不会有重大损失
控制cookie的生命周期，使之不永久有效。

缺点

Cookie数量和长度的限制。每个domain最多只能存储20条cookie,每个cookie长度不能超过4k,否则会被截掉。
安全性问题。如果cookie被拦截了，就可以获得所有的session信息。
有些状态不可能保存在客户端。

2、display:none与visibility:hidden的区别。

display:none隐藏对应的元素，在文档布局中不再给他分配空间。

Visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

3、css中的link和@import区别。

link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载完再加载
import只在IE5以上才识别，而link是标签，无兼容问题。
link方式的样式的权重会高于@import的权重。

4、position的absolute和fixed的共同点和不同点。

共同点：
- 改变行内元素的呈现方式，display被设置为block
- 让元素脱离普通流，不占据空间
- 默认会覆盖到非定位元素上
不同点
- absolute的根元素是可设置的，而fixed的根元素固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

5、css的盒子模型

IE盒子模型：标准的W3C盒子模型，IE的content部分包含了border和padding

盒模型：内容（content）,填充（padding）,边界（margin）,边框（border）

6、阐述清楚浮动的几种方式

父级div定义height
- 原理：父级div手动定义height,就解决了父级div无法获取到高度的问题。
- 优点：代码少，容易掌握
- 缺点：只适合于固定高度的布局，要给出精确地高度
父级div定义overflow:hidden
- 原理：必须定义width或zoom:1。同时不能定义height,使用overflow:auto时，浏览器会自动检查浮动区域的高度。
- 优点：代码少，浏览器支持好
结尾处加空div标签添加 clear:both属性
- 原理：添加一个空div利用clear:both清除浮动，让父级div能自动获取到高度
- 优点：代码少，浏览器支持好

7、postion的值

absolute 生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位
relative 生成相对定位的元素，相对于在普通流中的位置进行定位
fixed （老IE不支持）生成固定定位的元素，通常相对于浏览器窗口或iframe进行定位
static 默认值没有定位，元素出现在正常流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出（目前webkit使用 -webkit-sticky）
inherit 继承父级元素的position值
initial 默认值
unset 可理解为不设置是关键字inherit 和 initial 的组合

8、initial、inherit、unset关键字

initial关键字用于设置CSS属性为它的默认值，可用于任何CSS样式（IE不支持该关键字）
unset 可理解为不设置是关键字inherit 和 initial 的组合，当我们给一个CSS设置了unset的话：1、如果该属性是默认继承属性，该值等同于inherit。2、如果该属性是非继承属性，该值等同于initial
inherit:每一个CSS属性都有一个特性就是：这个属性必然是默认继承的（inherited:Yes）或者是默认不继承的（inherited:no）其中之一，可以在MDN上查找，判断一个属性的是否继承特性。

9、可继承属性：

默认为 inherited: Yes 的属性：

所有元素可继承：visibility 和 cursor
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
块状元素可继承：text-indent和text-align
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
表格元素可继承：border-collapse

10、TCP/IP连接的三次握手

第一次握手：客户端发送一个SYN包给服务器，表示请求连接。

第二次握手：服务器发送SYN+ACK包给客户端，表示收到你的请求，并同意连接。

第三次握手：客户端发送确认包ACK给服务器，表示确认并开始连接。

11、TCP/IP断开的四次挥手

第一次挥手：客户端发送一个FIN包给服务器，表示将要关闭客户端到服务器的这个方向的连接

第二次挥手：服务器发送一个ACK包个客户端，表示同意客户端关闭连接的请求，但是还未准备好关闭连接

第三次挥手：服务器发送一个FIN包给客户端，表示将要关闭服务器到客户端这个方向的连接

第四次挥手：客户端发送确认包ACK给服务器，表示确认并关闭连接

12、TCP建立连接需要三次握手，而断开连接需要四次挥手的原因

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

13、从输出一个URL到浏览器加载整个网页的过程