在 html 中遇到好的问题和一些基本的问题

html 语义化

什么是语义化？用人话讲就是用合理正确的标签来展示内容，比如 h1~h6 表示标题

好处有：

易于代码维护，样式丢失的时候能够让页面具有清晰的结构
利于 SEO，搜索引擎根据标签来确定上下文和各个关键字的权重
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义话更具可读性，代码更好维护，与 CSS3 关系更和谐

网站如何处理SEO

SEO(Search Engine Optimization)，即搜索引擎优化

服务端渲染、根据内容的结构来选择合适的语义化标签

meta元素都有什么

meta元素被用于规定页面的描述、作者、最后修改时间、字符编码等有name、content、charset、http-equiv等

script 的 async 跟 defer 的区别

背景：HTML在执行时，如果遇到外部JS引用，需要下载执行JS文件，此时会停止页面渲染，导致页面表现为空白。defer和async用来控制JS文件的下载和执行

defer 表明脚本执行时不会影响页面构造，让脚本在页面解析完成后执行（即让浏览器下载JS文件，但等到页面解析完成后执行）

async 只适用于外部JS文件，告诉浏览器立即下载JS文件，但是不保证按照JS的先后顺序运行（注意JS文件之间的依赖关系）

b标签和strong有什么区别吗（i/em）

b（bold）是实体标签、用来给文字加粗；没什么实际含义，单纯的加粗文字

strong是逻辑标签，作用是加强字符语气

根据语义化，建议使用strong，少用b

如何减少dom数量

伪元素
减少不必要的渲染
语义化标签、结构合理

优化：缓存dom、虚拟dom

doctype 有什么用

doctype 是一种标准通用标记语言的文档类型声明，目的是告诉标准通用标记语言解析器要使用什么样的文档类型来定义解析文档

声明是用来指示 web 浏览器关于页面使用哪个 html 版本进行编写的指令，必须在文档的第一行，位于 html 标签之前

浏览器本身分为两种模式：标准模式和怪异模式，浏览器通过 doctype 来区分这两种模式，如果没有 doctype 浏览器就会进入怪异模式，在这个模式下面，样式和标准模式存在差异，而 dom 标准和 html 标准规定标准模式下的行为，没有对怪异模式的规定，所以不同浏览器在怪异模式下面的的处理是不同的

补：新增的Html5 新标签

画布、音频、视频 canvas audio video
位置 geolocation
存储 localStorage sessionStorage

label 标签作用和使用

label 标签通常是写在表单内，他关联一个控件，使用 label 可以实现点击文字选取对应的控件

<input type="checkbox" id="test" /> <label for="test">test</label>

css 引入和 js 引入

为什么最好把<link>标签放在 head 之间？为什么最好把<script>放在</body>之后

把 link 标签放在 head 之间是规范要求的内容，如果不放在头部，一旦浏览器阻止渲染，会发生空白页面或者没有样式的内容
script 脚本在下载和执行期间会阻止 html 解析，把 script 放在底部，保证 html 首先完成解析，将页面尽早呈现给用户

渐进式渲染

渐进式渲染适用于提高网页性能（特别是用户感知的加载速度），以尽快呈现页面的技术

在早之前的互联网带宽较小的时代里面，渐进式的技术可想而知需求很大，当下在移动端网络不稳定的情况下面也是有必要的

eg:

图片懒加载技术
确定显示内容的优先级（分层次渲染）------为了尽快将页面呈现用户，页面只包含基本的最少量的 css、脚本和内容，这一块像 vue 这样的框架已经做的比较完善了，但是在 vue 中有时候因为样式过多首次加载较慢的情况可以在 webpack 中配置（纠正：这样并不会增加首屏加载速度原文）

// 移除 prefetch 插件
config.plugins.delete("prefetch");
// 移除 preload 插件
config.plugins.delete("preload");

reflow 和 repaint

reflow：当涉及到 dom 节点的布局属性发生变化时候，就会重新计算属性，浏览器会重新描绘相应的元素，此过程叫做 reflow（回流或重排）
repaint：当影响 dom 元素的可见性的属性发生变化的时候（eg：color、font），浏览器会重新描绘相应的元素，此过程叫做 repaint（重绘），因此重排必然会引起重绘

eg：会引起 reflow 和 repaint 的一些操作

窗口大小变化
字体大小变化
样式表变化
元素内容变化，尤其是输入控件
css 伪类变化，在交互中是必然会发生
所有的 dom 操作
width、clientWidth、scrollTop 等布局高度的重新计算

如何在研发的过程注意这些点

不要逐条行内样式修改，使用 className
避免频繁操作 dom 特别是在 jq 时代
不要频繁读取元素的集合属性，但是如果交互确实需要去做的时候也没有办法（我自己认为的哈）
绝对定位的脱离文档流，避免引起父元素以及后续元素大量的回流（特别在元素的拖动中）

href 和 src 的区别

href 标识超文本引用，用在 link 和 a 等元素上，href 是引用和页面关联，是在当前元素和引用资源之间建立联系；css 中的 href 是可以并行下载的并且不会停止当前对文档的处理，所以会推荐用 link 引入 css 为不是@import
scr 标识引入资源，在 img、script、iframe 上是必不可少的一部分；scr 会暂停其他的卸载和处理（图片不会暂停其他下载），直到该资源加载、编译、执行完成，这就是为什么建议把 js 脚本放在底部而不是头部

DOM 和 BOM 的区别

dom 是文档对象模型，dom 是为了操作文档出现的 API，document 是其的一个对象，dom 和文档有关，此处的文档指的是网页，也就是 html 文档，dom 和浏览器无关，他关注的是网页本身的内容
bom 是浏览器的对象模型，bom 是为了操作浏览器出现的 API，window 是其的一个对象，window 对象即为 js 访问浏览器的 API，同时在 ECMAScript 中充当 Global 对象

iframe 框架优缺点

优点：

iframe 能够 100%保证嵌入的网页展示
如果多个网页引入 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的修改，方便快捷（有点组件的感觉哈）
组件化的使用，头部和尾部的使用
遇到第三方插件加载缓慢的时候可以使用 iframe

缺点：

搜索引擎无法解读 iframe 里面的页面内容
滚动条的混乱
使用框架架构时，保证正确的导航链接
iframe 页面会增加服务器的 http 请求

使用 iframe 怎么说呢？我一般是能不用就不用的，但是有些时候又是必须要去使用的

HTML面试整理