前端面试的问题(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;
}

  1. 二叉树
    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>
  1. 子组件向父组件传递数据
    使用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
}));

结束,祝我面试顺利。

你可能感兴趣的:(前端,es6,css,javascript)