前端-常见面试题-CSDN博客

本文链接：https://blog.csdn.net/qq_54054566/article/details/123500162

1、JavaScript中的==与===

“==” 的比较规则

先检查两个操作数的数据类型是否相同
如果相同，则比较两个数是否相等
如果不同，则先将两个数转换为相同数据类型，再进行比较
js自动进行了一次数据类型转换，将字符串、数组、布尔值转为数字，再进行比较。

“===”的比较规则

先检查两个操作数的数据类型是否相同
若不同，直接返回false
若相同，则比较二者是否相等
跟==不同，当数据类型不同时，不进行数据类型转换，直接返回false

题 2：说几条 Web 前端优化策略

减少 HTTP 请求数
把css链接文件在head中
把js链接文件在body中
合并css/js
数据的懒加载

题 3：link 与 @import 的区别

link是 HTML 方式， @import是 CSS 方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于@import

题 4：<img>的title和alt有什么区别?

1、alt： 图片加载失败时，显示在网页上的替代文字
2、title： 鼠标放在上面时显示的文字
3、alt 是必要属性，title 非必要

题 5、行内元素和块级元素有什么区别？

行内元素
1、设置宽高无效
2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
3、不会自动进行换行

块级元素
1、能够识别设置宽高
2、margin和padding的上下左右均对其有效
3、独占一行

行内块元素

能够识别设置宽高
margin和padding的上下左右均对其有效
不会自动进行换行

题 6：CSS样式覆盖规则

!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

7：清除浮动的几种方式：什么情况下出发BFC？

8：介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

盒子模型：
content + border + padding + margin = 盒子大小 // 自己带入一下上下左右的数据
盒子的宽等于content的宽
盒子的高等于content的高

题 9：::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号 ':'  表示伪类 （即一种行为后的样式）
双冒号 '::' 表示伪元素（即不存在dom结构中的元素，但页面依然可以呈现出效果）
::before 在元素之前添加一个伪元素 
::after  在元素之后添加一个伪元素

题 10：null和undefined

undefined表示声明了变量，但未赋值
null表示声明的变量赋值了，但赋值为空
0是一个数值
' '表示长度为0的字符串

11：LocalStorage和sessionStorage区别

存储量5M左右

localStorage：

生命周期永久生效，除非手动删除，
可以多窗口共享，
以键值对的方式存储

sessionStorage：

生命周期为关闭浏览器窗口，
可以多窗口共享，
以键值对的方式存储

题12：重绘和回流(重排)

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。

重绘不一定引起回流，而回流一定会引起重绘。

13.闭包是什么？

闭包的实质是因为函数嵌套而形成的作用域链
闭包的定义即：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包

14、说一下盒子垂直水平居中的方法？

一般用到最多的就是文本居中：text-align: center;
margin:0 auto
line-height: height;//行高设置与高度一致
flex布局，给父元素添加display: flex，
主轴对齐方式使用justify-content：center侧轴对齐方式目标：使用 align-items

15、跨域问题怎么解决？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一个不同，就是跨域

jsonp跨域
Nginx反向代理

16、setInterval和setTimeout的区别

setinterval是重复执行，第一次执行会延迟
setTimeout是延迟执行，只执行一次
setTimeout 结合递归函数，能模拟 setInterval 重复执行
clearTimeout 清除由 setTimeout 创建的定时任务

17、es6中的JS 执行机制

JS 是单线程， 同一个时间只能做一件事。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

同步任务都在主线程上执行，形成一个执行栈。

异步任务

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

1、普通事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包括 setInterval、setTimeout 等
异步任务相关添加到任务队列中（任务队列也称为消息队列）。

JS 执行机制

1. 先执行执行栈中的同步任务。

2 . 异步任务放入任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务

结束等待状态，进入执行栈，开始执行。

18、 a href = “javascript:;”和a href="#" 含义

1. a href = “javascript:;” 含义

是为了让超链接去执行js函数,点击此超链接时,页面不会进行任何操作,防止跳到其他页面
点击后,页面不动,只打开连接
其中javascript:是一个伪协议,可以让我们通过超链接去调用javascript函数,但是这个函数为空,所以我们调用的是一个空函数,相当于"javascript:void(0)",并不会发生实质性的改变,同时也可以实现a标签的点击运行,

2.a href="#" 含义

将href="#“是指连接到当前页面,这是一个锚链接,可以用来访问锚点
a中href=”#top" 表示回到顶部,如果当前页面需要滚动的话,就可以通过这种方式直接回到顶部
<a name="top"></a>
<a href="#top">回到顶部</a>

19、什么是 Cookie,cookie和session的区别

客户端第一次请求服务器的时候，服务器通过响应头的形式，向客户端发送一个身份认证的 Cookie，客户端会自动将 Cookie 保存在浏览器中。
随后，当客户端浏览器每次请求服务器的时候，浏览器会自动将身份认证相关的 Cookie，通过请求头的形式发送给服务器，服务器即可验明客户端的身份。
Cookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。