初中级前端面试系列

针对初中级前端，总结了自己的几场面试中，容易遗忘的知识点，希望对准备跳槽或者正在跳槽中的小伙伴有所帮助。

Vue

生命周期

创建前/后: 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

挂载前/后: 在beforeMount阶段，vue实例的el和data都初始化了，但还是虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后: 当data变化时，会触发beforeUpdate和updated方法。

销毁前/后: 在执行destroy方法后，vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。
组件传值
- 父组件传给子组件：子组件通过props接收参数
- 子组件传给父组件： $emit 方法传递参数
- 非父子间的数据传递: eventBus创建事件中心，用来传递和接收事件
Vue计算属性computed和侦听属性watch
- computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。
- watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。

CSS

三角形

1
2
3
4
5
6
7


.triangle {
  /*顶点朝上的三角形*/
  width: 0px;
  height: 0px;
  border: 40px solid;
  border-color: transparent transparent red transparent;
}

省略号

1
2
3
4
5
6
7


/*文本超出显示...*/
.line {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

动画

1
2
3
4
5


div{
  animation: mymove 2s linear 3 alternate both; 
  /* name duration timing-function count direction */
}
@keyframes mymove{ /*...*/ }

阴影

1
2
3
4


div {
  box-shadow: 10px 10px 5px #888888;
  /*h-shadow v-shadow spread color inset;*/
}

JS

ajax跨域

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// 1.创建XMLHttpRequest对象
var xhr;
if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else {
  xhr = new ActiveXObject("Microsoft XMLHTTP");
}
// 2.连接服务器
xhr.open("post", url.true);
// 3.创建新的http请求 并指定请求的类型和验证信息
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 4.设置响应请求状态变化的函数
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
    fn.call(this, xhr.responseText);
  }
};
// 5.发送请求
xhr.send(data);

HTTP

从输入url到页面呈现

1.DNS查询

首先查看浏览器缓存，没有缓存就发送请求，有缓存就检验是否足够新鲜；在发送http请求前，需要DNS域名解析获取相应的IP地址。

2.三次握手建立连接

3.完成握手，建立http连接

使用https的网站还需要进行SSL/TSL握手

4.服务器检验http header 足够新鲜返回304

5.浏览器接受请求，根据情况选择关闭TCP连接或保留复用，断开连接四次挥手

6.检查状态码

7.如资源可缓存，进行缓存

8.GZIP解码

9.解析HTML文档(DOM、CSSOM、构建渲染树、布局绘制)