一般的面试题

1. position的值, relative和absolute分别是相对于谁进行定位的?
2. 如何解决跨域问题
3. 谈谈你对webpack的看法
4. 说说你对作用域链的理解
5. 创建ajax过程

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

var xmlHttp = new XMLHttpRequest();

xmlHttp.open('GET','demo.php','true');

xmlHttp.send()

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

}

}

6. Web Worker 和webSocket

7. 对前端模块化的认识
AMD 是提前执行,CMD 是延迟执行。

AMD推荐的风格通过返回一个对象做为模块对象,CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

CMD模块方式
define(function(require, exports, module) {

// 模块代码

});

8. 谈谈性能优化问题

9. 快速 排序的思想并实现一个快排?

"快速排序"的思想很简单,整个排序过程只需要三步:

  (1)在数据集之中,找一个基准点

  (2)建立两个数组,分别存储左边和右边的数组

  (3)利用递归进行下次比较

<script type="text/javascript">

function quickSort(arr){
if(arr.length<=1){
return arr;//如果数组只有一个数,就直接返回;
}

var num = Math.floor(arr.length/2);//找到中间数的索引值,如果是浮点数,则向下取整

var numValue = arr.splice(num,1);//找到中间数的值
var left = [];
var right = [];

for(var i=0;i<arr.length;i++){
if(arr[i]<numValue){
left.push(arr[i]);//基准点的左边的数传到左边数组
}
else{
right.push(arr[i]);//基准点的右边的数传到右边数组
}
}

return quickSort(left).concat([numValue],quickSort(right));//递归不断重复比较
}

alert(quickSort([32,45,37,16,2,87]));//弹出“2,16,32,37,45,87”

</script>

10. jquery将一些原型属性和方法封装在了jquery.prototype中,为了缩短名称,又赋值给了jquery.fn,这是很形象的写法

11. ES6的了解

12. js继承方式及其优缺点

13. 用过哪些设计模式? 构造函数模式 ,工厂模式:

14. 说说你对闭包的理解

15 .如何实现浏览器内多个标签页之间的通信?浏览器本地存储 ,cookie 和session 的区别

sessionStorage和localStorage
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

16. 介绍一下box-sizing属性?

17. CSS3有哪些新特性?

CSS3实现圆角(border-radius),阴影(box-shadow),

对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询,多栏布局

border-image

18. 常见兼容性问题?

19. 解释下浮动和它的工作原理?清除浮动的技巧

20. DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

21. call() 和 apply() 的区别和作用?
var a = {
name:'JSLite.io', //定义a的属性
say:function(){ //定义a的方法
console.log("Hi,I'm function a!");
}
};
function b(name){
console.log("Post params: "+ name);
console.log("I'm "+ this.name);
this.say();
}

b.call(a,'test’);
22. 列举IE 与其他浏览器不一样的特性?

IE支持currentStyle,FIrefox使用getComputStyle

IE 使用innerText,Firefox使用textContent

滤镜方面:IE:filter:alpha(opacity= num);Firefox:-moz-opacity:num

事件方面:IE:attachEvent:火狐是addEventListener

鼠标位置:IE是event.clientX;火狐是event.pageX

IE使用event.srcElement;Firefox使用event.target

IE中消除list的原点仅需margin:0即可达到最终效果;FIrefox需要设置margin:0;padding:0以及list-style:none

CSS圆角:ie7以下不支持圆角

23 .请解释一下 JavaScript 的同源策略,为什么要有同源限制?
24. 说说你对Promise的理解
25. 实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制

26. 下面代码是什么意思,执行成功后输出什么结果,EventClick.bind改成EventClick.call会有什么变化?

var obj = {name:'JSLite.io'};
/**
* 给document添加click事件监听,并绑定EventClick函数
* 通过bind方法设置EventClick的this为obj,并传递参数p1,p2
*/
document.addEventListener('click',EventClick.bind(obj,'p1','p2'),false);
//当点击网页时触发并执行
function EventClick(a,b){
console.log(
this.name, //JSLite.io
a, //p1
b //p2
)
}

原文地址:https://www.cnblogs.com/laneyfu/p/7551183.html