前端面试必备：HTML-CSS-JS全解析与性能优化技巧

需积分: 9 60 浏览量更新于2024-07-09 收藏 1.41MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

前端面试题汇总是一份全面的参考资料，旨在帮助求职者准备面试，涵盖了一系列前端技术的基础和高级知识点。以下部分详细解释了部分题目涉及的关键概念： 1. 浏览器兼容性和内核 - 面试者需熟悉在哪些主流浏览器（如Chrome、Firefox、Safari、IE）上测试过项目，并了解不同浏览器使用的内核（如WebKit、Gecko、Trident），因为这影响页面渲染。 2. 文档类型声明 - Doctype用于告知浏览器当前文档是遵循哪种HTML标准，如<!DOCTYPE html>表示使用HTML5标准。 3. Quirks模式与Standards模式 - Quirks模式是早期浏览器的解析方式，与W3C标准略有偏差；Standards模式遵循严格的HTML规范，面试时应强调标准化的重要性。 4. div+css布局优势 - div+css布局提供更大的灵活性，易于维护和响应式设计，避免了table布局的一些限制。 5. HTML标签的区别 - img的alt提供替代文本，适合屏幕阅读器和搜索引擎抓取；title提供悬停提示，增加交互性。strong和em用于强调，前者强调程度更高。 6. 渐进增强与优雅降级 - 渐进增强是指先创建基本功能，再逐步优化；优雅降级则是向后兼容，确保旧版本浏览器也能基本工作。 7. 多域名资源存储 - 分离静态资源，减少单个域名带来的网络延迟，提高用户体验。 8. 网页标准与制定机构 - 网页标准是互联网一致性的重要保障，W3C等机构制定了HTML、CSS和JavaScript的规范。 9. 存储选项 - cookies用于服务器与客户端通信，sessionStorage和localStorage分别在关闭浏览器或标签页时失效，sessionStorage存储于内存中。 10. src与href的区别 - src通常用于引用外部资源（如图片、视频），href则常用于定义链接目标。 11. 图片格式 - 常见的图片格式包括JPEG、PNG、GIF、SVG等，根据需求选择合适的格式。 12. 微格式 - 微格式是自定义的数据标记，有助于机器理解内容，对SEO有一定影响，但不是必须考虑的部分。 13. 性能优化 - 开发人员通过HTTP缓存、压缩、异步加载等方式提高加载速度。 14. 图片优化 - 优化图片尺寸、使用懒加载、预加载、CDN加速等方法提升加载效率。 15. HTML语义化 - 使用正确的HTML元素来传达页面结构和意义，有利于辅助技术、SEO和可访问性。 16. SEO考虑 - 从关键词优化、元数据设置、URL结构等方面提升搜索引擎可见度。 17. DOM样式设置 - 通过ID选择器、类选择器、标签选择器等操作DOM元素，应用CSS样式。 18. CSS选择器 - 包括基本选择器、后代选择器、伪类选择器、组合选择器等，是编写CSS的基础。 19. 隐藏元素 - 使用display:none、visibility:hidden或opacity:0等属性使元素不可见。 20. hover问题 - 需要清除hover伪类的默认样式，或者使用:hover伪类覆盖原有样式。 21. CSS Hack - 特殊的CSS技巧，针对老版IE的特定版本问题，如条件注释。 22. CSS动画和幻灯片效果 - 编写CSS关键帧动画或使用transition实现过渡效果。 23. 元素类型与属性 - 行内元素如span不可设置padding和margin，而块级元素如div可以。 24. 外边距重叠 - 当相邻元素的外边距值相加超过各自元素框的总高度时，会产生重叠。 25. rgba()与opacity - rgba提供更精确的透明度控制，opacity仅支持整体透明度。 26. 垂直和水平重叠 - CSS的vertical-align和position属性用于调整元素在轴上的位置。 27. 浮动元素垂直居中 - 可以使用 Flexbox 或 Grid，或结合其他技术实现。 28. px与em单位 - px是固定单位，em是相对单位，适用于可伸缩的设计。 29. CSS reset - 用于消除不同浏览器默认样式差异的CSS文件，通过设置全局样式统一外观。通过掌握以上知识点，面试者将能展现扎实的前端基础知识和实践经验，从而在面试中脱颖而出。

资源详情

资源推荐

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

................................................................................

162

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

..............................................................

162

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

..................................................................

162

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

..........................................

162

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

................................................................

162

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

........................................................................

162

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

.......................................................................

163

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

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

...............................................................................................

163

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

..................................

163

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

........................................................

163

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

.............................................................

163

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

.....................................................................................

164

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

.................................

166

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

..................................................................

166

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

........................................................................

166

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

........................................................................................

167

78、JSON 的了解

...................................................................................................................

167

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

............................................................................................

167

80、模块化怎么做？

.............................................................................................................

167

81、异步加载的方式

.............................................................................................................

168

82、告诉我答案是多少？

.....................................................................................................

168

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

...................................................................

168

84、Jquery 与 jQuery UI 有啥区别？

..............................................................................

168

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

............................

169

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

...............................................................

169

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

..........................................

169

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

...........................................................

170

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

的越详细越好）

.....................................................................................................................

170

八、流行框架

.................................................................................................................................

170

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

.................................

170

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

......

170

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

...............................

170

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

....................

170

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

.......................................................

170

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

.............................

171

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

.................................

171

8、Jquery 与 jQuery UI 有啥区别？

..................................................................................

171

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

.............................................................

171

10、针对 jQuery 的优化方法？

.........................................................................................

171

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

......................................................................................

171

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

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

.......................................................................................

172

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

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

.........................................

172

九、移动 APP 开发

.........................................................................................................................

172

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

.......................................................................................

172

十、NodeJs

.....................................................................................................................................

172

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

................................................................

172

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

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

.........................................................................................

172

3、Node.js 的适用场景？

....................................................................................................

173

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

rendering 么?

........................................................................................................................

173

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

....................................................................

173

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

缺点?

.......................................................................................................................................

173

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

................................................................

173

十一、前端概括性问题

.................................................................................................................

174

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

..................

174

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

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

........................................................

174

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

................................................................

174

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

.........................................

174

5、加班的看法

.......................................................................................................................

174

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

......................................

174

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

...........................................................................................

175

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

吧？

.........................................................................................................................................

175

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

......................................................................

175

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

................................................

175

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

....................................................................

175

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

....................

175

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

规范区别？

.............................................................................................................................

175

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

进行兼容。

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

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

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

剩余177页未读，继续阅读

liuxiang15

粉丝: 46
资源: 2

前端面试必备：HTML-CSS-JS全解析与性能优化技巧

前端面试题含答案.pdf

前端面试题及答案.pdf

前端开发面试题及答案.zip

2023前端面试上岸手册精选.pdf

2020年前端大厂面试题最全汇总.pdf

解锁前端面试体系核心攻略.rar

前端vue面试题.pdf

结构化面试经典100题.pdf

算法面试题集锦.pdf

2022年前react面试题整理收藏(同事面试用的).pdf

tcp,udp,socket,http网络编程面试题 47道.pdf

阿里主管面试前端面试题

前端面试题javascript

2021前端面试真题pdf

2022最新android基础面试题合集.pdf

凯桥信息科技有限公司前端面试题

2022Go后端开发大厂面试题.pdf

react前端面试题

初级前端面试题2023

高级前端工程师面试题答案 pdf

最新资源