【公司的面经总结】2022前端面试题第一套

阿卡内

已于 2022-08-11 16:22:20 修改

阅读量249

点赞数 1

分类专栏：前端面试总结文章标签：前端 css javascript

于 2022-08-11 16:21:11 首次发布

本文链接：https://blog.csdn.net/qq_40695234/article/details/126280506

版权

前端面试总结专栏收录该内容

15 篇文章 2 订阅

订阅专栏

百度23提前批(别人的)

1、link和@import引入css的区别

link是HTML标签，而@import是css提供的一种导入css文件的规则。
当页面加载的时候，link引用的css会被同时加载，而@import引用的css会等到页面全部加载完才被加载。所以当使用@import加载css的页面的时候会闪烁（因为这个是会后页面还没有样式）。
link可以通过JS操作DOM，插入link标签来改变样式；而由于DOM是基于文档的，因此无法使用@import的方式来插入样式

2、position的属性值

static：默认定位方式，子元素在父容器中挨个摆放。（元素的top、right、bottom，left、z-index都不会生效）
relative：相对布局，页面中占据位置，其位置移动相对于自身来讲的。
absolute：绝对定位。绝对定位的盒子在页面中不占据位置，其位置相对于父级节点中的position不是static的节点进进行定位。如果没有那就是相对于body进行定位。
fixed：固定定位。元素相对于窗口进行定位，因此即使发生进度条滚动的时候，元素相当于窗口的位置仍然不变。
sticky：粘性定位。类似于relative和fixed的结合。这是一个带过渡效果的定位方式，只有在滚动时才能看出效果。当在top、right、bottom、left四个属性中至少设置一个具体值时，元素具备两种状态 — 类似relative（相对定位状态）和类似fixed（固定定位状态）。
- 当偏移量大于指定值的时候，以relative的方式显示。此时元素随着页面的滚动而正常移动。此时的开始时候的位置是相对于自身的位置来进行偏移的。因此一开始是relative。
- 当偏移量小于指定值的时候，以fixed的方式显示。设置的top值即为距离窗口的位置。
- 当元素达到父容器边缘的时候，位置相当于父容器不再变化。

3、position的fixed失效的情况

当父级元素设置了transform：translate(0,0)后，子级的固定定位会失效。因为当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。
移动端：当父元素的-webkit-overflow-scrolling属性为touch，子元素的position:fixed属性就会失效。
```
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
 
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
```
- 因为-webkit-overflow-scrolling:touch会创建一个堆叠上下文。这个时候fixed定位元素会由屏幕视口改为祖先元素，所以会看到定位元素随着页面滚动而飞掉。
- 堆叠上下文就是HTML元素的三维概念。生成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系。
失效情况解决
- 第一种失效的解决方案：给元素祖先的transform属性设置为none。
- 第二种失效的解决方案：给元素最外层祖先元素height:100vh;

4、vue的生命周期

beforeCreated：初始化Vue实例的过程。这个时候页面也没有加载好，data，watch，prop，computed中的数据也尚未加载完成
created：数据能访问到，但是模板还没有获取到。
beforeMounted：模板加载。但是数据还没有挂载到模板上头。
mounted：数据已经挂载到模板上了。
beforeUnpdated：数据更新完毕，但是还没加载到模板上。beforeUnpdated调用之后，会重新生成一个新的虚拟dom，然后拿这个最新的vnode和原来的vnode去做一个diff计算。这里涉及到一系列的计算，算出最小的更新范围。从而更新render函数中最新的数据，然后将更新后的render函数渲染成真实dom，也就完后才能了我们的数据更新。
updated：模板更新完毕之后，将data渲染到数据模板上。
BeforeDestory：实例销毁前。
Deatory：实例销毁后。

5、数据交互发生在create和mounted的区别
created是在组件实例一旦创建完成的时候立即调用，这时候页面dom节点并未生成。mounted是在页面dom节点渲染完毕之后就立即执行的。触发时机上created是比mounted更早。
两者的相同点：都能拿到实例对象的属性和方法。
如果当请求放在mounted可能会导致页面闪动的现象，所以建议放在create声明周期中。

6、组件首次加载会触发的钩子

beforeCreated、created、beforeMounted、mounted、mounted

7、watch的深度监听

watch可以监控一个值的变化，并做出相应的反应。
可以再watch中开启深度监听：deep:true
handler：监控处理函数

watch:{  //监控name属性
    person:{
        deep:true, //开启深度监听
        handler(v){
            console.log(v.namge,v.age)
        }
    }
 }

8、computed

计算属性，可以缓存数据，如果说数值依赖其他数据计算出来的话，那么就可以用到computed。当所依赖的数据变化的时候，computed计算出来的新属性也会随之发生变化。

9、vue常用指令

v-once指令：只会渲染一次，当数据改变的时候，不会再变化。
v-show指令：接受一个表达式或一个布尔值。相当于给元素添加一个display属性。
v-if指令：v-if和v-show有相同的效果，不同在于v-if是重新渲染，而v-show只是使用display来进行隐藏了而已。
v-else指令
v-else-if指令
v-for：可以用来遍历数组、对象、字符串。
v-html：渲染为html
- <\div v-html=“innerHtml”></div> innerHtml:‘<\button>我是一个按钮</button>’
v-text：渲染为字符串。
v-bind：是用可以将标签内的属性值解析成js代码，在标签的属性中使用v-bind，双引号里的内容会被当作js解析（只能解析变量或三元表达式）。可以缩写成:形式。单向数据绑定（只能将vue中的数据同步到页面中，但是页面中修改的数据，无法同步到vue实例身上）
v-on：v-on用于事件绑定。简写为@
v-model：双向数据绑定

10、vue中key的作用

vue中key的作用主要是为了高效的更新dom。

11、v-on可以绑定多少事件
如果要绑定多个事件，可以用键值对的形式事件类型：事件名

v-on="{a:clickA,b:clickB}"

12、跨域

cors跨域（只需要后端配置）
jsonp跨域：（需要前后端一起配合）
proxy代理跨域

13、绘制三角形和扇形
下三角：

div {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

左三角、右三角、上三角类似。将top、right、left换成三角形紧邻的三个边。
比如左三角：尖尖是朝左的，紧邻的三个边就是：right、top、bottom。
14.数组扁平化并去重和排序
扁平化：flat(ES10中新增的方法)、tostring+split+.map、扩展运算符
去重的方法：set、Map、filter
排序：sort()