前端面试题每日一学_5_哪些不是dom元素导航-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45092437/article/details/142958514

今日一题：

下面的HTML代码经浏览器解析后，构建的DOM结构是怎样的？

<p>
 这是一个p标签
 <div>这是p标签内部包裹的div</div>
</p>

<span>
  <div style="width: 250px;height: 50px">span标签内包裹的div</div>
</span>

<button>
  <div style="width: 300px;height:100px">button标签内包裹的div</div>
</button>

答案和解析可在文章底部查看。

今日面试题：

1、谈谈iframe存在哪些问题？

① SEO问题

搜索引擎无法有效的爬取<iframe>内部的页面内容，不利于SEO。

② 性能问题

<iframe>会阻塞主页面的onload 事件，主页面的 onload 事件会在所有嵌入的 <iframe> 及其内容完全加载后才会触发。影响页面的加载速度和用户体验。

该问题可以通过使用JavaScript动态创建和插入 <iframe>延迟加载的方式进行一定程度上的优化。在主页面的 onload 事件触发后或用户需要时（如滚动到特定位置时）才加载 <iframe>内容，提高页面性能。

③ 兼容问题

不同浏览器对 <iframe> 的支持和表现可能有所不同。

在移动设备上，嵌入的内容可能无法很好地适应屏幕大小。

④ 事件处理问题

<iframe>内部元素和主页面之间的事件冒泡和捕获，处理起来会变得十分复杂。在<iframe>中，事件不会自动冒泡到主页面，反之亦然。

如果想要在主页面中处理<iframe>内部的事件，有两种常用方案：

使用postMessage通信：postMessage 是一种安全的跨文档消息传递机制，可以在不同的窗口（包括<iframe>）之间传递消息。
使用事件代理：在主页面中监听<iframe>元素的相关事件，因为<iframe>内部元素的事件会冒泡<iframe>元素上，从而被主页面监听到。

⑤ 拦截问题

部分广告拦截器会阻止 <iframe> 的加载。

2、HTML文件中第一行`<!DOCTYPE html>`的作用是什么？

① 指定HTML版本

<!DOCTYPE html> 声明告诉浏览器和开发者，该文档使用的是HTML5标准。

② 指定渲染模式

<!DOCTYPE html> 声明告诉浏览器以标准模式来渲染页面。

浏览器有两种渲染模式：标准模式（Standards Mode）和怪异模式（Quirks Mode）。标准模式遵循最新的W3C的标准来解析和渲染HTML和CSS，而怪异模式则模仿旧版浏览器的行为。

③ 提升SEO

标准模式下的网页更容易被搜索引擎正确索引，并且更符合可访问性标准，有助于提高网页的SEO效果和可访问性。

3、HTML常见的块级元素、行内元素和行内块元素有哪些？它们之间的嵌套规则是怎样的？

① 块级元素

常见的块级元素有：<div>、<p>、<h1> ~ <h6>、<ul>、<li>、<table>等。

块级元素的嵌套规则分为两类，具体如下：

特殊的<p>、<h1> ~ <h6>、<dt>等块级元素：该类元素具有特殊规则：这些标签内部不能嵌套任何块级元素，只能嵌套行内元素或行内块元素，即使给块级元素设置display: inline，也是不行的。如果这类特殊元素内嵌套了块级元素，那么浏览器会自动修正这个无效的嵌套结构，将元素的前后两个标签解析成两对标签，使内部的块级元素变成当前元素的兄弟元素，使其符合HTML规范。但如果是在Vue的模板中，在这类特殊元素内嵌套了块级元素，则浏览器不会自动修正，这可能是由于Vue 会将模板直接转换为虚拟 DOM，然后在运行时将虚拟 DOM 渲染为实际 DOM 结构。
普通块级元素：除了上面那类特殊元素，其他块级元素内部可以嵌套任何类型的元素。