前端面试可能问的问题

转自CSDN雄领IT

iframe有哪些优点和缺点：

缺点：
① iframe会阻塞主页面的Onload事件；
② 搜索引擎的检索程序无法解读这种页面，不利于SEO;
③ 会影响页面的并行加载。
什么是并行加载：同一时间针对同一域名下的请求。一般情况，iframe和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的。
怎样解决：使用js动态给iframe的src加载页面内容，示例代码如下

 
 document.getelementbyid("fram").src="a2.html"

优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
6.方便制作导航栏

盒子模型你是怎么理解的？

1）盒子模型有两种，W3C和IE盒子模型

（1）W3C定义的盒子模型包括margin、border、padding、content ，元素的width=content的宽度

（2）IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border

回答：
我个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。
（1） content-box 元素的width=content+padding+border
（2） border-box 元素的width=width（用样式指定的宽度）
（3）对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效
（4）对于相邻的块级元素margin-bottom和margin-top 取值方式
1）都是正数：取最大值

距离=Math.max(margin-botton,margin-top)

2）都是负数：取最小值

距离=Math.min(margin-botton,margin-top)

3）上面是正数，下面是负数或者上面是负数，下面是正数：正负相加

距离=margin-botton+margin-top

元素定位有哪些？

position为元素定位属性，包含以下属性值

absolute绝对定位

相对位置为父元素为非static的第一个父元素进行定位。

fixed 固定定位（老IE6不支持）

相对于浏览器窗口进行定位。

relative相对定位

相对于其正常（默认布局）位置进行定位。

加分项：

1.所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
2.absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
3.absolute定位忽略padding，相对位置为相对定位容器的左上角内边框

样式导入有哪些方式？

样式导入方式

link
import

使用方式

link的使用

import的使用

不同点
link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件

兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的
在样式表文件可以使用import导入其它的样式表文件，而link不可以
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

加分项

import的写法比较多
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
推荐使用 @import url(index.css);

::before 和:before有什么区别？

相同点
都可以用来表示伪类对象，用来设置对象前的内容
:befor和::before写法是等效的
不同点
:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好，不过在H5开发中建议使用::before比较好

加分项

伪类对象要配合content属性一起使用
伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
伪类对象的特效通常要使用:hover伪类样式来激活

css样式的优先级是怎么样的？

样式优先级规则
1.优先级顺序为：!important>style>权重值

如果权重相同，则最后定义的样式的起作用，应该避免这种情况出现
权重规则
标签的权重为1
class的权重为10
id的权重为100

如何居中一个元素（正常、绝对定位、浮动元素）?

（一）元素水平居中的方式
1）行级元素水平居中对齐（父元素设置 text-align:center）

块级元素水平居中对齐（margin: 0 auto）
3）浮动元素水平居中

宽度不固定的浮动元素

.outerbox{
float:left; 
position:relative; 
left:50%; 
} 
.innerbox{  
float:left; 
position:relative; 
right:50%; 
}

 
  我是浮动的

宽度固定的互动元素

 .outerbox{
     background-color:pink; /*方便看效果 */  
     width:500px ; 
     height:300px; /*高度可以不设*/
     margin: -150px 0 0 -250px; /*使用marin向左移动250px，保证元素居中*/
     position:relative;   /*相对定位*/
     left:50%;
     top:50%;
 }


   我是浮动的

4）让绝对定位的元素水平居中对齐

.center{
         position: absolute; /*绝对定位*/
         width: 500px;
         height:300px;
         background: red;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0; /*此处不能省略，且为0*/
}

（二）元素垂直居中对齐
1）对行级元素垂直居中（heiht与line-height的值一样）
2）对块级元素垂直居中对齐
2.1 父元素高度固定的情况

1）父元素的height与line-height值相同

2）需要垂直居中的元素

vertical-align:middle;// 垂直居中对齐

display:inline|inline-block 块级元素转行级元素
2.2 父元素高度不固定的情况

父元素的padding-top和padding-bottom一样

CSS样式-display有哪些作用？

元素默认的display值的情况如下
block(块级元素)

、

……
inline（内联元素）

3）使用 new 实例化对象，在构造函数中的this指向实例化对象。

var Show=function(){
    this.myName="Mr.Cao";   //这里的this指向的是obj对象
}
var obj=new Show();

4）使用call或apply改变this的指向

var Go=function(){
     this.address="深圳";
}
var Show=function(){
     console.log(this.address);//输出 深圳
}
var go=new Go();
Show.call(go);//改变Show方法的this指向go对象

加分项

用于区分全局变量和局部变量，需要使用this
2.返回函数当前的对象，看jquery1.8.3源码。
3.将当前的对象传递到下一个函数，看jquery1.8.3源码。

同步和异步有什么区别？

同步的概念

同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。

异步的概念

异步，是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。

谈谈你对模块化开发的理解？

什么是模块化

所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数
（一）使用函数封装

functionfunc1(){
　　　　//...
}
functionfunc2(){
　　　　//...
}

上面的函数func1 ()和func2 ()，组成一个模块。使用的时候，直接调用就行了。这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
（二）使用对象封装

为了解决上面的缺点，可以把模块写成一个对象，所有的模块成员都放到这个对象里面。

varobj = {
    age : 0,
    func1 : function (){
        //...
    },
    func2 : function (){
        //...
    }
};

上面的函数func1 ()和func2 (），都封装在obj对象里。使用的时候，就是调用这个对象的属性。
　obj.func1();
这样做也是有问题的，变量可以被外面随意改变而导致不安全。比如，年龄被修成负数。
obj.age = -100;
如何保证对象的属性不被访问了？
（三）立即执行函数写法

使用"立即执行函数"（Immediately-Invoked FunctionExpression，IIFE），可以达到不暴露私有成员的目的。这个也是闭包处理的一种方式。

var oj= (function(){
　　　　var _age= 0;
　　　　var func1= function(){
　　　　　　//...
　　　　};
　　　　var func2= function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : func1,
　　　　　　m2 : func2
　　　　};
})();

使用上面的写法，外部代码无法读取内部的age变量。
console.info(obj.age);//undefined
（四）放大模式
如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"（augmentation）。在原有的基础上扩展更多的方法。

var obj =(function (mod){
　　　　mod.func3= function () {
　　　　　　//...
　　　　};
　　　　returnmod;//方便方法连续调用
})(obj);

（五）宽放大模式（Loose augmentation）

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"。

　　var obj =( function (mod){
　　　　//...
　　　　returnmod;
　　})(window.obj|| {});//确保对象不为空

（六）输入全局变量

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

(function(window, undefined ) {
  ……
})(window );

这是jQuery框架的源码，将window对象作为参数传入，这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

目前，通行的JavaScript模块规范共有两种：CommonJS和AMD。

如何实现浏览器内多个标签页之间的通信?

方法一：使用localStorage
使用localStorage.setItem(key,value);添加内容
使用storage事件监听添加、修改、删除的动作

window.addEventListener("storage",function(event){
        $("#name").val(event.key+”=”+event.newValue);
});

方法二、使用cookie+setInterval


 $(function(){
        $("#btnOK").click(function(){
            varname=$("#name").val();
            document.cookie="name="+name;
        });
    });
    //获取Cookie天的内容
    function getKey(key) {
        return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];
    }
    //每隔1秒获取Cookie的内容
    setInterval(function(){
        console.log(getKey("name"));
     },1000);

call() 和 apply() 的区别？

相同点：两个方法产生的作用是完全一样的，都用来改变当前函数调用的对象。
不同点：调用的参数不同，比较精辟的总结：
foo.call(this,arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)
使用
1.call的使用
语法
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj 可选项。将被用作当前对象的对象。
arg1,arg2, , argN 可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

2.apply()
apply与call的功能几乎一样，第一个参数意义都一样，只是第二个参数有点不同apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，call从第二个参数开始，依次传值给调用函数的参数

eval是做什么的？

eval()的作用
把字符串参数解析成JS代码并运行，并返回执行的结果；

eval("2+3");//执行加运算，并返回运算值。
eval("varage=10");//声明一个age变量

eval的作用域

functiona(){
 eval("var x=1"); //等效于 var x=1;
 console.log(x); //输出1
}
a();
console.log(x);//错误 x没有定义

说明作用域在它所有的范围内容有效

注意事项
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
其它作用
由JSON字符串转换为JSON对象的时候可以用eval

js延迟加载的方式有哪些？

1.defer 属性

浏览器会并行下载 file.js和其它有 defer 属性的script，而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了，超过10多年了！Firefox从 3.5 开始支持defer属性。
注：所有的defer脚本保证是按顺序依次执行的。
2.async 属性

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox3.6、Opera 10.5、IE 9和最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有IE 都支持异步加载。
3.动态创建DOM方式

4.使用Jquery的getScript()方法

  $.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
        console.log("脚本加载完成")
  });

new操作符具体干了什么呢?

new共经过了4个阶段
1、创建一个空对象

var obj=new Object();

2、设置原型链

var result =Func.call(obj);

3、让Func中的this指向obj，并执行Func的函数体。

var result =Func.call(obj);

4、判断Func的返回值类型：
如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

if (typeof(result) == "object"){
  func=result;
}
else{
    func=obj;;
}

CSS3有哪些新特性？

1.CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

@Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

圆角
多列布局（multi-column layout）
5.阴影（Shadow）
6.CSS3 的渐变效果
7.css弹性盒子模型
CSS3制作特效

Transition 对象变换时的过渡效果

transition-property 对象参与过渡的属性
transition-duration 过渡的持续时间
transition-timing-function 过渡的类型
transition-delay 延迟过渡的时间

Transforms 2D转换效果

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

Animation动画特效

html5有哪些新特性、移除了那些元素？

（一）.H5新特性
增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

绘画 canvas;
本地离线存储 localStorage
长期存储数据，浏览器关闭后数据不丢失;
1.特点
数据永久存储，没有时间限制；大小限制5M(够用了)；只存储字符串。
2.数据存取方式

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
var b2= localStorage.key(0);//获取第一个key的内容
localStorage.removeItem("c");//清除c的值
localStorage.clear();//清除所有的数据

推荐使用：
getItem()
setItem()
removeItem()
3.事件监听

if(window.addEventListener){
 window.addEventListener("storage",handle_storage,false);//
}else if(window.attachEvent){ //兼容IE
 window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
 }

对象e为localStorage对象，Chrome、Firefox支持差，IE支持较好。

sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage
用于媒介回放的 video和 audio 元素;
语意化更好的内容元素，比如article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker(专用线程)
websocketsocket通信
Geolocation 地理定位
（二）移除的元素

纯表现的元素
默认字体，不设置字体，以此渲染
字体标签
水平居中
下划线
大字体
中横线
文本等宽