2023年前端面试题（含答案）之HTML+CSS篇（一）

在又到了金三银四的招聘季，不管你是刚入行的小白，亦或是混迹职场的老鸟，还在为面试前端工程师时不知道面试官要问什么怎么回答而苦恼吗？为了帮助你获得面试官的青睐，顺利通过面试，跳槽进入大厂，走上人生巅峰，整理了一些前端面试，希望对在面试中或学习工作中的你有所帮助！

HTML篇

1.语义化

①语义化，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。

②语义化标签：header、nav、main、article、section、aside、footer等。

③优点:

       a.代码结构清晰，易于阅读，有利于维护 。

       b.方便其他设备解析（如：屏幕阅读器）。

       c.有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重。

2.script 标签中属性 async 和 defer 的区别？

• script 会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
• async script：解析 HTML 的过程中会进行脚本的异步下载，下载成功后立马执行，因此有可能会阻断 HTML 的解析。多个脚本的执行顺序无法保证。
• defer script：也是异步下载脚步，加载完成后，如果此时 HTML 还没有解析完，浏览器不会暂停解析去执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码，如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

3.DOCTYPE 的作用是什么？

 声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以“标准模式”进行文档解析，否则就以“兼容模式”进行解析。

• 在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。
• 而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站能正常访问。

4.SGML、HTML、XML 和 XHTML的区别

• SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
• HTML 是超文本标记语言，主要是用于规定怎样显示网页。
• XML 是可扩展标记语言，是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
• XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。

5.HTML5 有哪些新特性、移除了哪些元素？

HTML5 现在已经不是 SGML 的子集，主要是关于图像、位置、存储、多任务等功能的增加。

新增的：

• 绘图 canvas
• 用于媒介回放的 video 和 audio 元素
• 本地离线存储 localStorage 、sessionStorage
• 语义化更好的内容元素，如：header、article、nav、section、footer等
• 表单控件 calendar、date、time、email、url、search 等
• 新的技术 webworker、websocket
• 新的文档属性 document.visibilityState

移除的：

• 纯表现的元素：basefont、big、center、s、tt、u
• 对可用性产生负面影响的元素：frame、frameset、noframes

6.对浏览器内核的理解

主要分为两部分：渲染引擎和JS引擎。

• 渲染引擎：其职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 HTML、 XML 文档及图片，它也可以借助一些浏览器扩展插件显示其他类型数据，如：使用PDF阅读器插件可以显示 PDF 格式。
• JS引擎：解析和执行 JavaScript 来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明显，后来JS引擎越来越独立，内核就倾向于只指渲染引擎了。

7.什么是文档的预解析？

当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载，从而使整体速度更快。

需要注意的是，预解析并不改变DOM树，它将这个工作交给主解析过程，自己只解析外部资源的引用，比如：外部脚本、样式及图片。

8.浏览器的渲染原理

简记： 生成DOM树 --> 生成CSS规则树 --> 构建渲染树 --> 布局 --> 绘制

1. 首先解析收到的文档，根据文档定义构建一颗 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
2. 然后对 CSS 进行解析，生成一颗 CSS 规则树。
3. 根据 DOM 树和 CSS 规则树构建渲染树。渲染树的节点被称为渲染对象，它是一个包含有颜色等属性的矩形。渲染对象和 DOM 元素相对应，但这种关系不是一对一的，不可见的 DOM 元素不会插入渲染树。还有一些 DOM 元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
4. 当渲染对象被创建并添加到树中，它们没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的是计算出各个节点在页面中确切位置和大小。通常这一行为也被称为自动重排。
5. 布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示到屏幕上。值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎会尽早的将内容呈现到屏幕上，并不会等到所有 HMTL 内容都解析完之后再去构建和布局渲染树，它是解析完一部分内容就显示一部分内容，同时，可能还通过网络下载其余内容。

9.什么是回流和重绘？

1.概念：

• 回流：当 DOM 的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做回流（也可以叫做重排）。表现为重新生成布局，重新排列元素。
• 重绘：当一个元素的外观发生改变，重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变。

2.常见引起回流和重绘的属性和方法：

任何会改变元素几何信息（元素的位置和尺寸大小）的操作都会触发回流。

• 添加或删除可见的 DOM 元素
• 元素尺寸改变--边距、填充、宽度、高度
• 浏览器尺寸改变-- resize 事件发生时
• 计算 offsetWidth 和 offsetHeight 属性
• 设置 style 属性的值
• 修改网页默认字体

   回流必定会发生重绘，重绘不一定会引发回流。

   回流所需的成本比重绘高得多

10.如何减少回流？

• 使用 transform 代替 top
• 不要把节点的属性值放在一个循环里，当成循环里的变量
• 不要使用 table 布局，可能很小的一个改动会造成整个 table 的重新布局
• 把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM
• 不要一条一条的修改样式，可以预先定义好 class，然后修改 DOM 的 className
• 使用 absolute 或 fixed 使元素脱离文档流

11.sessionStorage，localStorage 和 cookie 的区别

       ①共同点：都是保存在浏览器端，且同源的

       ②区别:

• cookie 始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器之间来回传递；而 sessionStorage 和 localStorage 不会自动把数据发送到服务器，仅在本地保存。cookie 还有路径（path）的概念，可以限制 cookie 只属于某个路径下。
• 存储大小限制不同。cookie 不能超过 4K，因为每次 http 请求都会携带 cookie，所以 cookie 只适合保存很小的数据，如：会话标识。sessionStorage 和 localStorage 虽然也有存储大小限制，但比 cookie 大得多，可以达到 5M 或更大。
• 数据有效期不同。sessionStorage 仅在当前浏览器窗口关闭之前有效；localStorage 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前有效。
• 作用域不同。sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 和 cookie 在所有同源窗口中都是共享的。

12.iframe 有哪些优缺点？

优点：

1. iframe 能原封不动的把嵌入的网页展现出来。
2. 如果有多个网页引用 iframe，只需修改 iframe 的内容，就可以实现调用每一个页面的更改，方便快捷。

缺点：

1. iframe 会阻塞主页面的 onload 事件。
2. iframe 和主页面共享链接池，而浏览器对相同域的链接有限制，所以会影响页面的并行加载。
3. 不利于 SEO，代码复杂，无法一下被搜索引擎索引到。
4. iframe 框架页面会增加服务器的 http 请求，对于大型网站不可取。
5. 很多移动设备无法完全显示框架，设备兼容性差。

注意：通过动态给 iframe 添加 src 属性值，可解决前两个问题。