前端面试必备知识点：HTML, CSS, 性能优化与浏览器兼容性

需积分: 27 119 浏览量更新于2024-07-19 收藏 3.2MB PDF 举报

"前端面试题集锦，涵盖了HTML和CSS的基础与高级概念，包括浏览器兼容性、网页标准、性能优化、SEO策略以及CSS选择器、布局技巧等核心知识点。" 在前端面试中，掌握HTML和CSS的基本原理及最佳实践至关重要。以下是部分关键问题及其解析： 1. **浏览器兼容性**：面试者应熟悉主流浏览器如Chrome、Firefox、Safari、Edge（Chromium内核）和IE的特性，理解它们的内核差异，如 Trident（IE）、Gecko（Firefox）、Webkit（Safari、Chrome早期版本）和Blink（Chrome、Opera）。 2. **DOCTYPE的作用**：DOCTYPE声明告知浏览器文档遵循的HTML或XHTML规范，影响浏览器进入哪种渲染模式（Quirks模式或Standards模式）。 3. **Quirks模式与Standards模式**：Quirks模式模拟旧版浏览器的行为，而Standards模式遵循最新标准，后者通常提供更一致的渲染结果。 4. **div+css布局的优点**：相比table布局，div+css更有利于维护和扩展，提高页面加载速度，实现更好的响应式设计。 5. **img的alt与title**：alt是图片无法显示时的替代文本，对SEO友好；title是鼠标悬停时显示的提示信息。 6. **渐进增强与优雅降级**：渐进增强从基础功能开始，逐步增加复杂功能以支持现代浏览器；优雅降级则在保证主流浏览器体验的同时，为老版本浏览器提供基本功能。 7. **多域名存储资源**：可分散请求，避免单个域名下的连接限制，提高加载速度。 8. **网页标准和标准机构**：W3C等机构制定的标准确保跨平台、跨浏览器的一致性，促进网络的健康发展。 9. **cookies、sessionStorage和localStorage的区别**：cookies存储有限且每次请求都会发送；sessionStorage仅在当前会话中有效；localStorage持久存储，但容量更大。 10. **src与href**：src用于引入外部资源，如图片、脚本等；href用于链接页面或资源，如链接跳转和样式表引用。 11. **图片格式**：常见的有JPEG（高质量图像）、PNG（透明支持）、GIF（动画支持）等。 12. **微格式**：微格式是将结构化数据嵌入HTML中的方式，有助于搜索引擎理解和解析内容。 13. **性能优化**：缓存策略包括HTTP缓存、浏览器缓存、CDN等，优化图片加载可通过压缩、延迟加载、雪碧图、懒加载等技术。 14. **HTML结构语义化**：使用合适的标签描述页面结构，提高可读性和辅助设备的兼容性。 15. **SEO优化**：前端应关注关键词、元标签、URL结构、可爬取性、页面速度等，确保搜索引擎能正确索引和排名页面。 16. **设置DOM样式**：通过内联样式、内部样式表、外部样式表、JavaScript操作style属性等方式。 17. **CSS选择器**：包括标签选择器、类选择器、ID选择器、伪类、属性选择器等。 18. **隐藏DOM元素**：display:none和visibility:hidden，前者不占用空间，后者保留空间。 19. **超链接 hover 样式**：已访问链接的:hover可能被浏览器默认样式覆盖，通过CSS重置或优先级设置解决。 20. **CssHack**：针对不同IE版本的CSS兼容性问题，如_前缀、*前缀、条件注释等。 21. **行内元素与块级元素**：行内元素（如span）沿行排列，不接受宽高设置；块级元素（如div）独占一行，接受宽高设置，可设置padding和margin。 22. **外边距重叠**：相邻垂直外边距有时会合并，可通过清除浮动、设置border、使用margin:0 auto等方法避免。 23. **rgba()与opacity**：rgba()设定元素背景色的透明度，不影响子元素；opacity影响元素及其所有后代元素的透明度。 24. **垂直居中浮动元素**：可使用负margin、display:table-cell、Flexbox或Grid布局实现。 25. **px与em的区别**：px是固定单位，em是相对单位，基于父元素的字体大小。 26. **reset CSS**：重置浏览器默认样式，确保各浏览器统一呈现；normalize.css则是规范化样式，保留一些基本样式。 27. **了解“reset”CSS文件**：如Eric Meyer Reset、Normalize.css等，用于消除浏览器样式差异，创建一致的起点。以上是前端面试中常见的问题，熟练掌握这些知识点将有助于在面试中脱颖而出。

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

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

ES6 新的语法糖，类，模块化等新特性 .................................................................................... 148

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

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

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

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

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

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

Array.concat( ) 连接数组 ............................................................................................................. 149

Object.hasOwnProperty( ) 检查属性是否被继承 ...................................................................... 150

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Undefined、null、关键字 false、NaN、零、空字符串 ............................................................ 154

69、定时器 setInterval 有一个有名函数 fn1，setInterval（fn1,500）与 setInterval（fn1(),500）

有什么区别？ ....................................................................................................................... 154

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

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

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

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

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

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

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

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

78、JSON 的了解 ................................................................................................................ 159

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

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

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

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

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

84、Jquery 与 jQuery UI 有啥区别？ ................................................................................. 160

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

$.fn.stringifyArray = function(array) { ........................................................................................... 160

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

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

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

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

的越详细越好） ................................................................................................................... 162

七、流行框架 ............................................................................................................................... 162

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

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

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

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

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

Jquery.extend 用来扩展 jQuery 对象本身；jquery.fn.extend 用来扩展 jQuery 实例 .............. 162

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

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

10、 Jquery 与 jQuery UI 有啥区别？ ............................................................................ 163

11、 jQuery 和 Zepto 的区别？各自的使用场景？ ........................................................ 163

12、针对 jQuery 的优化方法？ ..................................................................................... 163

13、 Zepto 的点透问题如何解决？ .................................................................................. 163

14、知道各种 JS 框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他

们各自的优点和缺点么? ..................................................................................................... 164

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

Underscore 的熟悉程度 ............................................................................................................... 164

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

八、移动 APP 开发 ....................................................................................................................... 164

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

九、NodeJs................................................................................................................................... 164

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

2. 需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确

响应。给出你的技术实现方案？ ....................................................................................... 165

3. Node.js 的适用场景？ ..................................................................................................... 165

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

.............................................................................................................................................. 165

Nodejs 相关概念的理解程度 ...................................................................................................... 165

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

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

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

十、前端概括性问题 ................................................................................................................... 166

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

2. 对 BFC 规范的理解？ ...................................................................................................... 166

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

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

5. 加班的看法 ...................................................................................................................... 167

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

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

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

西吧？................................................................................................................................... 167

Node.js、Mongodb、npm、MVVM、MEAN、react、angularjs ............................................... 167

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

10. 移动端（比如：Android IOS）怎么做好用户体验? ................................................... 168

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

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

13. AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范

区别？................................................................................................................................... 168

14. 谈谈你认为怎样做能使项目做的更好？ .................................................................... 168

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

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

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

自 api ..................................................................................................................................... 168

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

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

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

期差数................................................................................................................................... 169

21. 一个衣柜中放了许多杂乱的衬衫，如果让你去整理一下，使得更容易找到你想要的

衣服；你会怎么做？请写出你的做法和思路？ ............................................................... 169

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

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

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

剩余190页未读，继续阅读

weixin_41982184

粉丝: 0
资源: 1

前端面试必备知识点：HTML, CSS, 性能优化与浏览器兼容性

前端复习资料.pdf

前端面试题汇总

JS使用正则表达式除去字符串中重复字符的方法

阿里主管面试前端面试题

前端面试题 43578943

天津安鑫一家前端面试题

2024 前端面试题

前端面试题javascript

web前端面试题2022

web前端面试题2023

最新资源