序
前端开发面试知识点大纲:
HTML&CSS:
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript:
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他:
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点:
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。
6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
10、JSON —— 作用、用途、设计结构。
本人总结出的题库:
一、选择题
1.下列标签可以不成对出现的是(B)
A. <html></html>
B.<p></p>
C.<title></title>
D.<body></body>
2.关于Document对象,下列叙述正确的是(AC )
A.Document对象表示浏览器中显示的HTML文档
B.Document对象的常用属性bgcolor用来设置文档的背景图片
C.Document对象的常用方法getElementById()用于访问唯一的一个元素
D.Document对象的常用方法getElementByNames()
3.下面哪一个是html5新增的类型()
A.<input type="text">
B.<input type="reset">
C.<input type="search">
D.<input type="hidden">
解析:【HTML5 新的 Input 输入类型type 值有
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
】
4.与html4比较,html5废弃了哪些元素?(ABD)
A. frame
B. applet
C. i
D.big
5.CSS样式表根据所在网页的位置,可分为(B)
A.行内样式表、内嵌样式表、混合样式表
B.行内样式表、内嵌样式表、外部样式表
C.外部样式表、内嵌样式表、导入样式表
D.外部样式表、混合样式表、导入样式表
【外部样式表分为两种:导入样式表和链接样式表】
6.在CSS中下面哪种方法表示超链接文字在鼠标经过时,超链接文字无下划线?( B )
A. A:link{TEXT-DECORATION: underline }
B. A:hover {TEXT-DECORATION: none}
C. A:active {TEXT-DECORATION: blink }
D. A:visited {TEXT-DECORATION: overline }
7 .下面代码片段,说法正确的是:(B )
.DIV1 { position:absolute;
line-height:22px;
height:58px;
background-color: #FF0000; }
A. Line-height:22px;修饰文本字体大小
B. position:absolute;表示绝对定位,被定位的元素位置固定
C. height:58px; 表示被修饰的元素距离别的元素的距离
D. background-color: #FF0000; 表示被修饰的元素的背景图像
8.用css设置div的左边为红色实现,下面设置正确的是(C)
A.style=”border-top: #ff0000 1 solid”
B.style=”border-left:1,#ff0000,solid”
C.style=”border-left:1 #ff0000 solid”
D.style=”border-right:1,#ff0000,solid”
9.在css的三种选择符中,哪个优先级最高?(C)
A.标签选择符
B.类选择符
C.ID选择符
Id>class>标签选择
10.在jQuery中,下面(D)写法是错误的.
A、$(“div p”)
B、$(“div.containner”)
C、$(“table a”,content)
D、$(#divID)
因为divID没有被”“包含, 于是变成了一个变量名,正确的写法是 $(“#divID”).
11.点击页面的按钮,使之打开一个新窗口,加载一个网页,以下javascrip代码中可行的是(A)
A.<input type="button" value="new" onlick="open('new.html','_blank')">
B.<input type="button" value="new" onlick="window.location='new.html';"/>
C.<input type="button" value="new" onlick="loaction.assign('new,html');"/>
D.<from target="_blank" action="new.html><input type="submit" value="new"/></from>
12.在javascript中,以下哪个变量名是非法的(B )
A.Name
B.9name
C.Name_a
D.Name9
13. 在javascript中,( B )变量在函数外声明,并可从脚本的任意位置访问
A.局部
B.全局
C.typeOf
D.New
14. 关于javascript说法正确的是(B )。
a)它是面向对象的
b)它是基于对象的
c)它是面向过程的
d)以上说法都不正确
15. 以下哪条语句会产生运行错误(A,D )
A、varobj = ()
B、varobj = []
C、varobj = {}
D、varobj = //
16.在javascript中,String 对象的方法不包括(D )。
A.charAt()
B.substring()
C.toUpperCase()
D.Length //这个是属性不是方法
17.下拉菜单中,用户更改表单元素Select中的值时,就会调用(A )事件处理程序。
a)onChange
b)onFocus
c)onMouseOver
d)onClick
18.目前支持HTML5和css3的主流浏览器有(BCDE)
A.ie8-10
B.chrome
C.firefox
D.360浏览器
E.Opera
答案:http://www.360doc.com/content/16/0315/11/16915_542344782.shtml
19.在Ajax技术中,关于HTTP 协议向服务器传送数据的方式描述正确的是(A)。
A、包括Post、Get方式
B、如果传输数据包含机密信息,建议采用MD5数据提交方式
C、GET执行效率和POST方法一样
D、Post传送的数据量较小,不能大于1B
20.有关会话跟踪技术描述正确的是(ABC)
A.Cookie是Web服务器发送给客户端的一小段信息,客户端请求时,可以读取该信息发送到服务器端
B.关闭浏览器意味着会话ID丢失,但所有与原会话关联的会话数据仍保留在服务器上,直至会话过期
C.在禁用Cookie时可以使用URL重写技术跟踪会话
D.隐藏表单域将字段添加到HTML表单并在客户端浏览器中显示
【会话跟踪常用的4种方法:
URL重写:URL重写技术就是在URL结尾添加一个附加数据以标识该会话,把会话ID通过URL的信息传递过去,以便在服务端进行识别不同的用户。
隐藏表单域:将会话ID添加到HTML表单元素中提交到服务器,此表单不再客户端显示。
Cookie:Cookie是Web服务器发送给客户端的一小段信息,客户端请求时可以读取该信息发送到服务器端,进而进行用户的识别。对于客户端的每次请求,服务器都会将Cookie发送到客户端,在客户端可以进行保存,以便下次使用。
session: 在服务器端会创建一个session对象,产生一个sessionID来标识这个session对象,然后将这个sessionID放入到Cookie中发送到客户端,下一次访问时,sessionID会发送到服务器,在服务器端进行识别不同的用户 , Session是依赖Cookie的,如果Cookie被禁用,那么session也将失效 】
二.简答题
1.简单介绍javascript的同源策略。
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合。
所谓同源是指:域名,协议,端口相同。
在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。同源策略是客户端脚本(尤其是JavaScript)的重要安全度量标准。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
其目的是防止某个文档或脚本从多个不同源装载。同源策略是一种安全协议。
具体表现在JS中:一段脚本自能读取来自同一来源的窗口的文档和属性。(iframe.contentDocument 等访问错误)
2.引入样式表的方式。
在HTML中引入CSS的方法主要有四种,它们分别是行内式、内嵌式、链接式和导入式。
1.行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。
<div style="color:red"></div>
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>
标签对的<style></style>
标签对中。格式如下:
<head>
<style type="text/css">
...此处写CSS样式
</style>
</head>
缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。
3.导入式
将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>
标记也是写在<head>
标记中,使用的语法如下:
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>
导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。
4.链接式
也是将一个.css文件引入到HTML文件中,但它与导入式不同的是链接式使用HTML规则引入外部CSS文件,它在网页的<head></head>
标签对中使用<link>
标记来引入外部样式表文件,使用语法如下:
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。
总结:一般来说,做网站时把样式多写在多个样式表文件中,因此我们先用链接式引入一个总的CSS文件,然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。
3.闭包是什么,有什么特性,对页面有什么影响?
闭包就是能够读取其他函数内部变量的函数。
闭包的实质是一个函数,是一个用于返回局部变量值的函数,因为在全局中,受JavaScript链式作用域结构的影响,父级变量中无法访问到子级的变量值,为了解决这个问题,才使用闭包这个概念。
它的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
由于闭包时,变量的值都保存到内存中,会导致页面加载时内存消耗很大,IE会导致内在泄露,因此尽量少用或用时要及时删除变量。
例子:
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() {
alert(num); }
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()//执行结果应该弹出的667
执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源,因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述。
http://blog.csdn.net/gaoshanwudi/article/details/7355794
http://www.cnblogs.com/dolphinX/archive/2012/09/29/2708763.html
4.ajax请求时,get和post方式的区别?怎么实现跨域请求?
Q1:
一个在url后面 一个放在请求体里面
有大小限制
安全问题
应用不同
GET:一般用于信息获取。
使用url传递参数
对所发送信息的数量也有限制,一般在2000个字符左右。
该方法发送的信息对任何人都是可见的。所有的变量名和值都显示在url中。也就是说get请求是用url来传递参数的。
GET请求是幂等的。get请求一次和请求一万次的效果是一样的。不会因为查询次数的多少而改变数据信息。
POST:一般用于修改服务器上的资源。
对所发送信息的数量无限制。
一般用来从表单进行发送数据。数据不再url中显示。所有的变量和值对别人不可见,而是嵌入到请求体中。
Q2:
处理跨域方法一:代理
通过同域名的web服务器端创建一个代理:
处理跨域方法二——JSONP
JSONP可用于解决主流浏览器的跨域数据get请求访问的问题。
jQuery中的ajax方法是支持jsonp的处理方式。
前端只需要修改dataType:”jsonp”
同时在其下一行添加jsonp:”callback”
5.请简单说明怎么样实现与后台交互?
6.什么是HTTP协议?
HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准。
HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。
HTTP是在网络上传输HTML的协议,用于浏览器和服务器的通信。
HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。
http://www.runoob.com/http/http-tutorial.html
JS是面向对象还是面向过程?
JS如何面向对象?