前端需要注意哪些 SEO ​

• 合理的使用 title、description、keywords：搜索对这三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不同页面 description 有所不同；keywords 列举出重要关键词即可。
• 使用语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
• 重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用 js 输出：爬虫不会执行 js 获取内容

<img> 的 title 和 alt 有什么区别 ​

• 通常当鼠标滑动到元素上的时候显示
• alt 是 <img> 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

语义化 ​

1. 语义化，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。
2. 语义化标签：header、nav、main、article、section、aside、footer等。
3. 优点： ◦ 代码结构清晰，易于阅读，有利于维护 ◦ 方便其他设备解析（如：屏幕阅读器） ◦ 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

src和href的区别 ​

src和href都是用来引用外部的资源，它们的区别如下：

• src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
• href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

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

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

详细：

浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。

可以看到，script 阻塞了浏览器对 HTML 的解析，如果获取 JS 脚本的网络请求迟迟得不到响应，或者 JS 脚本执行时间过长，都会导致白屏，用户看不到页面内容。

当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析

当然，如果在 JS 脚本请求回来之前，HTML 已经解析完毕了，那就啥事没有，立即执行 JS 代码

当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码

如果存在多个 defer script 标签，浏览器（IE9及以下除外）会保证它们按照在 HTML 中出现的顺序执行，不会破坏 JS 脚本之间的依赖关系。

DOCTYPE 的作用是什么？ ​

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

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

SGML、HTML、XML 和 XHTML的区别 ​

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

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

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？ ​

• 行内元素有：a b span img input select strong
• 块级元素有：div ul ol li dl dt dd h1~h6 p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行内元素不可以设置宽高，不独占一行
• 块级元素可以设置宽高，独占一行

HTML 全局属性有哪些 ​

• class:为元素设置类标识
• data-*: 为元素增加自定义属性
• draggable: 设置元素是否可拖拽
• id: 元素 id，文档内唯一
• lang: 元素内容的的语言
• style: 行内 css 样式
• title: 元素相关的建议信息

对浏览器内核的理解 ​

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

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

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

什么是文档的预解析？ ​

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

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

浏览器的渲染原理 ​

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

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

什么是回流和重绘？ ​

1.概念：

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

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

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

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

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

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

建议阅读文章：你真的了解回流和重绘吗

重绘：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。

重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

触发重绘的条件：改变元素外观属性。如：color，background-color 等。

重排（重构/回流）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为重排。每个页面至少需要一次重排，就是在页面第一次加载的时候。

触发重排的条件：任何页面布局和几何属性的改变都会触发重排，比如： 1、页面渲染初始化；(无法避免) 2、添加或删除可见的 DOM 元素； 3、元素位置的改变，或者使用动画； 4、元素尺寸的改变——大小，外边距，边框； 5、浏览器窗口尺寸的变化（resize 事件发生时）； 6、填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变； 7、读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE))

重绘和重排的关系：在重排的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。所以，重排必定会引发重绘，但重绘不一定会引发重排。

减少重绘和重排的方法： 1、浏览器自己的优化：浏览器会维护 1 个队列，把所有会引起重排、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会 flush 队列，进行一个批处理。这样就会让多次的重排、重绘变成一次重排重绘。 2、我们的优化：减少重绘和重排就是要减少对渲染树的操作，我们可以合并多次的 DOM 和样式的修改。并减少对 style 样式的请求。

（1）直接改变元素的 className （2）display：none；先设置元素为 display：none；然后进行页面布局等操作；设置完成后将元素设置为 display：block；这样的话就只引发两次重绘和重排； （3）将需要多次重排的元素，position 属性设为 absolute 或 fixed，元素脱离了文档流，它的变化不会影响到其他元素； （4）如果需要创建多个 DOM 节点，可以使用 DocumentFragment 创建完后一次性的加入 document；

如何减少回流？ ​

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

sessionStorage，localStorage 和 cookie 的区别 ​

1. 共同点：都是保存在浏览器端，且同源的
2. 区别:

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

iframe 有哪些优缺点？ ​

iframe通常用来加载外部链接，不会影响网页内容的加载。

优点

• 可以将网页原封不动的加载进来
• 增加代码的可用性
• 用来加载显示较慢的内容，如广告、视频等

缺点

• 加载的内容无法被浏览器引擎识别，对SEO不友好
• 会阻塞onload事件加载
• 会产生很多页面，不利于管理

什么是 canvas，基本用法是什么？ ​

canvas 元素是 HTML5 的一部分，允许脚步语言动态渲染位图像。canvas 由一个可控制区域 HTML 代码中的属性定义决定高度和宽度。JavaScript 代码可以访问该区域，通过一套完整的绘图功能类似于其他通用二维的 API，从而生成动态的图形。

用途：

canvas 可用于游戏和图表（echarts.js、heightchart.js 都是基于 canvas 来绘图）制作。

Canvas 和 SVG 有什么区别？ ​

• canvas画布，是通过javascript来绘制2d图，是逐像素进行渲染。
• SVG矢量图，是基于XML描述的2D图形语言，每个元素都是可用的，可以为其添加事件。

如何实现浏览器内多个标签页之间的通信? ​

实现多个标签页之间的通信，本质上都是通过中介者模式来实现的。因为标签页之间没有办法直接通信，因此我们可以找一个中介者，让标签页和中介者进行通信，然后让这个中介者来进行消息的转发。

第一种实现的方式是使用 websocket 协议，因为 websocket 协议可以实现服务器推送，所以服务器就可以用来当做这个中介者。标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发。

第二种方式是使用 localStorage 的方式，我们可以在一个标签页对 localStorage 的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。这个时候 localStorage 对象就是充当的中介者的角色。

怎样添加、移除、移动、复制、创建和查找节点？ ​

• 添加节点document.appendChild(dom)
• 移除节点document.removeChild(dom)
• 移动节点document.appendChild(targetDom)
• 复制节点dom.cloneNode(true)，参数true表示是否复制子节点
• 创建节点document.createElement(dom)
• 查找节点:
  • document.getElementById("elementId")
  • document.getElementsByClassName("className")
  • document.getElementsByTagName("tagName")
  • document.querySelector("selector")
  • document.querySelectorAll("selector")