前端面试必备知识点：HTML, CSS, JavaScript与优化策略

需积分: 14 180 浏览量更新于2024-07-18 收藏 1.66MB PDF 举报

"这是一份全面的前端面试复习资料，涵盖了HTML、CSS、JavaScript以及前端性能优化等多个方面的问题，旨在帮助求职者准备前端面试。资料包括了常见的面试问题及其答案，涉及前端开发的核心技术和最佳实践。" 1. HTML和CSS的基础知识： - 测试浏览器：通常需要确保页面在主流浏览器如Chrome、Firefox、Safari、Edge和IE/Edge（至少兼容到IE9）等进行测试，这些浏览器分别基于Blink、Gecko、WebKit和Trident内核。 - DOCTYPE：声明文档类型，用于告诉浏览器应以哪种模式解析页面，如HTML5的`<!DOCTYPE html>`。 - Quirks模式与Standards模式：Quirks模式遵循早期的非正式标准，而Standards模式遵循W3C标准，两者在渲染和行为上有显著差异。 2. 布局与优化： - div+css布局相比table布局，更有利于SEO，代码结构清晰，易于维护，且支持响应式设计。 - 图片格式：常见有JPEG、PNG、GIF、SVG等，根据需求选择合适的格式，比如SVG适用于图标和矢量图形。 - 图片优化：可以使用懒加载、压缩图片、尺寸适配、CDN分发等方式提升加载速度。 3. 网页标准与浏览器兼容性： - 网页标准由W3C等组织制定，保证跨浏览器一致性，提高用户体验和可访问性。 - cookies、sessionStorage和localStorage的区别：cookies在客户端和服务器之间传输，有大小限制；sessionStorage仅在当前浏览器会话中有效；localStorage长期存储数据，但不支持跨域。 4. CSS和JavaScript操作： - src与href：src是加载外部资源，如脚本、图片；href用于链接外部文档，如样式表。 - CSS选择器：如标签选择器、类选择器、ID选择器、伪类和属性选择器等，用于定位DOM元素。 - 隐藏元素：display:none使元素不占据空间，visibility:hidden则保持原有空间但不可见。 5. 其他高级话题： - 微格式：让结构化数据更易于机器识别，有助于SEO和富搜索结果。前端构建时考虑微格式可以提高信息的可用性和可发现性。 - CSS Hack：针对不同浏览器的CSS解析差异进行调整，如针对IE的`_property`、`*property`和`property/*`等。 - 行内元素与块级元素：行内元素不独占一行，margin和padding有限制；块级元素独占一行，可设置宽度、高度等。 - 垂直居中：可使用flexbox或grid布局，或者传统方法如绝对定位配合负margin实现。 6. 性能优化与前端SEO： - 缓存策略：HTTP缓存、浏览器缓存、Service Worker等可提升加载速度。 - 图片优化：延迟加载、雪碧图、WebP等技术优化加载性能。 - SEO：合理使用HTML标签，确保内容可爬取，使用友好的URL结构，优化Meta信息，确保网站移动友好。 7. 预处理器和CSS工具： - Sass和LESS提供变量、嵌套规则、混合等特性，简化CSS编写，便于维护和管理。 - reset CSS消除浏览器默认样式，normalize.css则是规范化不同浏览器的样式差异，保留基本的用户体验。这份面试宝典详细列出了前端开发的各个方面，不仅覆盖基础技术，还关注了最佳实践和性能优化，是准备前端面试的宝贵参考资料。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

78、JSON 的了解

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

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

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

80、模块化怎么做？

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

81、异步加载的方式

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

82、告诉我答案是多少？

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

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

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

84、Jquery 与 jQuery UI 有啥区别？

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

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

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

$.fn.stringifyArray = function(array) {

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

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

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

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

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

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

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

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

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

七、流行框架

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10、 Jquery 与 jQuery UI 有啥区别？

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

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

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

12、针对 jQuery 的优化方法？

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

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

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

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

和缺点么?

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

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

......

Underscore 的熟悉程度

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

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

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

八、移动 APP 开发

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

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

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

九、NodeJs

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

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

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

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

技术实现方案？

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

3. Node.js 的适用场景？

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

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

Nodejs 相关概念的理解程度

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

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

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

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

....

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

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

十、前端概括性问题

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

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

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

2. 对 BFC 规范的理解？

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

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

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

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

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

5. 加班的看法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

么做？请写出你的做法和思路？

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

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

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

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

.........

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

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

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

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

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

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

一、HTML 和 CSS

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

IE: trident

内核

Firefox：gecko 内核

Safari:webkit 内核

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

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

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

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

能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进

增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点

剩余174页未读，继续阅读

junlei0618

粉丝: 0
资源: 1

前端面试必备知识点：HTML, CSS, JavaScript与优化策略

自己整理的一些前端面试笔试题pdf.pdf

2022大厂前端面试题精选.pdf

前端面试宝典（前端知识）

前端面试宝典前端开发宝典

前端面试宝典、前端面试题库、高频前端面试题、大厂面试题、算法面试题、前端面试题大全

WEB前端面试宝典

前端面试宝典1

web前端面试宝典

前端面试宝典.docx

2019年前端面试宝典

最新资源