HTML面试题总结

HTML5有哪些语义化标签

header：定义页眉信息
nav：导航栏
section：页面的组成部分
footer：脚注信息
aside：侧边栏信息，比如菜单或者广告等

canvas

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

标签只是图形容器，必须使用脚本来绘制图形。

可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

对语义化的理解

语义化就是正确的标签做正确的事。语义化的好处在于：

对于开发团队而言，代码更加容易维护
在css没有加载出来的情况下也能很好的展示结构
有利于SEO优化
更好地支持各种终端，例如无障碍阅读和有声小说等

vue-router中router和route的区别

router是路由实例对象，包含一些路由跳转方法，比如push。

route是路由信息对象，包含和路由相关的一些信息，比如params,location等。

页面渲染优化

Webkit 渲染引擎流程：

1. 处理 HTML 并构建 DOM 树 处理 CSS 构建 CSS 规则树(CSSOM) DOM Tree 和 CSSOM Tree
2. 合成一棵渲染树 Render Tree。 根据渲染树来布局，计算每个节点的位置 调用 GPU 绘制，合成图层，显示在屏幕上
3. 避免css阻塞：css影响renderTree的构建，会阻塞页面的渲染，因此应该尽早（将 CSS 放在 head 标签里）和尽快（启用CDN 实现静态资源加载速度的优化)的将css资源加载
4. 避免js阻塞：js可以修改CSSOM和DOM，因此js会阻塞页面的解析和渲染，并且会等待css资源的加载。也就是说js会抢走渲染引擎的控制权。所以我们需要给js资源添加defer或者async，延迟js脚本的执行。
5. 使用字体图标 iconfont 代替图片图标：
6. 图片会增加网络请求次数，从而拖慢页面加载时间，iconfont可以很好的缩放并且不会添加额外的请求
7. 降低css选择器的复杂度：浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。

减少嵌套：最多不要超过三层，并且后代选择器的开销较高，慎重使用
避免使用通配符，对用到的元素进行匹配即可
利用继承，避免重复匹配和定义
正确使用类选择器和id选择器
减少重绘和回流：CSS

JavaScript

避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。用一次回流替代多次回流
避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
对具有复杂动画的元素生成一个新图层
避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed的元素上。
避免使用CSS表达式（例如：calc()）。
JS中的性能优化
使用事件委托
防抖和节流
尽量不要使用JS动画[9]，css3动画[10]和canvas动画[11]都比JS动画性能好
图片的优化
雪碧图：借助减少http请求次数来进行优化
图片懒加载：在图片即将进入可视区域的时候进行加载（后边有判断即将进入可视区域的方法）
使用CSS3代替图片：有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择 CSS3 效果更好。

script标签中defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序：
多个带async属性的标签，不能保证加载的顺序；
多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行：
async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；
defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

HTML、XML、XHTML 的区别

HTML：超文本标记语言，是语法较为松散的、不严格的Web语言；
XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；
XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素： a, b, span, img, input, select, strong;
块级元素： div, ul, li, dl, dt, dd, h1-5, p等；
空元素： br,hr, img, link, meta;

title与h1的区别、b与strong的区别、i与em的区别？

• strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
• title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响。
• i内容展示为斜体，em表示强调的文本。