前端开发面试题
上周参加了几家面试，总结了一些遇到值得记录和分享的一些面试题。
图片来自网络
阿里:
-
跑马灯最后一张滚回到第一张，怎样优化“视觉倒退”？
实现思想：无论是几张，是否跳跃，就当做两张切换（css:left,js:dom节点修改） -
多行末尾的省略号怎样实现？
单行实现方式：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
webkit内核实现方式：
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
或者，限制高度，超出的隐藏，在末尾加上一个内容为省略号的元素：
<div>阿斯顿快来发发发发发发发发发发发发发发发发发发发发发发发发发发</div>
<style type="text/css">
div{
width: 200px;
overflow: hidden;
text-overflow:ellipsis;
height: 36px;
line-height: 18px;
position: relative;
z-index: 11;
}
div:after{
content: "...";
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
text-align: right;
z-index: 12;
background: #fff;
}
</style>
ps:阿里真是不一样，一位很有(不)个(顺)性(眼)的开发直接用电脑让我展示线上的项目相应的问问题。
人人网：
-
display:none,visibility:hidden在渲染上的区别？
1.空间占据：visibility:hidden占位不显示；
2.回流与渲染：visibility渲染效率高；
3.继承性:display：none会跟着父级一起消失。 -
原生ajax都分几步？
1.创建XMLHttpRequest对象；
2.判断是否为IE内核；
3.发送请求；
4.实行onreadystatechange()方法
5.获得数据 -
JQuery的ajax方法？
$.ajax(){
url:'/heihei.com/get',
data:data,
async:true,
type:"post",
dataType:'json',
success:funciton(){},
error:function(){}
}
- jQuery的事件代具体理怎么写？
$(selector).on("events", "dom", handler(){})
- 银行卡号每四个加中杠？
var number = '1234567890ab';
var newNumber = number.substring(0,4) + '-' + number.substring(4,8) + '-' + number.substring(8,12);
console.log(newNumber);
- 问以下代码的输出结果
var tt = '你好';
function a(){
alert(tt);
var tt = '再见';
alert(tt)
}
a();
奇虎360：
- 问以下代码的输出结果
a();
b();
function a(){console.log('a')}
var b = function(){console.log('b')}
-
赋值，赋址的区别？
答案随后补充 -
css3 新的布局方案？
column:分栏；
Flex：display:flexbox;
详细介绍，随后将单独开贴分享。 -
css3 新选择器
nth-child等 -
transform的基准点怎么控制？比如要以div左下角为基准旋转
transform-origin -
圆型怎么做？相关的兼容问题
宽高相等的块级元素，border-raidus：50%；
京东
-
DocmentType的作用
<!DOCTYPE html>定义文档的类型，使得浏览器将其当做对应的文档模式解析，避免怪异模式。 -
requireJS和seajs区别？
都是用来处理js模块加载，采用的定义规范不同，requireJS采用的是AMD，seajs采用的是CMD.
ps:详细介绍可以参考另外一篇文章《浅析JS模块规范：AMD，CMD，CommonJS》 -
客户端保存密码登录？
答案随后补充，提示：sessionID -
问以下代码的输出结果
var t = true;
setTimeout(function(){ t = false; }, 1000);
while(t){ }
alert('end');
- 问以下代码的输出结果
var a = 10;
var ob = {
a:2,
fn:function(){
console.log(a);
console.log(this.a);
}
}
ob.fn();
var f = ob.fn;
f();
58赶集
-
兼容IE6转盘（指针旋转效果）
实现方法一：使用背景透明的指针图片按时循环样式，每个样式用background-position控制相应的角度。 -
中奖名单的“无缝”滚动
*答案随后补充 -
less和Sass的区别
都是css的预编译器。
-sass基于ruby；
-sass用'$'定义变量，less用'@';
-性能(略)
-核心实现编译的方式(略) -
css3 animation, jQuery animate(), css3 transition之间的区别？
*答案随后补充 -
浮动，相对定位，绝对定位，在多个元素的文档流中怎样渲染，之间的影响？
*答案随后补充 -
作用域链的理解
*答案随后补充 -
拖拽功能的实现思路
*答案随后补充
其他：
- callee求斐波那契数列（兔子数列）
function power(num){
if(num < 2) {
return 1;
} else{
return power(n-1) + power(n-2);
}
}
- 问以下代码的输出结果
typeof true; //"boolean"
typeof Boolean(true); // ?
typeof new Boolean(true); // ?
typeof (new Boolean(true)).valueOf(); // ?
- 问以下代码的输出结果
var fun = function(){
var sub = function(){
return (new Boolean(true)).valueOf();
}
return sub;
}
typeof fun();
- 问渲染的样式
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class='classB classA'> 123 </p>
</body>
</br></br>
推荐阅读:前端开发面试经, 从面试官角度分析前端面试。
