web前端面试题记录

记录了2017年5月下旬刚毕业时面试的经典面试题

布局方面

1. 响应式布局,左侧栏目固定,右侧内容随着屏幕宽度变化而变化(高频)

  • flex布局
  • position布局
  • css3计算宽度
  • float布局

flex布局

// html
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div> // css .box {
display: flex;
}
.left {
width: 200px;
}
.right {
flex: ;
}

右侧div设置flex:1  自动填充满容器。

position布局

//    html

<div class="box">
<div class="left"></div>
</div> // css .box {
padding-left: 200px;
width: %;
position: relative;
}
.left {
position: absolute;
width: 200px;
left: ;
}

用pading将要显示的右侧内容挤到右边,常用在图文列表

css3计算宽度

// html

<div class="box">
<div class="left"></div>
<div class="right"></div>
</div> // css .left {
float: left;
width: 200px;
}
.right {
float: left;
width: calc(% - 200px);
}

通过css3的calc函数可以计算宽度来定义宽度

float布局(面试官想要的答案)

// html

<div class="box">
<div class="left"></div>
<div class="right">
<div class="inner"></div>
</div>
</div> // css .left {
float: left;
width: 200px;
margin-right: -200px;
}
.right {
float: left;
width: %;
}
.inner {
margin-left: 200px;
}

根据float元素的margin特性布局,兼容性好。以上css都没有给出高度和颜色区分。

javascript方面

1. 闭包和作用域、this的理解

2. 原型链有关的问题

3. es6方面:let块级作用域、generator函数的应用

4. javascript中的setTimeout、promise异步的考查

5. jQuery中的设计模式

  • 原型模式  : 整个jQuery库的构造就是一个原型继承的模式。
  • 发布/订阅模式:事件监听模块为发布订阅模式
  • 代理模式:jQuery中内置proxy方法便是代理模式
  • 外观模式:post、get等方法是对ajax的包装
  • 等等

6. jsonp的实现原理

js算法技巧方面

1. a[n] 数组中取值是 [1, n-1] ,也就是必然有重复数字,在时间复杂度和空间复杂度最小的情况下找出一个重复数字

博主也不懂复杂度,用正则写了个, a[n].toString().match(/(\d+).*?\1/)[1]

2. 两个单向链表的交点

博主懵逼,不懂数据结构不知啥叫链表交点。后来查了下就是两个链表成Y状,相交后必定后面的数据一样。这就不难了。

3. 给定一个 ram函数,该函数有50%几率返回0 和 50%几率返回1,根据这个ram函数写一个ran函数,ran函数有25%几率返回0 1 2 3。

博主脑子转不快,很慢很慢才理清楚这个简单的题,很尴尬。

http方面

1.  在浏览器输入一个网址到页面呈现,计算机做了哪些事情。

在一家公司的CTO问的,尴尬了,之前博主故意百度看了一遍这个问题,结果也是忘得一干二净。

在前端层面上就是 发送请求资源 - 建立连接 -  数据传输 - 解析数据

有很多大神写了完整过程: http://blog.csdn.net/xingxingba123/article/details/52743335      http://www.cnblogs.com/webhb/p/5615063.html

2. put和post请求的区别

一般情况我们用post请求来插入一条数据,用put请求更新一条数据。插入与更新的区别。。。

3. cookie和localStorage、sessionStorage的区别

cookie存储量小,存储数据小,跟随着http请求传输。

几次面试的总结,希望尽快掌握,下一次面试表现好一些

上一篇:optimizer(代码分析)


下一篇:微信小程序豆瓣电影项目的改造过程经验分享