前端面试的问题（1）

今天去了面试，实在太打击我了，不过而确实实实在在暴露除了自己的不足，很多东西都是一知半解，下面，总结一下问题和答案吧，我觉得自己答得不是很好的就会写的详细一点。

笔试题

笔试题大多都是出自这里
https://blog.csdn.net/xm1037782843/article/details/80708533

面试

面试也是从笔试题中抽问思路啊什么的，或者看着简历来问的，下面我详细的写一些自己答得不好的

CSS中各种长度单位总结

1. 绝对长度单位：彼此固定，不会因为其他元素的尺寸变化而变化。主要有cm mm Q in pc pt px
   px：单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。像素单位的一个问题是在IE下无法用浏览器字体缩放的功能(影响不是很大)。

2. 相对长度单位
   指定相对于另一长度的长度。主要有em ex ch rem %和可视区百分比长度单位 vm vh vmin vmax
   %： 百分比是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小。关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。如果是固定定位的元素，它的包含块是视口（viewport）。
   em：相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。若用于其他属性（width,height），则是相对于本身元素的font-size。国外使用比较多；em单位有如下特点：
   em的值并不是固定的;
   em会继承父级元素的字体大小。
   我们知道任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
   rem：是CSS3新增的一个相对字体长度单位，只相对根元素即html元素字体大小所以我们只要在html标签上设置字体大小为标准，文档中的字体大小都会以此为参照，em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便，还好rem解决了这个问题

css中可以继承的属性

1. 字体系列属性
   字体系列属性：font、font-family等等等等
   文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color
   元素可见性：visibility
   表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
   列表布局属性：list-style-type、list-style-image、list-style-position、list-style
   生成内容属性：quotes
   光标属性：cursor
   页面样式属性：page、page-break-inside、window、orphans
   声音样式属性：speak、speak-punctiuation、speak-numeral、speak-header/speech-rate、volumn、voice-family、pitch、pitch-range、strsss、richness、azimuth、elevation
   （后面的属性都比较少见）

附加一个可继承的属性

display
文本属性：vertical-align、text-decoration、text-shadow、white-space、unicode-bidi
盒子模型属性
背景属性
定位属性：float、clear、position、top、right、bottom、left、min-height、min-width、max-width、max-height、overflow、clip、z-index
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

浏览器的事件机制

事件流：指从页面中接收事件的顺序，有冒泡流和捕获流。
事件冒泡即由最具体的元素（文档嵌套最深节点）接收，然后逐步上传至document
事件捕获会由最先接收到的元素然后传向最里边
DOM 2级事件包括：事件捕获阶段、处于目标阶段、事件冒泡阶段。
DOM 2级事件通过addEventListener和removeEventListenr管理
addEventListener(eventName,handlers,boolean);removeEventListener()，两个方法都一样接收三个参数，第一个参数为要处理的事件名，第二个参数为事件处理程序，第三个值为布尔值，false时表示事件在冒泡阶段调用事件处理程序，一般建议在冒泡阶段使用，特殊情况才在捕获阶段使用。
IE事件处理程序（IE和Opera支持）：attachEvent()，detachEvent()，接收两个参数，事件名称和事件处理程序，通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段,所以平时为了兼容更多的浏览器最好将事件添加到事件冒泡阶段,IE8及以前只支持事件冒泡

解决前端的跨域问题

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面

前端开发的优化问题

1. 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器
2. 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
3. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4. 当需要设置的样式很多时设置className而不是直接操作style
5. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作
6. 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
7. 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

BFC的理解

BFC全称叫做（Block Formatting Context）中文叫块级格式化上下文，是一个网页的概念。
BFC是W3C CSS2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用、当涉及到可视化布局的时候，BFC提供了一个环境，HTML会在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。比如浮动元素会形成BFC，浮动元素的内部子元素主要受改浮动元素影响，两个浮动元素之间是互不影响。也可以说BFC就是一个作用范围。
附一个讲解的链接：https://blog.csdn.net/return_js/article/details/81266131

数据结构和算法

因为我简历上写了主修课程有数据结构和算法，所以就问了我二叉树和冒泡排序，实现过程我还是会写的，但是要我说我真的不知道怎么说，可能我表达能力真的不行吧

1. 冒泡排序
   原理：依次比较相邻的两个值，如果后面的比前面的小，则将小的元素排到前面。依照这个规则进行多次并且递减的迭代，直到顺序结束。
   实现：

function maoPaoPaiXun(arr) {
  for(var i = 0; i < arr.length - 1; i++){
    for(var j = 0; j < arr.length - 1 - i; j++){
       if(arr[j] > arr[j+1]){
         var temp = arr[j];
         arr[j] = arr[j+1];
         arr[j+1] = temp;
       }
     }
   }
   return arr;
}

2. 二叉树
   https://www.cnblogs.com/webFrontDev/p/3865719.html

Vue中父子组件的传值

1. 父组件向子组件传递数据
   组件实例的作用域是孤立的。这意味着不能再子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。props是单向绑定的

// 静态props
父组件:
<button msg="hello"></button>
子组件
<template>
  <div>{{msg}}</div>    //输出 hello
</template>
<script>
    props:['msg']   //子组件通过props选项接收父组件传参
</script>

// 动态props（要动态地绑定父组件的数据到子模板的props用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件）
父组件: <button :msg="hello"></button>

2. 子组件向父组件传递数据
   使用v-on绑定自定义事件，每个Vue实例都实现了事件接口，即：使用$on(eventName)监听事件，使用$emit(eventName)触发事件。

// 子组件部分:
<template>
    <input v-model="msg" @change="setMsg" />
</template>
<script>
    export default{
      data() {
        return { msg: '' }
      }
      methods: {
        setMsg() {
          this.$emit('tansferUser',this.msg)  //用 $emit 来遍历 transferUser 事件，并返回 this.msg
        }
      }
    }
</script>

父组件部分:
<template>
  <login @transferUser = "getMsg"></login>
</template>
//在父组件 App.vue 中，声明了一个方法 getMsg，用 transferUser 事件调用 getMsg 方法，获取到从子组件传递过来的参数 msg

<script>
  import login from '子组件存放路径';
  export default{
    data() {
      return { user:'' }
    },
    components:{
        ligin
    },
    methods: {
      getMsg(msg) { //msg就是从子组件传递过来的参数msg
        this.user = msg;
      }
    }
  }
</script>

Vue-X中的action和mutation怎样调用

1. mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，必须是同步函数。通过 store.commit() 调用
2. action: Action 提交的是 mutation，而不是直接变更状态；可以包含任意异步操作。通过 store.dispach() 调用

ES6规范

1. let、const的区别
   let定义的变量不会提升，const定义的常量不能被修改，let和const都是块级作用域，es6前，js是没有块级作用域{}的概念的。（有函数作用域、全局作用域、eval作用域）
2. promise
   用同步的方式去写异步代码

// 发起异步请求
fetch('/api/todos')
.then(res => res.json())
.then(data => ({
　　data
}))
.catch(err => ({
　　err
}));

结束，祝我面试顺利。