Max—— 前端攻城狮 's Blog

A Simple pure blog generated by jekyll

Web前端面试考察的一些知识点

<< Back

HTML类:

1. 什么是语义化的HTML?有何意义?为什么要做到语义化?(高频率考题)

HTML的语义化可以理解为HTML的结构化,根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

语义化的目的是

  • 结构清晰——为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构
  • 体验良好——例如title、alt用于解释名词或解释图片信息、label标签的活用
  • SEO友好——和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重
  • 方便解析——方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
  • 可维护性——便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化

2. 行内元素和块元素分别有哪些?(高频率)

块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示。通过样式控制,它们可以相互转换。

行内元素有以下特征:

  • 设置宽度width 无效。
  • 设置高度height 无效,可以通过line-height来设置。
  • 设置margin 只有左右margin有效,上下无效。
  • 设置padding 只有左右padding有效,上下则无效。

这里说的无效, 是指它对其它元素的排列没有影响。也就是说,对于设置的margin,padding行内元素文档流里的上下元素来说,他们的间距不会因为上下margin或者上下padding而产生间距。但就它本身而言,对于上下margin与上下padding是有效的。

3. 严格模式与混杂模式的区分?如何触发这两种模式?(高频率)

各个浏览器的混杂模式,基本就是各个浏览器的私有模式,不相互兼容。所以,除非是为了兼容的问题,比如你不想修改很久很久以前做的IE ONLY的网页,否则刻意触发混杂模式没有任何意义。

可以通过以下javascript代码可以检测当前页面是哪一种渲染模式?

    alert(window.top.document.compatMode) ;
//BackCompat  表示怪异模式
//CSS1Compat  表示标准模式
    

区分是标准模式还是混合模式,有其重要的意义所在,那就是确定页面解析时,使用的是“标准盒Box模型“,还是使用“传统Box模型“。

4. Doctype 是什么?有什么作用?

DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。

在超文本标记语言(标准通用标记语言的一个应用)里头,就是用来说明编写网页的HTML/XHTML的标签用的是什么版本。

5. HTML与XHTML的区别是什么?

XHTML是HTML像XML的一个过渡语言,它比HTML严谨性会高点,然后基本语言都还是沿用的HTML的标签,只不过废除了部分表现层的标签,同事在标准上要求高了点比如标签的严格嵌套,标签结束等等简单的说写 XHTML 要用干净的 HTML 语法。

XHTML的一些语法要求:

  • XHTML 元素一定要被正确的嵌套使用。
  • 标签名字一定要用小写字母。
  • 属性名字必须小写。
  • 所有的 XHTML 元素一定要关闭。

XHTML 1.0 提供了三种DTD声明可供选择:

  • 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  • 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,完整代码如下:!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  • 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

6. HTML5以什么标签开头?

    <!DOCTYPE html>
    

HTML5文档以开头,这是一个文档类型声明,并且必须位于HTML5文档的第一行,它可以用来告诉浏览器或任何其它分析程序它们所查看的文件类型。html标签是HTML5文档的根标签,紧跟在!DOCTYPE html下面。html标签支持HTML5全局属性和manifest属性。manifest属性主要在创建HTML5离线应用的时候使用。

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello HTML5</title>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
    

7. Div与span的区别是什么?

两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素)。SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式。总的来说,一个div是占一个块的,它的默认display属性是block,表示一个块。而span,它的display默认属性是inline,可以连在一起的。

8. Img的alt和title有啥区别?各自作用?

alt用来指定替换文字使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。

  • 为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。
  • 它只能用在img、area和input元素中
  • 长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

title提供建议性的信息使用title属性提供非本质的额外信息。title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。

  • 为设置该属性的元素提供建议性的信息。
  • 可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。
  • 值可以比alt属性值设置的更长。不过要注意的是,有些浏览器会截断过长的文字。比如Mozilla核心的浏览器只能显示最先的60个字符。

综上所述,我们可以知道,我们可以给option用title加注释,但是不能用alt加注释。在许多时候,alt的局限性很大.而title的扩展性很强.我们在互联网上经常会看到,当指针移上去时,有时显示的注释里不光有文字,还有图片,还可以换行,甚至更多!建议大家以后如果只是图片,或者是给按钮等常用的加些文字替换的话,用alt属性就够了.而是要完成更酷的特效或者是加载图片,给更多的标签加注释时,应选用title属性。

9. HTML5的离线储存有哪些?

内置到HTML5中的Web存储对象有两种类型:

  • sessionStorage 对象负责存储一个会话的数据。如果用户关闭了页面或浏览器,则会销毁数据。
  • localStorage 对象负责存储没有到期的数据。当Web页面或浏览器关闭时,仍会保持数据的存储,当然这还取决于为此用户的浏览器设置的存储量。

注:不能在浏览器之间分享Web存储, 如果您在Safari中存储了数据,那么该数据在Mozilla Firefox中是无法访问的。

10. iframe有那些缺点?

    优点
  • 重载页面时不需要重载整个页面,只重载页面中的一个框架页(减少了数据的传输,增加了网页下载速度)
  • 方便制作导航栏
    缺点
  • 多框架的页面会增加服务器的http请求
  • 代码复杂,无法被一些搜索引擎索引到
  • 多数小型的移动设备(PDA 手机)无法完全显示框架
  • 会产生很多页面,不容易管理
  • 不容易打印
  • 浏览器的后退按钮无效

CSS类:

1. 谈谈CSS盒模型原理?(高频率)

CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框(element box),可以形象地将其看作是一个盒子。

css盒模型描述图片

2. CSS的导入方式:import与link方式的区别?优缺点?(高频率)

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别

  • 属性来源——link属于XHTML标签,而@import完全是CSS提供的一种方式。
  • 加载速度——当一个页面被加载的时候(就是被浏览器渲染的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。
  • 兼容性——由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
  • 脚本控制——使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

注:还有流量比较大的门户网站会把样式直接写在页面上,是为了减少link请求的次数,从而优化加载速度。

3. CSS的优先级?内联和important哪个优先级高?(高频率)

使用!important可以改变优先级别为最高,其次是内联(style对象),然后是id > class >tag。

4. 说几个盒子垂直居中方法?(高频率)

方法有三种:

  • 父元素设置display:table-cell; vertical-align:middle; 子元素设置: margin:0 auto; 借用表格的垂直居中属性。 --优点:不用受内容高度的限制,简单实现垂直居中;缺点:不兼容ie6,7。
  • 使用line-height属性; 值等于父div的高度。 --优点:不受内容高度的限制,简单实现垂直居中;缺点:只适用于单行文本垂直居中。
  • 这个方法使用绝对定位的div,把它的top设置为 50%,margin-top设置为负的content 高度的一半。这意味着对象必须在 CSS 中指定固定的高度。 --优点:兼容性好;缺点:必须知道内容盒子的高度才可以。

5. 浮动元素清除浮动方法有哪些?(高频率)

有五种方式可以清除浮动

  •             /* 通过overflow的方式 */
    .overflow-clear{
        overflow:auto;/*或者 hidden,scroll,不包括visible */
        _height:1%; /*设置高度是为了ie6获取haslayout */
    }
                
  •             /* display 的方式*/
    .display-clear{
        display:inline-block;
    }
                
  •             /* position的方式 */
    .position-clear{
        position:absolute;
    }
                
  •             /* 浮动方式 */
    .float-clear{
        float:left; /*或者right,不是none就行*/
    }
                
  •             /*zoom 的方式*/
    .zoom-clear{
        zoom:1;/* only for IE6.7 因为他们haslayout,ie8以后和标准浏览器都弱化了haslayout */
    }
                

上面几种方式都有清除浮动影响的作用,前四种是在ie678和其他标准浏览器下都有效地方法,最后一种zoom的方式因为用到了ie的haslayout,所以只在ie6/7的内核下才有效。

6. 常见兼容性问题有哪些?(高频率)

  • 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同,例如随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。--解决方案:CSS *{margin:0;padding:0;}

  • 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示双倍margin。--解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性。

  • 浏览器兼容问题三:设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度。--解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

  • 浏览器兼容问题四:行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug。在display:block;后面加入display:inline;display:table;

  • 浏览器兼容问题五:图片默认有间距。使用float属性为img布局。

    注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。(也可以使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以最好不这样使用)

7. CSS的定位属性,各自区别,应用场景?

CSS的定位属性position有五个属性: static | relative | absolute | fixed | inherit

  • static 和 inherit : 没什么值得介绍的。
  • relative : 相对于元素自身的定位。
  • absolute :相对于包含块的定位。
  • fixed : 相对于窗口的定位。

只要元素设置了 postion : absolute | relative | fixed , 该元素就会脱离文档流。--但是relative元素是个特例,因为该元素虽然脱离了文档流,但是它原本所占的空间仍然占据文档流。

关于display--

  • relative : 原来是什么类型的依旧是什么类型。
  • absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位。

8.border:0和border:none的区别?

  • border:0 —— 所有浏览器兼容,border不予显示,但依旧会按默认的border-style和border-width进行渲染,消耗内存。
  • border:none —— 得到除IE6、IE7外,所有其他浏览器的支持,不予对border进行任何渲染,节省内存。

9.CSS中rem、em和px的关系和区别?

定义em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸;em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸;px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

px的特点

  • IE无法调整那些使用px作为单位的字体大小;
  • 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

rem的特点

  • em的值并不是固定的;
  • em会继承父级元素的字体大小;

em的特点

  • em的值并不是固定的;
  • m会继承父级元素的字体大小;

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

10. 谈谈CSS3 Media Queries

CSS2.1定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等。

而 Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备,以此加强体验。所以Media Queries和CSS优化没有关系,甚至是矛盾的。

当浏览器宽度改变时,应用的CSS发生变化。而这些,原本需要 JavaScript 的控制才能做到。

<link rel="stylesheet" type="text/css" href="swordair.css" media="screen and (min-width: 400px)">
    

在media属性里:

  • screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型(all、braille、embossed、handheld、print、projection、screen、speech、tty、tv);
  • and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备);
  • (min-width: 400px)就是媒体特性,其被放置在一对圆括号中。完整的特性可以查看相关的Media features部分

11. Display:none与visibility:hidden的区别(高频率)

  • display: none--不为被隐藏的对象保留其物理空间。
  • visibility:hidden--为隐藏的对象保留其物理空间。

display不保留物理空间描述图片

12.谈谈CSS hack

CSS Hack大致有3种表现形式,CSS属性前缀法选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

CSS属性前缀法

  • 属性前缀法(即类内部Hack):
    • IE6能识别下划线"_"和星号" * ";
    • IE7能识别星号" * ",但不能识别下划线"_";
    • IE6~IE10都认识"\9";
    • firefox前述三个都不能认识。
  • 选择器前缀法(即选择器Hack):
    • IE6能识别*html .class{};
    • IE7能识别*+html .class{}或者*:first-child+html .class{};
  • IE条件注释法(即HTML条件注释Hack):
    • 针对所有IE(注:IE10+已经不再支持条件注释):
                          <!--[if IE]>IE浏览器显示的内容 <![endif]-->
                          
    • 针对IE6及以下版本:
                          <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->
                          
    • 针对所有IE(注:IE10+已经不再支持条件注释):
                          <!--[if IE]>IE浏览器显示的内容 <![endif]-->
                          
      这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

Javascript类:

1. 对闭包的理解,javascript的作用域问题?(高频率)

先来回答javascript作用域的问题,javascript语言没有块级作用域,只有一条从内向外的作用域链,看这个例子

var scope = "global";
function CheckScope(){
    console.log(scope);
    var scope = "local";
    console.log(scope);
}
CheckScope();
	

输出的值是1:undefied 2:local

其实这个函数等价于下面这个函数(变量提升)

var scope = "global";
function CheckScope(){
    var scope;
    console.log(scope);
    scope = "local";
    console.log(scope);
}
CheckScope();
	

再来看个例子

var scope = "global";
function CheckScope(){
    console.log(scope);
    console.log(scope2);
    var scope2 = "local2";
    console.log(scope2);
}
CheckScope();
	

同样这个函数等价于下面这个函数(变量提升)

var scope = "global";
function CheckScope(){
    var scope2;
    console.log(scope);
    console.log(scope2);
    scope2 = "local";
    console.log(scope2);
}
CheckScope();
	

输出的值是1:global 2:undefied 3:local

从例子中我们可以看出:一种情况,函数里面的变量和函数外部变量同名时候,作用域顶端(函数代码块里面)先遍历查找变量的定义和赋值,如果找不到再向作用域末端(函数代码块外面)去查找;这样就形成了javascript特有的链式作用域。第二种情况,函数里面的变量和函数外部变量不同名时候,也是先在作用域顶端(函数代码块里面)先遍历查找变量的定义和赋值,如果找不到再向作用域末端(函数代码块外面)去查找变量。

2. Ajax的跨域问题和缓存原理?同步与异步的区别?(高频率)

AJAX即“Asynchronous Javascript And XML[1] ”(异步JavaScript和XML[1] ),是指一种创建交互式网页应用的网页开发技术。

Ajax的跨域实现方式是通过jsonp动态控制script标记的生成,通过修改script标记的src属性完成对跨域页面的调用。此方案存在的缺陷是,script的src属性完成该调用时采取的方式时get方式,如果请求时传递的字符串过大时,可能会无法正常运行。

默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

    var temp; 
$.ajax({ 
    async: false, 
    type : "POST", 
    url : defaultPostData.url, 
    dataType : 'json', 
    success : function(data) { 
        temp=data; 
    } 
}); 
alert(temp); 
    

这个ajax请求则为同步请求,在没有返回值之前,alert(temp)是不会执行的。

如果async设置为:true,则不会等待ajax请求返回的结果,会直接执行ajax后面的语句。

3. 数组的增删查找的方法有哪些?(高频率)

JAVAScript为数组对象提供以下多种方法:

  • 1 concat(数组1,数组2,...,数组N) 将多个数组结合成一个新的数组
  • 2 join(分隔字符) 将数组结合成一个字符串,用特定字符来分开
  • 3 pop() 将数组内最后一个组件删除,并返回该组件内容
  • 4 push(组件1,组件2,...,组件N) 将一个或多个组件补在数组最后面,并返回最后一个组件内容
  • 5 reverse() 将数组内所有组件的索引次序反转(Transpose)第一个组件变成最后一个,最后一个组件则拿到最前面
  • 6 shift() 将数组内第一个组件删除,并返回该组件内容
  • 7 slice(开始索引,结束索引) 将数组内容转入一个新的数杉
  • 8 sort() 将数组内容排序
  • 9 splice() 增加或删除数组组件
  • 10 toSource() 返回代表特定数组的数组常数,可以用来建立新的数组
  • 11 toString() 以字符串来表示该数组及其组件
  • 12 unshift(组件1,组件2,...,组件N) 将一个或多个组件补在数组最前面,并返回最后数组长度
  • 13 valueOf() 取得数组值

4. DOM节点的创建、移动、复制、删除、查找的方法有哪些?(高频率)

DOM节点的创建

  • createDocumentFragment() //创建一个DOM片段
  • createElement() //创建一个具体的元素
  • createTextNode() //创建一个文本节点

DOM节点的添加、移除、替换、插入

  • appendChild()
  • removeChild()
  • replaceChild()
  • insertBefore()

DOM节点的查找

  • getElementsByTagName() //通过标签名称
  • getElementsByName() //通过元素的Name属性的值
  • getElementById() //通过元素Id,唯一性

5. 说说setTimeout与setInterval区别?

相同点:这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。

不同点:

  • setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码
  • setTimeout只执行一次那段代码。

6. 面向对象编程:B怎么继承A

继承方法一、利用call或者apply方法改变this的指针

function A(name,age){
    this.age = age ? age : 25;
    this.name = name ? name : '小明'
    this.say = function(){
        alert(this.name + '今年' + this.age + '岁了!');    
    }
}
function B(name,age){
    A.apply(this,arguments);    
}
C = new B('小刚',18);
C.say();
    

继承方法二

function A(name,age){
    this.age = age ? age : 30;
    this.name = name ? name : '小明'
    this.say = function(){
        alert(this.name + '今年' + this.age + '岁了!');    
    }
}
function B(){}
B.prototype = new A();
var C = new B();
C.say();
    

7. 编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象var obj = parseQueryString(url); alert(obj.key[0]) // 输出第一个参数

    var url1 = "http://www.oc35.com/resume.html?user_id=001&user_name=yubiaobin";

function parentQueryString(url){
    var arguments = [];
    var arr = url.split("?");
    if(arr.length <= 1){
        return arguments;
    }
    arr = arr[1].split("&");
    for(var i = 0, k = arr.length; i < k; i++){
        var a = arr[i].split("=");
        arguments[a[0]] = a[1];
    }
    return arguments;
}

    var result = parentQueryString(url1);
    alert(result["user_id"]);
    

8. JS关键字与保留字的选择:parent,class,void,main。

javascript关键字也是语言保留的,不能用作标识符。

  • void

javascript关键字也是语言保留的,不能用作标识符。

  • class

9. ajax属于javascript?

JavaScript是一种客户端脚本语言。Ajax是JS的一种应用,利用JS在客户端创建一个ActiveX对象,进行异步请求的提交和处理。严格来讲,Ajax是一种技术而非语言,两者没有从属关系。

10.var a = ‘abc def ghi’,把每三个字中的首字母转为大写。

有三种方式可以实现

    var a = "abc def ghi";  
var array1 = a.split(" ");  //第一步必须先用 拆分;
for(var i = 0 ; i < array1.length; i++){  
    var temp = array1[i].split('');  
    temp.unshift(temp.shift().toUpperCase())  
    array1[i] = temp;  
}  
var b = array1[0].concat([' '],array1[1],[' '],array1[2]).join('');  
alert(b);
    
    var a = "abc def ghi";  
var array1 = a.split(" ");  //第一步必须先用 拆分;
alert(array1);  
for(var i = 0 ; i < array1.length; i++){  
    var temp = array1[i].split('');  
    var up = temp[0].toUpperCase();  
    array1[i] = up+temp[1]+temp[2];  
}  
var b = array1[0]+array1[1]+array1[2];  
alert(b);  
    
    var a = "abc def ghi";  
var array1 = a.split(" ");  //第一步必须先用 拆分;
for(var i = 0 ; i < array1.length; i++){  
    array1[i] =  array1[i].substring(0,1).toUpperCase()+array1[i].substring(1);  
    //alert(array1[i]);  
}  
var b = array1[0].concat([' '],array1[1],[' '],array1[2]);  
alert(b); 
    

11.Ajax的执行过程

  • (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象。
  • (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息。
  • (3)设置响应HTTP请求状态变化的函数。
  • (4)发送HTTP请求。
  • (5)获取异步调用返回的数据。
  • (6)使用JavaScript和DOM实现局部刷新。

12.JSON与XML的区别?优缺点?

JSON(JavaScript Object Notation)一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性。可在不同平台之间进行数据交换。

扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。

JSON的优点

  • 数据格式比较简单,易于读写,格式都是压缩的,占用带宽小。
  • 易于解析,客户端JavaScript可以简单的通过eval()进行JSON数据的读取。
  • 支持多种语言,包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言,便于服务器端的解析。
  • 在PHP世界,已经有PHP-JSON和JSON-PHP出现了,偏于PHP序列化后的程序直接调用,PHP服务器端的对象、数组等能直接生成JSON格式,便于客户端的访问提取。
  • 因为JSON格式能直接为服务器端代码使用,大大简化了服务器端和客户端的代码开发量,且完成任务不变,并且易于维护。
JSON的缺点
  • 没有XML格式这么推广的深入人心和喜用广泛,没有XML那么通用性。
  • JSON格式目前在Web Service中推广还属于初级阶段。

XML的优点

  • 格式统一,符合标准。
  • 容易与其他系统进行远程交互,数据共享比较方便。
XML的缺点
  • XML文件庞大,文件格式复杂,传输占带宽。
  • 服务器端和客户端都需要花费大量代码来解析XML,导致服务器端和客户端代码变得异常复杂且不易维护。
  • 客户端不同浏览器之间解析XML的方式不一致,需要重复编写很多代码。
  • 服务器端和客户端解析XML花费较多的资源和时间。

13.写一个tab菜单切换程序

var nav = document.getElementById("nav").getElementsByTagName('span'); //获取导航区的集合
var box = document.getElementById("content").getElementsByTagName('div');//获取内容区的集合
for (var i = 0, j = nav.length-1; i <= j; i++ ){
    nav[i].onclick = function(){                                 //鼠标点击事件
        for (var i = 0, j = nav.length-1; i <= j; i++ ){
            if (nav[i] == this){
                nav[i].className = 'nav_on';
                box[i].style.display = 'block';
            }else{
                nav[i].className = '';
                box[i].style.display = 'none';
            }
        }
    }
}
    

14.下面这个li,如何实现点击每一个li的时候alert其index的值?

<ul id="target">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
    

如果用原生JS来些:

var list = document.getElementById("target").getElementsByTagName("li");
var length = list.length;
for(var i = 0; i < length; i++){
    list[i].onclick = function(i){
        return function(){
            alert("当前index值为"+ (i+1));
        }
    }(i);
}

    

如果用jQuery来写:

 $("#target").find("li").each(function(){
    $(this).click(function(i){
        alert("当前index值为"+ ($(this).index()+1));
    })
 })
    

15.说说==与===的区别?

先总结:由于javascript存在隐式类型转换,所以==只要转换之后的值相等便是true;而===(叫做全等或者恒等)不仅要求值相等,同时要求类型也相等。

1、对于string,number等基础类型,==和===是有区别的

  • 不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等
  • 同类型比较,直接进行“值”比较,两者结果一样

2、对于Array,Object等高级类型,==和===是没有区别的

因为都是进行进行“指针地址”比较

3、基础类型与高级类型,==和===是有区别的

  • 对于==,将高级转化为基础类型,进行“值”比较
  • 因为类型不同,===结果为false

16.null与undefined的区别?

Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。

Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象(即是一个不存在的对象的占位符)。

17.js如何实现多重继承?

先给答案 :可以通过argument.call实现。

首先来看一下普通继承怎么实现:

    //继承(原型继承)
var f = function(){};  //类

var b =  function(){
    this.aa = 'abcdefg',
    this.bb = '2B青年欢乐多'
}     
f.prototype = new b(); //f 类原型继承b类
var a = new f(); //原型继承需要new
alert(a.bb);
    

再来看一下多重继承的实现:

    //多重继承 
var a = function(){
   this.a = '我输出 1';
}

var b = function(){
   this.b = '我输出 2'
}

var c = function(){
   a.call(this);
   b.call(this);
}
//call 方法可以用来代替另一个对象调用一个方法
var d = new c()
alert(d.a);
alert(d.b);
    

18.Eval是啥?谈谈对它的理解

eval的作用其实很简单,就是把一段字符串传递给JS解释器,由Javascript解释器将这段字符串解释成Javascript代码,并且执行它。

19.事件、IE与火狐的事件机制有什么区别?(事件冒泡 和事件捕获)如何阻止冒泡?

事件传播三个阶段:

  • 1.捕捉阶段,事件从对象沿着文档树向下传播给目标节点。
  • 2.目标节点触发阶段:在目标上的适合的事件处理程序将运行。
  • 3.冒泡阶段,在这个阶段,事件将从目标元素向上传播或者气泡回对象的文档层次。

javascript的事件模型有三种,它们分别是NN4、IE4+和W3C/Safari,这也造成了在不同的浏览器中处理event的差异。

    • 捕获事件:
    • IE--obj.setCapture() 、obj.releaseCapture()
    • Firefox--document.addEventListener("mousemove",mousemovefunction,true)、document.removeEventListener("mousemove",mousemovefunction,true)
    • window.event:
    • IE--有window.event对象
    • Firefox--没有window.event对象
      获取事件源
    • IE用srcElement获取事件源
    • 而Firefox用target获取事件源
      添加,去除事件
    • IE:element.attachEvent(“onclick”, function); element.detachEvent(“onclick”, function)
    • FF:element.addEventListener(“click”, function, true); element.removeEventListener(“click”, function, true)

20.使用Javascript获取当前鼠标坐标,注意IE和Fiirefox的区别?

function mouseCoordinate(e){
   var x,y;
   var e = e || window.event;
       return {
        x: e.pageX||(e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft)),
        y: e.pageY||(e.clientY+(document.documentElement.scrollTop||document.body.scrollTop))
    }
}

    

21.截取字符串abcdefg的efg

var str = "abcdefgfdsbvfd";
if (/efg/.test(str)){  
    var result = str.substr(str.indexOf("efg"), 3);  
    alert(result);
}

    

22.编写一个方法 求一个字符串的字节长度(假设:一个英文字符占用一个字节,一个中文字符占用两个字节)

function getBytes(str){
    var bytes = str.length;
    for (var i = 0; i < bytes; i++){
        if(str.charCodeAt(i) > 255){   //charCodeAt 返回的Unicode编码值 如果是 中文字符 会大于255 
            bytes++;
        }
    }
    return bytes;
}

    

23.JavaScript中如何检测一个变量是一个String类型?请写出函数实现

function isString(str){
    return (typeof(str) === "string" || str.constructor === String);
}

    

24.网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”

function counter(){
    var date   = new Date(); 
    var year   = date.getFullYear();
    var date2  = new Date(year,12,31,23,59,59);
    var time   = (date2 - date)/1000;
    var day    = Math.floor(time/(24*60*60));
    var hour   = Math.floor(time%(24*60*60)/(60*60));
    var minute = Math.floor(time%(24*60*60)%(60*60)/60);
    var second = Math.floor(time%(24*60*60)%(60*60)%60);
    var str =  year + "年还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";
    document.getElementById("input").value = str;
}
window.setInterval("counter()",1000);

    

25.请用javascript实现鼠标点击页面中的任意标签,alert该标签的名称?(注意IE和W3C兼容性)

document.onclick = function(e){
    var e = e || window.event;
    var target = (e["target"] || e["srcElement"]);
    alert(target.tagName.toLowerCase());
}
    

其他类:

1. 谈谈对bootstrap的理解(高频率)

Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面。同时还可以用less重新设计组件。对于前端技术一般的后台工程师,省去了很多编写前端处理时的痛苦。个人使用搭个博客什么的比较方便。

  • 可以利用bootstrap 快速搭建跨平台的应用程序,而且特别优雅
  • 它非常容易上手,和jquery非常像,让程序爱不释手
  • 我们可以不编写一行js代码就能实现js插件

2. 网站性能优化的方法有哪些?(高频率)

  • 减少HTTP请求数。
  • 减少被请求文件的大小,较少请求数据占用的网络带宽。
  • 通过版本化控制客户端的缓存。
  • 删除页眉可有可无的内容。 如空格,注释。
  • 让html标记有始有终(结束标签),减少浏览器的判断时间。
  • 把Javascript移到HTML文件末尾。
  • 网址后面加入一个反斜杠. www.maticsoft.com/220/ ,让服务器立即知道访问的是个文件夹。
  • 图片采用BASE64编码,减少数据请求。

3. 谈谈响应式布局(高频率)

自动适配屏幕,检测不同的屏幕用不同的html结构和不同的样式来呈现。

4. 前端由哪些部分组成?(高频率)

  • 1.UI设计部分
  • 2.HTML/CSS,页面静态化
  • 3.Javascript, AS 客户端动态化
  • 4.Flash、Silverlight、Video 多媒体化
  • 5.PHP、Python等CGI, 服务端通信基本知识和编码

5. W3C标准是什么?

万维网联盟(World Wide Web Consortium)标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。

对应的标准也分三方面:

  • 结构化标准语言主要包括XHTML和XML
  • 表现标准语言主要包括CSS
  • 行为标准主要包括对象模型(如W3C DOM)、ECMAScript等

这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。

6. 渐进增强与优雅降级的理解

  • 渐进增强(progressive enhancement):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • 优雅降级(graceful degradation):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

  

7. 为什么利用多个域名来提供网站资源会更有效?

缓解网络请求的阻塞时间,增加并发量,一般图片等静态资源优先考虑利用多域名加载。

8.规避javascript多人开发函数重名问题

  • 加前缀 —— 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
  • 封装类 —— 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就可以

9. http中的404状态码是什么意思?

找不到文件

10. 常用的测试工具、开发工具有哪些?

测试工具:

  • IE8,9,10浏览器
  • google chrome浏览器
  • firefox浏览器
  • safari浏览器
  • opera浏览器

开发工具:

  • Sublime代码编辑器
  • google chrome浏览器
  • google chrome控制台
  • jsfiddle调试工具
  • git版本

11.jpeg、gif、png格式的优缺点,应用场景?

  • GIF:1987 年诞生,常用于网页动画,使用无损压缩,支持 256 种颜色(一般叫 8 bit 彩色),支持单一透明色;
  • JPEG:1992 年出世,照片一般都用这个格式,有损压缩,24 bit 真彩色(224 = 17 万种颜色),不支持动画,不支持透明色;
  • PNG:1996 年问世,无损压缩,最常见的使用格式是 256 索引色(PNG-8)和 24 bit 真彩色(PNG-24)(当然 PNG 支持的颜色格式远不止此),支持 full alpha 通道(256 级可调半透明色),不支持动画;

在网页中一般小图标中很多图片格式都采用png,png是一种图片存储格式,可以直接作为素材使用,因为它有一个非常好的特点:背景透明。而一般我们在网页中看到的动态图片一般都是GIF格式的。

12.谈谈对前端的理解?(开放式)

13.你认为做前端最需要的品质?(开放式)

14.你最近看过的文章是什么?(开放式)

15.有没有逛技术网站的习惯?请列举这些网站

发表于: 12 Jan 2013