面试

8/5 21:00 阿里电话面试 20分钟

面试官评价:除了js,你了解点,其它的还是太少了
先介绍自己,介绍项目v-model 原理

  1. let const

let 变量 const 常量
不存在变量提升 暂时性死区 块级作用域(定义的不在全局里面)

  1. Symbol
  2. this
  3. bind, call, apply
  4. http
    302 404
    canvas
    node.js 优点
    前端工程化:webpack

8/15 作业帮初试 gg

行内标签 块标签
Array的方法
移动适配方案
webpack原理
最后一个字符串回文子序列算法没写出来。。

8/30 字节跳动 视频面试 一个小时

  1. git merge git rebase的区别

git merge 合并操作,将目标分支合并到当前分支

面试_第1张图片
git merge

面试_第2张图片
merge之前

执行命令。在master上

git merge dev
面试_第3张图片
merge之后

可以看到,将dev分支上的最新记录,与主分支上的最新记录进行合并,并且提交了

git rebase 变基操作


面试_第4张图片
git rebase 之前

面试_第5张图片
git rebase master之后

操作记录

可以很明显的从上述图片中看到,将master分支rebase到dev上时,会将master上的新的commit拿到dev分支上。完全打乱了实际的历史提交记录


假设现在有一个master分支1-2-3,开发分支1-2-4-5.这两个在2的时候分开;

在dev分支上执行git merge master,将主分支合并到开发分支上,这时候的dev提交记录就会变成 1-2-4-5-6;这个6 就是两个分支最新的提交合并的一个新的提交;

如果执行git rebase master 将dev分支的基准修改,这时候的dev分支变成1-2-3-4-5;相当于从master的最新的提交出分开,而不是最开始的从2处分开


这里插一个问题,多次commit合并成一个commit

git rebase - i 版本号
这里将版本号之后的提交准备合并到版本号中,这个时候会进入到一个vi编辑模式,前面两行就是

面试_第6张图片
git rebase -i 版本号之后

只需要将第二行的pick修改为squash,然后退出,就会将dev5.0的提交合并到dev4.0中

再加一个reset和revert的区别

git reset --hard 版本号
将HEAD指针指向指定版本,相当于舍弃了之后的所有
git revert -n 版本号
大致就是撤销该版本的修改,。我个人觉得,这就是一个简便的操作,把手动修改,变成命令撤销。并且提交到了暂存区,相当于执行了git add
还需要手动去commit才行

  • iframe的全屏
    看了一下,iframe是可以设置宽高的,那么,他就是一个内联块元素,
    我当时是这么答的,我将iframe放在一个div块里面,iframe是全铺在div里的。视频播放时,自带的全屏按钮
  • 301 302 304 401 403
    • 301 永久重定向
    • 302 临时重定向
    • 304 客户端发送附带条件的请求时,但未满足条件时,服务端会返回 - 304,不包含任何响应的主题部分;我所理解的就是,客户端发送一个请求,但是本地存在该资源缓存,只是不知道该缓存可不可用,就在请求头中附带if-**的字段。
      if-Modified-Since字段会带一个时间戳,服务器端会根据request头中:If-Modified-Since字段的时间与文件的实际修改时间进行比较。哪个新就用哪个
    • 401 第一次返回401,表示该请求需要http认证,第二次返回401表示认证失败
    • 403 服务器拒绝,权限不足
  • cors
    req = request
    res = response //当时只记得res,导致答错了
    后端给返回头设置

Access-Control-Allow-Origin
Access-Control-Allow-Headers
Access-Control-Allow-Methods
这里有一个问题,美团的面试官和字节的面试官都说post请求会发起复杂请求,但是mdn上说的是head,get,post这三种方法会发送一次请求。明天实际操作就知道了这里post并不会发送OPTION请求,而且本地文件发起ajax,它的origin为null

  • 垂直居中
1.
display:flex;
justify-content:center; /**水平主轴**/
align-content:center;   /*竖直交叉轴*/
2.
/*这个是人人网那个*/
/*子元素设置*/
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%);
transform: translateY(-50%);
3
position: absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
  • flex布局中左侧固定右侧伸缩
    calc(100%- 50px)
    flex-grow:1;//拉伸因子
.main{
  width:200px;
  display: flex;
}
.main .a{
  width:20px
}
.main b{width: 180px}
问 a,b宽度是多少。这题我答错了,
当时想的是bfc去了。实际应该是两者会收缩,等比收缩,
如果没有设置收缩因子的flex-shrink
  • css 响应式正方形
1.
width:20vw;
height:20vw;
2.
/*百分比是根据父元素的宽来计算的的,但是这个里面不能插入元素
想要插入的化,就在加个块,使他脱离文档流,浮动出去*/
width:20%;
padding-top:20%;
3.
/*其实这个跟第2个差不多,想要插入元素的化,就添加子块,使其脱离文档流*/
.main{
  width: 20vw;
}
.main::after{
  content: '';
  display: block;
  padding-bottom:100%;
}

这里需要注意一点,就是长单词不会自动换行,平常的单词会换行;需要设置css3属性:word-wrap: break-word
padding-bottom:100%;

  • box-sizing
    • content-box 标准盒子
    • border-box ie盒子
  • 防抖函数
let debounce = function(func, delay){
  let timeout = null;
  return function(){
    let args = arguments;
    let context = this;
    clearTimeout(timeout);
    timeout = setTimeout(function(){
      func.apply(context, args);
    })
  }
}
  • 快速排序
    我只说了原理。。。

人人网现场面试,聊了两个小时,面试笑嘻嘻,转身就GG

  • 一个方块根据屏幕滚动,在父元素内滑动
    absolute => fixed
    el.getBoundingClientRect获取元素在页面中的位置,以及自身宽高
  • 防抖
    -垂直居中
  • 两列布局,右侧是左侧两倍
    我日,当时根本没想到用百分比。想到了网格布局,flex
  • 数组降维
  • 数组乱序

你可能感兴趣的:(面试)