试常见问题整理

1.1.1 图片优化

项目中图片处理相关的优化，项目中用到的优化方案，图片大小达到多少的时候选择处理？

1.首先了解在web开发中常见的图片有那些格式。

JPG 通常使用的背景图片，照片图片，商品图片等等。这一类型的图片都属于大尺寸图片或较大尺寸图片一般使用的是这种格式。

PNG 这种格式的又分为两种 一种PNG-8 一种 PNG-24

PNG-8格式不支持半透明，也是IE6兼容的图片存储方式。

PNG-24图片质量要求较高的半透明或全透明背景，保存成PNG-24更合适（为了兼容IE6可以试用js插件pngfix）一般是背景图标中试用的多。

GIF 这种格式显而易见的是在需要gif动画的时候试用了。

2．优化方案

l样式代替图片

例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持，而对于那些低端浏览器，我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。

l精灵图

CSS Sprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。

l字体图标

Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。美中不足的是只支持纯色的icon。SVG，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

lBase64

将图片转化为base64编码格式，资源内嵌于CSS或HTML中，不必单独请求。

Base64格式

data:[][;charset=][;base64],

Base64 在CSS中的使用

.demoImg{background-image:url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....");}

Base64 在HTML中的使用

<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

l图片响应式

通常图片加载都是可以通过lazy加载的形式来的，那么可以在加载的时候来判断屏幕的尺寸来达到加载大图还是小图的目的来达到优化。

1.1.2 提高网站的性能

你知道有哪些方法可以提高网站的性能？

我们从两个方面来讲：

1.资源加载

CSS顶部, JS底部

CSS JS文件压缩

尽量使用图片使用精灵图，字体图标

图片加载可通过懒加载的方式。

总之就是减少资源体积减少资源请求次数。

2.代码性能

Css:

使用CSS缩写，减少代码量；

减少查询层级：如.header .logo要好过.header .top .logo；

减少查询范围：如.header>li要好过.header li；

避免TAG标签与CLASS或ID并存：如a.top、button#submit；

删除重复的CSS；

….

Html:

减少DOM节点：加速页面渲染；

正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；

减少页面重绘。比如 给图片加上正确的宽高值：这可以减少页面重绘，

……

Js：

尽量少用全局变量；

使用事件代理绑定事件，如将事件绑定在body上进行代理；

避免频繁操作DOM节点；

减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；

….

给大家推荐一本书《高性能javascript》

1.1.3 z-index

说说z-index的工作原理及适用范围?

原理：

z-index 这个属性控制着元素在z轴上的表现形式。

该属性仅适用于定位元素。即拥有 relative , absolute , fixed 属性的position 元素。

堆叠顺序（Stacking Level）

堆叠顺序是当前元素位于 z 轴上的值。数值越大表明元素的堆叠顺序越高，越靠近屏幕。

未定义时 后来居上

如果未指定 z-index 的属性，元素的堆叠顺序基于它所在的文档树。默认情况下，文档中后来声明的元素具有更高的堆叠顺序

当父元素的堆叠顺序被设置的时候，这也意味着，它的子元素的堆叠顺序不能高于或低于这一顺序 (相对于父元素的堆叠上下文)。。

适用范围：

1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告，功能按钮等)

2.导航栏浮动置顶。

3.隐藏div实现弹窗功能(通过设置div的定位和z-index控制div的位置和出现隐藏)

1.1.4 响应式开发

能否简述一下如何使一套设计方案，适应不同的分辨率，有哪些方法可以实现？

流式布局：

使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

这样的布局方式 就是移动web开发使用的常用布局方式

这样的布局可以适配移动端不同的分辨率设备。

响应式开发：

那么Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。

越来越多的设计师也采用了这种设计。

?CSS3中的Media Query（媒介查询）

?通过查询screen的宽度来指定某个宽度区间的网页布局。

?超小屏幕（移动设备） 768px以下

?小屏设备 768px-992px

?中等屏幕 992px-1200px

?宽屏设备 1200px以上

由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如bootstrap来完成一部分工作，当然也可以自己写响应式。

阐述下移动web和响应式的区别：

1.1.5 事件封装和自定义

如何实现事件的封装、如何实现自定义事件？

什么是事件：

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件的封装：

functionaddEvent(dom,type,callback){

if(dom.addEventListener){

dom.addEventListener(type,callback,false);

}else if(dom.attachEvent){

dom.attachEvent('on'+type,callback);

}

};

functionremoveEvent(dom,type,callback){

if(dom.removeEventListener){

dom.removeEventListener(type);

}else if(dom.detachEvent){

dom.detachEvent('on'+type);

}

};

事件封装：

比如zepto中的touch事件都是自定义事件。

1.1.6 渐进坚强、优雅降级

你能描述一下渐进增强和优雅降级之间的不同吗？

优雅降级和渐进增强印象中是随着css3流出来的一个概念。由于低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，所以在高级浏览中使用css3而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。

举个例子：

a{

display: block;

width: 200px;

height: 100px;

background:aquamarine;

/*我就是要用这个新css属性*/

transition: all1s ease0s;

/*可是发现了一些低版本浏览器不支持怎么吧*/

/*往下兼容*/

-webkit-transition:all1s ease0s;

-moz-transition:all1s ease0s;

-o-transition: all1s ease0s;

/*那么通常这样考虑的和这样的侧重点出发的css就是优雅降级*/

}

a:hover{

height: 200px;

}

/*那如果我们的产品要求我们要重低版本的浏览器兼容开始*/

a{

/*优先考虑低版本的*/

-webkit-transition:all1s ease0s;

-moz-transition:all1s ease0s;

-o-transition: all1s ease0s;

/*高版本的就肯定是渐进渐强*/

transition: all1s ease0s;

}

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。

“渐进增强”观点则认为应关注于内容本身。

1.1.7 客户端数据存储

请描述一下cookies，sessionStorage和localStorage的区别？

cookies兼容所有的浏览器，Html5提供的storage存储方式。

Document.cookie

Window.localstorage

Window.sessionstorage

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

1.1.8 重置浏览器的CSS默认属性

描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。

1.1.9 IE和DOM事件流的区别

首先我们得搞懂 IE和DOM 是指的啥？

这里主要问的是 你IE浏览器和DOM兼容的浏览器也就是非IE浏览器或IE的高版本浏览器的事件方面的兼容性问题。

然后要搞明白的是 什么是事件流

IE5.5顺序是div --body--document.

在IE6中div-body--html--document.

mozilla的顺序是div--body- -html--document--window.

在IE中只有冒泡事件类型的事件流。

而在DOM兼容的浏览器中还有事件捕获

首先window--document--body--div--click.

然后click--div--body--document--window.

处理函数的区别

在IE 中,每个元素和window对象都有2个方法:attachEvent()和detachEvent();attachEvent用来给一个事件附加事件处理函数.

dom中对应的方法是addEventListener()和removeEventListener ,这两个方法有3个参数,事件名称,要分配的函数和处理函数是用于冒泡阶段还是捕获阶段.如果事件处理函数是用在捕获阶段,第三个参数为true

<div>

<ahref="javascript：;">dddd</a>

</div>

<script>

window.onload=function(){

document.getElementsByTagName('a')[0].addEventListener('click',function(e){

console.log('a');

},true);

/*处理函数在捕获阶段执行*/

document.getElementsByTagName('div')[0].addEventListener('click',function(e){

console.log('div');

/*在捕获的时候禁止冒泡*/

e.stopPropagation();

},true);

/*处理函数在捕获阶段执行*/

}

</script>

1.1.10 call和apply的区别

Javascript的每个Function对象中有一个apply方法：

?

还有一个类似功能的call方法：

?

它们各自的定义：

apply：应用某一对象的一个方法，用另一个对象替换当前对象。

call：调用一个对象的一个方法，以另一个对象替换当前对象。

它们的共同之处：

都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。”

它们的不同之处：

apply：最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

call：则是直接的参数列表，主要用在js对象各方法互相调用的时候，使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

更简单地说，apply和call功能一样，只是传入的参数列表形式不同：如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])

varfunc1=function(a,b,c){

this.name='func1';

//func2.call(this,a,b,c);

//func2.apply(this,arguments);

};

varfunc2=function(){

console.log(this.name);

console.log(arguments);

};

func1(1,2,3);

1.1.11 页面缓存

HTTP协议中，header信息里面，怎么控制页面失效时间？

在服务器端设置：这个是后台搭建项目的时候web服务器做的工作。

在前端我们怎么去控制呢？

网页的缓存是由HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况：

（1） 打开新窗口

值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。

而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如：

Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)

（2） 在地址栏回车

值为private或must-revalidate则只有第一次访问时会访问服务器，以后就不再访问。

值为no-cache，那么每次都会访问。

值为max-age，则在过期之前不会重复访问。

（3） 按后退按扭

值为private、must-revalidate、max-age，则不会重访问，

值为no-cache，则每次都重复访问

（4） 按刷新按扭

无论为何值，都会重复访问

Cache-control值为“no-cache”时，访问此页面不会在Internet临时文章夹留下页面备份。

另外，通过指定“Expires”值也会影响到缓存。例如，指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问： Expires: Fri, 31 Dec 1999 16:00:00 GMT

应用

通过HTTP的META设置expires和cache-control

<meta http-equiv="Cache-Control" content="max-age=7200" />

<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />

一般都会被服务器重置掉。

1.1.12 长连接和短连接的区别

HTTP协议目前常用的有哪几个？KEEPALIVE从哪个版本开始出现的？

到现在http出现了 1.0和 1.1版本

Keep-Alive是从1.1默认就支持了。

1、什么是Keep-Alive模式？

我们知道HTTP协议采用“请求-应答”模式，当使用普通模式，即非KeepAlive模式时，每个请求/应答客户和服务器都要新建一个连接，完成之后立即断开连接（HTTP协议为无连接的协议）；当使用Keep-Alive模式（又称持久连接、连接重用）时，Keep-Alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后继请求时，Keep-Alive功能避免了建立或者重新建立连接。

http 1.0中默认是关闭的，需要在http头加入"Connection: Keep-Alive"，才能启用Keep-Alive；http 1.1中默认启用Keep-Alive，如果加入"Connection: close "，才关闭。目前大部分浏览器都是用http1.1协议，也就是说默认都会发起Keep-Alive的连接请求了，所以是否能完成一个完整的Keep-Alive连接就看服务器设置情况。

2、启用Keep-Alive的优点

从上面的分析来看，启用Keep-Alive模式肯定更高效，性能更高。因为避免了建立/释放连接的开销。

1.1.13 从服务器考虑提高网站性能

业界常用的优化WEB页面加载速度的方法（可以分别从页面元素展现，请求连接，css,js,服务器等方面介绍）？

对于服务器方面前端能做的工作：

使用CDN加速，使用户从离自己最近的服务器下载文件；

减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；

为文件头指定Expires，使内容具有缓存性；

前端优化:DNS预解析提升页面速度

<link rel="dns-prefetch" href="http://hm.baidu.com" />

<link rel="dns-prefetch" href="http://eiv.baidu.com" />

服务器端能做的工作：

负载均衡，分布式存储，提升服务器性能等等。。。

1.1.14 列举常用的web页面开发，调试以及优化工具

谷歌浏览器，火狐浏览器

1.FireBug

2012年以前，火狐狸几乎是所有前端开发者最喜欢的浏览器，基于FireFox的插件FireBug成了Web前端工程师开发调试网页的首选利器。

2.Chrome Developer Tools

自从2011年FireBug的开发者J.Barton跳槽到Google，负责开发Chrome Developer Tools后，Chrome Developer Tools就有了本质性的变化。于是，Web前端开发工程师最喜欢的浏览器又变成了Chrome，Chrome Developer Tools也就顺理成章成为开发调试网页的不二利器了。

1.1.15 解释什么是sql注入，xss漏洞

Sql是数据库语言。

XSS攻击：跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。

1.1.16 逻辑题

有1到10w这个10w个数，去除2个并打乱次序，如何找出那两个数？

1.1.17 对象属性

如何获取对象a拥有的所有属性（可枚举的、不可枚举的，不包括继承来的属性）?

首先你们要知道什么是 可没举性

可枚举性（enumerable）用来控制所描述的属性，是否将被包括在for...in循环之中。具体来说，如果一个属性的enumerable为false，下面三个操作不会取到该属性。

* for..in循环

* Object.keys方法

* JSON.stringify方法

至于for...in循环和Object.keys方法的区别，在于前者包括对象继承自原型对象的属性，而后者只包括对象本身的属性。如果需要获取对象自身的所有属性，不管enumerable的值，可以使用Object.getOwnPropertyNames方法

Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性)组成的数组。

<script>

/*首先有个人*/

varPerson=function(){

/*对象本身拥有的属性*/

this.name='小明';

};

Person.prototype={

/*通过原型继承的属性*/

age:10

};

varperson=newPerson();

/*首先我们遍历下 student的属性*/

varforin=[];

for(varo inperson){

forin.push(o);

}

console.log(forin);

/*这个时候我们发现 for in 的形式拿的是 所有的属性 包括原型继承的*/

console.log(Object.keys(person));

/*发现 Object.keys 拿到的是不包含 原型继承的并且不包含非枚举属性*/

console.log('-------------------------------------');

/*什么是属性枚举性 enumerable 什么是非枚举属性*/

/*怎么定义非枚举属性 enumerable*/

Object.defineProperty(person,'sex',{value:'男',enumerable:false});

/*非枚举属性有什么特别*/

console.log(person.sex);

person.sex='女';

console.log(person.sex);//说明什么？非枚举属性不能重新定义值

console.log('-------------------------------------');

/*那么怎么获取枚举属性*/

console.log(Object.keys(person));

/*getOwnPropertyNames 获取自身的所有属性不包含原型继承*/

console.log(Object.getOwnPropertyNames(person));

varfields=Object.getOwnPropertyNames(person);

/* 我们两个比价一下就可以了 getOwnPropertyNames keys */

</script>

1.1.18 Underscore

Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？

参考 underscore 文档。

集合相关的方法

数组相关的方法

函数相关的

对象相关的

工具

1.1.19 Nodejs

(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

1.1.20 前端路由

什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

路由 Router

前端的路由都是通过 hash 来实现的，hash 能兼容低版本的浏览器。

Web 服务并不会解析 hash，也就是说 # 后的内容 Web 服务都会自动忽略，但是 JavaScript 是可以通过 window.location.hash 读取到的，读取到路径加以解析之后就可以响应不同路径的逻辑处理。

优点可以控制 业务逻辑 做无页面刷新 体验更

缺点 页面不刷的话无法释放内存，如果过多的操作会造成页面体验不好。

1.1.21 This

说说你对this的理解？

this是一个关键字

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用

1.作为纯粹的函数调用 this指向全局对象

2.作为对象的方法调用 this指向调用对象

3.作为构造函数被调用 this指向新的对象（new会改变this的指向）

4.apply调用 this指向apply方法的第一个参数

1.1.22 递归

谈一下JS中的递归函数，并且用递归简单实现阶乘？

//递归 程序调用自身的编程技巧称为递归 自己调用自己

functionfactorial(num) {

return( num <=1 ) ? 1 : num * factorial(num - 1);

}

console.log(factorial(8));

1.1.23 闭包

什么是闭包（closure），为什么要用？

闭包是指在 JavaScript 中，内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

1.1.24 异步加载

异步加载的方式？

什么？的异步加载方式我猜是说js。

方案一：<script>标签的async="async"属性（详细参见：script标签的async属性）

HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。

方案二：<script>标签的defer="defer"属性

兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。

动态创建<script>标签

方案四：AJAX eval（使用AJAX得到脚本内容，然后通过eval_r(xmlhttp.responseText)来运行脚本）

兼容所有浏览器。

方案五：iframe方式（这里可以参照：iframe异步加载技术及性能 中关于Meboo的部分）

兼容所有浏览器。

更多前端知识，请关注我的头条号。