前端面试题

HTML篇

1.html5有哪一些新特性？

1.新的文档类型  (New Doctype)   2.脚本和链接无需type   3.语义Header和Footer       4.Hgroup

5.标记元素                                       6.图形元素                       7.重新定义<small>              8.占位符 

9.必要属性                                      10.Autofocus 属性          11.Audio ，video支持 视频预载

2.不同浏览器的html差异

1）自定义属性问题     

  说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。   

  解决方法:统一通过getAttribute()获取自定义属性。

2）event.x与event.y问题     

    说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.     

   解决方法:使用mX(mX = event.x ? event.x : event.pageX)来代替IE下的event.x或者Firefox下的event.pageX.  

3）event.srcElement问题     

    说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.     

   解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target。请同时注意event的兼容性问题。  

4）textContent与innerText    

   IE中的innerText是需要对innerHTML的值进行           

          1、HTML转义（等同于XML转义，对<、&等转义字符进行处理）；         

         2、经过HTML解释和CSS样式解释；         

         3、之后又剔除格式信息之后留下的纯文本。      

  而FF中的textContent没有2、3步，在经过了HTML转义之后直接剔除所有html标签后得到的纯文本。   

7)png的透明问题，ie需要滤镜通道。

3.结构和表现相分离带来的好处主要有哪些？

  1.数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关 

2.保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版; 

3.由于结构清晰，数据的集成、更新和处理更加方便灵活； 

4.更有意义的搜索。

css篇

1.css3有哪些新特性

css3实现的新特性有： 圆角、阴影 文字阴影，旋转 线性渐变， 媒体查询，多背景 定位 多栏布局 缩放，倾斜

2.css清除浮动的集中方式

1.父元素上加overflow: hidden

2.子元素后再加一个用于清除浮动的br元素，写个专门清除浮动的.cb类加在它上面。上面的例子也可使用clear: left清除左浮动，为了方便才使用clear: both，最后不要忘了加上_display: inline兼容IE6。

3.父亲元素浮动的实现方式

只要父元素也跟着浮动的话，也可以达到效果。可是这样会影响后面元素的定位，而且有些时候父元素是定位死的，无法变成浮动。

4.overflow实现方式

在父元素上使用overflow: hidden可以达到清除浮动的效果，也可以是overflow: auto。可是通过overflow实现的清除浮动都有一个缺点，当子元素超出了父元素，父元素使用overflow: hidden的话，子元素超出的部分会被隐藏；使用overflow: auto的话，父元素上会出现滚动条，最后也别忘加上zoom: 1触发IE的hasLayout。

5.display:inline-block的实现方式

其实换个角度想想也可以不使用float来实现效果，那就是用display: inline-block，使得块级元素具有行内元素的特性。IE8以下不支持这个属性，但是有解决的方案就是加上*display: inline; zoom: 1;。为什么要加font-size: 0px?消除现代浏览器上出现的间距，但是在子元素上要重置font-size，除此之外还可以改变html代码缩进，去掉换行，写成一行。

6.用于现代浏览器的实现方式

这种用于现代浏览器的实现方式更加灵活了，可是不支持IE10以下的浏览器，flex-flow的两个值分别表示flex-direction（横向还是纵向）、flex-wrap（是否换行），

7.:after伪元素的实现方式

利用:after伪元素，实现在父元素内容后面清除浮动的效果。

最佳实现方式

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent:before,.parent:after {  content: "";  display: table;}.parent:after {  clear: both;}.parent {  zoom: 1;}.child {  width: 25%;  height: 50px;  float: left;}

javascript

1.javascript有哪几种数据类型？

String 类型、Null 类型、Number 类型、Boolean 类型、Object 类型，undefine。

2.如何判断javascript的类型

typeof函数与constructor属性 

typeof可以检查到变量是否有定义，而construct只能检查已定义变量的类型。

3.javascript的作用域

1.函数体内部，局部变量的优先级比同名的全局变量高

2.JavaScript没有块级作用域。

3.函数中声明的变量在整个函数中都有定义。

4.未使用var关键字定义的变量都是全局变量。

5.全局变量都是window对象的属性

4.javascript中数组的常用方法

1.toString()和valueOf() toString()方法，就是将数组拼接成字符串返回，默认情况下以逗号分隔。valueOf返回数组本身。

2.array.concat(item...) concat方法产生一个新数组，它包含了一份array的浅复制，并把一个或多个参数附加在后面。

3.array.join(separtor) join方法是把一个数组构造成一个字符串，它先把array中的每一个元素构造成一个字符串，接着用一个separtor分隔符把他们连 接起来，默认的分隔符为逗号‘,’。要想做到无间隔连接，可是使用空字符串做分隔符。

4.array.pop和array.push(item...)   pop和push方法使得数组都可以像堆栈一样工作，pop方法移除数组的最后一个元素并返回该元素。

                                                                          push方法把一个或者多个参数item附加到一个数组的尾部。和contact方法不同的是，如果item是一个数组，它会把参数数组作                                                                                       为单个元素整个添加到数组中，同时修改数组a，并返回到这个数组的长度值。

5.array.reverse()                                     reverse方法反转array里的元素的顺序，并返回数组本身

6.array.shift和array.unshift(item...)      shift方法移除数组的第一个元素，并返回这个弹出元素。如果这个数组是空的，返回undefined。

7.array.slice(start,end)                         slice方法就是从数组中切割一段，其长度为end-start。end默认长度为array.length

8.array.splice(start,deleteCount,item...)  splice方法是从array中移除一个或多个参数，并用新的item代替他们。返回一个包含移除参数的数组。

9.array.sort(comparefn)           sort方法对array中的内容进行排序，默认的比较函数把被排序的元素视为字符串。所以一般不能得到你期望的结果

10.array.sort(comparefn)  sort方法对array中的内容进行排序，默认的比较函数把被排序的元素视为字符串。所以一般不能得到你期望的结果

4.javascript中删除数组某元素的方法

1.delete方法:delete arr[1]  　　这种方式数组长度不变,此时arr[1]变为undefined了,但是也有好处原来数组的索引也保持不变,此时要遍                                                       历数组元素可以才用

2.数组对象splice方法:arr.splice(1,1);   这种方式数组长度相应改变,但是原来的数组索引也相应改变  　　splice参数中第一个1,是删除                                                                      的起始索引(从0算起),

3.Array.remove(dx)  功能:删除数组元素. 　  　参数:dx  删除元素的下标.  返回:在原数组上修改数组 

4.自定义删除数组的方法

5.在javascript中如何体现面向对象的三大特性的？

多态从某种意义上来说，多态是面向对象中重要的一部分，也是实施继承的主要目的。一个实例可以拥有多个类型，它既可以是这种类型，也可以               是那种类型，这种多种状态被称为类的多态。多态的表现形式很多，其中继承和重载都是多态的表现形式。

              

封装         就是把抽象出来的数据和对数据的操作封装在一起，数据被保护在内部，程序的其它部分只有通过被授权的操作(成员方法)，才能对数据进行操作。

继承          继承可以解决代码复用，让编程更加靠近人类思维。当多个类存在相同的属性(变量)和方法时，可以从这些类中抽象出父类，在父类中定义这些相同的属性和方法，                   所有的子类不需要重新定义这些属性和方法，只需要通过继承父类中的属性和方法。

           实现方法：1、对象冒充    2、通过call或者apply实现

6.什么是闭包？

闭包就是能够读取其他函数内部变量的函数。

闭包的作用  一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

7.javascript的类型转换

显示类型转换和隐式类型转换

8.动态加载如何执行

1,.直接document.write    2.动态改变已有script的src属性   3.方法三：动态创建script元素（异步） 方法四：动态创建script元素（同步）

方法五：XMLHttpRequest/ActiveXObject异步加载                 方法六：XMLHttpRequest/ActiveXObject同步加载

具体参见 http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/03/06/2946277.html

9.事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

【阻止事件冒泡例子】

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
{
    alert(obj.id);
    stopBubble(e)
}
//阻止事件冒泡函数
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
</script>

10.ajax是什么？ajax的交互模型？同步和异步的区别？如何解决跨域问题

 异步 JavaScript 及 XML.

AJAX 的交互模型（ AJAX 的过程）  

  用户发出异步请求；  

 创建 XMLHttpRequest 对象；  

 告诉 XMLHttpRequest 对象哪个函数会处理 XMLHttpRequest 对象状态的改变，为此要把对象的 onReadyStateChange 属性设置为响应该事件的 JavaScript 函 数的引用 

 创建请求，用 open 方法指定是 get 还是 post ，是否异步， url 地址；

 发送请求， send 方法 

 接收结果并分析 

  实现刷新

11.get与post的区别

1.GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。

2.GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），POST把提交的数据则放置在是HTTP包的包体中。

3.  因此对于GET提交时，传输数据就会受到URL长度的限制。  POST:由于不是通过URL传值，理论上数据不受限。

4.安全性:POST的安全性要比GET的安全性高。

12.如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件，JS文件与图片

把所有的CSS文件都放入一个样式表中,通过把所有的脚本放到一个文件中来减少HTTP请求的方法。js文件也采用同样的方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分。

13.Jquery源码是否尝试去读过，说说基本的架构或者jquery.fn.init中做了哪些判断

14.前端优化知识都知道哪些？

1.html页面优化 2.代码优化  3.JS优化 4.服务器方面优化

15.国内外的前端牛人都知道哪些？

JavaScript 语言：周爱民、老赵、玉伯、hax, 月影、CatChen, winter, 白露飞 等等

 DOM 和浏览器兼容性：winter, 司徒正美、屈超、怿飞 等等 

HTML 和 CSS：彪叔、aoao, 怿飞、macji 等等 类库框架：玉伯、JK, cnberg, yiminghe, 元彦 等等 

前端布道士：克军、玉伯、怿飞、秦歌、小马 等等