一、HTML部分常见问题
1、怎么让一个不定宽高的 DIV，垂直水平居中？
答：1）使用 CSS 方法：
父盒子设置：display：table-cell； text-align：center；vertical-align：middle；
Div 设置：    display：inline-block；vertical-align：middl；
2）使用 CSS3transform：
父盒子设置：display：relative
Div 设置：  transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；
2、position几个属性的作用？
答：position的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、"right"以及 “bottom”
属性使用。
1）Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。一般不常用。
2）Relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了 relative 值，那么，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。
3）Absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了 position 属性，并且 position 的属性值为 absolute  或者 relative，那么就会依据父容器进行偏移。如

果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位置。
4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。
3、px，em，rem的区别？
答： 1）px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
2）em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
3）rem是CSS3新增的一个相对单位（rootem，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
4）区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。
4、什么是BFC？
答： 1）定义：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box 参与， 它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干。
布局规则：
A.  内部的 Box 会在垂直方向，一个接一个地放置。
B. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box的margin 会发生重叠。
C.  每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
D. BFC 的区域不会与 float box 重叠。
E.  BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
F.  计算 BFC 的高度时，浮动元素也参与计算。
3）哪些元素会生成 BFC：
A.  根元素
B. float 属性不为 none
C. position 为 absolute 或 fixed
D. display 为 inline-block， table-cell，table-caption， flex， inline-flex F. overflow 不为visible
5、表格自动换行怎么实现？
答：word-break：normal 使用浏览器默认的换行规则；
break-all允许单词内换行；
keep-all只能在半角空格或连字符处换行
word-wrap：normal 是用浏览器默认的换行规则；break-word 在长单词或 URL 地址内部进行换行。
6、box-sizing、transition、translate分别是什么？
答：Box-sizing： 用来指定盒模型的大小的计算方式。主要分为boreder-box（从边框固定盒子大小）、content-box（从内容固定盒子大小）两种计算方式。
transition： 当前元素只要有“属性”发生变化时，可以平滑的进行过渡。通过 transtion-propety 设置过渡属性；
transtion-duration 设置过渡时间；
trantion-timing-function 设置过渡速度；
trantion-delay 设置过渡延时
translate：通过移动改变元素的位置；有 x、y、z 三个属性
7、选择器优先级是怎样的？
答：！important>行内样式>id 选择器>类选择器>标签选择器>通配符>继承
权重算法：
（0，0，0，0）==》第一个 0 对应的是 important 的个数，第二个 0 对应的是 id 选择器的个数，第三个 0 对
应的类选择器的个数，第四个 0 对应的是标签选择器的个数，就是当前选择器的权重。
比较：
先从第一个 0 开始比较，如果第一个 0 大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推
8、Iframe的作用？
答：用法：
Iframe是用来在网页中插入第三方页面，早期的页面使用 iframe 主要是用于导航栏这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。
优点：便于修改，模块分离，像一些信息管理系统会用到。但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。
缺点 :
（1）iframe 的创建比一般的 DOM 元素慢了 1-2 个数量级
（2）iframe 标签会阻塞页面的加载，如果页面的onload 事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好.在 Safari 和 Chrome 中可以通过 js 动态设置 iframe 的 src 属性来避免阻塞.
（3）iframe 对于 SEO 不友好，替代方案一般就是动态语言的 Incude 机制和 ajax 动态填充内容等.
9、有一个导航栏在chrome 里面样式完好？在 IE 里文字都聚到一起了，是哪个兼容性问题？
答：用了 display：flex 属性，在 ie10 以下都是无效的。

10、xhtml和 html 有什么区别？

答：HTML是一种基本的 WEB 网页设计语言，XHTML 是一个基于 XML 的置标语言最主要的不同：

XHTML元素必须被正确地嵌套。

XHTML元素必须被关闭。

标签名必须用小写字母。

XHTML文档必须拥有根元素。

11、标签上title 与 alt 属性的区别是什么?

答：Alt 当图片不显示时，用文字代表。Title为该属性提供信息。

12、改变元素的外边距用什么属性？改变元素的内填充用什么属性？

答：改变元素的外边距用 margin，改变元素的内填充用 padding。

13、在新窗口打开链接的方法是？

答：target：_blank。

14、合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？

答：结构是 html，表现是 css。

15、简述对Web 语义化的理解？

答：就是让浏览器更好的读懂你写的代码，在进行 HTML 结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行Web 操作和网站 SEO，方便团队协作的一种标准，以图实现一种“无障碍”的  Web 开发。

16、每个HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

答：DOCTYPE 是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义来解析文档。只有确定了一个正确的文档类型，超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效，甚至对 javascript 脚本都会有所影响。

17、display：none；与 visibility： hidden 的区别是什么？

答：display：none； 使用该属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”；

visibility：hidden； 使用该属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

二 , CSS 部分常见问题

1、CSS3选择器有哪些？

答：属性选择器、伪类选择器、伪元素选择器。

2、CSS3新特性有哪些？

答：1. 颜色：新增 RGBA，HSLA 模式

2. 文字阴影（text-shadow、）

3.边框： 圆角（border-radius）边框阴影： box-shadow

4. 盒子模型：box-sizing

5.背景：background-size设置背景图片的尺寸 background-origin设置背景图片的原点 background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局

6.渐变：linear-gradient、radial-gradient

7.  过渡：transition，可实现动画

8.  自定义动画

9.  在CSS3 中唯一引入的伪元素是：：selection.

10.  媒体查询，多栏布局

11.border-image

12.2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

13.3D 转换

3、CSS引入的方式有哪些? link 和@import的区别是?

答：内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者 CSS2.1 以下浏览器不支持

Link支持使用 javascript 改变样式，后者不可

4、描述css reset 的作用和用途？

答：Reset 重置浏览器的 css 默认属性 ，览器的品种不同，样式不同，然后重置，让他们统一。

5、解释css sprites，如何使用？

答：Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。

1 , 怎么实现跨域问题？

对于端口和协议的不同，只能通过后台来解决。我们要解决的是域名不同的问题。

1. 下 面 是 用 php 进 行 的 设 置 ，“ * ” 号 表 示 允 许 任 何 域 向 我 们 的 服 务 端 提 交 请 求 ：header{“Access-Control-Allow-Origin： *”}

2.JSONP(JSON with Padding 填充式 JSON 或参数式 JSON)

在 js 中，我们虽然不能直接用 XMLHttpRequest 请求不同域上的数据时，但是在页面上引入不同域上的 js 脚本文件却是可以的，jsonp 正是利用这个特性来实现的。

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的 JSON 数据。

2,JSNOP 的优缺点

优点：

它的兼容性更好，在更加古老的浏览器中都可以运行，不需要 XMLHttpRequest 或 ActiveX 的支持；能够直接访问响应文本，支持在浏览器与服务器之间双向通信

缺点：

JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。

它只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求；它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面之间如何进行 JavaScript 调用的问题

3、谈谈 js 作用域和闭包？

答：简单的说，作用域是针对变量的，比如我们创建一个函数 a1，函数里面又包了一个子函数 a2。此时就存在三个作用域：

全局作用域－a1 作用域－a2 作用域；即全局作用域包含了 a1 的作用域，a2 的作用域包含了 a1 的作用域。

当a1 在查找变量的时候会先从自身的作用域区查找，找不到再到上一级 a2 的作用域查找，如果还没找到就到全局作用域区查找，这样就形成了一个作用域链。

理解闭包首先要理解，js 垃圾回收机制，也就是当一个函数被执行完后，其作用域会被收回，如果形成了闭包，执行完后其作用域就不会被收回。

如果某个函数被他的父函数之外的一个变量引用，就会形成闭包。

闭包的作用，就是保存自己私有的变量，通过提供的接口（方法）给外部使用，但外部不能直接访问该变量。

4、什么是原型链？

答：Javascript 是面向对象的，每个实例对象都有一个__proto_属性，该属性指向它原型对象，这个实例对象的构造函数有一个原型属性 prototype，与实例的__proto__属性指向同一个对象。当一个对象在查找一个属性的时，自身没有就会根据__proto__ 向它的原型进行查找，如果都没有，则向它的原型的原型继续查找，直到查到Object.prototype._proto_为 nul，这样也就形成了原型链。

6、什么是事件冒泡/捕获？

答：

事件冒泡：子元素事件的触发会影响父元素事件；

开关事件冒泡：

A，开启事件冒泡：element.addEventListener(eventName，handler，false)；

B，关闭事件冒泡：假设传统方式事件的返回值为 e，就可以通过 e.stopPropagation()来关闭事件冒泡；事件捕获：父元素的事件会影响子元素的事件；

开启事件捕获：element.addEventListener(eventName，handler，true)

7、请说说事件委托机制？这样做有什么好处？

答：事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。打个比方：一个 button 对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。

好处：

A，提高性能：列如，当有很多 li 同时需要注册事件的时候，如果使用传统方法来注册事件的话，需要给每一个 li 注册事件。然而如果使用委托事件的话，就只需要将事件委托给该一个元素即可。这样就能提高性能。

B，新添加的元素还会有之前的事件；

8、请列举字符串操作的方法？

charCodeAt 方法返回一个整数，代表指定位置字符的 Unicode 编码；

charAt 方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串； slice 方法返回字符串的片段；

substring 方法返回位于 String 对象中指定位置的子字符串。

substr 方法返回一个从指定位置开始的指定长度的子字符串。

indexOf 方法返回 String 对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1； lastIndexOf 方法返回 String 对象中字符串最后出现的位置。如果没有匹配到子字符串，则返回-1； search 方法返回与正则表达式查找内容匹配的第一个字符串的位置。

concat 方法返回字符串值，该值包含了两个或多个提供的字符串的连接； split 将一个字符串分割为子字符串，然后将结果作为字符串数组返回；

11、怎么理解 jQuery？

答：JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js 库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+， FF1.5+， Safari 2.0+， Opera 9.0+），jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提

供 AJAX 交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的 html 页面保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆 js 来调用命令了，只需要定义 id 即可。

jQuery 是一个兼容多浏览器的 javascript 库，核心理念是 write less，do more(写得更少，做得更多)。jQuery

在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery 已经成为最流行的 javascript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

jQuery 是免费、开源的，使用 MIT 许可协议。jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。除此以外，jQuery 提供 API 让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思义，也就是 JavaScript 和查询（Query），即是辅助 JavaScript 开发的库。

13、表单验证传输的什么数据？明文还是暗文==加密？如何加密？是每一次传输数据，都是加密之后才传输吗？

答：概述：

GET 是从服务器上请求数据，POST 是发送数据到服务器。事实上，GET 方法是把数据参数队列（query string）加到一个 URL 上，值和表单是一一对应的。比如说，name=John。在队列里，值和表单用一个&符号分开，空格用+号替换，特 殊的符号转换成十六进制的代码。因为这一队列在 URL 里边，这样队列的参数就能看得到，可以被记录下来，或更改。通常 GET 方法还限制字符的大小（大概是 256 字节 ）。

事实上 POST 方法可以没有时间限制的传递数据到服务器，用户在浏览器端是看不到这一过程的，所以 POST 方法比较适合用于发送一个保密的（比如信用 卡号）或者比较大量的数据到服务器。

区别：

Post 是允许传输大量数据的方法，而 Get 方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比 Post 方法好。

总结：

1、get 方式的安全性较 Post 方式要差些，包含机密信息的话，建议用 Post 数据提交方式；

2、在做数据查询时，建议用 Get 方式；而在做数据添加、修改或删除时，建议用 Post 方式；所以：

表达如果是向服务器传输数据(如帐号密码等)都是加密数据(post)，如果只是单单想要从服务器获得数据或者传输的数据并不重要， 可以直接使用明文方式传输( get )

14、面向对象和类的区别？

答：简单的说类是对象的模版。

在 js 中没有类， 所以在 js 中所谓的 类 就是构造函数， 对象就是由构造函数创建出来的实例对象。面向对象就是使用面向对象的方式处理问题， 面向对象是对面向过程进行封装。

面向对象有三大特性

抽象性， 需要通过核心数据和特定环境才能描述对象的具体意义

封装性， 封装就是将数据和功能组合到一起， 在 js 中对象就是键值对的集合， 对象将属性和方法封装起来， 方法将过程封装起来

继承性， 将别人的属性和方法成为自己的， 传统继承基于模板(类)， js 中继承基于 构造函数

对象的概念，面向对象编程的程序实际就是多个对象的集合，我们可以把所有的事物都抽象成对象，在程序设计中可以看作：对象=属性+方法。属性就是对象的数据，而方法就是对象的行为。

类的概念，类是对象的模版，而对象是类的实例化。举个例子，汽车设计图可以看作是类，而具体的汽车就是对象。再比如有一个类是表示人，然后可以通过人这个模版来实例化出张三、李四。。。

15、在 JS 的计时器运行原理是怎样的，为什么可以触发计时效果? 计时器是多线程吗?

答：

1. javascript 引擎只有一个线程，强迫异步事件排队等待被执行。

2. setTimeout 和 setInterval 本质上不同的地方是他们如何执行异步代码的。

3. 如果一个定时器正在执行的时候被阻塞了，那么它将会被推迟到下一个可能的执行点，这既是使得延迟时间有可能会超过声明定时器时设置的值。

4. Interval 如果有足够的时间来执行（大于制定的延迟），那么它将会无延迟的一个紧接着一个执行。原理：

计时器通过设定一定的时间段（毫秒）来异步的执行一段代码。因为 Javascript 是一个单线程语言，计时器

提供了一种绕过这种语言限制来执行代码的能力。

总结：

计时器是单线程的， 需要等待上一个执行完， 如果上一个没有执行完， 下一个需要延迟执行， 知道上一个执行完

16、如何查找构造函数和原型中的属性？

答：构造函数.prototype 查看构造函数的原型属性

实例对象.proto 查看实例对象的构造函数的原型

实例对象.proto.constructor 查看实例对象的构造函数
17、js 中一共有几种数据类型？
答：Undefined、Null、Boolean、Number 和 String。
还有一种复杂的数据类型 Object，Object 本质是一组无序的名值对组成的。
18、call 和 apply 的区别
答： 它们的共同之处：
都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 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])。
19、说说你对 this 的理解？

答：this 是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

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

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

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

4.apply 调用 this 指向 apply 方法的第一个参数
21、js 的异步加载有哪几种方法？
答：方案一：

方案二：

方案三：AJAX eval（使用 AJAX 得到脚本内容，然后通过 eval_r(xmlhttp.responseText)来运行脚本）。兼容所有浏览器。

方案四：iframe 方式（这里可以参照：iframe 异步加载技术及性能中关于 Meboo 的部分）。兼容所有浏览

器。
22、列举浏览器对象模型 BOM 里常用的至少 4 个对象，并列举 window 对象的常用方法至少 5 个？
答： 对象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
23、简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法做简单说明？
答： document.getElementById 根据元素 id 查找元素 document.getElementByName 根据元素 name 查找元素 document.getElementTagName 根据指定的元素名查找元素
24、原生 JS 的 window.onload 与 Jquery 的$(document).ready(function())，$(function () {})有什么不同？
答：
1.执行时间
window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。2.编写个数不同window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload 没有简化写法
$(document).ready(function())可以简写成$(function(){})；
25、简述在 jQuery 中.eq()和.get()的异同？
答：相同：
get() ：取得其中一个匹配的元素。数字序号表示取得第几个匹配的元素eq()：获取第 N 个元素，下标都是从 0 开始， 用法基本相同。
不同：
eq 返回的是一个 jquery 对象； 返回的是 jQuery 对象，就可以继续调用其他方法。
get 返回的是一个 html 对象数组；不能调用 jQuery 的其他方法；

三、前端面试其他问题（相关的优化问题）
1、请谈谈你对性能优化的认识？
答：网页内容
减少 http 请求次数
80%的响应时间花在下载网页内容(images， stylesheets， javascripts， scripts， flash 等)。减少请求次数是缩短响应时间的关键！可以通过简化页面设计来减少请求次数，但页面内容较多可以采用以下技巧。
减少 DNS 查询次数
DNS 查询也消耗响应时间，如果我们的网页内容来自各个不同的 domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些 domain 也需要消耗一定的时间。DNS 查询结果缓存在本地系统和浏览器中一段时间，所以 DNS 查询一般是对首次访问响应速度有所影响。下面是我清空本地 dns 后访问博客园主页 dns 的查询请求。
缓存 Ajax
Ajax 可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如 ajax 的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高 ajax 的响应速度。
延迟加载
这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。
Javascript 是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有 Javascript 的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。
2、如何避免 XSS？

答：禁止危险脚本

IE8 是第一款内置了 XSS 脚本拦截保护的浏览器。谷歌的 Chrome 也会紧随其后推出类似功能。这两款浏览器都会首先查看来自某个 Web 服务器的脚本是否是恶意的——如果是，就拦截它。在今年 4 月的黑帽欧洲 2010 大会上，研究专家 David Lindsay 和 Eduardo Vela Nava 却演示了一种可以破除这种拦截的办法，不过谷歌已经修复了 Chrome 中的这个漏洞。微软则在今年 1 月（补丁 MS10-002）和 3 月（MS10-018）也已解决了大部分问题，并计划在 6 月修复第 3 个漏洞，所以在你读到这篇文章的时候，破除 XSS 脚本拦截的问题可能已经完全解决了。

Firefox 的用户则可以利用免费的 NoScrpit 附加组件有选择地拦截脚本。比如说，你可以放行一段 Flash 视频，而同时拦截该网站上的其他脚本组件。IE 和 Chrome 在拦截可疑脚本方面没有这么细的粒度——它们是要么全拦截，要么全不拦截。

NoScrpit 也有一个问题，那就是大多数用户并不喜欢放行个别脚本的做法，因为这样会带来不便。不过拦截和放行今后可能会成为你的第二天性。你还可以对某个特定网站上的所有脚本进行认证，无论是为了一次性访问还是今后的所有访问，这样的认证如今在 IE 8 和 chrome 中也可以做了，使得防范 XSS 攻击实现更加可能。

3、平时如何管理项目？

答：所谓项目，简单地说，就是在既定的资源和要求的约束下，为实现某种目的而相互联系的一次性工作任务。一般来说，项目具有如下的基本特征：

1）明确的目标其结果只可能是一种期望的产品，也可能是一种所希望得到的服务。

2）独特的性质每一个项目都是唯一的。

3）资源成本的约束性每一项目都需要运用各种资源来实施，而资源是有限的。

4）项目实施的一次性项目不能重复。

5）项目的不确定性在项目的具体实施中，外部和内部因素总是会发生一些变化，因此项目也会出现不确定性。

4、请谈谈项目的迭代周期？

答：软件项目开发，一般都会采用增量、迭代、（或者叫进化、演化、演进）的软件开发模型，众多的软件开发模型大多是以经典的瀑布模型为基础进行改进、变形，改进原则是：增加客户在整个项目周期中的参与度，降低软件开发过程中的风险，增强软件项目的后期可维护性。

不同的软件开发模型，迭代周期长短也不相同，有的是一个月，有的是两周，我们一般都是根据实际情况确定，一个周期完成，将项目成果（可运行的软件）提交给用户（或进行内部评审），通过后就进入下一个迭代开发周期。

5、工作中用过什么构建工具？

答：用过 gulp。

第一步：安装 node 和 npm，搭建 node 环境。

第二步：安装 gulp

第三步：新建 Gulpfile 文件，运行 gulp

安装依赖，提醒下，如果以上命令提示权限错误，需要添加 sudo 再次尝试。

Gruntfile 维护起来那么困难，有几个原因：

配置和运行分离

程序员都知道，变量的声明和使用挨在一起，最方便理解和修改。但 Gruntfile 里，配置 Task 和调用它们的地方离得很远，极大地增加了心智负担

每个插件做的事太多

每个 Task 的结果必须写到磁盘文件，另一个 Task 再读，损害性能倒是小事，更麻烦的是让整个过程变复杂了。就像一个个小作坊，来料加工又返回给客户，这中间的沟通成本、出错机会都大大增加。配置项过多做事多了，配置项自然也多。至少输入和输出的位置得配吧。每个插件的配置规则还不尽相同。用每个插件，都得去学习一番。

6、谈谈你对模块化的理解？

答：

• 模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计。

• 让开发者便于维护，同时也让逻辑相同的部分可复用

• 模块化开发：针对 js、css，以功能或业务为单元组织代码。js 方面解决独立作用域、依赖管理、 api 暴露、按需加载与执行、安全合并等问题，css 方面解决依赖管理、组件内部样式管理等问题。任何事物都有一个过程，那么模块化的过程通俗点讲就是：

模块化的过程就是：

• 1、拆分

将整个系统按功能，格式，加载顺序，继承关系分割为一个一个单独的部分.

注意：拆分的粒度问题，可复用问题，效率问题.如何这些问题处理的不好，就有可能出现不想要的后果。将功能或特征相似的部分组合在一起，组成一个资源块.

将每个资源块按找需求，功能场景以及目录约束放到固定的地方以供调用.

模块的历程

模块化的发展也是从草根一步一步走过来的。从最开始到现在成熟方案：

1. namespace

2. sass，less

3. AMD&CMD

4. html 模版

5. grunt，gulp，webpack

6. FIS，YUI，KISSY

7、平时都用什么第三方插件？

答：pullpage，zepto，underscore，JqueryUI，JqueryMobile，Echart，ueditor，animate.js 等。

8、请描述一下 cookie，sessionStorage 和 localStorage 的区别？

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

1 Document.cookie

2 Window.localstorage

3 Window.sessionstorage

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

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

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

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

9、如何使用缓存？

答：可以基于 http 的头信息控制缓存

ajax 请求对早期的 IE 浏览器默认就是缓存的，可以通过时间戳防止缓存

10、谈谈你对预加载的理解？

答：Web 预加载指的是在网页全加载完成之前，在页面优先显示一些主要内容，以提高用户体验。对于一个

较庞大的网站，如果没有使用预加载技术，用户界面就会长时间显示一片空白，直到资源加载完成，页面才会显示内容。

例如，可以通过 js 预先从服务加载图片资源(动态创建 Image，设置 src 属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的 src 时就会优先寻找浏览器缓存，提高访问速度。

11、缓存和预加载的区别是什么？

答：缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度

预加载指的是提前把需要的内容加载完成，访问的时候可以明天提高响应效率，比如图片的预加载（可以提前加载一定数量的图片，当用户访问图片的时候一般只看前几张，由于是预加载好的，所以速度比较快）。

12、图片如何压缩？

答：可以使用一些在线的图片压缩工具

优先用 png 而不是 gif

压缩 png

去掉 jpg 的 metadata

压缩 gif 动画

尝试使用 png8

避免使用 AlphaImageLoader

压缩动态生成的图像

使 favicon 更小 可缓存使用 CSS Sprites

13、压缩文件有哪些方法？

答：使用 Grunt、Sass、ant 压缩

14、如何区分静态页面和动态页面？

答：要区分这两个，最简单的方法就是看后缀了，动态网页网址中有两个标志性的符号“?”和“&”（有的可能没有&），这个问号和&就是用来带参数的。现在几乎爱所有的网页都是动态网页。
15、字符串拼接和模板引擎，项目中会如何操作？模板引擎减少 http 请求，字符串不可变?模板引擎会不会利于 SEO 优化？

答：简单的数据渲染，拼接字符串即可，稍微复杂的业务逻辑使用前端模板引擎，过于复杂的页面基本上使用后台渲染的方式；模板引擎会影响 SEO 优化，为了解决这个问题，需要关注 SEO 的页面最好采用后台渲染的方式。

16、前台兼容性问题有哪些？

答：主要是常用浏览的（前端）API 差异，渲染差异，等等。

17、你如何对网站的文件和资源进行优化?期待的解决方案包括？

答：文件合并

文件最小化/文件压缩

使用 CDN 托管

缓存的使用

18、内存泄漏怎么理解？

答：IE6 时代有 bug，闭包会造成内存泄漏，这个现在已经无须考虑了。

其次，闭包本身不会造成内存泄漏，但闭包过多很容易导致内存泄漏。

这句话很矛盾，技术上讲，闭包是不会造成内存泄漏的，浏览器的 bug 除外。但是，闭包会造成对象引用的生命周期脱离当前函数的上下文，因此，如果不仔细考虑闭包函数的生命周期，的确有可能出现意料之外的内存泄漏，当然，从严格意义上讲，这是程序员自己的 bug，而不是闭包的错。

19、微格式到底是做啥用？

答：是开放的数据格式，面向的是普通用户，任何用户可以透过简单的程序读取微格式内容。而不是像 Flickr、Amazon、Google 等提供特定的面向技术人员的 API（一般基于 XML-PRC、REST，相对复杂）。RSS 具有微格式的部分优点，但限制还是比较多的，比如有限的元数据（标题、描述、URL 等），不能更好地描述语义，不太容易与已存在的工具结合等。用微格式可以来聚合外部 Blog，Flickr，YouTube，MapQuest，甚至 MySpace 里的内容。

微格式实际就是为现有的(X)HTML 元素添加元数据和其他属性，增强语义。

20、懒加载是用滚轮判断高度好还是用插件？
答：使用插件比较好，插件考虑的问题比较全面，仅仅通过滚轮高度判断很容易导致一些副作用（比如一次性请求多次）。
21、如何缓存整个页面，在没有网络的时候可以来回的跳转？
答：使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
如需启用应用程序缓存，请在文档的 标签中包含 manifest 属性。
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。
manifest 文件的建议的文件扩展名是：".appcache"。
manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）实例 - 完整的 Manifest 文件
CACHE MANIFEST

2012-02-21 v1.0.0 /theme.css /logo.gif /main.js

NETWORK：
login.asp
FALLBACK：
/html5/ /404.html
22、CDN 是啥？

答：CDN 的全称：是 Content Delivery Network，即内容分发网络，加速的意思，那么网站 CND 服务就是网站加速服务。

CDN 加速原理：CDN 加速将网站的内容缓存在网络边缘（离用户接入网络最近的地方），然后在用户访问网站内容的时候，通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果最佳的缓存服务器上，有该缓存服务器为用户提供内容服务；相对于直接访问源站，这种方式缩短了用户和内容之间的网络距离，从而达到加速的效果。

CDN 的特点：

1、本地加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度，并大大提高以上性质站点的稳定性

2、镜像服务 消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加速，保证不同网络中的用户都能得到良好的访问质量。

3、远程加速 远程访问用户根据 DNS 负载均衡技术 智能自动选择 Cache 服务器，选择最快的 Cache 服务器，加快远程访问的速度

4、带宽优化 自动生成服务器的远程 Mirror(镜像)cache 服务器，远程用户访问时从 cache 服务器上读取数据，减少远程访问的带宽、分担网络流量、减轻原站点 WEB 服务器负载等功能。

5、集群抗攻击 广泛分布的 CDN 节点加上节点之间的智能冗于机制，可以有效地预防黑客入侵以及降低各种 D.D.o.S 攻击对网站的影响，同时保证较好的服务质量。

23、浏览器一次可以从一个域名下做多少资源？

答：浏览器的并发请求数目限制是针对同一域名的，同一时间针对同一域名下的请求有一定数量限制，不同浏览器这个限制的数目不一样，超过限制数目的请求会被阻塞；

目前的话，所有浏览器的并发数目一般限制在 10 以内。

24、什么是垃圾回收机制（GC）？

答：早期的计算机语言，比如 C 和 C++，需要开发者手动的来跟踪内存，这种机制的优点是内存分配和释放

的效率很高。但是它也有着它的缺点，程序员很容易不小心忘记释放内存，从而造成内存的泄露。

新的编程语言，比如 JAVA， C#， javascript， 都提供了所谓“垃圾回收的机制”，运行时自身会运行相应的垃圾回收机制。程序员只需要申请内存，而不需要关注内存的释放。垃圾回收器(GC)会在适当的时候将已经终止生命周期的变量的内存给释放掉。GC 的优点就在于它大大简化了应用层开发的复杂度，降低了内存泄露的风险。

25、image 和 canvas 在处理图片的时候有什么区别？

答：image 是通过对象的形式描述图片的；

canvas 通过专门的 API 将图片绘制在画布上。

26、简述移动开发的注意点，如何做好不同手机的适配，你以前的项目是怎么做的?

答：1、单独做移动端项目，采用百分比布局

2、采用响应式的方式做适配

27、响应式布局的时候，轮播图使用两张不同的图片去适配大屏幕和超小屏幕，还是一张图片进行压缩适配不同终端，说明原因？

答：最好使用两张不同大小的图片去适配大屏幕和超小屏幕，这样可以针对不同设备的屏幕大小，来加载响应的图片，减少超小屏幕设备的网络流量消耗，加快响应速度，同时防止图片在大屏幕下分辨率不够导致失真的问题。

28、http 和 tcp 有什么区别？

答：TPC/IP 协议是传输层协议，主要解决数据如何在网络中传输，是一种“经过三次握手”的可靠的传输方式；

HTTP 协议即超文本传送协议(Hypertext Transfer Protocol )，是应用层协议，是 Web 联网的基础，也是手机联

网常用的协议之一，HTTP 协议是建立在 TCP 协议之上的一种应用。

29、向 git 中添加一个文件并 commit，然后 push 到 remote server，请写出相关命令？

答：

$ git add README.md

$ git commit -m “add README.md”

$ git push origin master

35、设计模式有哪些？列举你在前端开发工作中自己应用到或者了解到其他框架所用到的设计模式？

答：单例、工厂、观察者、适配器、代理模式。

36、请描述你熟悉的语言的垃圾回收(GC)机制，他们对循环引用是如何处理的？如何查找内存泄漏 (MemoryLeak)?

答：JavaScript 的垃圾回收机制主要是根据数据是否还存在引用，没有引用的数据空间可能在某个时间被回收；在 java 中垃圾回收机制采用对象遍历来解决循环引用；windows 的任务管理器就可以查看到内存泄露。

前端经典面试题——Angular、主流框架和服务器相关问题

1、ng-app 是什么？

答：ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。

HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。

2、说说 MVC 和 MVVM 分别是什么？

答：MVC 全名是 Controller 模型(model)－视图(view)－控制器(controller)的缩写， MVVM 是 Model-View-ViewModel 的简写。

3、−g 是什么？

答：-g 是-global 的简称，全局的意思。

4、自定义指令的类型（E，A，C，M）？

答：元素（E）、属性（A）、类（C）、注释（M）。

5、$scope 和自定义指令里的 scope 有啥区别？

答：$scope 对象在 AngularJS 中充当数据模型的作用，也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样，因为 $scope 并不处理和操作数据，它只是建立了视图和 HTML 之间的桥梁，让视图和 Controller 之间可以友好的通讯.

自定义指令里的 scope 表示指令的作用域，它有三个可选值：true、false、对象{}

6、Ionic 中的路由？

答：Ionic 也是基于 Angular 的，使用的是 ui-router，

ui-router 的核心理念是将子视图集合抽象为一个状态机，导航意味着 状态的切换，Ionic 之所以没有使用 Angular 官方的 ngRoute，是回 ngRoute 缺少一些高级的特性，比如视图命名，视图嵌套。

7、filter？

答：过滤器。

8、ng-bind？

答：ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。

如果给定的变量或表达式修改了，指定替换的 HTML 元素也会修改。

9、说一说 link？

答：link 中可以拿到 scope 和 controller，可以与 scope 进行数据绑定，与其他指令进行通信。

10、为什么 angular 不推荐使用 dom 操作？

答：Angular 倡导以测试驱动开发，在的 service 或者 controller 中出现了 DOM 操作，那么也就意味着的测试是无法通过的

使用 Angular 的其中一个好处是啥，那就是双向数据绑定，这样就能专注于处理业务逻辑，无需关系一堆堆的 DOM 操作。如果在 Angular 的代码中还到处充斥着各种 DOM 操作，那为什么不直接使用 jquery 去开发呢。

11、看过 Angular 的源码吗，它是怎么实现双向数据绑定的？

答：angular 对常用的 dom 事件，xhr 事件等做了封装， 在里面触发进入 angular 的 digest 流程。

在 digest 流程里面， 会从 rootscope 开始遍历， 检查所有的 watcher。

12、ui-router 和 ng-router 区别？

答：AngularJS 的 ng-route 模块为控制器和视图提供了[Deep-Linking]URL ui-router 的核心理念是将子视图集合抽象为一个状态机，导航意味着 状态的切换。

13、什么是指令？

答：指令是指示计算机执行某种操作的命令，它由一串二进制数码组成。一条指令通常由两个部分组成：操作码+地址码。

14、service 服务三种方式是什么？

答：angularjs 中可通过三种（$provider，$factory，$service）方式自定义服务。

15、gulp 任务都是怎么定义，怎么执行的？

答：通过 gulp.task 方法定义任务，在项目中新建 gulpfile.js 文件，书写代码，如：

var gulp = require(‘gulp’)

gulp.tasks(

，function(){

//在这里写任务需要执行的代码

})；

在命令输入gulp 任务，可以执行所在目录 gulpfile.js 文件中的任务。

16、Bootstrap 中最多可以分多少列？lg、md、sm、xs 这几个屏幕宽度的界限是多少？

答：12 列

.col-xs- 超小屏幕手机 (<768px)

.col-sm- 小屏幕平板 (≥768px)

.col-md- 中等屏幕桌面显示器 (≥992px)

.col-lg- 大屏幕大桌面显示器 (≥1200px)

17、angular 中方法 apply 和 digest 区别？

答：当数据出现没有经过 angular 但是发生改变的情况下，需要调用 apply。Apply 的范围比较广，只执行一次，但是 digest 针对某一元素执行多次。

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

答：路由 Router

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

Web 服务并不会解析 hash，也就是说 # 后的内容 Web 服务都会自动忽略，但是 JavaScript 是可以通

过 window.location.hash 读取到的，读取到路径加以解析之后就可以响应不同路径的逻辑处理。优点可以控制 业务逻辑 做无页面刷新 体验更好

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

19、ng-show/hide 和 ng-if 的区别是什么？

答：Show/hide 是显示隐藏，if 是是否存在某一部分。

20、react 虚拟 DOM 运行机制是什么？

答：在 React 中，render 执行的结果得到的并不是真正的 DOM 节点，结果仅仅是轻量级的 JavaScript 对象，我们称之为 virtual DOM。虚拟 dom。

21、react 中 prop 和 state 的区别？

答：需要理解的是，props 是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件。而 state 代表的是一个组件内部自身的状态（可以是父组件、子孙组件）。

22、redux 的原理？

答：Redux 把一个应用程序中，所有应用模块之间需要共享访问的数据，都应该放在 State 对象中。这个应用模块可能是指 React Components，也可能是你自己访问 AJAX API 的代理模块，具体是什么并没有一定的限制。 State 以 “树形” 的方式保存应用程序的不同部分的数据。这些数据可能来自于网络调用、本地数据库查询、甚至包括当前某个 UI 组件的临时执行状态（只要是需要被不同模块访问）。

23、node 常用模块？

答：http fs path url Buffer process

24、了解 npm，spm，nodejs 吗，请简要描述？

答：NPM 便于 JavaScript 开发者共享和重用代码，它可以很容易地更新你的代码；再分享。是全球最大的开源库生态系统。

SPM 是淘宝社区电商业务（xTao）为外部合作伙伴（外站）提供的一套跟踪引导成交效果数据的解决方案。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O

的模型，使其轻量又高效。它使我们能够在本地运行 javascript。

25、请列举在内网的两台服务器中拷贝文件的方法？用 Shell 脚本解答数据库？

答：scp -P 1234 -r test_folder user@192.168.1.20：~

主要就是 scp 命令的使用

26、请描述你所熟悉的 Web 服务器框架(如 Django)作为一个成熟的 Web 框架，需要提供哪些重要的功能模块？

答：提供了网站开发的常用模块：处理用户请求、操作数据库、模板渲染、配置文件管理等。

27、服务器 Node.js 和浏览器 js 的区别是什么？Node.js 把 js 从客户端迁移了到服务端、主要做了哪些工作？为什么说 Node.js 适合做高并发的互联网应用？

答：Node 采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。Node.js 使用事件驱动，非阻塞 I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

前端面试问题－网络相关问题

1、请解释下列术语：UrlEncode，Utf8，JSON，UTC，MD5？

答：Urlencode：将字符串以 url 形式编码（在编程语言中通常都有实现该功能的内置函数或者 API）。

Utf8：是一种针对 Unicode 的可变长度字符编码，主要用于在网页上显示各国语言字符。

2、请解释 GET/POST 的区别，以及请求参数放到 url 里和放到 body 里面的区别？

答：Post 与 Get 区别：

GET 请求，请求的数据会附加在 URL 之后，以?分割 URL 和传输数据，多个参数用&连接。URL 的编码格式采用的是 ASCII 编码，而不是 uniclde，即是说所有的非 ASCII 字符都要编码之后再传输。

POST 请求：POST 请求会把请求的数据放置在 HTTP 请求包的包体中。上面的 item=bandsaw 就是实际的传输数据。

因此，GET 请求的数据会暴露在地址栏中，而 POST 请求则不会。

传输数据的大小

在HTTP 规范中，没有对 URL 的长度和传输的数据大小进行限制。但是在实际开发过程中，对于 GET，特定的浏览器和服务器对 URL 的长度有限制。因此，在使用 GET 请求时，传输数据会受到 URL 长度的限制。

对于 POST，由于不是 URL 传值，理论上是不会受限制的，但是实际上各个服务器会规定对 POST 提交数据大小进行限制，Apache、IIS 都有各自的配置。

安全性

Get 是 Form 的默认方法，安全性相对比较低。请求参数放到 url 里和放到 body 里面的区别

首先，参数的存放位置我们无法直接指定，而是不同的请求方法参数传递的方式不同。

常用的 HTTP 请求主要为 GET 请求和 POST 请求两种，GET 请求的参数会通过以跟随在 URL 后边以键值对的方式进行传递（例：key1=a&key2=b&key3…)；而 POST 请求的参数会通过 HEADER 进行传递。考虑到安全性

的问题，可以确定两者都不安全，原因是 HTTP 请求可以被轻易抓包和截获，其中的请求参数值自然会很容易被获取。

3、请列举出常用的 Http Header，Cookie 是怎么实现的？

答：Content-Length，请求、响应体的数据字节大小

Accept-Encoding，请求头，可接受的文本压缩算法，如： gzip， deflate

Accept-Language，请求头，支持语言，客户端浏览器的设置，如：zh-cn，zh；q=0.8，en-us；q=0.5，en；q=0.3

User-Agent，请求头，浏览器信息，

Cookie，请求头，服务器或客户端在上次设置的 COOKIE，包括作用域名(.360buy.com)，过期时间，键与值。Referer，从一个连接打开一个新页面，新页面的请求一般会加此信息，标名是从哪里跳过来的，所有的页面

的打开历史链就可被挖掘出来，有利于分析用户行为与 CPS 分成

Cookie 在浏览器本地会有一个文件存储数据，通信的时候通过请求头和响应头传递数据

4、请解释下列返回码的含义：200，302，400，403，500，502

答：200：请求成功

302：请求的资源临时从不同的 URI 响应请求。(资源临时重定向)

400：错误请求（请求的参数错误或者服务器不理解请求的语法）

402：10.4.3 402 Payment Required This code is reserved for future use.

该状态码是为了将来可能的需求而预留的

500：服务器端错误

502：网关或代理无效/无响应，网络错误

5、长连接和短连接的区别

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

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

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

1、什么是 Keep-Alive 模式？

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

6、从服务器考虑提高网站性能？

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

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

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

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

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

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

服务器端能做的工作：

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

7、什么是 Daemon 进程？

答：Daemon()程序是一直运行的服务端程序，又称为守护进程。通常在系统后台运行，没有控制终端，不与前台交互，Daemon 程序一般作为系统服务使用。Daemon 是长时间运行的进程，通常在系统启动后就运行，在系统关闭时才结束。一般说 Daemon 程序在后台运行，是因为它没有控制终端，无法和前台的用户交互。Daemon 程序一般都作为服务程序使用，等待客户端程序与它通信。我们也把运行的 Daemon 程序称作守护进程。

8、优化一个以 I/O 为瓶颈的程序，以下哪些方法效果比较显著，Why?

a)增加 CPU 数目

b)提高 CPU 主频

c)增大内存的容量

d)采用多线程

e)采用异步 I/O 和多路(Multlplex)I/O

f)对每次 I/O 进行 Bath 访问(多次 I/O 合并一次完成)

答：c、e、d、f 提升的效果会比较显著

c 通过将数据预读取到内存中（建立内存池）的方式，提高访问时候的效率，有效减少磁盘 IO 读写次数。

9 、什么是内存对象的序列化(Serialiization) ？为什么要序列化？请描述你熟悉的网络传输序列化(Serialiization)框架或格式(Server)？

答：把对象转换为字节序列的过程称为对象的序列化

序列化主要用于网络传输数据及将数据保存在硬盘上

常见的序列化以后的格式有：XML Jason ，但它们都是字符串

前端面试问题——项目相关问题

1、请谈下团购倒计时如何实现？

答：团购倒计时页面端的效果比较好实现，主要是样式和时间的操作，重要的考虑时间要和服务器端同步，其实这个效果也可以基于服务器端推送技术来实现。

2、轮播图有哪几种？如何实现？

答：纯 CSS 可以实现轮播图；JS 实现轮播图。

3、如何实现数组去重？

答：

A. 最简单的可以直接利用 ES5 的 indexOf 方法。

function dupRemove(arr) {
var tmp = []； //一个新的临时数组

for (var i = 0； i < arr.length； i++) {

// 判断 tmp 数组中是否存在 arr 中第 i 元素，如果不存在则添加到 tmp 数据组。 if (tmp.indexOf(arr[i]) == -1) {

tmp.push(arr[i])；

}

}

return tmp；

}

B. 还有一种比较有意思的写法 function dupRemove (arr) {
var tmp = []；

for (var i = 0， l = arr.length； i < l； i++) { for (var j = i + 1； j < l； j++) {

if (arr[i] === arr[j]) {

j = ++i；

}

}

tmp.push(arr[i])；

}

return r；

}

4、写一个方法获取 url 中？号后面的参数，并将参数对象化？

答：function getSearch (url) {

var reg_url = /^[?]+?([\w\W]+)$/，

reg_params = /([^&=]+)=([\w\W]*?)(&|$|#)/g，

arr_url = reg_url.exec(url)，

ret = {}；

if (arr_url && arr_url[1]) {

var str_ params = arr_url[1]， result；

while ((result = reg_ params.exec(str_ params)) != null) {
ret[result[1]] = result[2]；

}

}

return ret

}

前端面试题——程序题

1、var a=[]； a[0]=0；a[1]=1；a[4]=4；请问 a.length 的值是多少？a[3]的输出结果是什么？

5 undefined

2、var a=[5，6]； var b=a； b[0]=“hello”； alert(a[0])； 请问值是多少？

“hello”

3、typeof(null)，typeof(undefined)，typeof(NaN)，typeof(NaN==NaN)，说出上面代码执行结果？

object

undefined

number

boolean

4、function doSomething(){

for(var i = 0； 4 > i； i++) {

var k = 100；

aMrg +=’，’ + (k + i)；

}

}

var k = 1，aMrg = k；

doSomething()；

aMrg +=k；

log(aMrg)；

1，100，101，102，1031

5、请写出下面输出的值

Console.log(undefined || 1)；//值___1__

Console.log(null || NaN)；//值__NaN___

Console.log(0 && 1)；//值__0___

Console.log(0 && 1 || 0)；//值__0___
6、看下列代码，

标签内的文字是什么颜色的？ 红色

7、var a = [5，6]； var b = a； b[0] = “hello”； alert(a[0])； 值是多少？

“hello”

8、你面前有一座高塔，这座高塔有 N(N > 100)个台阶，你每次只能往前迈 1 个或者 2 个台阶，请写出程序计算

总共有多少种走法？

这个案例满足斐波那契定律 1，1，2，3，5，8，13，21， 34， 55， 89， 144

var n1 = 1；

var n2 = 1；

var n3 = n1 + n2；

for (var i = 3； i <= n； i++) {

n3 = n1 + n2；

n1 = n2；//往后推一项

n2 = n3；//往后推一项

}

console.log(n3)；