前端开发工程师面试题

[HTML && CSS]
1.Doctype严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格模式：使用此类型的网页，浏览器解析将相对严格，不允许使用任何表现样式的标识和属性，比如在元素中直接使用background-color背景色属性。

混杂模式：浏览器对XHTML的解析较为宽松。允许使用4.01中的标签，但必须符合XHTML的语法。
2：行内元素有哪些？块级元素有哪些？CSS的盒模型？

行内元素：span,a,var ,em,input,img,img,textarea,var,em,strong,select,

块级标签：div,p,h1-h3,ul,ol,dl,li,dd,dt,table,td,tr,th

CSS的盒模型：CSS布局中的每一个元素，在浏览器的解析中，都被当做一个盒状物。
3.CSS引入的方式有哪些? link和@import的区别是?

CSS引入的方式

在html文档的head部分加入:

<link rel="stylesheet" type="text/css" href="my.css"/>

在html文档的head部分直接写入css文档。

直接在html标签里写入对这个标签的css控制

<div style="border:1px red solid;">测试信息</div>

link和@import的区别是link写在html页面中，@import写在CSS页面中
4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

CSS选择符: 类选择器、标签名选择器、 ID选择器、后代选择器（派生选择器）、群组选择器

可以继承：类选择器、标签名选择器、后代选择器（派生选择器）、群组选择器

优先级算法：

标签内直接定义：1000

ID选择器：100

类选择器：10

标签名选择器：1

内联和important中，important优先级高
5:前端页面有哪三层构成，分别是什么？作用是什么？

结构层；主要指DOM节点；HTML/XHTML

样式层；主要是指页面渲染；CSS
脚本层：主要指页面动画效果；JS/AS

6:css的基本语句构成是？

选择符、属性、值
8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

IE6、7、8、FF、Opear、Safari、Chrome、Maxthon

Trident：Windows 下的 IE 浏览器使用的内核代号。除 IE 外，众多的 IE Shell（如 Maxthon ）都使用这个内核。

Gecko：Mozilla Firefox 浏览器使用的内核代号。

Presto：Opera 浏览器使用的内核代号，这是目前公认网页浏览速度最快的浏览器内核。

KHTML/WebCore： Konqueror/Safari 浏览器使用的内核代号。

经常遇到的浏览器兼容问题：

1.在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，发现字体小于12，可直接作为图片使用

2.a标签对里不能嵌套a标签对

3.若给a标签内的内容样式加上样式，需要设置display:block;（在IE中如果设置宽高会自动变成块，在FF中则不会），但如果设置了float属性，就不需要设置display:block。

4.ul，ol在FF默认情况下，有list-style-type样式和padding值，dl在IE和FF默认情况下，有padding值，所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。

5.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应

6.关于手形光标. cursor: pointer. 而hand 只适用于 IE.

7.css 布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在 mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin- left: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的 div里定义margin-right: auto;margin-left: auto; 就可以了。

8.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离，这时需要设置display:inline; //使浮动忽略}

9.如何居中一个浮动元素?

对其设置margin:x auto;
10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！

有，HTML5 的是目前正在为未来的HTML标准的主要修订的发展。其前任一样，4.01和XHTML 1.1的HTML，HTML5的是一个结构和提交万维网内容的标准。新标准结合了诸如视频播放，拖动和放下以前曾在第三方浏览器插件依赖例如Adobe Flash，微软的Silverlight的功能，和谷歌齿轮。
12:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

把所有的CSS文件都放入一个样式表中,通过把所有的脚本放到一个文件中来减少HTTP请求的方法。js文件也采用同样的方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分。

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

前端界面工程师：1. 与交互设计师、视觉设计师协作，根据设计图完成页面制作。 2. 维护及优化网站前端性能。

前景：长期以来，国内前端开发在整个软件开发行业内占得比重较小，发展较晚。网站也多倾向于赢利最大化而轻视用户体验。前后端比例悬殊大。近几年来，随着以用户为中心的思想普及发展。前端开发呈现出强劲的发展态势，前端开发人员在项目中的重要性日益突出。前端开发人员呈现出严重的人员短缺现象。
[Javascript]
1：js是什么，js和html 的开发如何结合？

js是一种基于对象和事件驱动，并具有安全性的脚本语言。

可以html的三个地方编写js脚本语言：一是在网页文件的<script></script>标签对中直接编写脚本程序代码；二是将脚本程序代码放置在一个单独的文件中，在网页文件中引用这个脚本程序语言；三是将脚本程序代码作为某个元素的事件属性值或超链接的href属性值。

<style type="text/css">div{margin: 0;padding: 0;border:1px red solid;} </style>

2.怎样添加、移除、移动、复制、创建和查找节点

添加：appendChild()

删除： removeChild()

复制：cloneNode()

替换：replaceChild()

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

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

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

查找：getElementsByTagName() //通过标签名称

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

getElementById() //通过元素Id，唯一性
3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别

在浏览器解析事件的时候，有两种触发方式，一种叫做Bubbling(冒泡)，另外一种叫做Capturing(捕获)。冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时，依次它的父元素的click事件也被fire(触发)，一直传递到最顶层的body元素为止。而捕获的触发方式正好相反，当某个元素的click事件被触发时，先从最顶层的body元素click事件被触发开始，一直传递到真正被触发的元素为止。

可以回想一下目前大多数Js程序员习惯如何绑定事件到DOM元素上，最常见的就是obj.onclick=handler这种方式(更恶劣的是在Html代码的元素标签中直接加上onclick属性，完全没达到视图和动作分开的原则)。我们暂时称这种方式的事件添加为Traditional(传统方式) 吧，IE有自己的IE Event Module，而火狐等浏览器则遵循的W3C方式的Event Module，下面看看这三者各自的优缺点在哪里——
1、 Traditional Module
传统方式的事件模型即直接在DOM元素上绑定事件处理器，例如—
window.onload=function(){…}
obj.onmouseover=function(e){…}
obj.onclick=function(){…}
首先这种方式是无论在IE还是Firefox等其他浏览器上都可以成功运行的通用方式。这便是它最大的优势了，而且在Event处理函数内部的this变量无一例外的都只想被绑定的DOM元素，这使得Js程序员可以大大利用this关键字做很多事情。
至于它的缺点也很明显，就是传统方式只支持Bubbling，而不支持Capturing，并且一次只能绑定一个事件处理器在DOM元素上，无法实现多 Handler绑定。最后就是function参数中的event参数只对非IE浏览器有效果(因为IE浏览器有特制的window.event)。
2、 W3C (Firefox.e.g) Event Module
Firefox等浏览器很坚决的遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数，看几个例子—
window.addEventListener(‘load’,function(){…},false);
document.body.addEventListener(‘keypress’,function{…},false);
obj.addEventListener(‘mouseover’,MV,true);
function MV(){…}
addEventListener带有三个参数，第一个参数是事件类型，就是我们熟知的那些事件名字去掉前面的’on’，第二个参数是处理函数，可以直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。
W3C 的事件模型优点是Bubbling和Capturing都支持，并且可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突。并且在处理函数内部，this关键字仍然可以使用只想被绑定的DOM元素。另外function参数列表的第一个位置(不管是否显示调用)，都永远是event对象的引用。
至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可使用这一点。
3、 IE Event Module
IE自己的事件模型跟W3C的类似，但主要是通过attachEvent和detachEvent两个函数来实现的。依旧看几个例子吧—
window.attachEvent(‘onload’,function(){…});
document.body.attachEvent(‘onkeypress’,myKeyHandler);
可以发现它跟W3C的区别是没有第三个参数，而且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优点就是能绑定多个事件处理函数在同一个DOM元素上。
至于它的缺点，为什么如今在实际开发中很少见呢？首先IE浏览器本身只支持Bubbling不支持Capturing；而且在事件处理的function内部this关键字也无法使用，因为this永远都只想window object这个全局对象。要想得到event对象必须通过window.event 方式，最后一点，在别的浏览器中，它显然是无法工作的。
最后我在推荐两个必须知道的IE和W3C标准的区别用法吧—
1、当我们需要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则通过window.event.returnValue＝false来实现。
2、当我们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下通过设置window.event.cancelBubble=true来实现。
4.面向对象编程:b怎么继承a

var base = new CollectionBase();
// ...
return base;
其实就是在子类构造时创建基类的一个实例，然后把基类实例作为返回值实返回。这时的所谓继承操作都是对Object实例(基类也就是一个Object的派生类的实例)的动态读写，为其添加属性和方法等.
5.看看下面alert的结果是什么
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
6.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
var obj = parseQueryString(url);
alert(obj.key0) // 输出0
7.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?

AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML）。

交互模型就是Ajax在Browser端引入一个执行引擎，它一边应付user的请求，一边把某些必须交给服务器处理的东西背地里传送给服务器，同时背地里把结果准备好（接受服务器端的数据），展现给客户的技术模式。Ajax增强了用户的操作性。
而同步就是整个页面都刷新，异步就是只刷新用了Ajax技术的部分

跨域的问题就不是很好的解决，但是还是有办法的，一下给出一些基本的解决方案供大家选择：
1.使用代理，你可以使用web端的程序编写代理程序，把所有的ajax请求的数据进行转发，web程序可以使php，jsp，asp等所有的编程语言。相信大家对这种方式一定很熟悉，这里就不详细的介绍了。
2.使用iframe的方式来定势的刷新页面，这种方式只是取得数据来显示，并不能真正的和求得的数据进行交互，转化成本页面的动态数据，不是很可取，应用也不是很多，我也忽略不去讨论了。
3.使用apache的代理功能，主要就是apache的方向代理，或者是url从定向，你也可以把其他的站点直接的挂在自己的网站上，这样的方式可能会友邦权的问题，多的九部介绍了，有兴趣的本有可以自己实践以下。
4. 使用<script>标签的方式，这样的话就可以保正使用真正的ajax来跨域，并且可以使用返回来的数据，发誓很简单，在我们的后台程序处理后的到的结果都直接的用javascript 的方式返回，在我们的html中直接的使用返回数据的变量就可以了一个简单的例子。
8.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>

闭包是可以包含自由（未绑定）变量的代码块；这些变量不是在这个代码块或者任何全局上下文中定义的，而是在定义代码块的环境中定义。
9.最近看的一篇Javascript的文章是？
10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

最常用的库：jquery-1.8.2.min.js

常用的前端开发工具：firebug、photoshop、editplus、取色器、色板、eclipse
11.说说YSlow(可以详细一点)

yslow是一个工具，也可以理解成是一个插件，是基于Mozilla Firefox上firebug插件的一个插件。它的出现的主要目的就是检测我们的页面性能。它让用户可以就近取得所需的内容，解决网络拥挤的状况，提高用户访问网站的响应速度；其次，yahoo在ETags配置上也有独特之处，声明过期，就是说，用户从服务器取数据的时候，如果文件变化了，给他反馈新的文件，如果文件没有变化，只需告诉客户端没有变化即可，不必再把文件取回来，这样就节省了大量的网络带宽和资源。另外，只要将那些在加载过程中要执行的脚本放到底部，就可以实现最大的下载并行。

小说网对其评价：(a) 从样式表着手，避免CSS表达式。CSS表达式需要很多资源，有时甚至会造成页面假死。(b) 缓存一下不常修改的文件，并开启 GZIP压缩，减少网络传输时间(c) 减少DNS查找。YSlow认为一个页面上2个以内的域名比较合理。有些网站挂了不少统计代码，或者广告代码。统计拖累用户速度、广告影响用户视觉。 (d) 避免重定向（跳转），我们在给链接地址的时候，一般会把链接地址写成 http://xxx.cn/xxx 或者 http://xxx.cn /xxx/ ，有区别吗？有！服务器如果接收到的URL是http://xxx.cn/xxx，它会自动重定向到http://xxx.cn/xxx/，虽然进入的都是同一个页面，但是前者比后者多走了一步，重定向，显然多多少少浪费了一点时间。

Google 对其评价：多数人可能认为GOOGLE没什么值得借鉴的，毕竟整站就那么几行代码。
但是这几行代码，每天要承受过亿的用户访问量，在如此大的压力下，运行流畅，有很大一个因素取决于Minify JS。通过查看它的源代码可以发现，google不仅将JS进行了压缩，连页面代码中也没有不必要的空格和符号，使用了最短最简洁的变量名。联系到开发方面，建议大家采用 yuicompressor，在调试时使用便于开发的模式，调试完成后直接压缩并发布。让用户得到最快捷的用户体验。