前端工程师（实习生）面试题精选1

 1-3、

1:B，2:B，3:ABC

---

4、请描述cookies，sessionStorage，localStorage的区别？

cookie是存储在浏览器端，并且随浏览器的请求一起发送到服务器端的，它有一定的过期时间，到了过期时间自动会消失。

sessionStorage和localeStorage也是存储在客户端的，同属于web Storage，比cookie的存储大小要大有8m，cookie只有4kb，localeStorage是持久化的存储在客户端，如果用户不手动清除的话，不会自动消失，会一直存在，sessionStorage也是存储在客户端，但是它的存活时间是在一个回话期间，只要浏览器的回话关闭了就会自动消失。

---

5、HTML5的form如何关闭自动完成功能

---

6、如何实现浏览器内多个标签页之间的通信？

调用localStorage、cookies等本地存储方式

详细参考：blog.csdn.net/lxcao/article/details/52777066

---

7、对BFC（块级格式化上下文：block formatting context）规范的理解

//形成BFC:

1.float的值不为none。

2.overflow的值不为visible。

3.display的值为table-cell, table-caption, inline-block中的任何一个。

4.position的值不为relative和static，为absolute或fixed。

//BFC的规则:

BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

---

8、全屏滚动的原理是什么？用到了css的哪些属性？

用js获取屏幕高度，然后监听mousewheel来判断滚动方向。

---

9、png、jpg、gif这些图片解释下，分别什么时候用？有没有了解过webp？

//PNG：这是三种中质量最好的一种，保存图像是静态图，可以保留32位色，也能保留透明与半透明区域，如果你是位图像设计者，要保存一幅自己设计的并且只有一个图层的图，建议你选择Png，但是很多网站不支持PNG上传 

//JPG：这是目前使用最广泛的格式之一，因为其高质量的压缩率导致的图片大小减少，而且也支持32位色彩，因此被广泛使用，一般情况下，任何支持图片的地方都支持jpg，也为静态图，但确点是不支持透明区域 

//GIF：这也是目前使用最广泛的格式之一，和jpg相比，有以下不同：颜色数只支持256色，支持透明区域，不支持半透明区域，可以保存为动态图

//WebP

WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。

从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；

在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；

WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

想象Web上的图片之多，百分之几十的提升，是非常非常大的优化。只可惜，目前只有Chrome浏览器和Opera浏览器支持WebP格式，所以WebP的应用并不广泛。为了使用更先进的技术，比如WebP图片格式，来压缩互联网上传输的数据流量，谷歌甚至提供了Chrome Data Compression Proxy，设置了Chrome Data Compression Proxy作为Web代理之后，你访问的所有网站中的图片，在经过Proxy的时候，都会被转换成WebP格式，以降低图片文件的大小。

更多：图片格式 jpg、png、gif各有什么优缺点？什么情况下用什么格式的图片呢？

10、JavaScript原型，原型链?有什么特点？

//原型：

每个对象都会在其内部初始化一个属性，就是prototype(原型)。

//原型链：

当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。

//特点：

JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到Object内建对象。

---

11、JavaScript有几种类型的值？（堆：原始数据类型和栈：引用数据类型），你能画一下他们的内存图吗？

//两大类：

栈：原始数据类型（Undefined，Null，Boolean，Number、String）

堆：引用数据类型（对象、数组和函数）

//区别：

两种类型的区别是：存储位置不同；

原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；

引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

---

12、（1）JavaScript 如何实现继承？

(1)构造继承

(2)原型继承

(3)实例继承

(4)拷贝继承

//

原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。

function Parent() {

this.name = 'song';

}

function Child() {

this.age = 28;

}

Child.prototype = new Parent(); //通过原型,继承了Parent

//

var demo = new Child()l;

alert(demo.age);

alert(demo.name); //得到被继承的属性

---

12、（2）JavaScript 有哪几种创建对象的方式？

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。

//

(1)对象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

(2)用function来模拟无参的构造函数

function Person(){}

var person = new Person(); //定义一个function，如果使用new"实例化",该function可以看作是一个Class

person.name = "Xiaosong";

person.age = "23";

person.work = function() {

alert("Hello " + person.name);

}

person.work();

(3)用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

function Person(name,age,hobby) {

this.name = name; //this作用域：当前对象

this.age = age;

this.work = work;

this.info = function() {

alert("我叫" + this.name + "，今年" + this.age + "岁，是个" + this.work);

}

}

var Xiaosong = new Person("WooKong",23,"程序猿"); //实例化、创建对象

Xiaosong.info(); //调用info()方法

(4)用工厂方式来创建（内置对象）

var jsCreater = new Object();

jsCreater.name = "Brendan Eich"; //JavaScript的发明者

jsCreater.work = "JavaScript";

jsCreater.info = function() {

alert("我是"+this.work+"的发明者"+this.name);

}

jsCreater.info();

(5)用原型方式来创建

function Standard(){}

Standard.prototype.name = "ECMAScript";

Standard.prototype.event = function() {

alert(this.name+"是脚本语言标准规范");

}

var jiaoben = new Standard();

jiaoben.event();

(6)用混合方式来创建

function iPhone(name,event) {

this.name = name;

this.event = event;

}

iPhone.prototype.sell = function() {

alert("我是"+this.name+"，我是iPhone5s的"+this.event+"~ haha!");

}

var SE = new iPhone("iPhone SE","官方翻新机");

SE.sell();

作者：晓松

链接：http://www.jianshu.com/p/05d84b60a1dc

來源：

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

13、关于事件，IE与火狐的事件机制有什么区别？如何阻止冒泡？

1.我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被JavaScript侦测到的行为。

2.事件处理机制：IE是事件冒泡、火狐是事件捕获；

3. ev.stopPropagation();

---

14、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty

---

js延迟加载的方式有哪些？

defer和async、动态创建DOM方式（用得最多）、按需异步载入js

---

15、同步和异步的区别?

同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性.

同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。

异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

---

16、如何解决跨域问题?

jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面

---

17、Node.js的适用场景？

http://www.jb51.net/article/57089.htm

---

18、如何让css只在当前组件中起作用？

定义精确的class或id，或者写在里面。

---

19、前端优化（提高网页的加载速度）

1、使用css sprites，可以有效的减少http请求数

2、使用缓存

3、压缩js，css文件，减小文件体积

4、使用cdn，减小服务器负担

5、懒加载图片

6、预加载css，js文件

7、避免dom结构的深层次嵌套

8、给DOM元素添加样式时，把样式放到类中，直接给元素添加类，减少重构，回流

---

20、html5的新特性

1、标签语义化，比如header，footer，nav，aside，article，section等，新增了很多表单元素，入email，url等，除去了center等样式标签，还有除去了有性能问题的frame，frameset等标签

2、音视频元素，video，audio的增加使得我们不需要在依赖外部的插件就可以往网页中加入音视频元素。

3、新增很多api，比如获取用户地理位置的window.navigator.geoloaction，

4、websocket

websocket是一种协议，可以让我们建立客户端到服务器端的全双工通信，这就意味着服务器端可以主动推送数据到客户端，

5、webstorage，webstorage是本地存储，存储在客户端，包括localeStorage和sessionStorage，localeStorage是持久化存储在客户端，只要用户不主动删除，就不会消失，sessionStorage也是存储在客户端，但是他的存在时间是一个回话，一旦浏览器的关于该回话的页面关闭了，sessionStorage就消失了，

6、缓存

html5允许我们自己控制哪些文件需要缓存，哪些不需要，具体的做法如下：

1、首先给html添加manifest属性，并赋值为cache.manifest

2、cache.manifest的内容为:

CACHE MANIFEST

#v1.2

CACHE :          //表示需要缓存的文件

a.js

b.js

NETWORK:    //表示只在用户在线的时候才需要的文件，不会缓存

c.js

FALLBACK

/        /index.html    //表示如果找不到第一个资源就用第二个资源代替

21、什么是闭包(closure)，为什么要用它？

    闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

//

闭包特性：

(1)函数内再嵌套函数

(2)内部函数可以引用外层的参数和变量

(3)参数和变量不会被垃圾回收机制回收

//li节点的onclick事件都能正确的弹出当前被点击的li索引

index = 0

index = 1

index = 2

index = 3

var nodes = document.getElementsByTagName('li');

for(i = 0;i

nodes[i].onclick = function() {

console.log(i+1); //不使用闭包的话，值每次都是4

}(4);

}

---

22、Ajax 是什么？如何创建一个 Ajax ？

ajax的全称：Asynchronous Javascript And XML。

异步传输+js+xml。

所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

//

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

(3)设置响应HTTP请求状态变化的函数

(4)发送HTTP请求

(5)获取异步调用返回的数据

(6)使用JavaScript和DOM实现局部刷新

---

23、（1）谈一谈你对 ECMAScript6 的了解？

ECMAScript 6 是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

标准的制定者有计划，以后每年发布一次标准，使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015

23、（2）ECMAScript 6 怎么写 class ，为何会出现 class？

ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

//定义类

class Point {

constructor(x,y) {  //构造方法

this.x = x;  //this关键字代表实例对象

this.y = y;

}

toString() {

return '(' + this.x + ',' + this.y + ')';

}

}

---

24、关于前段路由

--1，什么是前端路由？

路由是根据不同的 url 地址展示不同的内容或页面

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。

--2，什么时候使用前端路由？

在单页面应用，大部分页面结构不变，只改变部分内容的使用

--3，前端路由有什么优点和缺点？

//优点

用户体验好，不需要每次都从服务器全部获取，快速展现给用户

//缺点

使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存

单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置