面试题总汇

前端面试题汇总

一、HTML和CSS.............................................................. 17

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?............ 17

2、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？. 17

3、Quirks模式是什么？它和Standards模式有什么区别....................... 17

4、div+css的布局较table布局有什么优点？................................ 19

5、img的alt与title有何异同？strong与em的异同？.................... 19

6、你能描述一下渐进增强和优雅降级之间的不同吗?.......................... 20

7、为什么利用多个域名来存储网站资源会更有效？........................... 21

8、请谈一下你对网页标准和标准制定机构重要性的理解。..................... 21

9、请描述一下cookies，sessionStorage和localStorage的区别？............ 21

10、简述一下src与href的区别。......................................... 22

11、知道的网页制作会用到的图片格式有哪些？.............................. 23

12、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？........ 23

13、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？........................................................ 23

14、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。.................................................................. 24

15、你如何理解HTML结构的语义化？....................................... 24

16、谈谈以前端角度出发做好SEO需要考虑什么？............................ 26

17、有哪项方式可以对一个DOM设置它的CSS样式？.......................... 28

18、CSS都有哪些选择器？................................................. 28

19、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？ 30

20、超链接访问过后hover样式就不出现的问题是什么？如何解决？............ 30

21、什么是CssHack？ie6,7,8的hack分别是什么？......................... 30

22、请用Css写一个简单的幻灯片效果页面.................................. 31

24、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？   33

25、什么是外边距重叠？重叠的结果是什么？................................ 33

26、rgba()和opacity的透明效果有什么不同？.............................. 34

27、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？............. 34

28、如何垂直居中一个浮动元素？.......................................... 34

29、px和em的区别。..................................................... 36

30、描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？   36

31、Sass、LESS是什么？大家为什么要使用他们？............................ 37

32、display:none与visibility:hidden的区别是什么？...................... 38

34、CSS中link和@import的区别是：...................................... 38

35、简介盒子模型：...................................................... 38

36、为什么要初始化样式？................................................ 39

37、BFC是什么?.......................................................... 39

38、html语义化是什么？.................................................. 40

39、Doctype的作用？严格模式与混杂模式的区别？........................... 40

40、IE的双边距BUG：块级元素float后设置横向margin，ie6显示的margin比设置的较大。解决：加入_display：inline.................................................................. 40

41、HTML与XHTML——二者有什么区别？.................................... 40

42、html常见兼容性问题？................................................ 41

43、对WEB标准以及W3C的理解与认识...................................... 42

44、行内元素有哪些?块级元素有哪些?CSS的盒模型?.......................... 42

45、前端页面有哪三层构成，分别是什么?作用是什么?........................ 42

46、Doctype作用?严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 42

47、行内元素有哪些？块级元素有哪些？空(void)元素有那些？............... 43

48、CSS的盒子模型？..................................................... 43

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

50、如何居中div,如何居中一个浮动元素?................................... 45

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

52、列出display的值，说明他们的作用。position的值，relative和absolute定位原点是？   47

53、absolute的containingblock计算方式跟正常流有什么不同？............. 48

54、position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样？    48

55、对WEB标准以及W3C的理解与认识...................................... 48

56、css的基本语句构成是?................................................ 48

57、浏览器标准模式和怪异模式之间的区别是什么?........................... 48

58、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？48

59、超链接访问过后hover样式就不出现的问题是什么？如何解决？............ 49

60、什么是Css Hack？ie6,7,8的hack分别是什么？......................... 49

62、请用Css写一个简单的幻灯片效果页面.................................. 50

63、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？   52

64、什么是外边距重叠？重叠的结果是什么？................................ 53

65、rgba()和opacity的透明效果有什么不同？.............................. 53

66、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？............. 54

67、如何垂直居中一个浮动元素？.......................................... 54

68、描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不同之处？56

69、说display属性有哪些？可以做什么？.................................. 56

70、哪些css属性可以继承？.............................................. 57

71、css优先级算法如何计算？............................................. 57

72、b标签和strong标签,i标签和em标签的区别？.......................... 57

73、有那些行内元素、有哪些块级元素、盒模型？............................ 57

74、有哪些选择符，优先级的计算公式是什么？行内样式和！important哪个优先级高？   57

75.我想让行内元素跟上面的元素距离10px，加margin-top和padding-top可以吗？ 57

76.CSS的盒模型由什么组成？.............................................. 58

77、.说说display属性有哪些？可以做什么？............................... 58

78、哪些css属性可以继承？.............................................. 58

79、css优先级算法如何计算？............................................. 58

80、text-align:center和line-height有什么区别？......................... 59

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

82、写一个表格以及对应的CSS,使表格奇数行为白色背景，偶数行为灰色，鼠标一上去为黄色背景。    59

二、JS基础.................................................................. 59

1、javascript的typeof返回哪些数据类型.................................. 59

2、例举3种强制类型转换和2种隐式类型转换?.............................. 59

3、split()join() 的区别................................................ 59

4、数组方法pop()push() unshift() shift()............................... 60

5、事件绑定和普通事件有什么区别......................................... 60

6、IE和DOM事件流的区别................................................. 60

7、IE和标准下有哪些兼容性的写法......................................... 60

8、call和apply的区别................................................... 60

9、b继承a的方法........................................................ 61

10、JavaScriptthis指针、闭包、作用域................................... 61

11、事件委托是什么...................................................... 61

12、闭包是什么，有什么特性，对页面有什么影响............................ 61

13、如何阻止事件冒泡和默认事件.......................................... 61

14、添加删除替换插入到某个接点的方法................................. 61

15、javascript的本地对象，内置对象和宿主对象............................ 61

16、documentload 和document ready的区别............................... 62

17、”==”和“===”的不同............................................... 62

18、javascript的同源策略................................................ 62

19、编写一个数组去重的方法.............................................. 62

20、JavaScript是一门什么样的语言，它有哪些特点？........................ 63

21、JavaScript的数据类型都有什么？...................................... 63

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

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

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

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

26、看下列代码输出为何？解释原因。...................................... 65

27、看下列代码,输出什么？解释原因。..................................... 65

28、看下列代码,输出什么？解释原因。..................................... 66

29、看代码给答案。...................................................... 67

30、已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。.............................................. 67

31、var numberArray = [3,6,2,4,1,5];（考察基础API）................. 68

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

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

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

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

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

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

38、把两个数组合并，并删除第二个元素。.................................. 72

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

40、有这样一个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}。................................. 73

41、正则表达式构造函数varreg=new RegExp(“xxx”)与正则表达字面量varreg=//有什么不同？匹配邮箱的正则表达式？............................................................ 74

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

43、Javascript中callee和caller的作用？................................ 75

44、Javascript中, 以下哪条语句一定会产生运行错误？      答案(  B   ).... 76

45、以下两个变量a和b，a+b的哪个结果是NaN？      答案(   C  ).......... 76

46、vara=10; b=20; c=4;  ++b+c+a++ 以下哪个结果是正确的？答案(  B  )... 77

47、下面的JavaScript语句中，（D ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空........................................................................ 77

48、要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（A ）   78

49、以下哪条语句会产生运行错误：（A）A.varobj = ();

.var obj =[];

Cvar obj ={};

D.ar obj =//;.......................................................... 78

50、以下哪个单词不属于javascript保留字：（B）A.with

.parent

Cclass

D.oid................................................................... 78

51、请选择结果为真的表达式：（C）A.nullinstanceof Object

.null ===undefined

Cnull ==undefined

D.aN == NaN............................................................. 78

52、Javascript中, 如果已知HTML页面中的某标签对象的id=”username”，用____document.getElementById(‘username’)____方法获得该标签对象。...... 78

53、typeof运算符返回值中有一个跟javascript数据类型不一致，它是________”function”_________。........................................................................ 78

54、定义了一个变量，但没有为该变量赋值，如果alert该变量，javascript弹出的对话框中显示___undefined______。................................................... 78

55、分析代码，得出正确的结果。.......................................... 78

56、写出函数DateDemo的返回结果，系统时间假定为今天..................... 79

57、写出程序运行的结果？................................................ 79

58、阅读以下代码，请分析出结果：........................................ 80

59、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口； <html> 80

60、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉.................................................................. 81

61、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。 81

62、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示 82

63、截取字符串abcdefg的efg............................................. 83

64、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个  83

65、简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明   83

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

67、JavaScript的数据类型都有什么？...................................... 84

68、javascript中有哪几种数据类型，分别写出中文和英文。.................. 85

69、javascript中==和===的区别是什么？举例说明。......................... 85

70、简述创建函数的几种方式.............................................. 85

71、Javascript如何实现继承？............................................ 85

72、Javascript创建对象的几种方式？...................................... 85

73、把Script 标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？........................................................................ 85

74、iframe的优缺点？.................................................... 85

75、请你谈谈Cookie的弊端？............................................. 85

76、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。............. 86

77、js延迟加载的方式有哪些？............................................ 86

78、documen.write和innerHTML 的区别？.................................. 87

79、哪些操作会造成内存泄漏？............................................ 87

80、javascript的typeof返回哪些数据类型?................................ 87

81、split() join() 的区别............................................... 87

82、数组方法pop() push() unshift() shift()各表示什么意思？.............. 87

83、判断一个字符串中出现次数最多的字符，统计这个次数.................... 88

84、javascript的typeof返回哪些数据类型................................. 88

85、例举3种强制类型转换和2种隐式类型转换?............................. 89

86、split()join() 的区别............................................... 89

87、数组方法pop()push() unshift() shift().............................. 89

88、事件绑定和普通事件有什么区别........................................ 89

89、IE和DOM事件流的区别................................................ 89

90、IE和标准下有哪些兼容性的写法........................................ 89

91、call和apply的区别.................................................. 90

92、b继承a的方法....................................................... 90

93、写一个获取非行间样式的函数.......................................... 90

94、事件委托是什么...................................................... 91

95、闭包是什么，有什么特性，对页面有什么影响............................ 91

96、解释jsonp的原理，以及为什么不是真正的ajax.......................... 91

97、javascript的本地对象，内置对象和宿主对象............................ 91

98、documentload 和document ready的区别............................... 92

99、字符串反转，如将'12345678' 变成 '87654321'......................... 92

100、将数字12345678 转化成 RMB形式如：12,345,678 ................... 92

101、生成5个不同的随机数；............................................. 93

102、去掉数组中重复的数字方法一；...................................... 93

103、阶乘函数；......................................................... 95

104、window.location.search()返回的是什么？............................ 95

105、window.location.hash 返回的是什么？............................... 95

106、window.location.reload() 作用？.................................... 96

107、阻止冒泡函数....................................................... 96

108、什么是闭包？写一个简单的闭包？；.................................. 96

109、javascript中的垃圾回收机制？...................................... 97

110、看题做答：......................................................... 97

111、下面输出多少？..................................................... 98

112、再来一个........................................................... 98

113、................................................................... 99

114、.................................................................. 101

115、JS的继承性........................................................ 101

116、精度问题:JS 精度不能精确到 0.1 所以 。。。。同时存在于值和差值中.. 102

117、加减运算.......................................................... 102

118、什么是同源策略？.................................................. 102

119、call和applay的区别是什么？....................................... 102

120、为什么不能定义1px左右的div容器？  ........................... 102

121、结果是什么？...................................................... 103

122、输出结果.......................................................... 103

123、计算字符串字节数：................................................ 104

124、结果是：.......................................................... 104

125、声明对象，添加属性，输出属性...................................... 104

126、匹配输入的字符：第一个必须是字母或下划线开头，长度5-20............ 105

127、检测变量类型...................................................... 105

128、如何在HTML中添加事件，几种方法？................................. 106

129、BOM对象有哪些，列举window对象？.................................. 106

130、请问代码实现outerHTML............................................ 106

131、JS中的简单继承call方法！........................................ 108

132、bind(),live(), delegate()的区别.................................. 109

133、typeof的返回类型有哪些？   .................................... 109

134、简述link和import的区别？........................................ 110

135、window.onload和 document.ready的区别？........................... 110

136、解析URL成一个对象？............................................. 110

137、看下列代码输出什么？.............................................. 111

138、看下列代码,输出什么？............................................. 111

139、已知数组var stringArray =["This”, "is”, "Baidu”, "Campus”]，Alert出”This is Baidu Campus”。............................................................. 112

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

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

142、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？  113

143、你如何优化自己的代码？............................................ 113

144、请描述出下列代码运行的结果........................................ 114

145、需要将变量e的值修改为“a+b+c+d”,请写出对应的代码................ 114

146、怎样实现两栏等高？................................................ 114

147、使用js实现这样的效果：在文本域里输入文字时，当按下enter键时不换行，而是替换成“{ {enter}}”,(只需要考虑在行尾按下enter键的情况)...................................... 115

148、以下代码中end字符串什么时候输出.................................. 115

149、specify(‘hello,world’)//=>’h,e,l,l,o,w,o,r,l,d’实现specify函数 115

150、请将一个URL的search部分参数与值转换成一个json对象.............. 116

151、请用原生js实现jquery的get\post功能，以及跨域情况下............. 116

152、请简要描述web前端性能需要考虑哪方面，你的优化思路是什么？........ 116

153、简述readyonly与disabled的区别................................... 116

154、判断一个字符吕串出现次数最多的字符，统计这个次数并输出............ 116

155、编写一个方法，去掉一个数组的复重元素.............................. 116

156、写出3个使用this的典型应用....................................... 116

157、请尽可能详尽的解释ajax的工作原理................................. 116

158、为什么扩展javascript内置对象不是好的做法？....................... 116

159、请解释一下javascript的同源策略................................... 116

160、什么是三元表达式？“三元”表示什么意思？.......................... 116

161、浏览器标准模式和怪异模式之间的区别是什么？........................ 116

162、如果设计中使用了非标准的字体，你该如何去实现？.................... 116

163、用css分别实现某个div元素上下居中和左右居中...................... 116

164、modulo(12,5)//2  实现满足这个结果的modulo函数.................... 116

165、HTTP协议中，GET和POST有什么区别？分别适用什么场景？............ 116

166、HTTP状态消息200302 304 403 404 500分别表示什么.................. 116

167、HTTP协议中，header信息里面，怎么控制页面失效时间（last-modified,cache-control,Expires分别代表什么）............................................................... 117

168、HTTP雷锋议目前常用的有哪几个？KEEPALIVE从哪个版本开始出现的？.... 117

169、业界常用的优化WEB页面加载速度的方法（可以分别从页面元素展现，请求连接，css,js,服务器等方面介绍）................................................................... 117

170、列举常用的web页面开发，调试以及优化工具.......................... 117

171、解释什么是sql注入，xss漏洞....................................... 117

172、如何判断一个js变量是数组类型..................................... 117

173、请列举js数组类型中的常用方法..................................... 117

174、FF与IE中如何阻止事件冒泡，如何获取事件对象，以及如何获取触发事件的元素    117

175、列举常用的js框架以及分别适用的领域............................... 117

176、js中如何实现一个map.............................................. 117

177、js可否实现面向对象编程，如果可以如何实现js对象的继承............. 117

178、约瑟夫环—已知n个人（以编号1，2，3…分别表示）围坐在一张圆桌周围。从编号为k的人开始报数，数到m的那个人出列；他的下一个人又从1开始报数，数到m的那个人又出列；依此规律重复下去，直到圆桌周围的人全部出列。......................................................... 117

179、有1到10w这个10w个数，去除2个并打乱次序，如何找出那两个数？.... 117

180、如何获取对象a拥有的所有属性（可枚举的、不可枚举的，不包括继承来的属性）   118

181、有下面这样一段HTML结构，使用css实现这样的效果：................. 118

182、下面这段代码想要循环昝输出结果01234，请问输出结果是否正确，如果不正确，请说明为什么，并修改循环内的代码使其输出正确结果............................................. 118

183、解释下这个css选择器什么发生什么？................................ 118

184、JavaScript以下哪条语句会产生运行错误.............................. 118

185、以下哪些是javascript的全局函数：（ABC）........................... 119

186、关于IE的window对象表述正确的有：（ACD）.......................... 119

187、描述错误的是...................................................... 120

188、关于link和@import的区别正确的是  A............................... 120

189、下面正确的是  A................................................... 121

188、错误的是.......................................................... 121

189、不用任何插件，如何实现一个tab栏切换？............................ 121

190、基本数据类型的专业术语以及单词拼写................................ 121

191、变量的命名规范以及命名推荐........................................ 121

192、三种弹窗的单词以及三种弹窗的功能.................................. 121

193、console.log(8 | 1 ); 输出值是多少？.............................. 122

194、只允许使用+ - * / 和 Math.* ，求一个函数y = f(x, a, b);当x > 100 时返回a 的值，否则返回 b 的值，不能使用if else 等条件语句，也不能使用|,?:,数组。............... 122

195、JavaScriptalert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一样该如何处理？  122

196、一个div，有几种方式得到这个div的jQuery对象？<divclass='aabbcc' id='nodesView'></div>想直接获取这个div的dom对象，如何获取？dom对象如何转化为jQuery对象？..... 123

197、主流浏览器内核.................................................... 123

198、如何显示/隐藏一个dom元素？请用原生的JavaScript方法实现.......... 123

199、JavaScript有哪几种数据类型........................................ 123

200、jQuery框架中$.ajax()的常用参数有哪些？写一个post请求并带有发送数据和返回数据的样例    123

201、JavaScript数据元素添加、删除、排序等方法有哪些？.................. 123

202、如何添加html元素的事件，有几种方法？请列举....................... 123

203、JavaScript的循环语句有哪些？...................................... 123

204、作用域-编译期执行期以及全局局部作用域问题......................... 123

205、闭包：下面这个ul，如何点击每一列的时候alert其index？............ 123

206、列出3条以上ff和IE的脚本兼容问题................................ 124

207、列举可以哪些方面对前端开发进行优化................................ 124

208、至少列出一种JavaScript继承的实现方式............................. 124

209、如现在有一个效果，有显示用户头像、用户昵称、用户其他信息；当用户鼠标移到头像上时，会弹出用户的所有信息；如果是你，你会如何实现这个功能，请用代码实现？............. 124

210、call与apply有什么作用？又有什么什么区别？用callee属性实现函数递归？ 124

211、用正则表达式，写出由字母开头，其余由数字、字母、下划线组成的6~30的字符串？ 124

212、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个（10分）....................................................................... 124

213、Javascript中callee和caller的作用？.............................. 124

214、对于apply和call两者在作用上是相同的，即是调用一个对象的一个方法，以另一个对象替换当前对象。将一个函数的对象上下文从初始的上下文改变为由thisObj 指定的新对象。.... 125

215、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？......... 125

216、写一个函数可以计算sum(5,0,-5);输出0; sum(1,2,3,4);输出10;....... 125

217、事件代理怎么实现？................................................ 125

218、《正则》写出正确的正则表达式匹配固话号，区号3-4位，第一位为0，中横线，7-8位数字，中横线，3-4位分机号格式的固话号.................................................. 125

219、《算法》一下A,B可任选一题作答，两题全答加分...................... 126

220、请写出一张图片的HTML代码，已知道图片地址为“images/abc.jpg”,宽100px，高50px 126

221、请写一个正则表达式：要求最短6位数，最长20位，阿拉伯数和英文字母（不区分大小写）组成  126

222、统计1到400亿之间的自然数中含有多少个1？比如1-21中，有1、10、11、21这四个自然数有5个1....................................................................... 126

223、删除与某个字符相邻且相同的字符，比如fdaffdaaklfjklja字符串处理之后成为“fdafdaklfjklja”....................................................................... 126

224、请写出三种以上的Firefox有但，InternetExplorer没有的属性活函数.... 126

225、请写出一个程序，在页面加载完成后动态创建一个form表单，并在里面添加一个input对象并给它任意赋值后义post方式提交到：http://127.0.0.1/save.php....................... 126

226、用JavaScript实现冒泡排序。数据为23、45、18、37、92、13、24....... 126

227、解释一下什么叫闭包，并实现一段闭包代码............................ 127

228、简述一下什么叫事件委托以及其原理.................................. 127

229、前端代码优化的方法................................................ 127

230、下列JavaScript代码执行后，依次alert的结果是..................... 127

231、下列JavaScript代码执行后，iNum的值是............................. 128

232、输出结果是多少？.................................................. 128

233、.................................................................. 133

234、下列JavaScript代码执行后，运行的结果是........................... 134

235、下列JavaScript代码执行后，依次alert的结果是..................... 135

236、下列JavaScript代码执行后的效果是................................. 136

237、下列JavaScript代码执行后的li元素的数量是........................ 136

238、程序中捕获异常的方法？............................................ 137

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

240、给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：................................................................. 138

241、写出函数DateDemo的返回结果，系统时间假定为今天................... 138

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

243、已知数组var?stringArray?=?[“This”,?“is”,?“Baidu”,?“Campus”]，Alert出”This?is?Baidu?Campus”。.............................................................. 140

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

245、.varnumberArray=[3,6,2,4,1,5];（考察基础API）.................... 141

246、把两个数组合并，并删除第二个元素。................................ 141

247、如何消除一个数组里面重复的元素？.................................. 142

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

249、正则表达式构造函数varreg=new RegExp(“xxx”)与正则表达字面量varreg=//有什么不同？匹配邮箱的正则表达式？......................................................... 144

250、1 var regMail =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;  144

251、数组和字符串...................................................... 145

252、下列控制台都输出什么.............................................. 146

253、第2题：.......................................................... 146

254、第3题：.......................................................... 147

255、第4题：.......................................................... 147

256、第5题：.......................................................... 148

257、第6题：.......................................................... 148

258、第7题：.......................................................... 148

259、第8题：.......................................................... 148

260、第9题：.......................................................... 149

261、第10题：......................................................... 149

262、第11题：考点：函数声明提前....................................... 150

263、第12题：......................................................... 150

264、第13题：......................................................... 150

265、第14题：......................................................... 151

266、第15题........................................................... 151

267、第16题........................................................... 151

三、Jquery................................................................. 152

1、jQuery的 slideUp动画，如果目标元素是被外部事件驱动,当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?.......................................... 152

四、HTML5CSS3............................................................. 152

1、CSS3有哪些新特性？.................................................. 153

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

3、本地存储（LocalStorage ）和cookies（储存在用户本地终端上的数据）之间的区别是什么？  154

4、如何实现浏览器内多个标签页之间的通信?............................... 154

5、你如何对网站的文件和资源进行优化？.................................. 155

6、什么是响应式设计？.................................................. 155

7、新的 HTML5 文档类型和字符集是？..................................... 155

8、HTML5 Canvas 元素有什么用？......................................... 155

9、HTML5 存储类型有什么区别？.......................................... 155

10、用H5+CSS3解决下导航栏最后一项掉下来的问题......................... 156

11、CSS3新增伪类有那些？............................................... 156

12、请用CSS实现：一个矩形内容，有投影，有圆角，hover状态慢慢变透明。.. 156

13、描述下CSS3里实现元素动画的方法.................................... 156

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

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

16、你能描述一下渐进增强和优雅降级之间的不同吗?........................ 158

17、为什么利用多个域名来存储网站资源会更有效？......................... 159

18、请谈一下你对网页标准和标准制定机构重要性的理解。................... 159

19、请描述一下cookies，sessionStorage和localStorage的区别？.......... 159

20、知道css有个content属性吗？有什么作用？有什么应用？............... 160

21、如何在HTML5 页面中嵌入音频?....................................... 161

22、如何在HTML5 页面中嵌入视频？...................................... 162

23、HTML5引入什么新的表单属性？....................................... 162

24、CSS3新增伪类有那些？............................................... 162

25、(写)描述一段语义的html代码吧。.................................... 163

26.cookie在浏览器和服务器间来回传递。sessionStorage和localStorage区别 163

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

28、如何区分：DOCTYPE声明\新增的结构元素\功能元素..................... 165

29、语义化的理解？..................................................... 165

30、HTML5的离线储存？.................................................. 165

31、写出HTML5的文档声明方式........................................... 165

32、HTML5和CSS3的新标签    ....................................... 165

33、自己对标签语义化的理解............................................. 166

五、移动web开发........................................................... 166

1、移动端常用类库及优缺点.............................................. 166

2、Zepto库和JQ区别.................................................... 166

六、Ajax................................................................... 166

1、Ajax是什么? 如何创建一个Ajax？..................................... 167

2、同步和异步的区别?................................................... 167

3、如何解决跨域问题?................................................... 167

4、页面编码和被请求的资源编码如果不一致如何处理？...................... 167

5、简述ajax的过程。................................................... 167

6、阐述一下异步加载。.................................................. 167

7、请解释一下JavaScript 的同源策略。.................................. 167

8、GET和POST的区别，何时使用POST？................................... 168

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

10、Ajax的最大的特点是什么。.......................................... 168

11、ajax的缺点......................................................... 169

12、ajax请求的时候get和post方式的区别............................... 169

13、解释jsonp的原理，以及为什么不是真正的ajax......................... 169

14、什么是Ajax和JSON，它们的优缺点。.................................. 169

15、http常见的状态码有那些？分别代表是什么意思？....................... 170

16、一个页面从输入URL 到页面加载显示完成，这个过程中都发生了什么？.... 170

17、ajax请求的时候get 和post方式的区别............................... 171

18、ajax请求时，如何解释json数据...................................... 171

19、.javascript的本地对象，内置对象和宿主对象.......................... 171

20、为什么利用多个域名来存储网站资源会更有效？......................... 171

21、请说出三种减低页面加载时间的方法................................... 172

22、HTTP状态码都有那些。............................................... 172

七、JS高级................................................................. 172

1、JQuery一个对象可以同时绑定多个事件，这是如何实现的？............... 173

2、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么? 173

3、如何测试前端代码么?知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha,sinon, jasmin, qUnit..)?.............................................................. 173

4、前端templating(Mustache,underscore, handlebars)是干嘛的, 怎么用?.. 173

5、简述一下Handlebars 的基本用法？................................... 173

6、简述一下Handlerbars 的对模板的基本处理流程，如何编译的？如何缓存的？ 173

7、用js实现千位分隔符?................................................ 173

8、检测浏览器版本版本有哪些方式？...................................... 173

9、我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获......................................................... 173

10、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制.................................................... 173

11、如何消除一个数组里面重复的元素？................................... 175

12、小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：................................................. 176

13、下面这个ul，如何点击每一列的时候alert其index?（闭包）............ 177

14、编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。.. 179

15、请评价以下代码并给出改进意见。..................................... 182

16、给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：................................................................. 183

17、定义一个log方法，让它可以代理console.log的方法。................. 184

18、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？.......... 185

19、对作用域上下文和this的理解，看下列代码：.......................... 185

20、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？.................................................... 187

21、（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）.... 190

22、................................................................... 190

23、说出以下函数的作用是？空白区域应该填写什么？....................... 193

24、Javascript作用链域?................................................ 194

25、谈谈This对象的理解。............................................. 195

26、eval是做什么的？................................................... 195

27、关于事件，IE与火狐的事件机制有什么区别？如何阻止冒泡？............ 195

28、什么是闭包（closure），为什么要用它？............................... 195

29、javascript代码中的"use strict";是什么意思? 使用它区别是什么？.... 195

30、如何判断一个对象是否属于某个类？................................... 195

31、new操作符具体干了什么呢?........................................... 195

32、用原生JavaScript的实现过什么功能吗？.............................. 195

33、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？    195

34、对JSON的了解？.................................................... 195

35、js延迟加载的方式有哪些？........................................... 195

36、模块化开发怎么做？................................................. 195

37、AMD（Modules/Asynchronous-Definition）、CMD（CommonModule Definition）规范区别？    195

38、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）    195

39、让你自己设计实现一个requireJS，你会怎么做？........................ 195

40、谈一谈你对ECMAScript6的了解？..................................... 196

41、ECMAScript6怎么写class么，为什么会出现class这种东西?............ 196

42、异步加载的方式有哪些？............................................. 196

43、documen.write和innerHTML的区别?.................................. 196

44、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?............. 196

45、call()和 .apply() 的含义和区别？.................................. 196

46、数组和对象有哪些原生方法，列举一下？............................... 196

47、JS怎么实现一个类。怎么实例化这个类................................ 196

48、JavaScript中的作用域与变量声明提升？............................... 196

49、如何编写高性能的Javascript？....................................... 196

50、那些操作会造成内存泄漏？........................................... 196

51、javascript对象的几种创建方式？..................................... 196

52、javascript继承的6 种方法？........................................ 197

53、eval是做什么的？................................................... 197

54、JavaScript原型，原型链 ? 有什么特点？............................. 197

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

56、简述一下Sass、Less，且说明区别？................................... 198

57、关于javascript中apply()和call()方法的区别？...................... 198

58、简述一下JS中的闭包？.............................................. 198

59、说说你对this的理解？.............................................. 199

60、分别阐述split(),slice(),splice(),join()？.......................... 199

61、事件委托是什么？................................................... 199

62、如何阻止事件冒泡和默认事件？....................................... 199

63、添加删除替换插入到某个接点的方法？.............................. 200

64、你用过require.js吗？它有什么特性？................................ 200

65、谈一下JS中的递归函数，并且用递归简单实现阶乘？.................... 200

66、请用正则表达式写一个简单的邮箱验证。............................... 200

67、简述一下你对web性能优化的方案？................................... 200

68、在JS中有哪些会被隐式转换为false................................... 201

69、定时器setInterval有一个有名函数fn1，setInterval（fn1,500）与setInterval（fn1(),500）有什么区别？................................................................... 201

70、外部JS文件出现中文字符，会出现什么问题，怎么解决？................ 201

71、谈谈浏览器的内核，并且说一下什么是内核？........................... 201

72、JavaScript原型，原型链? 有什么特点？.............................. 202

73、写一个通用的事件侦听器函数......................................... 203

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

75、什么是闭包（closure），为什么要用？................................. 207

76、如何判断一个对象是否属于某个类？................................... 207

77、new操作符具体干了什么呢?........................................... 207

78、JSON的了解........................................................ 208

79、js延迟加载的方式有哪些............................................. 208

80、模块化怎么做？..................................................... 208

81、异步加载的方式..................................................... 209

82、告诉我答案是多少？................................................. 209

83、JS中的call()和apply()方法的区别？................................. 210

84、Jquery与jQueryUI 有啥区别？...................................... 210

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

86、JavaScript中的作用域与变量声明提升？............................... 211

87、前端开发的优化问题（看雅虎14条性能优化原则）。..................... 211

88、http状态码有那些？分别代表是什么意思？............................. 212

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

八、流行框架............................................................... 213

1、JQuery的源码看过吗？能不能简单概况一下它的实现原理？................ 213

2、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？.. 213

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

4、jQuery的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？......... 213

5、jquery.extend与 jquery.fn.extend的区别？........................... 213

6、谈一下Jquery中的bind(),live(),delegate(),on()的区别？.............. 213

7、JQuery一个对象可以同时绑定多个事件，这是如何实现的？................ 213

8、Jquery与jQueryUI有啥区别？........................................ 213

9、jQuery和Zepto的区别？各自的使用场景？.............................. 213

10、针对jQuery 的优化方法？........................................... 213

11、Zepto的点透问题如何解决？.......................................... 213

12、知道各种JS框架(Angular,Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么?.............................................................. 213

13、Underscore对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？ 213

14、使用过angular吗？angular中的过滤器是干什么用的.................... 213

九、移动APP开发........................................................... 214

1、移动端最小触控区域是多大？.......................................... 214

十、NodeJs................................................................. 214

1、对Node的优点和缺点提出了自己的看法：............................... 214

2、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？................................................................. 214

3、Node.js的适用场景？................................................. 215

4、(如果会用node)知道route,middleware, cluster, nodemon, pm2, server-side rendering么?    215

5、解释一下Backbone 的 MVC 实现方式？................................. 215

6、什么是“前端路由”?什么时候适合使用“前端路由”?“前端路由”有哪些优点和缺点?   215

7、对Node的优点和缺点提出了自己的看法？............................... 215

十一、前端概括性问题....................................................... 215

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

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

3、99%的网站都需要被重构是那本书上写的？............................... 216

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

5、加班的看法.......................................................... 217

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

7、那些操作会造成内存泄漏？............................................ 217

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

9、你有了解我们公司吗？说说你的认识？.................................. 218

10、移动端（比如：AndroidIOS）怎么做好用户体验?....................... 218

11、你所知道的页面性能优化方法有那些？................................. 218

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

13、AMD（Modules/Asynchronous-Definition）、CMD（CommonModule Definition）规范区别？    218

14、谈谈你认为怎样做能是项目做的更好？................................. 218

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

16、php中下面哪个函数可以打开一个文件，以对文件进行读和写操作？........ 218

17、php中rmdir可以直接删除文件夹吗？该目录必须是空的，而且要有相应的权限--来自api 219

18、phpinset和empty的区别，举例说明................................... 219

19、php中$_SERVER变量中如何得到当前执行脚本路劲....................... 219

20、写一个php函数，要求两个日期字符串的天数差，如2012-02-05~2012-03-06的日期差数  219

21、一个衣柜中放了许多杂乱的衬衫，如果让你去整理一下，使得更容易找到你想要的衣服；你会怎么做？请写出你的做法和思路？..................................................... 219

22、如何优化网页加载速度？............................................. 219

23、工作流程，你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 220

24、介绍项目经验、合作开发、独立开发。................................. 220

25、开发过程中遇到困难，如何解决。..................................... 220

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

 

 

 

一、HTML和CSS

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari:webkit内核

Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit，Google与Opera Software共同开发)

2、每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

3、Quirks模式是什么？它和Standards模式有什么区别

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）

4、div+css的布局较table布局有什么优点？

改版的时候更方便 只要改css文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

5、 img的alt与title有何异同？strong与em的异同？

a:alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

6、你能描述一下渐进增强和优雅降级之间的不同吗?

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

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

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

7、为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

8、请谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

9、请描述一下cookies，sessionStorage和localStorage的区别？

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

10、简述一下src与href的区别。

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

<script src =”js.js”></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href=”common.css” rel=”stylesheet”/>

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

11、知道的网页制作会用到的图片格式有哪些？

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

12、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

13、在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

答案：dns缓存，cdn缓存，浏览器缓存，服务器缓存。

14、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

15、你如何理解HTML结构的语义化？　

去掉或样式丢失的时候能让页面呈现清晰的结构：

html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.

语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

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

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.

SEO主要还是靠你网站的内容和外部链接的。

便于团队开发和维护

W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

16、谈谈以前端角度出发做好SEO需要考虑什么？

了解搜索引擎如何抓取网页和如何索引网页

你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

Meta标签优化

主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

如何选取关键词并在网页中放置关键词

搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

了解主要的搜索引擎

虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

主要的互联网目录

Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

按点击付费的搜索引擎

搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

搜索引擎登录

网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

链接交换和链接广泛度（Link Popularity）

网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

合理的标签使用

17、有哪项方式可以对一个DOM设置它的CSS样式？　

外部样式表，引入一个外部css文件

内部样式表，将css代码放在 <head> 标签内部

内联样式，将css样式直接定义在 HTML 元素内部

18、CSS都有哪些选择器？

派生选择器（用HTML标签申明）

id选择器（用DOM的ID申明）

类选择器（用一个样式类名申明）

属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

除了前3种基本选择器，还有一些扩展选择器，包括

后代选择器（利用空格间隔，比如div .a{  }）

群组选择器（利用逗号间隔，比如p,div,#a{  }）

那么问题来了，CSS选择器的优先级是怎么样定义的？

基本原则：

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

复杂的计算方法：

用1表示派生选择器的优先级

用10表示类选择器的优先级

用100标示ID选择器的优先级

div.test1 .span var 优先级 1+10 +10 +1

span#xxx .songs li 优先级1+100 + 10 + 1

#xxx li 优先级 100 +1

那么问题来了，看下列代码，<p>标签内的文字是什么颜色的？

<style>

.classA{ color:blue;}

.classB{ color:red;}

</style>

<body>

<p class='classB classA'>123 </p>

</body>

答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p class=’classB classA’>中的先后关系无关。

19、CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

最基本的：

设置display属性为none，或者设置visibility属性为hidden

技巧性：

设置宽高为0，设置透明度为0，设置z-index位置在-1000

20、超链接访问过后hover样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

21、什么是Css Hack？ie6,7,8的hack分别是什么？

答案：针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

示例如下：

1 2 3 4 5 6 7 8 9 10 11 12

#test       {           width:300px;           height:300px;           background-color:blue;      /*firefox*/         background-color:red\9;      /*all ie*/         background-color:yellow;    /*ie8*/         +background-color:pink;        /*ie7*/         _background-color:orange;       /*ie6*/    }          :root #test { background-color:purple\9; }  /*ie9*/     @media all and (min-width:0px){ #test {background-color:black;} }  /*opera*/     @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }       /*chrome and safari*/

22、请用Css写一个简单的幻灯片效果页面

答案：知道是要用css3。使用animation动画实现一个简单的幻灯片效果。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

/**HTML**/         div.ani         /**css**/         .ani{           width:480px;           height:320px;           margin:50px auto;           overflow: hidden;           box-shadow:0 0 5px rgba(0,0,0,1);           background-size: cover;           background-position: center;           -webkit-animation-name: "loops";           -webkit-animation-duration: 20s;           -webkit-animation-iteration-count: infinite;         }         @-webkit-keyframes "loops" {             0% {                 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;                         }             25% {                 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;             }             50% {                 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;             }             75% {                 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;             }             100% {                 background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;             }         }

24、行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

答案：<input>、<img> 、<button> 、<texterea> 、<label>。

25、什么是外边距重叠？重叠的结果是什么？

外边距重叠就是margin-collapse。

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

26、rgba()和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

27、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height

水平方向：letter-spacing

那么问题来了，关于letter-spacing的妙用知道有哪些么？

答案:可以用于消除inline-block元素间的换行符空格间隙问题。

28、如何垂直居中一个浮动元素？

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25