2018前端面试题大全

2018年3月19日22:05:09 发表评论 148

最近几天一直在刷前端面试题,总是感觉自己记得不是很清楚,所以写一篇2018前端面试题大全的文章,方便之后自己复习查阅,也方便有想了解前端的同学阅读。

JavaScript

原型

我们创建的每一个函数,都可以有一个prototype属性,这个属性指向一个对象。这个对象就是原型。

我们创建对象时,可以根据自己的需求,选择性的将一些属性和方法通过prototype属性挂载在原型对象上。每一个new出来的实例,都有一个proto属性,该属性指向构造函数的原型对象,通过这个属性,让实例的对象能够访问原型对象上的方法。

// 声明构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 通过prototye属性,将方法挂载到原型对象上
Person.prototype.getName = function() {
    return this.name;
}

var p1 = new Person('tim', 10);
var p2 = new Person('jak', 22);
console.log(p1.getName === p2.getName); // true

原型链

所有的函数都有一个叫做toString的方法,这个方法从何面来?
function foo() {}

上面这个foo函数是function对象的实例,而function的原型对象同时又是object的实例,这样就构成了一条原型链。原型链的访问和作用域链有很大的相似之处,它们都是一次单向的查找过程。所以foo函数就可以通过原型链访问处于原型链上对象的所有属性和方法,因此foo就可以访问到object上的toString方法。

作用域链

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,只能向上访问查找的,变量访问到window对象上就终止了。

闭包

理解一:是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量
理解二:当函数可以记住并访问所在的词法作用域时,就产生了闭包,这个函数持有对该词法作用域的引用,这个引用就叫做闭包
闭包本质还是函数,只不过这个函数绑定了上下文环境(函数内部引用的所有变量)

缺点:常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

作用(使用场景):可以用来管理私有变量和私有方法,将对变量(状态)的变化封装在安全的环境中,使得这些变量不能被外部随意修改,同时又可以通过指定的函数接口来操作。

闭包有三个特性:

  1. 函数嵌套函数
  2. 函数内部可以引用外部的参数和变量
  3. 参数和变量不会被垃圾回收机制回收

this

JavaScript的this总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。

this指向

  1. 作为普通函数调用(this指向全局对象window对象)
  2. 作为对象的方法调用(this指向该对象)
  3. 构造器调用(this指向用new返回的这个对象)
  4. call、apply、bind的调用(this指向第一个参数对象)

new操作符具体做了什么?

  1. 创建一个新对象
  2. 将构造函数的作用域赋给新对象(因此this就指向了这个新对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 返回新对象

继承

1、简单原型链继承

function super(){
    this.name = 'hzzly';
}
function sub(){
    // ...
}
Sub.prototype = new Super();    // 核心

缺点:修改sub.name后super.name也变了,因为来自原型对象的引用属性是所有实例共享的。

2、构造函数式继承

function Super(val){
    this.val = val;
    this.fun = function(){  // 实例函数
        // ...
    }
}
function Sub(val){
    Super.call(this, val);   // 核心
    // ...
}

缺点:无法实现函数复用,每个子类实例都持有一个新的fun函数,太多了就会影响性能,内存爆炸。

3、组合式继承

function Super(){
    this.name = 'hzzly';
}
// 原型函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
    Super.call(this);   // 核心
    // ...
}
Sub.prototype = new Super();    // 核心

缺点:子类原型上有一份多余的父类实例属性,因为父类构造函数被调用了两次,生成了两份,而子类实例上的那一份屏蔽了子类原型上父类的。。。又是内存浪费。

4、寄生组合式继承

function Super(){
    this.name = 'hzzly';
}
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
    Super.call(this);   // 核心
    // ...
}
Sub.prototype=Object.create(Super.prototype)   // 核心
Sub.prototype.constructor=Sub   // 核心

5、es6的class继承方式

class A {
}
class B extends A {
}
B.__proto__ === A   // true
B.prototype.__proto__ === A.prototype   // true

es6引入了class、extends、super、static(部分为ES2016标准)

null和undefined的区别?

  1. null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN。
  2. undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。
  3. null表示”没有对象”,即该处不应该有值。

call、apply、bind的区别

  • 三者都是用来改变函数的this对象的指向的。
  • 三者第一个参数都是this要指向的对象,也就是想指定的上下文。
  • call 传入的参数数量不固定,第二部分参数要一个一个传,用,隔开。
  • apply 接受两个参数,第二个参数为一个带下标的集合,可以为数组,也可以为类数组。
  • bind 是返回一个改变了上下文的函数副本,便于稍后调用;apply 、call 则是立即调用 。

本地存储

* sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
* localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

cookie和session

  1. cookie数据存放在客户的浏览器上,session数据放在服务器上。
  2. cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,考虑到安全应当使用session。
  3. session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用COOKIE。
  4. 单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。每次请求一个新的页面的时候Cookie都会被发送过去,与服务器进行交互。

XML和JSON的区别?

  • JSON相对于XML来讲,数据的体积小,传递的速度更快些。
  • JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
  • JSON对数据的描述性比XML较差。
  • JSON的速度要远远快于XML。

线程与进程的区别

  1. 一个程序至少有一个进程,一个进程至少有一个线程.
  2. 线程的划分尺度小于进程,使得多线程程序的并发性高。
  3. 进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。
  4. 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。
  5. 从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

渐进增强和优雅降级

  • 渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

  • 优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

性能优化

网页内容

  • 减少 http请求次数
  • 减少 DNS查询次数
  • 避免页面跳转
  • 缓存 Ajax
  • 延迟加载
  • 提前加载
  • 减少 DOM元素数量
  • 避免 404
    服务器

  • 使用CDN(内容分发网络)

  • 添加Expires或Cache-Control报文头
  • Gzip压缩传输文件
    CSS

  • 将样式表置顶

  • 用代替@import
    JavaScript

  • 把脚本置于页面底部

  • 使用外部JavaScript和CSS
  • 精简JavaScript和CSS
  • 去除重复脚本
  • 减少DOM访问
    图片

  • 优化图像

  • 优化CSS Spirite
  • 不要在HTML中缩放图片
  • favicon.ico要小而且可缓存

如何解决跨域问题?

jsonp、CORS、document.domain+iframe、window.name、window.postMessage

jsonp的原理是动态插入script标签

哪些操作会造成内存泄漏?

  1. 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
  2. 垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
  3. setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。

闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

Javascript垃圾回收方法

1、标记清除:这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。

2、引用计数:引用计数的策略是跟踪记录每个值被使用的次数,当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1,如果该变量的值变成了另外一个,则这个值得引用次数减1,当这个值的引用次数变为0的时 候,说明没有变量在使用,这个值没法被访问了,因此可以将其占用的空间回收,这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

说说严格模式的限制

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性,否则报错
  • 禁止this指向全局对象
  • 不能使用with语句
  • 增加了保留字
  • arguments不会自动反映函数参数的变化

缓存

浏览器缓存(Browser Caching)是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,

http缓存

http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件
判断expires,如果未过期,直接读取http缓存文件

indexDB

是一个在客户端存储可观数量的结构化数据,并且为这些数据添加索引进行高性能检索。

cookie

指一般网站为了辨别用户身份、储存在用户本地终端上的数据(通常经过加密)。cookie一般通过http请求中在头部一起发送到服务器端。一条cookie记录主要由键、值、域、过期时间、大小组成,一般用户保存用户的认证信息。

localstorage

localStorage是h5的一种新的本地缓存方案,加快下次页面打开时的渲染速度,除非主动删除数据,否则数据是永远不会过期的。

sessionstorage

也是h5的一种本地缓存方案,数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时, 之前的存储已经被清除。

写一个冒泡排序算法?

function maopao(arra) {
var num;
for(var i=0; i<arra.length; i++) {
    for(var j=0; j<arra.length-i-1; j++) {
        if(arra[j] > arra[j+1]) {
        num = arra[j];
        arra[j] = arra[j+1];
        arra[j+1] = num;

        }
    }
}
return arra;
}

var arrry=[85,24,63,17,31,17,16,86,50];

var s=maopao(arrry);

console.log(s);

HTML5

写10个左右H5的标签

<header><aside><article><footer><nav><setion>
<time><mark><summary><datalist>
<canvas><audio><video><figure><dialog>

简述jpg/Gif/png区别

Gif

  1. Gif是一种无损耗的图像格式
  2. Gif这种格式是支持动画的
  3. Gif可以是全透明,也可以是不透明

Gif的格式不适合照片,适合颜色要求不高图片,如图标等

Jpeg

  1. jpeg不支持透明
  2. 不支持动画

一般在web上是存在于摄影图片、数字照相机中

png

PNG 是一种常见的图像文件存储格式。以该格式存储的图片不仅能像 GIF 那样将一组图片制作成动画(APNG),还可以存储透明关系 Alpha

  1. 不支持动画
  2. 支持透明、半透明和全不透明
  • PNG8 256色PNG的别名(支持索引色透明和Alpha透明)
  • PNG24 全色PNG的别名(不支持透明度设定)
  • PNG32 全色PNG的别名

谈谈对HTML5的理解

  1. 良好的移动性,以移动设备为主。
  2. 响应式设计,以适应自动变化的屏幕尺寸
  3. 支持离线缓存技术,webStorage本地缓存
  4. 新增canvas,video,audio等新标签元素。新特殊内容元素:article,footer,header,nav,section等,新的表单控件:calendar,date,time,email,url,search。
  5. 地理定位...

前端页面有哪三层构成,分别是什么,作用是什么

  1. HTML结构层:对网页内容语义做出描述
  2. CSS表现层:定义网页的样式
  3. JS行为层:对事件做出反应
猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: