面试题100——120

1.CSS选择器的优先级排序，怎么计算权值？

总体来说：内联样式 > id>class=属性选择器=伪类选择器=伪元素选择器>标签，大致分为四个等级：

一等：代表内联样式，如: style=””，权值为1000；

二等：代表ID选择器，如：#content，权值为100；

三等：代表类，伪类和属性选择器，如.content，权值为10；

四等：代表类型选择器和伪元素选择器，如div p，权值为1；

2.CSS的继承选择器，.one. two和.one > .two的区别？两个同级类选择器连着一起写有什么作用？(权值相加)

区别：

.one .two，匹配.one下所有包含.two的标签，包含子孙元素

.one>.two，匹配.one下所有包含.two的标签，只包含子元素

作用：

权值相加，匹配既包含.one又包含.two类名的标签

3.CSS的引用方式有哪些？它们的区别？

大致有三种：
嵌入式CSS样式表：比较适用于网页比较少CSS比较简单的网页制作
链接式CSS样式表：比较常用，用于比较复杂的CSS样式以及网页比较多的情况；
引入式CSS样式表：这个不是很常用，使用@import指令
<style type="text/css">
@import url(sheet1.css);
@import "sheet2.css";
</style>

4.如何解决页面内容加载缓慢的问题？

一、减少HTTP请求

二、使用CDN

三、添加Expires头

四、压缩组件

五、将样式表放在头部

六、将脚本放在底部

七、避免CSS表达式

八、使用外部的JavaScript和CSS

九、减少DNS查找

十、精简JavaScript

十一、避免重定向

十二、删除重复脚本

十三、配置ETag

十四、使Ajax可缓存

5.是否熟悉使用开发者工具？有没有使用过断点调试？

断点调试其实并不是多么复杂的一件事，简单的理解无外呼就是打开浏览器，打开sources找到js文件，在行号上点一下罢了。操作起来似乎很简单，其实很多人纠结的是，是在哪里打断点？

7.vue生命周期的理解？

Vue实例从创建到销毁的过程，就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 

8.v-if和v-show的作用相似，它们的区别？

对于``v-show```而言，当取值为假时，生成了这个元素，但却将这个元素通过 display:none 的方式隐藏了这个元素，所以在页面显示的时候就不显示

对于v-if而言，当取值为假时，不会生成这个元素，自然而然的也就不会在页面中显示

当频繁的要使某些元素隐藏或者出现的时候，应该使用v-show，因为v-if每次使元素隐藏或者出现时，都会将元素重新的的插入或删除从DOM树中，这些操作会产生很大的工作量
但v-show却不会存在这样的情况，因为v-show已经生成了这个元素，只是通过display:none将其隐藏掉了

9.display：none和visibility：hidden的区别？

display与元素的隐藏

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。   

visibility与元素的隐藏

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

display: none与visibility: hidden的区别
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性

1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别

2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

10.link和@import的区别？

@import是CSS提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等；
加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载；
link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别；
可以通过JS操作DOM，来插入link标签改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式；
建议使用link的方式引入CSS

11.null和undefined的区别？

1、undefined
表示“无”的原始值或者说表示“缺少值”，就是此处应该有一个值但是还没有定义
typeof undefined = undefined
转为数值为NaN
例如变量被声明了但没有赋值，就等于undefined；函数没有返回值默认返回undefined；对象没有赋值的属性，该属性的值为undefined

2、 null

1. 表示“没有对象”，即该处不应该有值
2. typeof null = object
3. 转为数值为0
4. 作为函数的参数，表示该函数的参数不是对象；作为对象原型链的终点

12.css有哪些选择符？可继承的属性有哪些？css3新增的伪元素有哪些？css优先级的计算？

CSS 选择符：
1.id选择器(# myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul > li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = “external”])
9.伪类选择器(a: hover, li:nth-child)

可继承的样式：
1.font-size
2.font-family
3.color
4.text-indent

不可继承的样式：
1.border
2.padding
3.margin
4.width
5.height

优先级算法：
1.优先级就近原则，同权重情况下样式定义最近者为准;
2.载入样式以最后载入的定位为准;
3.!important > id > class > tag
4.important 比 内联优先级高，但内联比 id 要高

CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

13.浏览器如何实现不同标签页的通信？

方法一：

localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。

方法二：

使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息

14.iframe的优缺点？

iframe的优点：
1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：
1.会产生很多页面，不容易管理。

2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发

15.js 的继承实现方式有哪些，列举两个例子？

一、原型链继承

优点：

• 简单易于实现，父类的新增的实例与属性子类都能访问

缺点：

• 可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面

• 无法实现多继承

• 创建子类实例时，不能向父类构造函数中传参数

二、借用构造函数继承（伪造对象、经典继承）

优点：

• 解决了子类构造函数向父类构造函数中传递参数
• 可以实现多继承（call或者apply多个父类）

缺点：

• 方法都在构造函数中定义，无法复用
• 不能继承原型属性/方法，只能继承父类的实例属性和方法

三、实例继承（原型式继承）

优点：

• 不限制调用方式
• 简单，易实现

缺点：

• 所有实例都会继承原型上的属性。
• 无法实现复用。不能多次继承（新实例属性都是后面添加的）

四、组合式继承 （组合原型链继承和借用构造函数继承）【常用】

优点：

• 函数可以复用
• 每个新实例引入的构造函数属性是私有的。
• 可以继承父类原型上的属性，可以传参，可复用。

缺点：

• 调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

五、寄生组合继承【常用】

寄生：

• 在函数内返回对象然后调用
  组合：
• 函数的原型等于另一个实例。
• 在函数中用apply或者call引入另一个构造函数，可传参

六、es6继承

//class 相当于es5中构造函数
//class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法，不能定义对象，变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性
class People{
  constructor(name='wang',age='27'){
    this.name = name;
    this.age = age;
  }
  eat(){
    console.log(`${this.name} ${this.age} eat food`)
  }
}
//继承父类
class Woman extends People{ 
   constructor(name = 'ren',age = '27'){ 
     //继承父类属性
     super(name, age); 
   } 
    eat(){ 
     //继承父类方法
      super.eat() 
    } 
} 
let wonmanObj=new Woman('xiaoxiami'); 
wonmanObj.eat();

16.eval是什么？

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行。

永远不要使用 eval！
eval() 是一个危险的函数， 它使用与调用者相同的权限执行代码。如果你用 eval() 运行的字符串代码被恶意方（不怀好意的人）修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个 eval() 被调用时的作用域，这也有可能导致一些不同方式的攻击。相似的 Function 就不容易被攻击。

eval() 通常比其他替代方法更慢，因为它必须调用 JS 解释器，而许多其他结构则可被现代 JS 引擎进行优化。

17.GET和POST的区别？何时使用POST？

（1）   GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

            POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

           GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

（2）然而，在以下情况中，请使用 POST 请求：

         1、无法使用缓存文件（更新服务器上的文件或数据库）

         2、向服务器发送大量数据（POST 没有数据量限制）

         3、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

18.用什么会导致内存泄漏？

1.什么是内存泄漏？

    内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

2.哪些操作会导致内存泄漏？

①setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。 
②闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

19.fixed和absolute的区别？

fixed:固定定位

absolute:绝对定位

区别很简单：

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动

常用场合：

1.fixed固定定位，只针对浏览器窗口定位，上下左右，不会随着窗口大小改变，固定不变，例如固定位置的小广告，常用于网站边缘的公司联系方式和快速回到顶部

2.absolute绝对定位，脱离文档流，没有父元素，上下左右设置是针对于浏览器窗口，不占据位置，会随着窗口大小与页面一起改变

20.js深度克隆的代码实现？

克隆的概念

浅度克隆：原始类型为值传递，对象类型仍为引用传递。

深度克隆：所有元素或属性均完全复制，与原对象完全脱离，也就是说所有对于新对象的修改都不会反映到原对象中。

由于引用类型数据存储在应用地址内存中，因此赋值复制的也是这一块地址，因此相当于两个数组对象引用了一块数据地址，所以对a或者b的任何操作或者改变都会体现在对象中。

为了避免这种情况，引入了深度克隆。

    function clone(obj){
        var buf;
        if(obj instanceof Array){
            buf = [];
            var i = obj.length;
            while(i--){
                buf[i] = clone(obj[i]);
            }
            return buf;
        }
        else if(obj instanceof Object){
            buf = {};
            for(var k in obj){
                buf[k] = clone(obj[k]);
            }
            return buf;
        }
        else{
            return obj;
        }
    }

或者精简的写法：

function clone(obj) {
  var o = obj instanceof Array ? [] : {};
  for(var k in obj) 
    o[k] = typeof obj[k] === Object ? clone(obj[k]) : obj[k];
  return o;
}

var a = [[1, 2, 3], [4, 5, 6, 7]];
var b = clone(a);
console.log(b);