返回列表

前端一些面试问题

默认分类 2011-04-27 20:30:35

转载:http://www.cnblogs.com/sweetie/archive/2010/12/07/1898567.html

1.javascript对象的几种创建方式

1.工厂方式

//定义
function createCar() {
var oCar = new Object();
oCar.color = "red";
oCar.doors = 4;
oCar.showColor =
function() {
alert(
this.color);
}
return oCar;
}
//调用
var ocar1 = createCar();
var ocar2 = createCar();
ocar1.color = "black";
ocar1.showColor();
ocar2.showColor();

修改createCar()函数,给它传递各个属性的默认值:

function createCar(sColor, iDoors, iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor =
function () {
alert(
this.color);
};
return oTempCar;
}

var oCar1 = createCar("red", 4, 23);
var oCar2 = createCar("blue", 3, 25);
oCar1.showColor();
//outputs "red"
oCar2.showColor(); //outputs "blue"

在工厂函数外定义对象的方法,然后通过属性指向该方法,从而避免每次调用函数createCar(),都要创建新函数showColor()。

function showColor(){
alert(
this.color);
}

function createCar(sColor, iDoors, iMpg){
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = showColor;
return oTempCar;
}

 2.构造函数方式

在构造函数内部无创建对象,而是使用this关键字。使用new运算符调用构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用return运算符)。

function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function() {
alert(
this.color);
};
}
var oCar1 = new Car("red", 4, 23);
var oCar2 = new Car("blue", 3, 25);

3.原型方式

//定义
function Car() {
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.drivers =
new Array("Tom", "Jerry");
Car.prototype.showColor =
function() {
alert(
this.color);
}
//调用:
var car1 = new Car();
var car2 = new Car();
car1.showColor();
car2.showColor();
alert(car1.drivers);
car1.drivers.push("stephen");
alert(car1.drivers);
//结果:Tom,Jerry,stephen
alert(car2.drivers); //结果:Tom,Jerry,stephen

//可以用json方式简化prototype的定义:
Car.prototype = {
color: "red",
doors: 4,
drivers: ["Tom", "Jerry",'safdad'],
showColor:
function() {
alert(
this.color);
}
}

4.混合的构造函数/原型方式

用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。

//定义
function Car(color,doors) {
this.color=color;
this.doors=doors;
this.drivers=new Array("Tom","Jerry");
}

Car.prototype.showColor=
function(){
alert(
this.color);
}

//调用:
var car1=new Car('red',4);
var car2=new Car('blue',4);

car1.showColor();
car2.showColor();

alert(car1.drivers);
car1.drivers.push("stephen");
alert(car1.drivers);
//结果:Tom,Jerry,stephen
alert(car2.drivers); //结果:Tom,Jerry
alert(car1 instanceof Car);

5.动态原型方法

function Car() {
this.color = "red";
this.doors = 4;
this.drivers = new Array("Tom", "Jerry");
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor =
function() {
alert(
this.color);
}
//............
}
//最后定义
Car._initialized = true;
}

6.混合工厂方式

目的是创建假构造函数,只返回另一种对象的新实例。

function Car() {
var oTempCar = new Object();
oTempCar.color="red";
oTempCar.doors=4;
oTempCar.mpg=23;
oTempCar.showColor =
function() {
alert(
this.color);
}
return oTempCar;
}

//与经典方式不同,这种方式使用new运算符,使它看起来像真正的构造函数:
var oCar = new Car();

由于在Car()构造函数内部调用了new运算符,所以将忽略第二个new运算符(位于构造函数之外)。在构造函数内部创建的对象被传递回变量var。这种方式在对象方法的内部管理方面与经典方式有着相同的问题。强烈建议:除非万不得已,还是避免使用这种方式。
总结:(采用哪种方式)
目前使用最广泛的是混合的构造函数/原型方式。此外,动态原型方法也很流行,在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式,因为这样会给代码引入问题。

A.CSS部分

一.浏览器兼容性问题

1.各浏览器中 'width' 和 'height' 在某些元素上的作用位置有差异

  参考:http://www.w3help.org/zh-cn/causes/RD8001

2.IE6 中浮动元素在某些情况下会有双倍外边距

  参考:http://www.w3help.org/zh-cn/causes/RX1001

二.css层叠

  参考:http://www.w3help.org/zh-cn/kb/005/

三.CSS hack

  参考:http://www.w3help.org/zh-cn/causes/RY8003

          http://topic.csdn.net/u/20100715/17/6306e40a-1ea1-4f0f-a1c3-acd7470800ea.html?18677

四.CSS 框模型( Box module )

  参考:http://www.w3help.org/zh-cn/kb/006/

五.CSS 定位体系

  参考:http://www.w3help.org/zh-cn/kb/009/

B.javascript部分

一.函数表达式和函数声明

函数声明:直接声明一个函数 function fnName() {};function声明必须有方法名,而出现在表达式里的方法名都会被忽略。

函数表达式:通过赋值,将一个变量的引用指向一个指定的function或匿名函数

二.原型和原型链

三.作用域和作用域链和闭包

  参考:http://blog.belltoy.net/javascript_scope_call_object_closure.html

  参考:http://leeldy.blog.163.com/blog/static/13985306201061325918669/

四.闭包的用处

  参考:http://www.belltoy.net/useage-of-javascript-closure.html

C.HTML

一.document.body和document.documentElement比较

  参考:http://blog.csdn.net/wangjj_016/archive/2010/02/10/5304788.aspx

          http://j2ee-chenwei.javaeye.com/blog/460340

二.session和cookie

  参考:http://leeldy.blog.163.com/blog/static/139853062009013105945194/

DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1.创建新节点

  createDocumentFragment()

  createElement()

  createTextNode()

2.添加、移除、替换

  appendChild()

  removeChild()

  replaceChild()

  insertBefore()

3.查找

  getElementsByTagName()

  getElementsByName()

  getElementById()

---------------------------------------------------------------------
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。

1.冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document

  Mozilla 1.0: div -> body -> html -> document -> window

2.捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

3.DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

  DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。

------------------------------------------------------------------------

事件处理函数/监听函数

IE:

在IE中,每个元素和window对象都有两个方法:attachEvent()和detachEvent()。事件处理函数总是按照添加它们的顺序进行调用。

DOM:

DOM方法addEventListener()和removeEventListener()用来分配和移除事件处理函数。与IE不同,这些方法需要三个参数:事件名称,要分配的函数和处理函数是用于冒泡阶段还是捕获阶段。如果事件处理函数是用于捕获阶段,第三个参数为true;用于冒泡阶段,则为false。

如果使用addEventListener()将事件处理函数加入到捕获阶段,则必须在removeEventListener()中指明是捕获阶段,才能正确的将这个事件处理函数删除。

-------------------------------------------------------------------------------

事件对象

在IE中,事件对象是window对象的一个属性event,event对象只能在事件发生时访问。所有的事件处理函数执行完毕后,事件对象就被销毁。

DOM标准,event对象必须作为唯一的参数传递给事件处理函数。

区别:

1.获取目标:位于事件中心的对象称为目标

  在IE中,目标包含在event对象的srcElement属性中:var oTarget = oEvent.srcElement;

  在DOM兼容的浏览器中,目标包含在target属性中:var oTarget = oEvent.target;

2.获取字符代码

3.阻止某个事件的默认行为

  在IE中要阻止某个事件的默认行为,必须将returnValue属性设置为false:oEvent.returnValue = false;

  在Mozilla中,只要调用preventDefault()方法:oEvent.preventDefault();

 4.停止事件复制(冒泡)

  IE:oEvent.cancelBubble = true;

  mozilla: oEvent.stopPropagation();
------------------------------------------------------------------------------------------

XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。

XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。

 

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=
null;
if (window.XMLHttpRequest)
{
// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,
true);
xmlhttp.send(
null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}

function state_Change()
{
if (xmlhttp.readyState==4)
{
// 4 = "loaded"
if (xmlhttp.status==200)
{
// 200 = OK
// ...our code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}
</script>

 

 

-------------------------------------------------------------------------------------------
严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。

在标准模式中,浏览器根据规范呈现页面;

在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

-------------------------------------------------------------------------------------------
盒模型——外边距、内边距和边框之间的关系,IE 8以下版本的浏览器中的盒模型有什么不同。

 
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。

 

浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

 

HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。

 
JSON——它是什么、为什么应该使用它、到底该怎么使用它,说出实现细节来。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。

JSON建构于两种结构:
“名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list),或者关联数组 (associative array)。
值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。

1.<img>元素的alt和title有什么异同
正确的使用alt text属性和title属性不仅可以提高图片的搜索能力,对用户体验上也是很有帮助。

 

alt text
替换文字(alt text)是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来

就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。所

以替换文字是用来替代图像而不是提供额外说明文字的。Alt text在IE浏览器中还起到了title的作用——鼠

标经过时的文字提示。IE浏览器给了大家一个误导,在IE中ALT会变成文字提示是因为IE不标准。这一

点Firefox做的就比较好。

title
title是对图片的说明和额外补充,如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的

优先级高于alt text。但由于错误的引导,很多初学者就在img标签内只加了alt属性。
1. alt text和title对访问者都很重要(alt text对搜索引擎会更重要一些),所以在定义img对象时,最好将

alt text和title属性都写全,保证在各种浏览器中都能正常使用。

2. 在alt text和title中包含关键字,并且二者内容最好不一样。

3. 不要在alt text和title中堆积关键字,否则可能会导致搜索引擎惩罚。

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

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式(quirks mode)。在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器(比如Microsoft IE 4和Netscape Navigator 4)的行为以防止老站点无法工作。

Mozilla和Safari还有第三种模式,称为”几乎标准的模式(almost standards mode)”,除了在处理表格的方式上有一些细微的差异之外,这种模式与标准模式相同。

如何触发这两种模式:

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。对于HTML 4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的CSS,如果选择了错误的DOCTYPE,那么页面就将以混杂模式呈现,其行为就可能会有错误或不可预测。因此,一定要在站点的每个页面上包含形式完整的DOCTYPE声明,并且在使用HTML时选择严格的DTD。

2:行内元素有哪些?块级元素有哪些?CSS的盒模型?

块元素(block element)
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易,也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

内联元素(inline element)
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

      关于可变元素

      当块内元素和行内元素随环境而变化时,它就变成了可根据上下文关系确定该元素是块元素或者行内元素,即可变元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。

      可变元素有哪些呢?

      可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  ◎ applet – java applet
  ◎ button – 按钮
  ◎ del – 删除文本
  ◎ iframe – inline frame
  ◎ ins – 插入的文本
  ◎ map – 图片区块(map)
  ◎ object – object对象
  ◎ script – 客户端脚本

盒模型:http://www.birdol.com/article/566.html

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

参考:http://hi.baidu.com/dtdxrk/blog/item/65e83509ebdc4adf3ac763a3.html

 一、内联引用CSS
将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}
例如:
<td style="color:#c00; font-size:15px; line-height:18px;>

模板无忧 - www.mb5u.com
</td>

这种方法优点:可灵巧应用样式於各标签中。方便于编写代码时的使用。
这种方法缺点:没有整篇文件的“统一性”,在需要修改某样式的时候也变的比较困难。

二、内部引用CSS
将样式规则写在<STYLE>...</STYLE>标签之中。
<STYLE TYPE="text/CSS">

<!--
样式规则表
-->
</STYLE>
通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。
这种方法的优点:整篇文章有了统一性,只要是有声明的的元件即会套用该样式规则。
这种方法的缺点:个别元件的灵活度不足,整站的功能性较弱。

三、外部引用 link 标签引用CSS
将样式规则写在.css的样式文件中,再以<link>标签引入。
假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入:
  <link rel=stylesheet type="text/css" href="example.css">

这样引入该css样式表文件以后,就可以直接套用该样式档案中所制定的样式了。 通常是将link标签写在网页的<head></head>部份之中。
这种方法的优点:可以把要套用相同样式规则的数篇文件都指定到同一个样式文件中,可以进行统一的修改,也便于整站的设置有统一的风格。
一般css网页布局都使用此种方法。

这种方法的缺点:在个别文件或元素的灵活度不足。

四、外部引用 @import 引用CSS
跟link方法很像,但必须放在<STYLE>...</STYLE> 中:
<STYLE TYPE="text/css">
<!--
@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>
例如:
<STYLE TYPE="text/css">
<!--
@import url(css/example.css);
-->
</STYLE>
要注重的是,行末的分号是必须的!千万不能漏写!
这种方法的优点:可以灵活的引入css文件对xhtml元素进行控制。有时候也用来编写某些css hack。
这种方法的缺点:在个别文件或元素的灵活度不足。

区别参考:http://www.js8.in/554.html

隶属上的差别

link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。此处注意浏览器的link src为空时候时会导致页面加载次数增多

@import次数限制

传闻在IE6下,@import只能引入31次css文件,可是可以通过在css文件中再次import来垂直扩展,断桥残雪没有测试过,不过如果出现这样的情况,说明这个写代码的人也挺变态的。

加载顺序的不同

当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS文件会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式,然后突然样式会出现,网速慢的时候还挺明显,@import这点跟把CSS文件放在页面结尾效果相同,不过如果我们一些样式开始页面并不会出现,而是在交互时才出现的CSS样式,可以通过这个方法引入,时间上错开。例如:Ajax的html,交互时的弹出框,弹出div等

兼容性上的差别

由于@import是CSS2.1提出的,@import只有在IE5以上的才能识别,而link标签无此问题(似乎影响不大~)。

使用DOM控制样式时的差别

当使用javascript控制DOM(document.styleSheets)去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

所以,无特殊情况推荐使用link来引入样式,尽量避免使用@import,而如果进行Ajax或者交互的样式,则可以通过@import引入

4.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?

     ID 和 CLASS
  Class 可继承
  伪类A标签可以继承
  列表 UL LIDL DD DT可继承

     有一些属性不能被继承,如:border, margin, padding, background等。
  优先级就近原则,样式定义最近者为准
  载入样式以最后载入的定位为准
  优先级为

     HTML标记的权重是1,CLASS的权重是10,ID的权重是100,继承的权重为0(后面会讲到)。
  !important > [ id > class > tag ]
  Important 比内联优先级高

5:前端页面有哪三层构成,分别是什么?作用是什么?

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

网页的表示层(presentation layer) 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

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

选择器{属性1:值1;属性2:值2;……}

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

浏览器和内核参考:http://neolee.com/pc/several-browser-core-introduction/

IE、Opera、Firefox、Safari、The World还有现在的Chrome等

那内核是什么呢?内核只是一个通俗的说法,其英文名称为“Layout engine”,翻译过来就是“排版引擎”,也被称为“页面渲染引擎”(下文中各种说法通用)。它负责取得网页的内容(HTML、XML、图像等等)、整理信息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。

 

现在市面上常见的 内核基本是一下4种:
Trident

这是微软开发的一种排版引擎。该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的 IE7。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等)。此外,为了方便也有很多人直接简称其为IE内核(当然也不排除有部分人是因为不知道内 核名称而只好如此说,至少老N就是如此。。。)。自从发布后,Trident不断地被更新和完善:

Trident II(IE5)——增进对CSS1.0的支持及对CSS2重大的变更;

Trident III(IE5.5)——修正部分CSS的排版控制;

Trident IV(IE6)——修正了一部分box-model的错误以及增加了“兼容模式(Quirks Mode)”切换功能,以增加对文件类型描述(Document Type Definition,DTD)的支持;

Trident V(IE7)——修正许多CSS排版处理上的错误以及增加对PNG格式alpha通道(半透明)的支持。(这就是IE6经常被诟病的对png图片支持不良的之处!)

Geckos

Gecko是套开放源代码的、以C++编写的网页排版引擎。这软件原本是由网景通讯公司开发的,Netcape6开始采用该内核。后来的 Mozilla FireFox也采用了该内核,Geckos的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。Geckos 现在由Mozilla基金会维护。

Presto

Presto是一个由Opera Software开发的浏览器排版引擎,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核。

Webkit

苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软 件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开发源代码。在安全方面不受IE、Firefox的制约,所以 Safari浏览器在国内还是很安全的。

简单的总结一下:

使用Trident内核的浏览器:IE、Maxthon、TT、The World等;

使用Gecko内核的浏览器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey;

使用Presto内核的浏览器:Opera7及以上版本;

使用Webkit内核的浏览器:Safari、Chrome。

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

10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况!

    参考:http://zh.wikipedia.org/zh/HTML_5

11.你怎么来实现下面这个设计图,主要讲述思路 (效果图省略)

13:如果让你来制作一个访问量很高的大型网站,你会如何来管理所有CSS文件、JS与图片?

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