前端面试题汇总笔试题

﹏ヽ暗。殇╰゛Y 2022-05-31 07:28 8064阅读 0赞

**前端面试题目**

**1.        div和span的区别？**

div是块级标签，span是行级标签

**2. 在html中，position取值有哪几种，默认值是什么？**

取值：static、relative、fixed、absolute

默认值：static

**3. 前端页面由哪三层构成，分别是什么？作用是什么？**

前端页面构成：结构层、表示层、行为层

结构层（structural layer）

由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层（presentation layer）

由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

**4. 如何居中一个浮动元素？**

方式1:设置容器的浮动方式为相对定位，然后确定容器的宽高比如宽500 高 300 的层，然后设置层的外边距。

<!DOCTYPEHTML>

<html>

<head>

<styletype="text/css">

div\{

width: 500px;

height: 300px;

margin: -150px 0 0 -250px;

position: absolute;

left: 50%;

top: 50%;

background-color: yellow;

</style>

</head>

<body>

<div>

元素居中

</div>

</body>

</html>

方式2：需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

<styletype="text/css">

<!--

div \{

position:absolute;

top:50%;

left:50%;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid \#008800;

\-->

</style>

<div>让层垂直居中于浏览器窗口</div>

**5. 请简述HTML和XHTML最重要的4点不同？**

不同：

XHTML要求正确嵌套  
                   XHTML 所有元素必须关闭  
                   XHTML 区分大小写  
                   XHTML 属性值要用双引号  
                   XHTML 用 id 属性代替 name 属性  
                   XHTML 特殊字符的处理

**6. 页面布局中常听说的“结构与表现”分离，“结构”是指？“表现”是指？**

“结构”：HTML

“表现”：CSS

**7. 怎么样从web前端方面优化性能？至少列举5点？**

** **

1)        HTML部分

u 语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；

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

u 给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；

u 防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；

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

u 链接为目录或首页的地址后面加”/”，如http://www.5icool.org/；

u 用LINK而不用@import方式导入样式；

u 样式放在页头，JS放在页尾；

u 缩小favicon.ico并缓存；

2)        CSS部分

u 避免使用CSS Expressions(CSS表达式)：如background-color: expression( (newDate()).getHours()%2 ? “\#B8D4FF” : “\#F08A00″ ) ;

u 避免使用CSS Filter（CSS滤镜）；

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

u 通过CSSSprites把同类图片合成一张，减少图片请求；

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

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

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

u 删除重复的CSS；

3)        Javscript部分

u 尽量少用全局变量；

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

u 避免频繁操作DOM节点；

u 不使用EVAL；

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

u 类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；

u 对字符串进行循环操作，譬如替换、查找，应使用正则表达式；

u 删除重复的JS；

4)        服务器部分

u 尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；

u 压缩CSS、JS文件，缩短文件传输时间；

u 避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；

u 一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，这可以减少网站并行下载的数量，但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡；

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

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

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

u 使用gzip压缩内容；

**8. JavaScript中哪些方法获取元素?**

getElementById

getElementsByClassName

getElementsByTagName

getElementsByName

**9. 描述CSS hack技巧?**

条件注释：仅适用于IE

特定符号：适用于能识别特定符号的浏览器

内核符号：针对不同浏览器内核

**10.用JS截取字符串，asdfgh，要fgh;?**

方式1： ‘asdfgh’.substr(3,3)

方式2： ’asdfgh’.substring(3,5) 或者 ‘asdfgh’.substring(3)

**11.IE6的双倍边距BUG指的是什么？怎么解决？**

双边距：当块级元素有浮动样式的时候，给元素添加margin-left和margin-right样式，在ie6下就会出现双倍边距。

解决方案：给当前元素添加样式，使当前元素不为块，如：display:inline;display:list-item

**12. 如果制作一个访问量很大的网站，对css，js和图片应该怎么处理?**

方法1：资源文件按模块进行放置，有利于团队开发

方法2：图片尽量采取聚合技术

方法3：精简压缩css和js文件，减少文件大小

方法4：类库、媒体使用CDN加速，减轻服务器压力

**13.述ajax原理，什么是同步异步(主观题，答案不唯一)?**

Ajax的工作原理：相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

同步异步：

**14. 平时有没有使用xml和json，在ajax交互中，哪一种更易于开发和维护，js中怎么序列化JSON字符串?**

有，json相比xml可读性和可扩张性好、编码及解码难度较低、在数据交互中带宽占用少，并且在当下是最流行的数据交互格式。

序列化JSON字符串：eval() 或者 JSON.parse()

**15. JS怎么创建一个类?**

方式1 : var obj = new Object();

方式2 : var obj = \{\};

**16.JS的typeof返回哪些数据类型?**

string、number、object、boolean、function、undefined

**17. HTTP请求有哪几种？**

post、get

**18. 完成下面布局（兼容IE6-10以及FF、谷歌、苹果浏览器）?**

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>

<style>

body \{

margin: 0;

padding: 0;

\#body \{

background-color: \#0099CB;

width: 100%;

float: left;

\#header \{

height: 60px;

background-color: \#999999;

\#content \{

background-color: \#006766;

margin-left: 180px;

\#sidebar \{

width: 180px;

float: left;

\#footer \{

clear: both;

height: 60px;

background-color: \#999999;

</style>

</head>

<body>

<divid="header"></div>

<divid="body">

<divid="sidebar"></div>

<divid="content"></div>

</div>

<divid="footer"></div>

</body>

</html>

**19.闭包是什么？有什么特性？请简单书写一个简单事例？**

必包：闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）

特性：闭包是能够读取其他函数内部变量的函数，即在外面可以调用函数中的函数的变量，其实他就是将函数内外部连接起来的桥梁

事例：

<scripttype=’text/javascript’>

function a()\{

var i = 99;

iAdd = function()\{

i++;

function b()\{

alert(i);

return b;

var result = a();

result();//结果为99

iAdd();

result();//结果为100

</script>

20.  **解释jsonp的原理，以及为什么不是真正的ajax（主观题）？**  
  
JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

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

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

** **

**22. 对WEB标准以及W3C的理解与认识？**  
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

** **

**23. xhtml和html有什么区别？**  
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言  
最主要的不同：  
XHTML 元素必须被正确地嵌套。  
XHTML 元素必须被关闭。  
标签名必须用小写字母。  
XHTML 文档必须拥有根元素。

** **

**24. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?**  
用于声明文档使用那种规范（html/Xhtml）一般为严格 过度 基于框架的html文档  
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug

** **

**25.    行内元素有哪些？块级元素有哪些？CSS的盒模型？**

块级元素：div p h1 h2 h3 h4 form ul  
行内元素: a b br i span input select  
Css盒模型:内容，border ,margin，padding

**26.CSS引入的方式有哪些?link和@import的区别是?**  
内联 内嵌 外链 导入  
区别 ：同时加载  
前者无兼容性，后者CSS2.1以下浏览器不支持  
Link 支持使用javascript改变样式，后者不可

**27.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？**  
标签选择符 类选择符 id选择符  
继承不如指定 Id>class>标签选择  
后者优先级高

**28.前端页面有哪三层构成，分别是什么？作用是什么？**  
结构层 Html 表示层 CSS 行为层 js

**29.css的基本语句构成是？**  
选择器\{ 属性1:值1;属性2:值2;……\}

**30.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?**  
Ie(Ie内核)火狐（Gecko）谷歌（webkit） opear(Presto)

**31.写出几种IE6 BUG的解决方法？**  
1.双边距BUG float引起的使用display  
2.3像素问题使用float引起的使用dislpay:inline-3px  
3.超链接hover 点击后失效使用正确的书写顺序link visited hover active  
4.Ie z-index问题给父级添加position:relative  
5.Png 透明使用js代码改  
6.Min-height 最小高度！Important解决’  
7.select 在ie6下遮盖使用iframe嵌套  
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

**32.<img>标签上title与alt属性的区别是什么？** 
Alt 当图片不显示是用文字代表。 
Title 为该属性提供信息

**33.描述css reset的作用和用途？**  
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一

**34.解释css sprites，如何使用？**  
Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

**35.浏览器标准模式和怪异模式之间的区别是什么？**  
盒子模型渲染模式的不同  
使用 window.top.document.compatMode 可显示为什么模式

**36.你如何对网站的文件和资源进行优化？期待的解决方案包括：**  
文件合并  
文件最小化/文件压缩  
使用CDN托管  
缓存的使用

**37.什么是语义化的HTML？**  
直观的认识标签对于搜索引擎的抓取有好处

**38.清除浮动的几种方式，各自的优缺点？**  
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）  
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）  
3.是用afert伪元素清除浮动(用于非IE浏览器)

**39.javascript的typeof返回哪些数据类型？**  
Object number function boolean underfind

**40.例举3种强制类型转换和2种隐式类型转换？**  
强制（parseInt,parseFloat,number）  
隐式（== – ===）

**41.split() join() 的区别？**  
前者是切割成数组的形式，后者是将数组转换成字符串

**42.数组方法pop() push() unshift() shift()？**  
Push()尾部添加 pop()尾部删除  
Unshift()头部添加 shift()头部删除

**43.14.JS中的call()和apply()方法的区别？**

例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);

注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

function add(a,b)

alert(a+b);

function sub(a,b)

alert(a-b);

add.call(sub,3,1);

**44.IE和DOM事件流的区别？**  
1.执行顺序不一样、  
2.参数不一样  
3.事件加不加on  
4.this指向问题

**45.IE和标准下有哪些兼容性的写法？**  
Var ev = ev || window.event  
document.documentElement.clientWidth || document.body.clientWidth  
Var target = ev.srcElement||ev.target

**46.ajax请求的时候get 和post方式的区别？**  
一个在url后面一个放在虚拟载体里面  
有大小限制  
安全问题  
应用不同一个是论坛等只需要请求的，一个是类似修改密码的

**47.call和apply的区别？**  
Object.call(this,obj1,obj2,obj3)  
Object.apply(this,arguments)

**48.ajax请求时，如何解释json数据？**  
使用eval parse 鉴于安全性考虑使用parse更靠谱

**49.new操作符具体干了什么呢?**

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

var obj  = \{\};

obj.\_\_proto\_\_ = Base.prototype;

Base.call(obj);

**50.写一个获取非行间样式的函数？**

functiongetStyle(obj,attr,value)  
\{  
if(!value)  
\{  
if(obj.currentStyle)  
\{  
return obj.currentStyle(attr)  
\}  
else  
\{  
obj.getComputedStyle(attr,false)  
\}  
\}  
else  
\{  
obj.style\[attr\]=value  
\}  
\}

**51.事件委托是什么？**  
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！  
[http://www.webasily.com/?p=78][http_www.webasily.com_p_78] 例子可见此链接

**52.闭包是什么，有什么特性，对页面有什么影响？**  
闭包就是能够读取其他函数内部变量的函数。  
[http://blog.csdn.net/gaoshanwudi/article/details/7355794][http_blog.csdn.net_gaoshanwudi_article_details_7355794] 此链接可查看（问这个问题的不是一个公司）

**53.如何阻止事件冒泡和默认事件？**  
canceBubble return false

**54.添加删除替换插入到某个接点的方法？**  
obj.appendChidl()  
obj.innersetBefore  
obj.replaceChild  
obj.removeChild

**55.解释jsonp的原理，以及为什么不是真正的ajax？**  
动态创建script标签，回调函数  
Ajax是页面无刷新请求数据操作

**56.javascript的本地对象，内置对象和宿主对象？**  
本地对象为array obj regexp等可以new实例化  
内置对象为gload Math 等不可以实例化的  
宿主为浏览器自带的document,window 等

**57.document load 和document ready的区别？**  
Document.onload 是在结构和样式加载完才执行js  
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

**58.”==”和“===”的不同？**  
前者会自动转换类型  
后者不会

**59.javascript的同源策略？**  
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

**60.编写一个数组去重的方法？**

function oSort(arr)

varresult =\{\};

varnewArr=\[\];

for(vari=0;i<arr.length;i++)

if(!result\[arr\])

newArr.push(arr)

result\[arr\]=1

returnnewArr

**61.Doctype作用? 严格模式与混杂模式\-如何触发这两种模式，区分它们有何意义?**

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html>标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

**62.行内元素有哪些？块级元素有哪些？空(void)元素有那些？**

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素： <hr> <img> <input> <link><meta>

鲜为人知的是： <area><base> <col> <command> <embed> <keygen><param> <source> <track>

**63.CSS的盒子模型？**

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了border 和 pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

**64.link 和@import 的区别是?**

（1）、link属于XHTML标签，而@import是CSS提供的;

（2）、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）、import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

（4）、link方式的样式的权重 高于@import的权重.

**65.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？**

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）

可继承： font-sizefont-family color, UL LI DL DD DT;

不可继承 ：border paddingmargin width height ;

优先级就近原则，样式定义最近者为准;

载入样式以最后载入的定位为准;

优先级为:

!important >  id > class > tag

important 比 内联优先级高

CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 元素的每个 元素。

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

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

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

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

:enabled、:disabled控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

**66.如何居中div,如何居中一个浮动元素?**

·        给div设置一个宽度，然后添加margin:0 auto属性

·            div\{

·                width:200px;

·                margin:0 auto;

·             \}

·        居中一个浮动元素

·              确定容器的宽高 宽500 高 300 的层

·              设置层的外边距

·             .div \{

·              Width:500px ; height:300px;//高度可以不设

·              Margin: -150px 0 0 -250px;

·              position:relative;相对定位

·              background-color:pink;//方便看效果

·              left:50%;

·              top:50%;

·            \}

**67.浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？**

\* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；

\* png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

\* 浏览器默认的margin和padding不同。解决方案是加一个全局的\*\{margin:0;padding:0;\}来统一。

\* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离 \#box\{float:left; width:10px; margin:0 0 0 100px;\}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——\_display:inline;将其转化为行内属性。(\_这个符号只有ie6会识别)

渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。

接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css

.bb\{

background-color:\#f1ee18;/\*所有识别\*/

.background-color:\#00deff\\9; /\*IE6、7、8识别\*/

+background-color:\#a200ff;/\*IE6、7识别\*/

\_background-color:\#1e0bd1;/\*IE6识别\*/

\*  IE下,可以使用获取常规属性的方法来获取自定义属性,

也可以使用getAttribute()获取自定义属性;

Firefox下,只能使用getAttribute()获取自定义属性.

解决方法:统一通过getAttribute()获取自定义属性.

\*  IE下,even对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

\* （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

\* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A :  a:link \{\} a:visited \{\}a:hover \{\} a:active \{\}

**68.html5\\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？**

·        HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。

·        \* 绘画 canvas 元素

·          用于媒介回放的 video和 audio 元素

·          本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；

·          sessionStorage 的数据在浏览器关闭后自动删除

·          语意化更好的内容元素，比如 article、footer、header、nav、section

·          表单控件，calendar、date、time、email、url、search

·          CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器 多背景 rgba

·          新的技术webworker,websockt, Geolocation

·      移除的元素

·        纯表现的元素：basefont，big，center，font, s，strike，tt，u；

·        对可用性产生负面影响的元素：frame，frameset，noframes；

·        \* 是IE8/IE7/IE6支持通过document.createElement方法产生的标签，

·          可以利用这一特性让这些浏览器支持HTML5新标签，

·          浏览器支持新标签后，还需要添加标签默认的样式：

·        \* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

·           <!--\[if lt IE 9\]>

·           <script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

·           <!\[endif\]-->

**69.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?**

\* 首先划分成头部、body、脚部；。。。。。

实现效果图是最基本的工作，精确到2px；

与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验

处理hack，兼容、写出优美的代码格式

针对服务器的优化、拥抱 HTML5。

**70.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？**

\* 使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超过91%。

轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。

（理解这些框架的功能、性能、设计原理）

\* Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

\* 城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好）

1.    JavaScript原型，原型链 ? 有什么特点？

2.  \*  原型对象也是普通的对象，是对象一个自带隐式的 \_\_proto\_\_ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。

3.  \*  原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。

5.  \* JavaScript的数据对象有那些属性值？

7.  　　writable：这个属性的值是否可以改。

9.  　　configurable：这个属性的配置是否可以删除，修改。

10.

11. 　　enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。

12.

13. 　　value：属性值。

14.

15. \* 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找他的Prototype对象是否有这个属性。

16.

17.  function clone(proto) \{

18.

19. 　　function Dummy() \{ \}

20.

21. 　　Dummy.prototype = proto;

22.

23. 　　Dummy.prototype.constructor = Dummy;

24.

25. 　　return new Dummy(); //等价于Object.create(Person);

26.

27.  \}

28.

29.         functionobject(old) \{

30.          function F() \{\};

31.          F.prototype =old;

32.          return new F();

33.         \}

34.     var newObj = object(oldObject);

**71.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？**

1.    block 象块类型元素一样显示。

none 缺省值。向行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

\*absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

\*fixed （老IE不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。

\*relative

生成相对定位的元素，相对于其正常位置进行定位。

\* static  默认值。没有定位，元素出现在正常的流中

\*（忽略 top, bottom, left,right z-index 声明）。

\* inherit 规定从父元素继承 position 属性的值。

**72.页面重构怎么操作？**

编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。

**73.语义化的理解？**

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

**74.HTML5的离线储存？**

localStorage    长期存储数据，浏览器关闭后数据不丢失；

sessionStorage  数据在浏览器关闭后自动删除。

**75.为什么要初始化CSS样式。**

·     因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

·     当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

\*最简单的初始化方法就是： \* \{padding: 0;margin: 0;\} （不建议）

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li,pre, form, fieldset, legend, button, input, textarea, th, td \{ margin:0;padding:0; \}

body, button, input, select, textarea \{ font:12px/1.5tahoma, arial,\\5b8b\\4f53; \}

h1, h2, h3, h4, h5, h6\{ font-size:100%; \}

address, cite, dfn, em, var \{ font-style:normal; \}

code, kbd, pre, samp \{ font-family:couriernew, courier, monospace; \}

small\{ font-size:12px; \}

ul, ol \{ list-style:none; \}

a \{ text-decoration:none; \}

a:hover \{ text-decoration:underline; \}

sup \{ vertical-align:text-top; \}

sub\{ vertical-align:text-bottom; \}

legend \{ color:\#000; \}

fieldset, img \{ border:0; \}

button, input, select, textarea \{ font-size:100%; \}

table \{ border-collapse:collapse; border-spacing:0; \}

**76.(写)描述一段语义的html代码吧。**

（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）

就是基于语义化设计原则）

< div id="header">

< h1>标题< /h1>

< h2>专注Web前端技术< /h2>

< /div>

·    语义 HTML 具有以下特性：

·        文字包裹在元素中，用以反映内容。例如：

·        段落包含在 元素中。

·        顺序表包含在<ol>元素中。

·        从其他来源引用的大型文字块包含在<blockquote>元素中。

·        HTML 元素不能用作语义用途以外的其他目的。例如：

·        <h1>包含标题，但并非用于放大文本。

·        <blockquote>包含大段引述，但并非用于文本缩进。

·        空白段落元素 ( ) 并非用于跳行。

·        文本并不直接包含任何样式信息。例如：

·        不使用 或 <center> 等格式标记。

·        类或 ID 中不引用颜色或位置。

**77.iframe有那些缺点？**

\*iframe会阻塞主页面的Onload事件；

\*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript

动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

22.css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/\*权重为1\*/

div\{

/\*权重为10\*/

.class1\{

/\*权重为100\*/

\#id1\{

/\*权重为100+1=101\*/

\#id1 div\{

/\*权重为10+1=11\*/

.class1 div\{

/\*权重为10+10+1=21\*/

.class1 .class2 div\{

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

**78.eval是做什么的？**

它的功能是把对应的字符串解析成JS代码并运行；

避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

23.写一个通用的事件侦听器函数

\`// event(事件)工具集，来源：https://github.com/markyun

markyun.Event = \{

// 页面加载完成后

readyEvent : function(fn) \{

if (fn==null) \{

fn=document;

var oldonload = window.onload;

if (typeof window.onload != 'function') \{

window.onload = fn;

\} else \{

window.onload = function() \{

oldonload();

fn();

\};

\},

// 视能力分别使用dom0||dom2||IE方式来绑定事件

// 参数： 操作的元素,事件名称 ,事件处理程序

addEvent : function(element, type, handler) \{

if (element.addEventListener) \{

//事件类型、需要执行的函数、是否捕捉

element.addEventListener(type,handler, false);

\} else if (element.attachEvent) \{

element.attachEvent('on' + type,function() \{

handler.call(element);

\});

\} else \{

element\['on' + type\] = handler;

\},

// 移除事件

removeEvent : function(element, type, handler) \{

if (element.removeEnentListener) \{

element.removeEnentListener(type,handler, false);

\} else if (element.datachEvent) \{

element.detachEvent('on' + type,handler);

\} else \{

element\['on' + type\] = null;

\},

// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)

stopPropagation : function(ev) \{

if (ev.stopPropagation) \{

ev.stopPropagation();

\} else \{

ev.cancelBubble = true;

\},

// 取消事件的默认行为

preventDefault : function(event) \{

if (event.preventDefault) \{

event.preventDefault();

\} else \{

event.returnValue = false;

\},

// 获取事件目标

getTarget : function(event) \{

return event.target || event.srcElement;

\},

// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；

getEvent : function(e) \{

var ev = e || window.event;

if (!ev) \{

var c = this.getEvent.caller;

while (c) \{

ev = c.arguments\[0\];

if (ev && Event ==ev.constructor) \{

break;

c = c.caller;

return ev;

\};

24.99%的网站都需要被重构是那本书上写的？

\* 网站重构：应用web标准进行设计（第2版）

**79.什么叫优雅降级和渐进增强？**

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

**80.Node.js的适用场景？**

高并发、聊天、实时消息推送

**81.WEB应用从服务器主动推送Data到客户端有那些方式？**

html5 websoket

WebSocket通过Flash

XHR长时间连接

XHR Multipart Streaming

不可见的Iframe

**82.js的几种数据类型？**

number,string,boolean,object,undefined

js的常见内置对象类：Date,Array,Math、Number、Boolean、String、Array、RegExp、Function...

·      通常可以做一些小练习来判断TA的水平，js 虽然很灵活，但是具体的代码和实现方式能体现出一个人的全局观，随着代码规模的增长，复杂度增加，如何合理划分模块实现功能和接口的能力比较重要。（下面例题）

·        \["1","2", "3"\].map(parseInt)

·        \[typeof null, nullinstanceof Object\]

·        \[ \[3,2,1\].reduce(Math.pow),\[\].reduce(Math.pow)\] \]

·         var val = 'smtg';

·         console.log('Value is ' + (val === 'smtg') ?'Something' : 'Nothing');

**83.创建一个对象？**

function Person(name, age) \{

this.name = name;

this.age = age;

this.sing = function() \{ alert(this.name) \}

**84.谈谈This对象的理解？**

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是总有一个原则，那就是this指的是调用函数的那个对象。

this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

**85.事件、IE与火狐的事件机制有什么区别？如何阻止冒泡？**

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

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

3. ev.stopPropagation();

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

·      待完善

·      执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.

·          function say667() \{

·            // Local variable that ends up withinclosure

·            var num = 666;

·            var sayAlert = function() \{ alert(num); \}

·            num++;

·            return sayAlert;

·        \}

·         var sayAlert = say667();

·         sayAlert()//执行结果应该弹出的667

**87.如何判断一个对象是否属于某个类？**

使用instanceof （待完善）

if(a instanceof Person)\{

alert('yes');

**88.JSON 的了解？**

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

\{'age':'12', 'name':'back'\}

**89.ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?**

·              待完善

·          1. 通过异步模式，提升了用户体验

·          2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

·          3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

·          2. Ajax的最大的特点是什么。

·          Ajax可以实现动态不刷新（局部刷新）

·          readyState属性 状态 有5个可取值： 0=未初始化 ，1=正在加载 2=以加载，3=交互中，4=完成

·      ajax的缺点

·          1、ajax不支持浏览器back按钮。

·          2、安全问题 AJAX暴露了与服务器交互的细节。

·          3、对搜索引擎的支持比较弱。

·          4、破坏了程序的异常机制。

·          5、不容易调试。

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

**90.模块化怎么做？**

[立即执行函数][Link 1],不暴露私有成员

var module1 = (function()\{

var \_count = 0;

var m1 = function()\{

//...

\};

var m2 = function()\{

//...

\};

return \{

m1 : m1,

m2 : m2

\};

\})();

**91.对Node的优点和缺点提出了自己的看法？**

\*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，

因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。

此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，

因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

\*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，

而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

**92.异步加载的方式？**

(1) defer，只支持IE

(2) async：

(3) 创建script，插入到DOM中，加载完毕后callBack

documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

**93.告诉我答案是多少？**

(function(x)\{

delete x;

alert(x);

\})(1+5);

函数参数无法delete删除，delete只能删除通过for in访问的属性。

当然，删除失败也不会报错，所以代码运行会弹出“1”。

**94.Jquery与jQuery UI 有啥区别？**

\*jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

\*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。

提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

**95.jquery 中如何将数组转化为json字符串，然后再转化回来？**

jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：

$.fn.stringifyArray = function(array) \{

return JSON.stringify(array)

$.fn.parseArray = function(array) \{

return JSON.parse(array)

然后调用：

$("").stringifyArray(array)

**96.前端开发的优化问题？**

·          （1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

·          （2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

·          （3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

·          （4）当需要设置的样式很多时设置className而不是直接操作style。

·          （5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

·          （6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

·          （7）图片预加载，将样式表放在顶部，将脚本放在底部  加上时间戳。

·          （8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。

**97.http状态码有那些？分别代表是什么意思？**

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。400    1、语义有误，当前请求无法被服务器理解。401   当前请求需要用户验证 403  服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。 503 – 服务不可用

**98.平时如何管理你的项目，如何设计突发大规模并发架构？**

先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

页面进行标注（例如 页面 模块 开始和结束）；

CSS跟HTML分文件夹并行存放，命名都得统一（例如style.css）

JS 分文件夹存放 命民以该JS 功能为准英文翻译；

图片采用整合的 images.png png8 格式文件使用尽量整合在一起使用方便将来的管理

1.        那些操作会造成内存泄漏？

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

3.  垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

5.  setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

6.  闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

**99.JavaScript是一门什么样的语言，它有哪些特点？**

没有标准答案。

**100。.JavaScript的数据类型都有什么？**

基本数据类型：String,boolean,Number,Undefined, Null

引用数据类型：Object(Array,Date,RegExp,Function)

**101.如何判断某变量是否为数组数据类型？**

·        方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效

·        方法二.obj instanceof Array 在某些IE版本中不正确

·        方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(),保证其兼容性，最好的方法如下：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6</td> 
 <td>if(typeof Array.isArray==="undefined") { &nbsp;&nbsp;Array.isArray = function(arg){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return Object.prototype.toString.call(arg)==="[object Array]" &nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp; }</td> 
 </tr> 
 </tbody> 
</table>

**102.已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1</td> 
 <td>document.getElementById(“ID”).value</td> 
 </tr> 
 </tbody> 
</table>

**103.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8</td> 
 <td>var domList = document.getElementsByTagName(‘input’) var checkBoxList = []; var len = domList.length;//缓存到局部变量 while (len--) { //使用while的效率会比for循环更高 if (domList[len].type == ‘checkbox’) { &nbsp;&nbsp;&nbsp;&nbsp;checkBoxList.push(domList[len]); } }</td> 
 </tr> 
 </tbody> 
</table>

**104.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3</td> 
 <td>var dom = document.getElementById(“ID”); dom.innerHTML = “xxxx” dom.style.color = “#000”</td> 
 </tr> 
 </tbody> 
</table>

**105.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？**

·         直接在DOM里绑定事件：<div οnclick=”test()”></div>

·         在JS里通过onclick绑定：xxx.onclick = test

·         通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

那么问题来了，Javascript的事件流模型都有什么？

·        “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

·        “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

·        “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

**106.什么是Ajax和JSON，它们的优缺点?**

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优点：

·        　可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量

·        　避免用户不断刷新或者跳转页面，提高用户体验

缺点：

·        　对搜索引擎不友好（

·        　要实现ajax下的前后退功能成本较大

·        　可能造成请求数的增加

·        　跨域问题限制

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

**107.看下列代码输出为何？解释原因。**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3</td> 
 <td>var a; alert(typeof a); // undefined alert(b); // 报错</td> 
 </tr> 
 </tbody> 
</table>

解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

**108.看下列代码,输出什么？解释原因。**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2</td> 
 <td>var a = null; alert(typeof a); //object</td> 
 </tr> 
 </tbody> 
</table>

解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”。

**109.看下列代码,输出什么？解释原因。**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8 9</td> 
 <td>var undefined; undefined == null; // true 1 == true;&nbsp;&nbsp; // true 2 == true;&nbsp;&nbsp; // false 0 == false;&nbsp;&nbsp;// true 0 == '';&nbsp;&nbsp;&nbsp;&nbsp; // true NaN == NaN;&nbsp;&nbsp;// false [] == false; // true [] == ![];&nbsp;&nbsp; // true</td> 
 </tr> 
 </tbody> 
</table>

·        undefined与null相等，但不恒等（===）

·        一个是number一个是string时，会尝试将string转换为number

·        尝试将boolean转换为number，0或1

·        尝试将Object转换成number或string，取决于另外一个对比量的类型

·        所以，对于0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类型，类型不匹配时为false。

那么问题来了，看下面的代码，输出什么，foo的值为什么？

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3</td> 
 <td>var foo = "11"+2-"1"; console.log(foo); console.log(typeof foo);</td> 
 </tr> 
 </tbody> 
</table>

执行完后foo的值为111，foo的类型为String。

**110.看代码给答案。**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5</td> 
 <td>var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value);</td> 
 </tr> 
 </tbody> 
</table>

答案：2（考察引用数据类型细节）

**111.已知数组var stringArray = \[“This”, “is”, “Baidu”, “Campus”\]，Alert出”This is Baidu Campus”。**

答案：alert(stringArray.join(“”))

已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8</td> 
 <td>function combo(msg){ &nbsp;&nbsp;&nbsp;&nbsp;var arr=msg.split("-"); &nbsp;&nbsp;&nbsp;&nbsp;for(var i=1;i&lt;arr.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;msg=arr.join(""); &nbsp;&nbsp;&nbsp;&nbsp;return msg; }</td> 
 </tr> 
 </tbody> 
</table>

(考察基础API)

**112.var numberArray = \[3,6,2,4,1,5\]; （考察基础API）**

1) 实现对该数组的倒排，输出\[5,1,4,2,6,3\]

2) 实现对该数组的降序排列，输出\[6,5,4,3,2,1\]

JavaScript

**113.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8 9 10 11</td> 
 <td>var d = new Date(); // 获取年，getFullYear()返回4位的数字 var year = d.getFullYear(); // 获取月，月份比较特殊，0是1月，11是12月 var month = d.getMonth() + 1; // 变成两位 month = month &lt; 10 ? '0' + month : month; // 获取日 var day = d.getDate(); day = day &lt; 10 ? '0' + day : day; alert(year + '-' + month + '-' + day);</td> 
 </tr> 
 </tbody> 
</table>

**114.将字符串”<tr><td>\{$id\}</td><td>\{$name\}</td></tr>”中的\{ $id\}替换成10，\{ $name\}替换成Tony （使用正则表达式）**

答案：”<tr><td>\{$id\}</td><td>\{$id\}\_\{$name\}</td></tr>”.replace(/\{\\$id\}/g, ’10’).replace(/\{\\$name\}/g, ‘Tony’);

**115.为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8 9 10 11 12 13 14</td> 
 <td>function escapeHtml(str) { return str.replace(/[&lt;&gt;”&amp;]/g, function(match) { &nbsp;&nbsp;&nbsp;&nbsp;switch (match) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case “&lt;”: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return “&amp;lt;”; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case “&gt;”: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return “&amp;gt;”; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case “&amp;”: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return “&amp;amp;”; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; case “\””: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return “&amp;quot;”; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}); }</td> 
 </tr> 
 </tbody> 
</table>

**116.foo =foo||bar ，这行代码是什么意思？为什么要这样写？**

答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。

短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

**117.看下列代码，将会输出什么?**(变量声明提升)

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6</td> 
 <td>var foo = 1; function(){ &nbsp;&nbsp;&nbsp;&nbsp;console.log(foo); &nbsp;&nbsp;&nbsp;&nbsp;var foo = 2; &nbsp;&nbsp;&nbsp;&nbsp;console.log(foo); }</td> 
 </tr> 
 </tbody> 
</table>

答案：输出undefined 和 2。上面代码相当于：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7</td> 
 <td>var foo = 1; function(){ &nbsp;&nbsp;&nbsp;&nbsp;var foo; &nbsp;&nbsp;&nbsp;&nbsp;console.log(foo); //undefined &nbsp;&nbsp;&nbsp;&nbsp;foo = 2; &nbsp;&nbsp;&nbsp;&nbsp;console.log(foo); // 2;&nbsp;&nbsp; }</td> 
 </tr> 
 </tbody> 
</table>

函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。

**118.用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8 9</td> 
 <td>var iArray = []; funtion getRandom(istart, iend){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var iChoice = istart - iend +1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return Math.floor(Math.random() * iChoice + istart; } for(var i=0; i&lt;10; i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;iArray.push(getRandom(10,100)); } iArray.sort();</td> 
 </tr> 
 </tbody> 
</table>

**119.把两个数组合并，并删除第二个元素。**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4</td> 
 <td>var array1 = ['a','b','c']; var bArray = ['d','e','f']; var cArray = array1.concat(bArray); cArray.splice(1,1);</td> 
 </tr> 
 </tbody> 
</table>

**120.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）**

1）创建新节点

createDocumentFragment()    //创建一个DOM片段

createElement()   //创建一个具体的元素

createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

appendChild()      //添加

removeChild()      //移除

replaceChild()      //替换

insertBefore()      //插入

3）查找

getElementsByTagName()    //通过标签名称

getElementsByName()     //通过元素的Name属性的值

getElementById()        //通过元素Id，唯一性

**121.有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如\{ a:’1′, b:’2′, c:”, d:’xxx’, e:undefined\}。**

答案：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8 9</td> 
 <td>function serilizeUrl(url) { &nbsp;&nbsp;&nbsp;&nbsp;var result = {}; &nbsp;&nbsp;&nbsp;&nbsp;url = url.split("?")[1]; &nbsp;&nbsp;&nbsp;&nbsp;var map = url.split("&amp;"); &nbsp;&nbsp;&nbsp;&nbsp;for(var i = 0, len = map.length; i &lt; len; i++) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result[map[i].split("=")[0]] = map[i].split("=")[1]; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return result; }</td> 
 </tr> 
 </tbody> 
</table>

**122.正则表达式构造函数var reg=newRegExp(“xxx”)与正则表达字面量var reg=//有什么不同？匹配邮箱的正则表达式？**

答案：当使用RegExp()构造函数的时候，不仅需要转义引号（即\\”表示”），并且还需要双反斜杠（即\\\\表示一个\\）。使用正则表达字面量的效率更高。

邮箱的正则匹配：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1</td> 
 <td>var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;</td> 
 </tr> 
 </tbody> 
</table>

**123.看下面代码，给出输出结果。**

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5</td> 
 <td>for(var i=1;i&lt;=3;i++){ &nbsp;&nbsp;setTimeout(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(i);&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;},0);&nbsp;&nbsp; };</td> 
 </tr> 
 </tbody> 
</table>

答案：4 4 4。

原因：Javascript事件处理器在线程空闲之前不会运行。追问，如何让上述代码输出1 2 3？

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8 9</td> 
 <td>for(var i=1;i&lt;=3;i++){ &nbsp;&nbsp; setTimeout((function(a){&nbsp;&nbsp;//改成立即执行函数 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(a);&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; })(i),0);&nbsp;&nbsp; }; &nbsp; 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //输出 2 3</td> 
 </tr> 
 </tbody> 
</table>

**124.写一个function，清除字符串前后的空格。（兼容所有浏览器）**

使用自带接口trim()，考虑兼容性：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8 9</td> 
 <td>if (!String.prototype.trim) { &nbsp;String.prototype.trim = function() { &nbsp;return this.replace(/^\s+/, "").replace(/\s+$/,""); &nbsp;} } &nbsp; // test the function var str = " \t\n test string ".trim(); alert(str == "test string"); // alerts "true"</td> 
 </tr> 
 </tbody> 
</table>

**125..Javascript中callee和caller的作用？**

答案：

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

**那么问题来了？**如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？（使用callee完成）

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16</td> 
 <td>var result=[]; function fn(n){&nbsp;&nbsp;//典型的斐波那契数列 &nbsp;&nbsp; if(n==1){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return 1; &nbsp;&nbsp; }else if(n==2){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return 1; &nbsp;&nbsp; }else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(result[n]){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return result[n]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//argument.callee()表示fn() &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result[n]=arguments.callee(n-1)+arguments.callee(n-2); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return result[n]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp; } }</td> 
 </tr> 
 </tbody> 
</table>

**126.你说你热爱前端，那么应该WEB行业的发展很关注吧？说说最近最流行的一些东西吧？**

Node.js、Mongodb、npmM、MVVM、MEAN

**127.你有了解我们公司吗？说说你的认识？**

因为我想去阿里，所以我针对阿里的说

最羡慕就是在双十一购物节，350.19亿元，每分钟支付79万笔。海量数据，居然无一漏单、无一故障。太厉害了。

**128.absolute的containingblock计算方式跟正常流有什么不同？**

**129.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？**

**130.对BFC规范的理解？（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）**

**131.事件绑定和普通事件有什么区别？**

**132.b继承a的方法？**

**133..JavaScript中的作用域与变量声明提升？**

**134.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）**

**135.你所知道的页面性能优化方法有那些？**

**136.除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？**

**137.AMD（Modules/Asynchronous-Definition）、CMD（Common ModuleDefinition）规范区别？**

**138.谈谈你认为怎样做能是项目做的更好？**

**139.你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？**

**140.移动端（比如：Android IOS）怎么做好用户体验?**

**141.加班的看法**

加班就像借钱，原则应当是------救急不救穷

[http_www.webasily.com_p_78]: http://www.webasily.com/?p=78
[http_blog.csdn.net_gaoshanwudi_article_details_7355794]: http://blog.csdn.net/gaoshanwudi/article/details/7355794
[Link 1]: http://benalman.com/news/2010/11/immediately-invoked-function-expression/