复盘前端面试题题题题

HTML问题

HTML的含义是什么?

HTML（HyperText Markup Language）即超文本标记语言，是一种用于创建网页的标记语言。HTML经历过多个版本，包括HTML 2.0、HTML3.x、HTML 4.x以及最新的HTML 5。HTML源于标准通用标记语言（Standard Generalized Markup Language，SGML），遵循SGML指定的语法和规则，但从HTML 5开始，将不再基于SGML。

什么是XHTML?

HTML的格式比较松散，这会导致一些问题，如兼容性差、移植性差等。为了解决上述所列的种种问题，W3C在2000年发布了XHTML 1.0。XHTML是XML的一种应用，作为HTML的一个子集，它完全兼容HTML，但格式更严谨。XHTML有过三个版本，分别是1.0、1.1和2.0。XHTML 1.0与HTML 4.01的不同之处在于语法规则，前者需要按照XML的要求来规范HTML，其中，XML是SGML的一个子集。

请简单介绍一下HTML5。

HTML5不仅仅是HTML的最新版本，它还是一系列Web技术的集合，包括CSS3、JavaScript、多媒体、缓存和无障碍访问等。HTML5的规范是由两个组织制定的，分别是WHATWG（网页超文本技术工作小组）和W3C。

请阐述对W3C的理解与认识。

W3C是一个制定各种标准的非营利性组织，标准包括HTML、CSS、XHTML和XML等。
Web标准制定后，有以下几个方面的优点：
（1）学习成本降低，只需按照已定的标准学习一套即可，否则将学习各个浏览器厂商制定的标准，繁而杂。
（2）统一开发流程，用标准化的工具（如WebStorm、Sublime等）开发，再用标准化的浏览器（如Firefox、Chrome等）测试网页，便于多人协作。
（3）简化网站代码的维护，不会有不同浏览器的多个版本，网页寿命也更长。
（4）跨平台，可方便迁移到不同设备中。
（5）标准大部分是由使用它们的人决定，例如浏览器制造商、Web开发人员等，这样的标准既实用又专业。

CSS问题

什么是盒模型?

盒模型（Box Model，也称为框模型）就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。它有两种盒模型：W3C盒模型和IE盒模型（IE6以下，不包含IE6以及怪异模式下的IE 5.5+）。两者不同之处是对元素尺寸的计算方式。当用CSS给某个元素定义宽或高时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会包含。

举个栗子：

div{
	padding: 10px;
	margin: 10px;
	border: 1px;
	width: 100px;
}

上面代码 div元素在W3C盒模型下宽度是width + 2(padding + border)122px，而IE盒模型下宽度是width100px。

什么是CSS预处理器?

CSS预处理器（CSS Preprocessor）能为CSS增加编程特性，通过编译器将使用新语法的文件输出为一个普通的CSS文件，解决CSS难以复用、代码冗余、可维护性低的问题。常用的预处理器有Less、Sass和Stylus。

CSS预处理器有哪些优缺点?

（1）用变量存储多次引用的信息（如颜色值、字体、边距等），只需修改一个地方，就能让所有引用之处都随之改变。
（2）新语法中的混合（Mixin）能够重用一段样式代码，可用混合将自动截取或列表中的小箭头样式组织在一起，需要这段代码的选择器只需简单引入即可。
（3）内置丰富的函数，可处理颜色、字符串、数字和选择器等，也可自定义函数，适应特定需求。
（4）可像JavaScript那样使用数学运算（如加、减、乘、除等），条件判断和循环，几句代码就可描述一大段CSS样式。
（5）选择器可嵌套选择器，沿着嵌套的选择器链向上组合形成最终的选择器，嵌套的形式模拟出了HTML的层级结构，同时形成了命名空间，选择器之间的关系更明显，增强了文件的可读性。
（6）导入规则可让各部分代码保持独立，模块化管理，各个导入的文件最终被编译生成一个CSS文件。
缺点
（1）通过编译生成CSS文件，降低了对CSS文件的控制力，如果书写不当，那么编译出的CSS文件将会巨大而复杂。
（2）调试难度增加，在浏览器中调试的是编译后的CSS文件，并不是编译前的源代码。
（3）带来了一定的学习成本，新人需要学习预处理器的语法规则，虽然内容不多，但要达到融会贯通，还是需要一定的锤炼。

JavaScript问题

相等==和全等===运算符有哪些区别?

相等运算符用于比较两个操作数是否相等，操作数会进行类型转换。全等运算符用于比较两个操作数是否严格相等，操作数不会进行类型转换。

split()与join()方法有哪些区别?

首先，两者所属的对象不同，split()方法属于String和RegExp对象，而join()方法属于Array对象；其次，两者的功能不同，split()方法能将字符串分割为数组，join()方法能将数组中的元素衔接成一段字符串。

两个运算符typeof与instanceof有哪些区别?

（1）typeof运算符用于检测数据类型，而instanceof运算符用于检测对象之间的关联性。
（2）typeof运算符执行完后会返回一个小写字母的类型字符串，而instanceof运算符执行完后会返回一个布尔值。（3）typeof运算符只需一个操作数，这个操作数可以是基本类型或函数，而instanceof运算符需要两个操作数，并且左操作数不能是基本类型，右操作数必须是函数，否则运算结果将会没有意义。

什么是严格模式?严格模式有哪些限制?

ECMAScript 5引入了严格模式（Strict Mode）的概念。严格模式对JavaScript的语法和行为都做了一些更改，消除了语言中一些不合理、不确定、不安全之处；提供高效严谨的差错机制，保证代码安全运行；禁用在未来版本中可能会使用的语法，为新版本做好铺垫。在脚本文件第一行或函数内第一行引入“use strict”这条指令，就能触发严格模式，这是一条没有副作用的指令，旧版本的浏览器会将其作为一行字符串直接忽略。

严格模式常见的限制有以下几条：
（1）所有的变量要先声明，无法再意外创建全局变量。
（2）函数中this对象的默认值是undefined，而不是全局对象（window）
（3）试图使用delete运算符删除不可删除的属性会抛出异常。
（4）函数声明中定义两个或多个同名参数将产生一个语法错误，例如sum（x,x）{}。
（5）禁止使用以0为前缀的八进制数字（例如010），以0x为前缀还是支持的。
（6）禁止使用with语句。
（7）不能将eval和arguments用作变量、函数或参数的名称。

使用如下代码判断obj是不是一个对象有什么潜在问题?如何改进?

typeof obj === "object"

当用typeof运算符检测数据类型时，如果操作数是null，那么返回的不是“null”，而是“object”。如果要区分null和对象，可以用基础对象Object的原型方法toString()对null做进一步的检测，如下代码所示：

var toString = Object.prototype.toString;
toString.call(null);     //"[object Null]"

将一个匿名函数像下面这样用圆括号包裹，有什么作用?

(function(){})()

这是一种即时函数（immediate function），也就是那些刚定义好就能马上自动执行的函数。即时函数用途非常广泛，常用于创建块级作用域、解决循环中的异步回调问题和类库封装等。

网络问题

什么是互联网?

互联网一词现在已经家喻户晓，它是由许多网络互联构成的一个巨型网络。早期的网络仅仅是连接计算机，而现代的互联网连接的却是全世界的人。互联网已经不再是单纯的以数据为核心，而是以人为中心，它已经渗透到了生活中的方方面面，颠覆了许多传统模式，例如足不出户就能购物、社交或娱乐。

请简单介绍一下网络中的协议。

协议可简单理解为计算机之间的一种约定，好比人与人之间对话所使用的语言。在我国，不同地区的人讲的方言都不同，如果要沟通，就要约定一种大家都会的语言，例如全国通用的普通话，普通话就相当于协议，沟通相当于通信，说话内容相当于数据信息。

请简单介绍一下HTTP。

HTTP（HyperText Transfer Protocol）即超文本传输协议，是一种获取网络资源（例如图像、HTML文档）的应用层协议，它是互联网数据通信的基础，由请求和响应构成。通常，首先客户端会发起HTTP请求（在请求报文中会指定资源的URL），然后用传输层的TCP建立连接，最后服务器响应请求，做出应答，回传数据报文。HTTP自问世到现在，经历了几次版本迭代，目前主流的版本是HTTP/1.1，新一代HTTP/2.0是HTTP/1.1的升级版，各方面都超越了前者，但新技术要做到软硬件兼容还需要时间。

请谈谈对TCP/IP的理解。

TCP/IP是为互联网服务的协议簇，它是网络通信协议的统称，由IP、TCP、HTTP和FTP等协议组成。TCP/IP将通信过程抽象为4层，被视为简化的OSI参考模型，但负责维护这套协议簇的不是ISO而是互联网工程任务组（IETF）。TCP/IP在标准化过程中注重开放性和实用性，需要标准化的协议会被放进RFC（Request For Comment）文档中，RFC文档详细记录了协议的实现、运用和实验等各方面的内容。

其他问题

什么叫渐进增强?渐进增强和优雅降级有哪些区别?

渐进增强（Progressive Enhancement）并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得确保网站的可访问性，保证用户在任何环境下都能正常访问核心内容或使用基本功能（避免页面打不开、排版错乱等），并为他们提供当前条件下最好的体验，这是渐进增强的核心思想。
优雅降级（Graceful Degradation）也是一种设计思想，保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。两种思想的区别如下所列：（1）渐进增强是向上兼容，优雅降级是向下兼容。
（2）渐进增强是从简单到复杂，优雅降级是从复杂到简单。（3）渐进增强关注的是内容，优雅降级关注的是浏览体验。

感谢点赞

未完待续…
分享知识，快乐你我。
大家加油 😃