前端面经

最新推荐文章于 2023-04-10 11:38:15 发布

GoodLuck_wu5

最新推荐文章于 2023-04-10 11:38:15 发布

阅读量261

点赞数

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

本文链接：https://blog.csdn.net/GoodLuck_wu5/article/details/107324787

版权

前端面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

面试题：

DOM元素display、visibility、opacity三种隐藏方式的对比

方式一、display： none

DOM结构：浏览器不会渲染display属性为none的元素，不占用空间；
事件监听：无法进行DOM事件监听，毕竟没有被渲染出来；
性能：动态改变此属性会引起重排，性能较差；
继承：不会被子元素继承，毕竟子元素也不会被渲染出来
transition（过渡）：不支持display。

方式二、visibility： hidden

DOM结构：元素被隐藏，但会被渲染，占用空间；
事件监听：无法进行DOM事件监听；
性能：动态改变此属性会引起重绘，性能较高；
继承：会被子元素继承，子元素可以通过visibility： visible 来取消隐藏
transition（过渡）：visibility会立即显示，隐藏时会延时。

方式三、opacity： 0

DOM结构：透明度为100%，元素隐藏，占用空间；
事件监听：可以进行DOM事件监听；
性能：不会引起重绘，性能较高；
继承：被子元素继承，但子元素不能通过opacity：1 来取消隐藏；
transition（过渡）：可以延时显示可隐藏（做隐藏和显示网页特效时一般用opacity）。

v-if和v-show

v-if是动态地向DOM树中添加或删除DOM元素节点；v-show是通过向DOM元素设置样式display属性值控制显示隐藏。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

vue打包优化

数组、字符串原生方法

forEach、Map会改变原数组吗

都不会改变原数组。
如何使用：当你遍历数组想要返回一个新的数组时使用map，如果你仅仅想遍历这个数组而不想返回一个新数组那么使用forEach。

map方法
1.map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
2.map方法不会对空数组进行检测，map方法不会改变原始数组。

array.map(function(item,index,arr){},thisValue)
 
var arr = [0,2,4,6,8];
var newArr = arr.map(function(item,index,arr){
    console.log(this); //window
    console.log("原数组arr:",arr); // 注意这里执行5次[0,2,4,6,8]
    return item/2;
},this);
console.log(newArr);// [0,1,2,3,4]
console.log(arr) // [0,2,4,6,8]

forEach方法
1.forEach方法用来调用数组的每个元素，将元素传给回调函数
2.forEach对于空数组是不会调用回调函数的。
3.无论arr是不是空数组，forEach返回的都是undefined。这个方法只是将数组中的每一项作为callback的参数执行一次。

Array.forEach(function(item,index,arr){},this)

var arr = [0,2,4,6,8];
var sum = 0;
var str = arr.forEach(function(item,index,arr){
    sum += item;
    console.log("sum的值为：",sum); // 5次：0 2 6 12 20
    console.log(this); //window
},this)
console.log(sum); // 20
console.log(str); // undefined
console.log(arr)  // [0,2,4,6,8]

数组的那些方法会改变原数组

JS——数组常用的方法.

常见的块元素、行内元素、行内块元素

块元素：

div
p
h1~h6
form（交互表单）、table（表格）
ol、ul、li

自动换行，可设置高宽

行内元素

a
span
i（斜体）、em（强调）、strong
label（表格标签）

无法自动换行，无法设置宽高
注意： 设置width无效，设置height无效，可以通过设置line-height来设置，设置 margin和padding 时，只有 左右有效 ，上下无效。

行内块元素

button
input
textarea
select
img

拥有内在尺寸，可设置高宽，不会自动换行

页面优化

传送门.

vue生命周期

我的理解是生命周期是vue实例从创建到毁灭的过程，一般在项目中多使用的是created和mounted。
他们两个的区别在于：
created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。一般不可直接操作dom元素，因为未编译，
mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。我一般用来做一些网络请求获取数据进行数据初始化。
注： mounted在整个实例中执行一次。
在这里插入图片描述

Vuex

Vuex状态管理，可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。再将这个对象放在顶层的Vue实例中，让其他组件可以使用。那么多个组件就可以共享这个对象中的所有变量属性了。
主要将State、Getters（类似于计算属性）、Mutation（同步操作）、Action（异步操作）这几个讲出来。但是要按照下图来讲。
在这里插入图片描述

vue双向绑定原理及实现

数据双向绑定原理简单概括的话就是:
View层影响Model层是通过对 ‘keyup’ 等事件的监听。
Model层影响View层是通过 Object.defineProperty( ) 方法劫持数据并结合发布订阅者模式的方式来实现数据的双向绑定。
在这里插入图片描述
如果可以的话把整个流程图画出来给面试官看，然后顺着流程讲给他听就行。但是一定要讲到 Object.defineProperty( ) 。
原理图流程详解.

Promise

在这里插入图片描述
promise题目

cookies、web存储（sessionStorage 、localStorage）的区别

①cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递（cookie可以传递数据）。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
②存储大小限制也不同。cookie数据不能超过4k，只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
③数据有效期不同。sessionStorage：仅在当前浏览器窗口关闭前有效，生命周期为关闭浏览器窗口；localStorage：生命周期永久生效，除非手动删除，否则页面关闭依旧存在；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
④作用域不同。sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

computer、watch区别

使用要点：
computer：多个数据影响一个，比如z = a + b + c。
watch：受一个数据影响，监听一个数据的变化，然后做出对应的操作。

看以下例子：

<div id="demo">{{ fullName }}</div>

侦听属性watch的写法：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

计算属性computer的写法：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

父子组件间的通信、兄弟组件的通信

在这里插入图片描述
父子组件的访问 $children $refs $parent $root
父组件访问子组件：使用 children或 refs (reference 引用)
子组件访问父组件：使用 parent
访问根组件：使用 root

最常用的是refs

children 获取到的是子组件的集合，是一个数组，访问其中的子组件必须通过索引值。
children的缺陷：
当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。

refs 相当于key，先给每个子组件定义ref属性，再使用refs调用，就可以访问特定的子组件，不会随着位置数目得变化而出错。

git常见命令

传送门.

路由拦截

传送门.

盒子垂直居中

方便理解，整两个盒子

<div class="father">
  <div class="son"></div>
</div>

transform、绝对定位 position: absolute这两种方式就是单纯的手动移动盒子的位置，需要算移动的距离。不够简便。
flex

.father {
  ...
  display: flex;
  justify-content: center; // 水平居中
  align-items:center;	// 垂直居中
}

table

.father {
  ...
  display: table;
}
.son {
  ...
  display:table-cell;
  vertical-align: middle;
  text-align: center; 
}

http请求的get和post的区别

见：https://blog.csdn.net/GoodLuck_wu5/article/details/107604907.

4399笔试题

1、以下TCP具有的能力是？

A.数据依靠
B.有连接
C.数据按序到达
D.端到端流量控制

2、以下请求相对http://4399.company.com/dir/page.html可以通过同源检测的是？

A.https://4399.company.com/dir/page.html
B.http://4399.company.com:81/dir/etc.html
C.http://4399.company.com/dir/other.html
D.http://4399.company.com/dir/inner/another.html

解释：同源：协议、域名、端口均相同。

3、以下哪个不是xss攻击的类型？

A.存储型XSS
B.反射型XSS
C.DOM型XSS
D.关系型XSS

危害性：存储型XSS > DOM型XSS > 反射型XSS

4、以下哪个不利于页面的SEO？

A.优化<title>标签的内容
B.给图片增加alt属性
C.使用异步方式获取网页内容
D.增加Description标签

SEO传送门.

5、关于flex-shrink

<div class="flex">
  <div class="flex-item1"></div>
  <div class="flex-item2"></div>
  <div class="flex-item3"></div>
</div>

.flex {
  width: 200px;
  display: flex;
}
.flex-item1 {
  width: 100px;
  flex-shrink: 0;
}
.flex-item2 {
  width: 100px;
  flex-shrink: 2;
}
.flex-item3 {
  width: 100px;
  flex-shrink: 3;
}

nameclass为flex-item2的实际width为：60px。

算法：
flex-shrink为缩小比例，0：不缩小。
子盒子总宽度 - 父盒子宽度 = 溢出宽度
子盒子缩小后的宽度 = 子盒子原宽度 - 溢出宽度 * flex-shrink / (flex-shrink的和)
所以，flex-item2：100px - ((100px * 3 - 200px) * 2 / (0 + 2 + 3)) = 60px
CSS——Flex弹性布局及flex-grow与flex-shrink的计算.

6、野指针

my(int* p1, int* p2) {
  int *p
  *p = *p1
  *p1 = *p2
  *p2 = *p
}

p为野指针。

怎样会产生野指针？
1、在创建指针时没有对指针进行初始化。
2、在释放了指针后没有将其指向NULL。
3、在指针变量的作用域之外使用指针。

7、以下关于html5存储说法正确的是？

A.sessionstorage浏览器关闭后也会生效
B.cookies存储大小不超过4k
C.localstorage浏览器关闭后失效
D.localstorage不同源的窗口也可以共享

8、box-sizing

div {
  box-sizing: border-box;
  width: 200px;
  border: 1px solid red;
  padding: 10px;
  margin: 20px;
}

那么div的实际宽度为：222px。
200px + 1px * 2 + 10px * 2 = 222px

box-sizing:content-box；元素的宽高只包含content
box-sizing:pandding-box；元素宽高包含padding和content
box-sizing:border-box；元素的宽高包含border、padding和content （常用）

9、以下哪个修饰符的方法不能被子类调用？

A.public
B.protected
C.private
D.default

public：可以被所有其他类所访问
private：只能被自己访问和修改
protected：自身、子类及同一个包中类可以访问
default：同一包中的类可以访问，声明时没有加修饰符，认为是default

10、哪个不是jquery表单对象的属性？

A. :enabled
B. :disabled
C. :hidden
D. :selected

11、关于Sass下列哪些说法是错误的？

A. Sass完全兼容CSS3
B. Sass支持函数
C. Sass支持Firebug
D. Sass无需编译

12、框架

以下说法错误的是？
A.Angular是一种MVVM框架
B.react执行setState是同步的
C.vue父组件通过props向子组件传递数据
D.vue的keep-alive可以将组件保存在内存中，避免重新渲染

13、[1 < 2 < 3, 3 < 2 < 1]的结果是？

[true, true]

我们需要知道，在js中 0 == false 和 1 == true是正确的。
所以，1 < 2 < 3 = true < 3 = 1 < 3 = true
3 < 2 < 1 = false < 1 = 0 < 1 = true

GoodLuck_wu5

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面经

面试题：DOM元素display、visibility、opacity三种隐藏方式的对比v-if和v-showvue打包优化数组、字符串原生方法页面优化vue生命周期VuexVue全家桶vue双向绑定原理及实现Promisecookies、web存储（sessionStorage 、localStorage）的区别computer、watch区别父子组件间的通信、兄弟组件的通信webpack配置git命令路由拦截盒子垂直居中DOM元素display、visibility、opacity三种隐藏方式的对比
复制链接

扫一扫