前端面试总结

1、有多个div，部分div里面含有多个p标签，如何快速获取p标签

开始我的想法是遍历，但面试官说，如果div很多的情况呢，提示知道数据结构么，又提示了二分法

2、360浏览器兼容问题

因为360浏览器使用的也是IE内核，也会继承IE的样式兼容问题

a、双边距BUG float引起的 使用display

b、3像素问题 使用float引起的 使用dislpay:inline -3px

c、超链接hover 点击后失效 使用正确的书写顺序 link visited hover active

d、Ie z-index问题 给父级添加position:relative

e、Png 透明 使用js代码 改

f、Min-height 最小高度 ！Important 解决’

g、select 在ie6下遮盖 使用iframe嵌套

h、为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

3、jquer有哪些选择器

 ID选择器，类选择器，标签选择器，组合选择器，伪类选择器，伪元素选择器

4、

<div id="city" class="city1 city2 city3 city4 city5 city6 city7 city8
city9 city10 city11 city12 city13 city14 city15 city16 city17 city18 
city19 city20  city21 city22 city23 city24 city25 city26 city27 city28 
city29 city30 city31 city32 city33 city34 city35 city36 city37 city38 
city39 city40 city41 city42 city43 city44 city45 city46 city47 city48 
city49 city50  city51 city52 city53 city54 city55 city56 city57 city58 
city59 city60 city61 city62 city63 city64 city65 city66 city67 city68 
city69 city70 city71 city72 city73 city74 city75 city76 city77 city78 
city79 city80 city81 city82 city83 city84 city85 city86 city87 city88 
city89 city90  city91 city92 city93 city94 city95 city96 city97 city98 
city99 city100" style="width=100px;height="100px;">
</div>
<style>
    #city{background:red;}
     .city1.city2.city3.city4.city5.city6.city7.city8.city9.city10  
.city11.city12.city13.city14.city15.city16.city17.city18.city19.city20.cit
y21.city22.city23.city24.city25.city26.city27 
.city28.city29.city30.city31.city32.city33.city34.city35.city36.city37.cit
y38.city39.city40.city41.city42.city43.city44.city45.city46.city47.city48.
city49.city50.city51.city52.city53.city54.city55.city56.city57.city58.city
59.city60.city61.city62.city63.city64.city65.city66.city67.city68.city69.c
ity70.city71.city72.city73.city74.city75.city76.city77.city78.city79.city8
0.city81.city82.city83.city84.city85.city86.city87.city88.city89.city90.ci
ty91.city92.city93.city94.city95.city96.city97.city98.city99.city100
{background:green;}    
</style>

最终的样式还是红色

5、getElementById（"div"）返回的对象是div Dom对象

那getElementsByClassname返回的是一个类数组对象，这个对象可以调用数组的sort方法么，不可以，因为数组通过原型可以往上来查找继承Array.protorype，而类数组继承的是NodeList　

6、使用css和HTML实现一个三角形

主要使用的border

具体实现见下：

{
    0;
    height:0;
    border-left:100px solid transparent;
    border-top:100px solid transparent;
    border-right:100px solid transparent;
    border-color:red;  
}

7、使用JavaScript实现一个trim函数，兼容IE，Firefox　　

8、下面输出结果是

var foo = {n:1};
var bar = foo;
var foo.x=foo={n:2};
console.log(foo.x);

会有错误：Uncaught SyntaxError: Unexpected token .

var foo = {n:1};
var bar = foo;
foo.x=foo={n:2};
console.log(foo.x);

输出的结果是：undefined　　

9、　

var name = “window”;
var obj = {
  var name = child;
  getName : function(){
    return this.name;
  }
}
var func = obj.getName;
alert(func());

输出结果：　　

10 、

'I'm a djkskl kdjkdjk'.split('').reverse().join('');

输出结果：uncaught SyntaxError: Unexpected identifier

因为

'I'm a djkskl kdjkdjk'

本身不是一个字符串，若把I后面的符号去掉才可以

"i'm a lasagna hog".split("").reverse().join(""); 

输出的结果是：goh angasal a m'i　　

11、若父元素的宽高未知，子元素的宽高已知，要求：子元素在父元素中实现垂直水平居中(所有实现方法)　　

方法一：通过定位

方法二：通过运用transform

方法三：通过使用flex

若元素的宽高未知，怎么实现元素的垂直水平居中，请写出所有的实现方法？

12、(window.foo||(window.foo='bar'));

输出的结果是:"bar"　

只有window.foo为假时的才是上面答案，否则就是它本身的值。

13 10+"20"的结果是1020，相当于字符串拼接。

14、Angualr路由是怎么实现的

通过路由，模板，when

15、JavaScript看了那些书

16、localStorage和sessionStorage的区别

localStorage和sessionStorage都是浏览器本地存储

localStorage是本地持久化存储，数据不会丢失，sessionStorage是本地会话存储，在会话窗口关闭后数据会丢失。

17、jsonp的原理

借用script标签没有跨域限制的这一漏洞来实现的

18、如果本地的存储被禁用的，怎么存储临时数据？

19、有如下代码片段：

var obj={
  a:1,
  b:function(){
    alert(this.a)
  }
};
var fun = obj.b;
fun();

运行的结果是：alert:undefined;

this在此处指向全局，但全局没有声明a,所以会返回undefined。　　

20、javascript typeof返回哪些类型

object，function，string，number，undefined，boolean

21、javascript强制类型转换和隐式类型转换

强制：parseInt,parseFloat,Number

隐式：==，===

22、javascript有哪些全局函数和全局属性

全局函数：decodeURI,encodeURI,eval,escape,isFinite,isNaN,Number,parseInt,parseFloat,string

全局属性：Infinity,NaN,undefined

23、以下输出的结果是？

var name = "World";
(function(){
   if(typeof name === "undefined"){
     var name = "Jack";
     console.log('Goodbye ' + name);
   }else{
     console.log('Hello ' + name);
   }
})();

Goodbye Jack考察时作用域的问题，由于function是一个闭包，相当于一个块级作用域，是不能访问外部的name属性值的。

24、性能优化的方法

a、减少HTTP的请求次数

b、前端模板 JS+数据

c、减少Dom的操作次数，用innerHTML代替Dom操作

d、当需要设置的样式很多时设置className而不是直接操作style。

e、少用全局变量，缓存DOM节点查询节点的结果，减少IO操作

f、避免使用CSS Expession(css表达式)

h、图片预加载

i、避免在页面的主体布局中使用table，table要其中的内容完全下载后，才会显示出来，要比div+css慢

开放性问题：

如果上司交给你一个问题，这个问题很难解决，而且可用的资源很少，公司没有多余的人员供你派遣，让你一周之内完成，但是你一周确定是完成不了的，这个时候你怎么办 ？