主页:写程序的小王叔叔的博客欢迎来访

支持:点赞收藏关注

社区:JAVA全栈进阶学习社区欢迎加入

写在前面

CSDN话题挑战赛第1期

• 活动详情地址：CSDN

• 参赛话题：前端面试宝典

• 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
  总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

携手共筑前端面试宝典

目录

引言

模块一 HTML体系

题目1:简述一下你对 HTML 语义化的理解？

题目2:iframe 框架有那些优缺点？

题目3:HTML5 的 form 如何关闭自动完成功能？

题目4: HTML文件头中Doctype是什么作用？

题目5: 对于 WEB 标准？

题目6:前端页面有哪三层构成，分别是什么？作用是什么？

题目7: 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

模块二 JavaScript体系

题目1:介绍JavaScript的数据类型？

题目2: NaN 是什么？

题目3: js中本地对象？内置对象？宿主对象？

题目4: DOM 是什么？

题目5: 什么是 event.target ？

题目6:什么是作用域？

题目7: 什么是类？

模块三：Ajax

题目1: AJAX 是什么？

题目2: Ajax的实现流程是怎样的？

题目3: AJAX有哪些有点和缺点？

模块四：VUE体系

题目1:为什么使用虚拟DOM(常问)?

题目2:Vue组件通信?

题目3:生命周期?

题目4:生命周期函数分类?

题目5:v-show和v-if的区别?

模块六：前端框架体系

题目1:EasyUI-DOM对象？

题目2:EasyUI-使用input的时候，不允许显示html类型的字符串？

题目3:Bootstrap-bootstrap是什么？

题目4:Bootstrap-有哪几个版本，区别在哪？

模块七：其它

题目1:前端优化？

题目2:MVC？

---

---

引言

什么是前端？

前端（Front-end）指的是用户可见的界面。

网站前端页面也就是网页的页面开发，比如网页上的特效、布局、图片、视频，音频等内容。
前端的工作内容：
·将美工设计的效果图通过代码变成浏览器运行的网页
·配合后端做网页的数据显示和交互等可视方面的工作内容。
前端开发：创建WEB页面或APP等前端界面呈现给用户的过程。

通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。

---

模块一 HTML体系

题目1:简述一下你对 HTML 语义化的理解？

答案1

①用正确的标签做正确的事情。

②html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

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

④ 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

题目2:iframe 框架有那些优缺点？

答案2

优点：

• iframe 能够原封不动的把嵌入的网页展现出来。
• 如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
• 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。
• 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。

缺点：

• 框架结构中出现各种滚动条
• iframe 会阻塞主页面的 Onload 事件
• 搜索引擎的检索程序无法解读这种页面，不利于 SEO
• iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

题目3:HTML5 的 form 如何关闭自动完成功能？

答案3

将不想要自动完成的 form 或 input 设置为 autocomplete=off

题目4: HTML文件头中Doctype是什么作用？

答案4

 声明位于文档中的最前面的位置，处于  标签之前。

1.告知浏览器文档使用哪种 HTML 或 XHTML 规范。

2.告诉浏览器按照何种规范解析页（如果你的页面没有 DOCTYPE 的声明，那么 compatMode 默认就是 BackCompat,浏览器按照自己的方式解析渲染页面）

题目5: 对于 WEB 标准？

答案5

web 标准简单来说可以分为结构、表现和行为。其中结构主要是有 HTML 标签组成。或许通俗点说，在页面 body 里面我们写入的标签都是为了页面的结构。表现即指 css 样式表，通过 css 可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有 js 组成。

web 标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

题目6:前端页面有哪三层构成，分别是什么？作用是什么？

答案6

分成：结构层、表示层、行为层。

1.结构层（structural layer）

由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

2.表示层（presentation layer）

由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

3.行为层（behaviorlayer）

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

题目7: 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

答案7

行内元素：a span img input select
块级元素：div ul ol li dl dt dd h1 p
空元素：

---

---

模块二 JavaScript体系

题目1:介绍JavaScript的数据类型？

答案1

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、

                               对空（Null）、未定义（Undefined）、Symbol（独一无二的值）

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

题目2: NaN 是什么？

答案2

NaN 即非数值（Not a Number），NaN 属性用于引用特殊的非数字值，该属性指定的并不是不合法的数字。

NaN 属性 与 Number.Nan 属性相同。

题目3: js中本地对象？内置对象？宿主对象？

答案3

本地对象：ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。

包含了：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

内置对象：ECMA-262 把内置对象（built-in object）定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象，在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象，它已被实例化了。包含了：Gobal 和 Math。

宿主对象：由ECMAScript实现的宿主环境提供的对象，可以理解为：浏览器提供的对象。所有的BOM和DOM都是宿主对象。

题目4: DOM 是什么？

答案4

DOM 代表文档对象模型，是 HTML 和 XML 文档的接口(API)。当浏览器第一次读取(解析)HTML文档时，它会创建一个大对象，一个基于 HTM L文档的非常大的对象，这就是DOM。它是一个从 HTML 文档中建模的树状结构。DOM 用于交互和修改DOM结构或特定元素或节点。

题目5: 什么是 event.target ？

答案5

简单来说，event.target是发生事件的元素或触发事件的元素。 

题目6:什么是作用域？

答案6

JavaScript 中的作用域是我们可以有效访问变量或函数的区域。JS 有三种类型的作用域：全局作用域、函数作用域和块作用域(ES6)。

• 全局作用域——在全局命名空间中声明的变量或函数位于全局作用域中，因此在代码中的任何地方都可以访问它们。
• 函数作用域——在函数中声明的变量、函数和参数可以在函数内部访问，但不能在函数外部访问。
• 块作用域-在块{}中声明的变量（let，const）只能在其中访问。

题目7: 什么是类？

答案7

类(class)是在 JS 中编写构造函数的新方法。它是使用构造函数的语法糖，在底层中使用仍然是原型和基于原型的继承。 

---

模块三：Ajax

题目1: AJAX 是什么？

答案1

即异步的 JavaScript 和 XML，是一种用于创建快速动态网页的技术，传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。使用AJAX则不需要加载更新整个网页，实现部分内容更新

用到AJAX的技术：

• HTML – 网页结构
• CSS – 网页的样式
• JavaScript – 操作网页的行为和更新DOM
• XMLHttpRequest API – 用于从服务器发送和获取数据
• PHP，Python，Nodejs – 某些服务器端语言

题目2: Ajax的实现流程是怎样的？

答案2

• (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

• (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

• (3)设置响应HTTP请求状态变化的函数.

• (4)发送HTTP请求.

• (5)获取异步调用返回的数据.

• (6)使用JavaScript和DOM实现局部刷新.

题目3: AJAX有哪些有点和缺点？

答案3

优点：

• 1、最大的一点是页面无刷新，用户的体验非常好。

• 2、使用异步方式与服务器通信，具有更加迅速的响应能力。

• 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

• 4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

• 1、ajax不支持浏览器back按钮。

• 2、安全问题 AJAX暴露了与服务器交互的细节。

• 3、对搜索引擎的支持比较弱。

• 4、破坏了程序的异常机制。

• 5、不容易调试。

---

模块四：VUE体系

题目1:为什么使用虚拟DOM(常问)?

答案

• 创建真实DOM的代价高：真实的 DOM 节点 node 实现的属性很多，而 vnode 仅仅实现一些必要的属性，相比起来，创建一个 vnode 的成本比较低。
• 触发多次浏览器重绘及回流：使用 vnode ，相当于加了一个缓冲，让一次数据变动所带来的所有 node 变化，先在 vnode 中进行修改，然后 diff 之后对所有产生差异的节点集中一次对 DOM tree 进行修改，以减少浏览器的重绘及回流。
• 虚拟dom由于本质是一个js对象，因此天生具备跨平台的能力，可以实现在不同平台的准确显示。
• Virtual DOM 在性能上的收益并不是最主要的，更重要的是它使得 Vue 具备了现代框架应有的高级特性。

题目2:Vue组件通信?

答案2

• 父组件向子组件传值
• 兄弟之间的传递

• 子组件向父组件传值

题目3:生命周期?

答案3

从Vue实例创建、运行、到销毁期间，伴随着的各种事件，这些事件统称为生命周期

题目4:生命周期函数分类?

答案4

创建期间的生命周期函数：

• beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好data和methods属性
• created：实例已经在内存中创建出来，此时的data和methods以及创建完成，但是还没有开始编译模板
• beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面上
• mounted：已经将编译好的模板，挂载到了页面指定的容器中显示

运行期间的生命周期函数：

• beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
• updated：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了

销毁期间的生命周期函数：

• 注意 ！！！vue3，则是beforeunmount和unmount
  • beforeDestory：实例销毁之前调用，在这一步，实例仍然完全可用
  • destroyed：Vue实例销毁之后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

题目5:v-show和v-if的区别?

答案5

v-show原理是修改元素的css属性display:none来决定是显示还是隐藏

v-if则是通过操作DOM来进行切换显示

---

模块六：前端框架体系

题目1:EasyUI-DOM对象？

答案1

1. Document对象  2.Node对象  3.NodeList对象  4.Element对象   5.Attr对象

题目2:EasyUI-使用input的时候，不允许显示html类型的字符串？

答案2

题目3:Bootstrap-bootstrap是什么？

答案3

​ 全球最受欢迎的前端组件库，用于开发响应式布局，移动设备优先的web项目。 

题目4:Bootstrap-有哪几个版本，区别在哪？

答案4

①目前使用广泛的是2，3，4。 在2018年1月下旬发布bootstrap 4正式版。

​ ②bootstrap版本2，3的区别 从3开始全别支持移动平台，移动先行（先考虑移动端该怎么做）。

​ ③bootstrap版本3，4的区别

拥有更多具体的把有关的一些部分变成相关部分

bootstrap.min的体积上减少了40%以上

放弃IE8以及IOS 6的支持 ，仅支持IE9 以及ios7以上 的浏览器

---

模块七：其它

题目1:前端优化？

答案1

1、降低请求量：合并资源，减少HTTP请求数，minify/gzip压缩

2、加快请求速度：预解析DNS，减少域名数，并行加载

3、缓存：HTTP协议缓存请求，离线缓存manifest，离线数据缓存localStorage

4、渲染：JS/CSS优化，加载顺序，服务端渲染

题目2:MVC？

答案2

MVC包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。

View 传送指令到 Controller Controller 完成业务逻辑后，要求 Model 改变状态 Model 将新的数据发送到 View，用户得到反馈。

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：CSDN

---

 【参考博主】

【前端】前端及其技术栈_黑黑白白君的博客-CSDN博客_前端技术栈

html常见面试题及答案_Acpo的博客-CSDN博客_html面试题

百度安全验证

Bootstrap面试题（重点）_Covez的博客-CSDN博客_bootstrap面试题