网易前端面试总结

2015-08-19

下午6点接到网易前端的面试电话，还是昨天提前预约的，而且今天超级准时的给我打电话，赞一个！！

1. 前端页面优化

答：1. 减少http请求，2.-e 3.尽量静态页面，从简原则 4.代码规范

 

1. Css盒模型

答：magin+border+padding+width ,

当设置background颜色的时候，会覆盖padding+width（其实还有border，因为当border为虚线dashed时，background背景色会嵌进去。）

还有原来ie浏览器还不兼容！！！

w3c中的盒子模型的宽:包括margin+border+padding+width;

    width: margin*2+border*2+padding*2+width;

    height: margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的宽度为：20*2+10*2+10*2+200=280px; 高度：20*2+10*2+20*2+50=130px;盒子的实际宽度大小为:10*2+10*2+200=240px;实际高度：10*2+10*2+50=90px;

 

用ie的盒子模型解释 ：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;（ie5之前的版本）

我们常常理解的盒子模型是w3c这样的盒子模型

 

解决问题

1. 避免导致这个问题的情景
2. 插入额外的标记
3. 使用条件注释判断语句
4. 使用CSS hacks

解决方法3：这些内容只能在IE/Win中被解析，下面的代码只有在IE6以下的版本中被执行：

<!--[if lt IE 6]>
<style type="text/css">
  #news {width:250px}
</style>
<![endif]-->

解决方法4：css hacks

#news {

  padding:10px;

  border:1px solid;

  width:250px;

  width:228px;

}

所有的浏览器都会看到并理解“width:250px”，但IE 5.*/Win不会读取下面的一行，width:228px，但这行会被其余的浏览器解析。所以最后，IE 5.*/Win得到的width值是250px，其他浏览器得到的是228px。这样，在全部的浏览器中我们的新闻列表的总宽度就一致了。

1. Css选择器，（特别是后代选择器）， >

答：

.class	.intro	选择 class="intro" 的所有元素。	1
#id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 <p> 元素。	1
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
element element	div p	选择 <div> 元素内部的所有 <p> 元素。	1
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。(即不包括孙元素)	2
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[attribute|=value]	[lang|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2

 

 

1. Position定位

答：①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。

②relative ：相对定位；脱离文档流的布局，但还在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

③fixed ：固定定位；定位元素是相对于浏览器窗口。不随着滚动条的移动而改变位置。（这里的浏览器窗口据我理解应该是可视区）

④static ：默认值；默认布局。

1. 事件代理

答： JavaScript事件是所有网页互动性的根基（我指的是真正的互动性，而不仅是那些CSS下拉菜单）。在传统的事件处理中，你按照需要为每一个元素添加或者是删除事件处理器。然而，事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越大。JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。

它是怎么运作的呢？

      事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。任何一个事件的目标元素都是最开始的那个元素，在我们的这个例子中也就是按钮，并且它在我们的元素对象中以属性的形式出现。使用事件代理，我们可以把事件处理器添加到一个元素上，等待一个事件从它的子级元素里冒泡上来，并且可以得知这个事件是从哪个元素开始的。

这对我有什么好处呢？

      想象一下现在我们有一个10列、100行的HTML表格，你希望在用户点击表格中的某一单元格的时候做点什么。比如说我有一次就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。

用代码写出来是什么样呢？

     代码很简单，我们所要关心的只是如何检测目标元素而已。比方说我们有一个table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。editCell函数需要判断传到table来的事件的目标元素。考虑到我们要写的几个函数中都有可能用到这一功能，所以我们把它单独放到一个名为getEventTarget的函数中：

function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

e这个变量表示的是一个事件对象，我们只需要写一点点跨浏览器的代码来返回目标元素，在IE里目标元素放在srcElemnt属性中，而在其它浏览器里则是target属性。

接下来就是editCell函数了，这个函数调用到了getEventTarget函数。一旦我们得到了目标元素，剩下的事情就是看看它是否是我们所需要的那个元素了。

function editCell(e) 

{
           var target = getEventTarget(e);
           if(target.tagName.toLowerCase() =='td') 

           {
                // DO SOMETHING WITH THE CELL
          }
}

在editCell函数中，我们通过检查目标元素标签名称的方法来确定它是否是一个表格的单元格。这种检查也许过于简单了点；如果它是这个目标元素单元格里的另一个元素呢？我们需要为代码做一点小小的修改以便于其找出父级的td元素。如果说有些单元格不需要被编辑怎么办呢？此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称，然后在把单元格变成可编辑状态之前先检查它是否不包含那个样式名称。选择总是多样化的，你只需找到适合你应用程序的那一种。

有哪些优点和缺点呢？

      JavaScript事件代理带来的好处有：

那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。 
在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。 
潜在的问题也许并不那么明显，但是一旦你注意到这些问题，你就可以轻松地避免它们：

你的事件管理代码有成为性能瓶颈的风险，所以尽量使它能够短小精悍。 

不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。 

在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。 

 

1. 创建和插入元素

答：创建元素documents.createElement,

父元素.appendChild( 新元素 )，插入在最后。

父元素.insertBefore(新元素，定位元素(即插入在改元素之前) )，

删除子元素: 父元素.removeChild(待删除的子元素)

如何在指定元素的后面插入元素，实现insertAfter的方法：(用原生js)

先找到该元素的父元素，然后判断该元素是否是最后一个元素，如果是最后一个元素就直接在父元素上appendChild，如果不是父元素，就找到该元素的下一个元素，然后在它的下一个元素之前用insertBefore插入。

 

1. bootstrap的自适应是如何实现的?

答：

1. 事件发生的顺序？

答：事件产生的顺序变成：

事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“捕获阶段(Capture)”；
执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”。

1. js中基本数据类型，如何判断？

答：js中的数值类型有：字符串、数字、布尔、数组、对象、Null、Undefined

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔。

判断数据类型方法：

1.  使用 typeof方法。

2.  使用 instanceof  的方式

使用typeof 可以区别出String 和 Object 的类型。

但是如果对一个数组进行typeof 的话， 发现值也是 object , 也就是说， 无法判断出0bject 和 Array 的区别.

2. instanceof 是对象型使用的方法。

对于字符串来说有 基本类型的String 和 对象型的String, 这个Java 的概念有点类似。

比较以下的区别：

var str1 = "11";

var str2 = new String("11");

alert(typeof(str1)); // string

alert(typeof(str2)); // object

alert(str1 instanceof String); //false

alert(str2 instanceof String); //true