初级前端近期面试小结

答案仅个人理解，做笔记用，如有问题欢迎指正。

一、HTML、CSS、JS

1. CSS实现三角形

div {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #000;
}

2. 已知或者未知宽度的垂直水平居中

/** 1 **/
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
}

/** 2 **/
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/** 3 **/
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/** 4 **/
.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

3. absolute,relative相对于什么定位

relative是相对定位，生成相对定位的元素，基于自身的位置进行偏移。
absolute是绝对定位，相对于除static之外的第一个父元素进行定位

4. 设置所有div内部段落标签为黄色背景

div > p {
  background-color: yellow;
}

5. 设置所有div之后段落标签为黄色背景

div + p {
  background-color: yellow;
}

6. 数据缓存

cookie: 4k(单个), 可以设置过期时间, 存储在客户端, 始终在同源的http请求中携带, 会在浏览器和服务器间来回传递。
localStorage: 5M, 存储持久数据, 浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage: 5M, 数据在当前浏览器窗口关闭后自动删除。

7. 原型与原型链

任何函数在声明时都会有一个属性，就是prototype(原型)，这个属性会初始化一个空对象(即原型对象)，原型对象中会有一个constructor，会默认声明的函数。每个对象都有__proto__属性，指向了创建该对象的构造函数的原型。
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么就会去它的原型对象上查找，一直检索到Object内建对象。原型对象上的方法是被不同实例所共有的。如果找不到，返回null。

8. JS DOM操作

document.getElementById ：通过id查找元素
document.getElementsByClassName：通过类名查找元素
document.documentElement：获取html
document.querySelector：通过选择器获取一个元素
// 创建元素
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
document.body.appendChild(para);

9. 给div加阴影

box-shadow: 10px -10px 5px #333;  /*水平位移  垂直位移  模糊半径  阴影颜色*/

10. GET/POST请求

二、Vue

1. Vue常用指令以及自定义指令

v-html：输出解析后的html内容，而非代码文本
v-bind：绑定一个或多个DOM属性
v-model：表单控件的双向绑定
v-on：绑定事件监听
v-for：根据一组数据的选项列表进行循环渲染
v-if：条件渲染
v-show：根据条件切换元素的 display属性
v-once：只渲染元素和组件一次，之后视为静态内容
v-pre：跳过vue的编译，直接输出原始值

// 注册全局自定义指令 `v-focus`
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})
 // 注册局部指令
directives: {
  focus2: {
    inserted: function (el) {
      el.focus()
    }
  }
}

2. Vue中标签怎么绑定事件

使用v-on绑定事件***

<button v-on:click="say" id="example"></button>
<input @keyup.enter="onEnter">
<my-component @click.native="onClick"></my-component>

new Vue({
  el: '#example',
  methods: {
    say: function () {
      alert('hi')
    }
  }
})

3. Vue生命周期以及具体每个阶段做什么

共分为8个阶段，创建前/后，挂载前/后，更新前/后，销毁前/后。

在beforeCreate阶段，vue实例的挂在元素el和data都未初始化，为undefined。在created阶段，vue实例的数据对象data有了，el还没有。
在beforeMount阶段，vue实例的el和data都已经初始化，但仍为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
当data变化时，会触发beforeUpdate和updated方法。
在执行destroy()之后，data改变不会再触发周期函数，说明vue实例解除了事件监听与dom绑定，但dom结构仍然存在。

4. 自己封装过组件吗

5. Vue组件通信

父组件与子组件传值

<!-- 父组件通过标签上面定义传值 -->
<template>
<Main :obj="data"></Main>
</template>
<script>
// 引入子组件
import Main form "./main"
export default {
name: "parent",
data() {
  return {
    data: "我要向子组件传递数据"
  }
},
// 初始化组件
components: {
  Main
}
}
</script>

</template>

- 子组件向父组件传递数据
```html
<!-- 子组件通过$emit方法传递参数 -->
<!-- 子组件 -->
<template>
  <!-- 定义一个子组件传值的方法 -->
  <input type="button" value="点击触发" @click="childClick">
</template>
<script>
export default {
  data() {
    return {
      childValue: '我是子组件的数据'
    }
  },
  methods: {
    childClick() {
      // childByValue是在父组件on监听的方法
      // 第二个参数this.childValue是需要传的值
      this.$emit('childByValue', this.childValue)
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <span>{{name}}</span>
  <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
  <child v-on:childByValue="childByValue"></child>
</template>
<script>
// 引入子组件
import child from './child'
export default {
  components: {
    child
  },
  data() {
    return {
      name: ''
    }
  },
  methods: {
    childByValue: function(childValue) {
      // childValue就是子组件传过来的值
      this.name = childValue
    }
  }
}
</script>

6. Vue还了解哪些

vuex所有组件状态管理器
vue router路由
vue computed计算属性，建立与其他属性(data、store)的联系，适合对多个变量或者对象进行处理
vue ssr，(vue-server-renderer)主要就是把 Vue 的组件输出成一个完整 HTML

三、算法和数据库

1. 从100万个数中找出最大的100个数

2. 斐波那契数列

// 递归
function fibonacci(number) {
  if (number === 1 || number === 2) { return 1; }
  return fibonacci(number - 1) + fibonacci(number - 2)
}

// 非递归
function fibonacci(n) {
  var a = 0;
  var b = 1;
  var c = a + b;
  for (var i = 3; i < n; i++) {
    a = b;
    b = c;
    c = a + b;
  }
  return c;
}

3. 输入一个已经升序排序的数组和一个数字，在数组中查找两个数，和为输入的那个数字，时间复杂度为O(n)。

const twoSum = (numbers, target) => {
  const max = numbers.length
  let start = 0
  let end = max - 1

  while (start < end) {
    const sum = numbers[start] + numbers[end]
    if (sum === target) {
      return [start + 1, end + 1]
    }
    if (sum > target) {
      end--
      continue
    }
    if (sum < target) {
      start++
      continue
    }
  }
}

4. SQL语句查出每个学生总分，并按总分从高到低排序(表结构省略)

SELECT score FROM tb_score order ORDER BY score DESC

5. SQL语句查出每门课都大于80分的学生

SELECT name FROM tb_score order GROUP BY name HAVING MIN(score)>=80

四、其它

1. 做过哪些项目

2. SEO，图片优化

合理的title、description、keywords
内链和友链的更新
给图片标注"Alt"可以让搜索引擎更友好的收录
通过搜索引擎站长工具分析流量来源，指导下一步的SEO

禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）。
对于一些小图标，可以使用base64位编码，以减少网络请求。
图片预加载，将样式表放在顶部，将脚本放在底部。
如果图片展示区域小于图片的真实大小，则应根据业务需要先行进行图片压缩。