面试经（HTML-进阶篇）

1. 地址栏输入 URL 敲下回车后发生了什么

    以下会按步骤一步一步说明发生了什么。

1. 解析url。判断用户是否输入合法的URL地址还是一个待搜索的关键词。
2. 查看缓存。通过以下逻辑判断是否使用缓存。
3. DNS解析。浏览器无法直接通过域名访问服务器，而是需要通过IP地址访问。域名只是IP地址的一个映射，所以首先要进行域名解析，域名解析的过程就是将域名还原为IP地址的过程。
4. TCP连接。浏览器通过DNS解析拿到IP地址后，会开始一次建立与服务器的连接，此连接是通过TCP协议经历三次握手后完成的。
5. 发送HTTP请求。当TCP连接建立完成后，便可以在此基础上与服务器通信。向服务器发送HTTP请求，完整的HTTP请求包含三个部分，即请求行、请求头，请求体。
6. 服务器响应请求。当服务器接收到客户端发来的请求时，便可以进行相应的处理逻辑然后响应请求。通常情况下的响应同样包含三个部分，即状态行、响应头、响应正文。在响应完成后，由于现在的浏览器默认开启长连接（keep-alive），所以当页面关闭后，TCP连接会经历四次挥手完成断开。
7. 关闭TCP连接或保持。
8. 浏览器解析响应报文。浏览器解析的不仅是HTML，还包括JS、CSS，以及图片、音视频等其他媒体资源。
   浏览器解析HTML生成DOM树，解析CSS生成CSS规则树。通过DOM树与CSS规则树生成渲染树。渲染树与DOM树有所不同，渲染树没有HEAD、dispaly为none等不需要显示的节点。
   要注意的是，浏览器解析过程并非完全串行的，在解析CSS时，可以继续加载解析HTML。但是在解析JS时，会停止解析后续HTML。
   

2. 简述HTML渲染过程

1. 解析 HTML 文件，创建 DOM 树。
2. 解析 CSS ,形成 CSS 对象模型。
3. 将 CSS 与 DOM 合并，构建渲染树（renderingtree）。
4. 布局和绘制。
   

    上述四个步骤并非完全串行，或者一次性完成。如果 DOM 或者 CSSOM 被修改，以上过程会被重复执行。实际上，在现在的前端网页中 CSS 和 JavaScript 往往会多次修改 DOM 或者CSSOM。
    图解如下。

3. 什么是 Repaint（重绘） ？什么是 Reflow（重排） ？

1. 什么是 Repaint（重绘） 与 Reflow（重排）

• Repaint（重绘）：在不影响元素在网页中的位置时，浏览器根据新增的样式对元素进行重新绘制，使元素呈现新的外观。例如 color（颜色）、background-color（背景色）、 border-color（边框色）、visibility（可见性）等。
• Reflow（重排）：首先我们要知道一点，渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。所以，计算位置和大小这些值，对页面全部或部分文档重新计算布局排版的过程称为布局或重排 ，或者也叫做回流。
  

    根据上述定义，我们可以了解到，Repaint（重绘） 不一定会 Reflow（重排），比如只更改元素的颜色，这种情况就不会触发 Reflow（重排），只会 Repaint（重绘）。Reflow（重排） 一定会导致 Repaint（重绘），这是很多朋友在网上找到的资料大多如此。因为浏览器对页面的渲染流程就是先 Reflow（重排），所以我们能够轻而易举且显然地得出刚刚的结论。但事实真的如此吗？这里有个简单例子，当我们使用 CSS3 动画时，它可以使用 GPU 进行加速，减少浏览器的 Repaint（重绘） 工作，比如 transform 动画。这里不过多讲述，有兴趣的朋友可以参考该文章 重排是否一定会引起会重绘，同时感谢作者大大对该文章的整理。在通常情况下，上述结论仍旧适用。

2. 什么原因会导致 Repaint（重绘） 与 Reflow（重排）

a). 导致 Reflow（重排） 的因素

• 页面初始渲染，这是开销最大的一次重排。
• 添加/删除可见的DOM元素。
• 改变元素位置。
• 改变元素尺寸，比如边距、填充、边框、宽度和高度等。
• 改变元素内容，比如文字数量，图片大小等。
• 改变元素字体大小。
• 改变浏览器窗口尺寸，比如 resize 事件发生时。
• 激活CSS伪类（例如：:hover）。
• 设置 style 属性的值，因为通过设置 style 属性改变结点样式的话，每一次设置都会触发一次 Reflow（重排）。
• 查询某些属性或调用某些计算方法： offsetWidth 、 offsetHeight 等，除此之外，当我们调用 getComputedStyle 方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。
  

常见引起 Reflow（重排） 属性和方法

--	--	--	--
width	height	margin	padding
display	border-width	border	position
overflow	font-size	vertical-align	min-height
clientWidth	clientHeight	clientTop	clientLeft
offsetWidth	offsetHeight	offsetTop	offsetLeft
scrollWidth	scrollHeight	scrollTop	scrollLeft
scrollIntoView()	scrollTo()	getComputedStyle()
getBoundingClientRect()	scrollIntoViewIfNeeded()

b). 导致 Repaint（重绘） 的因素

• 修改元素的颜色、背景色、边框颜色等样式属性。
• 操作canvas、svg等图形元素。
  

常见引起 Repaint（重绘） 属性和方法

--	--	--	--
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

3. 如何减少 Repaint（重绘） 与 Reflow（重排）

    通过上面的内容我们可以了解到，Reflow（重排） 相对于 Repaint（重绘） 是更加占据计算机资源的操作。但不论是 Reflow（重排） 还是 Repaint（重绘） ，一旦操作过于频繁，都会使我们的页面变得迟缓卡顿，影响使用体验，那么如何才能减少或优化呢？

a). 降低 Reflow（重排） 范围

• 以 局部布局 的形式组织 html 结构，尽可能小的影响重排的范围。
• 尽可能在低层级的 DOM 节点上修改样式。而不是在父级元素或更加祖先的元素上修改 class 更改目标元素的样式。
• 避免使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。一定要使用 table 的场景下，可以设置 table-layout 为 auto 或者 fixed,这样可以让 table 一行一行的渲染。

b). 减少 Reflow（重排） 次数

• 样式集中更改，避免频繁修改 内联样式，内联样式 的每一次修改设置，都会触发 Reflow（重排）。
• 减少 DOM 的访问次数，缓存 DOM 的样式信息。
• 分离 DOM 的读写操作。
• 将 DOM 离线。即不要将节点放置在 DOM 树中修改。
  1. 使用 display:none。当我们修改元素的 display 时会触发一次 Reflow（重排），但我们设置为 none 后，元素将不存在于 渲染树 中，所以此时修改元素的样式不会对页面造成影响。当我们修改完需要的样式属性，再通过 display 显现在页面时，整个流程只触发了两次 Reflow（重排），根据情况，可以减少大量的 Reflow（重排）。
  2. 通过 documentFragment 创建一个 DOM 碎片,在它上面批量操作 DOM，操作完成之后，再添加到文档中，这样只会触发一次 Reflow（重排）。
  3. 复制目标DOM节点，在副本上工作，然后替换它。
• 使用 absolute 或 fixed 定位，使元素脱离文档流。
• 使用 resize 时，做好防抖和节流。
• 设计动画时，降低行为帧率。牺牲平滑度换取速度，比如原本动画设计是以每帧 1px 进行移动，更改后设置为 3px 进行移动，同时将帧率设置为原本的 1/3 ，这样就将 Reflow（重排） 次数降低为原本的 1/3 。

c). 使用 GPU 硬件加速

    启用GPU加速 GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。
    GPU 加速通常包括以下几个部分：Canvas2D、布局合成、CSS3转换（transitions）、CSS3 3D变换（transforms）、WebGL 和 视频(video)。

4. 页面导入样式时，使用 link 和 @import 有什么区别？

• link 是 HTML 标签，而 @import 是 css 提供的。
• 页面加载时，link 会同时被加载，而 @import 引用的 css 会等到页面加载完再加载。
• @import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题。
• link 方式的样式的权重高于 @import 的权重。
  

    @import 可查阅兼容性如下表。

5. CSS 加载会造成阻塞吗？

    答案是会的，具体阻塞哪些，如下方所列。

1. CSS 加载不会阻塞 DOM 树的解析。
2. CSS 加载会阻塞 DOM 树的渲染。
3. CSS 加载会阻塞后面 js 语句的 执行。
   

    根据上方 HTML 渲染流程图可以得知。DOM 树的解析与 CSS 的解析是两个并行的进程，这里能解释上述第一点。Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 进行构建的，它必须等到 DOM Tree 和 CSSOM Tree 两者都解析完成才能进行构建，这里能解释上述第二点。至于第三点以及具体的分析解答，可以参考该篇文章 css加载会造成阻塞吗？，同时感谢作者大大对该文章的整理。

6. script 标签中，async 和 defer 两个属性有什么用途和区别？

    async 与 defer 都是让浏览器异步的加载和执行脚本。两者区别是：

• defer 标记的脚本会在页面渲染完成后，DOMContentLoaded 事件调用前执行，aysnc 脚本会在加载完后直接执行。
• 设置了多个 defer 的脚本，会依次/按顺序执行。而 async 则不会按顺序执行。

7. script 标签为什么建议放在 body 标签的底部

    浏览器在渲染 html 的时候是从上到下执行的，当遇到 js 文件的时候就会停止当前页面的渲染，转而去下载 js 文件。如果将 script 标签放在头部，在文件很大的情况下将导致首屏加载时间延长，影响用户体验。
    解决办法可如下。

• 将 script 标签放在 body 的底部。
• 通过 defer 、 async 属性将 js 文件转为异步加载。

8. CSSOM 树和 DOM 树是同时解析的吗？

    有了上面的知识，这个问题就能很轻松的解答了。浏览器会下下载 HTML 解析页面生成 DOM 树，遇到 CSS 标签就开始解析 CSS，这个过程不会阻塞，但是如果遇到了 js 脚本，此时假如 CSSOM 还没有构建完，需要等待 CSSOM 构建完，再去执行 js 脚本，然后再执行 DOM 解析，此时会阻塞。具体可以参考文章 CSS 会阻塞 DOM 解析吗？，同时感谢作者大大对该文章的整理。

 9. js 和 css 是如何影响DOM树构建的？

    CSS 不会阻塞 DOM 的解析，但是会影响 js 的运行，js 会阻止 DOM 树的解析，最终 css（CSSOM） 会影响 DOM 树的渲染，也可以说最终会影响渲染树的生成。

10. 如何禁用 a 标签跳转页面或定位链接

1. 使用 CSS

    不响应任何点击事件。

pointer-events: none;

2. 利用标签属性 href

    使 href 指向空或不返回任何内容。

<a href="javascript:void(0);" >点此无反应javascript:void(0)</a>
<a href="javascript:;" >点此无反应javascript:</a>

3. 利用标签事件

<a href="" onclick="return false;">return false;</a>
<a href="#" onclick="return false;">return false;</a>

4. 使用 js 阻止默认点击事件

Event.preventDefault()

11. iframe 的作用以及优缺点

    iframe 也称作嵌入式框架。嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入到现有的网页中。那么它有哪些优缺点呢？

优点

• 展现嵌入的网页。
• 可以用来处理加载缓慢的内容，比如：广告。
• 可以跨子域通信。

缺点

• iframe 会阻塞主页面的 onload 事件。
• iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过 js 动态给 iframe 添加 src 属性值来解决这个问题，当然也可以解决 iframe 会阻塞主页面的 onload事件的问题。
• 会产生很多页面，不易管理。
• 浏览器的后退按钮没有作用。
• 无法被一些搜索引擎识别。

12. URL 和 URI 的区别是什么？

    问到这里，就不得不说一下 URI、URL、URN 三者的区别。整体来说，URN 和URL 都是 URI 的子集。关系如下。

• URL：统一资源定位符（Uniform Resource Locator），俗称网络地址，相当于网络中的门牌号。
• URI：统一资源标识符（Uniform Resource Identifier），用于标识 Web 技术使用的逻辑地址或物理资源。
• URN：统一资源名称（Uniform Resource Name）。
  

    具体可以参考文章 URL与URI，有联系有区别？，同时感谢作者大大对该文章的整理。

13. 什么是 DOM ？什么是 BOM ？

1. 什么是 DOM ？

    DOM 即文档对象模型（Document Object Model），DOM 是 W3C（万维网联盟）的标准，它定义了访问 HTML 和 XML 文档的标准。W3C DOM 由以下三部分组成：

• 核心DOM：针对任何结构化文档的标准模型。
• XML DOM： 针对 XML 文档的标准模型。
• HTML DOM：针对 HTML 文档的标准模型。
  

    简单的说，DOM 是一种理念，一种思想，一个与系统平台和编程语言无关的接口，一种方法使 Web 开发人员可以访问 HTML 元素！记住，它是一种理念，不是具体方法。

2. 什么是 BOM ？

    BOM 即浏览器对象模型（Browser Object Model），它是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。

3. 两者的关系

    BOM 的核心是 window，而 window 对象又具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window 作为其 global 对象。
    window 对象包含属性：document、location、navigator、screen、history、frames等。 document 根节点包含子节点：forms、embeds、anchors、images、links。
从 window.document 已然可以看出，DOM 的最根本的对象是 BOM 的 window对象的 子对象 。
    由于BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。
    可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
    以上只是简单介绍，具体可以参考文章 DOM和BOM是什么？有什么作用？，同时感谢作者大大对该文章的整理。

14. 简单介绍 canvas 与 svg

1. 什么是 canvas

    canvas 即画布，是 html5 的一个新标签，属于 h5 的新特性。它是一个图形容器，允许开发者使用 js 在这个标签上绘制各种图案。
canvas 特点

• 是 html5 的一个新标签，属于 h5 的新特性。
• 画布是一个图形化容器，允许开发者使用 js 在这个标签上绘制各种图案。即脚本绘制图形。
• canvas 图像单位是 px。所绘制的图像是 位图。受浏览器缩放、绘制大小等，会影响其图像的分辨率。
• 其图像绘制完毕后，除非其大小、位置关系发生变化，否则浏览器将不再关注它。渲染性能高。
  

canvas 适用场景

• 由于其渲染性能高，可以制作web网页游戏。
• 用于数据可视化。比如 echarts。
• 用于内嵌一些网页。
• 某些场景下可以用于替代图片。

1. 什么是 svg

    svg 即可缩放矢量图形（Scalable Vector Graphics，SVG），是一种基于 XML 标记语言，用于描述二维的矢量图形。由 W3C 开发的基于文本的开放网络标准。 svg 特点

• 是一种矢量图，缩放不会导致失真。
• 支持事件处理。
• 可以用任何文本编辑器编辑绘制。
• svg 中的文字独立于图像，文字可保留、编辑和搜索。
• 是开放标准，纯 XML 文件。
  

svg 适用场景

• 矢量图标/图形。
• 数据可视化，svg 路径和形状表示灵活，非常适合用于地图、复杂图形的绘制。是数据可视化的理想选择。
• 交互式图形，结合 js 绑定事件，用户点击时触发特定事件，可以实现交互式图形。
• 图形编辑器，一些前端应用中，也可以使用SVG作为图形编辑器的基础，使用户能够自由绘制和编辑图形。
  

两者区别

Canvas	SVG
用JS动态生成元素（一个HTML元素）	用XML描述元素（类似HTML元素那样，可用多个元素来描述一个图形）
位图（受屏幕分辨率影响）	矢量图（不受屏幕分辨率影响）
不支持事件	支持事件
数据发生变化需要重绘	不需要重绘

15. SEO 是什么？

    SEO（Search Engine Optimization），汉译为搜索引擎优化。
    搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。
    SEO 是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。

16. SEO 优化有哪些方案？

    SEO 对我们网站的搜索排名/结果有着重要的作用。那么有什么方法可以提升网站的搜索排名呢？

• title 标签。
• meta 标签。
• HTML 语义化。
• 内链/外链。
• 确保页面性能。
• sitemap 站点地图。
• Canonical URL（网址规范化）。
• 使用 HTTPS。
• SSR，服务端渲染（ Server-Side Rendering）。
• 预渲染 prerender-spa-plugin。
  

    以上只是简单介绍了几种 SEO 的优化方式，具体的详解可以参考此文章 分享SEO优化的8个技巧，同时感谢作者大大对该文章的整理。
参考文章

• CSDN：前端——在浏览器输入url后发生了都发生了什么
• 稀土掘金：面试官: 说说地址栏输入 URL 敲下回车后发生了什么？ 重排是否一定会引起会重绘 重排(reflow)和重绘(repaint) CSS 会阻塞 DOM 解析吗？ 2022高频前端面试题——HTML（上篇） URI与URL傻傻分不清楚？ 分享SEO优化的8个技巧
• 阿里云开发者社区：HTML面试题整理汇总 css加载会造成阻塞吗？
• MDN手册： documentFragment @import SVG
• caniuse：@import
• 知乎：URL与URI，有联系有区别？ DOM和BOM是什么？有什么作用？