前端面试精华：HTML5+CSS3+JS技巧与实践

需积分: 10 73 浏览量更新于2024-07-15 收藏 3.04MB PDF 举报

本资源是一份详尽的Web前端面试题集合，涵盖了HTML5、CSS3、JavaScript、jQuery、移动Web开发、Ajax等核心技术领域，以及一些高级概念和实际应用问题。以下是部分知识点的详细解读： 1. HTML和CSS基础：面试者可能会询问你在开发过程中测试过的浏览器及其内核类型，例如IE、Chrome、Firefox等，以及doctype声明的作用，它用于告知浏览器文档使用的HTML版本。此外，面试者会关注你对Quirks模式和Standards模式的理解，这两种模式主要针对不同浏览器的渲染差异。 2. 布局优化：div+css布局的优势在于其灵活性和可维护性，避免了表格布局的结构限制。同时，面试者会考察你对渐进增强（从基本功能开始，逐步添加高级特性）和优雅降级（提供最低版本浏览器的支持，然后逐步提升）概念的理解。 3. 性能优化：涉及浏览器缓存机制，如HTTP缓存策略，以及如何通过优化图片、压缩代码、使用CDN等方式提高页面加载速度，特别是在处理大型电商网站中的大量图片时。 4. 语义化和SEO：理解HTML结构的语义化对于搜索引擎优化至关重要，这包括正确使用语义标签、alt属性的使用以及对SEO最佳实践的掌握。 5. CSS和DOM操作：面试者会考察你对CSS选择器的掌握，如类选择器、ID选择器、伪类等，以及如何设置DOM元素的样式。CSS隐藏元素的方法、CSS Hack以及不同浏览器的特定处理也会被提及。 6. CSS技巧：包括实现简单幻灯片效果、行内元素与块级元素的区别、外边距重叠的概念、透明度效果的区别、垂直和水平重叠的文字对齐、浮动元素的垂直居中以及px和em单位的运用。通过这些题目，面试者旨在评估你的HTML和CSS基础知识、布局能力、性能优化技巧、SEO意识以及在实际项目中的实践经验。回答这些问题需要深入理解和实践经验，以便在实际工作中高效地进行前端开发。

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

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

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

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

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

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

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

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

（fn1(),500）有什么区别？ .............................................. 162

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

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

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

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

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

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

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

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

78、JSON 的了解 ........................................................ 166

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

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

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

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

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

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

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

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

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

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

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

的越详细越好） ......................................................... 169

八、流行框架 ............................................................... 169

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

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

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

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

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

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

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

8、Jquery 与 jQuery UI 有啥区别？ ....................................... 170

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

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

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

12、知道各种 JS 框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么?

能讲出他们各自的优点和缺点么? .......................................... 171

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

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

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

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

十、NodeJs................................................................. 171

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

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

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

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

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

rendering 么? .......................................................... 172

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

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

缺点?.................................................................. 172

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

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

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

2、对 BFC 规范的理解？（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容

进行定位,以及与其他元素的关系和相互作用。） ............................ 173

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

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

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

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

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

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

吧？................................................................... 174

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

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

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

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

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

范区别？ ............................................................... 174

一、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：一开始就构建完整的功能，然后再针对低版本浏览器

进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个

非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰

减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

剩余176页未读，继续阅读

邓@@

粉丝: 743
资源: 4

前端面试精华：HTML5+CSS3+JS技巧与实践

H5前端面试大全-包含大厂面试题_25个md文件分类面试题.rar

web前端面试题2022

web前端面试题2023

java web 前端面试题

2021年web前端面试题汇总

前端面试题javascript

web前端开发面试题

2024Web前端面试题大全

阿里主管面试前端面试题

2023web前端面试题

最新资源