01. src 和 href 的区别
href 是超文本引用，它是指向资源的位置，建立与目标文件的联系；src 目的是把资源下载到页面中；浏览器解析 href 不会阻塞对文档的处理（这就是官方建议使用 link 引入而不是 @ import 的原因），src 会阻塞对文档的处理。
02. script 标签为什么要放在 body 标签的底部（defer、async）
因为浏览器在渲染html的时候是从上到下执行的，当遇到js文件的时候就会停止当前页面的渲染，转而去下载js文件，如果将script标签放在头部，在文件很大的情况下将导致首屏加载时间延长，影响用户体验。解决办法：
- 将script标签放在body的底部
- 通过defer、async属性将js文件转为异步加载
defer和async的区别：首先都是实现js文件的异步加载，不阻塞页面的渲染；区别就是defer必须等到整个文档渲染完成后才执行，而async在加载完成后，会暂停html的解析，转去执行js。（图示如下）
03. DOCTYPE 标签
DOCTYPE声明于文档最前面，告诉浏览器以何种方式来渲染页面。
HTML5中的声明方式如下：
<!DOCTYPE html>
04.阻止事件冒泡&取消默认行为
- 阻止事件冒泡
- w3c：e.stopPropagation()
- ie9以下：e.cancelBubble = true
- 取消默认行为
- w3c：e.preventDefault()
- ie：e.returnValue = false
- return false
- js：取消默认行为
- jQuery：阻止冒泡 + 取消默认行为
- vue方法（修饰符）
- 阻止事件冒泡：@click.stop
- 取消默认行为：@click.prevent
05.H5新特性
- 新增语义化标签：nav、header、footer、aside、section、article
- 音频、视频标签：audio、video
- 数据存储：localStorage、sessionStorage
- canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
- input标签新增属性：placeholder、autocomplete、autofocus、required
- history API
- go、forward、back、pushstate
- 应用：vue编程式导航的灵感来源；vue-router的history模式。
06. 从输入网址（URL）到页面显示的过程？(一次完整的http请求)
- 域名解析，对输入的url进行dns域名解析，得到对应的ip地址
- 根据这个ip地址，找到对应的服务器，发起tcp连接（三次握手）
- 建立tcp连接后发送http请求
- 服务器响应http请求，浏览器得到html代码
- 浏览器解析html代码，并请求html代码中的js、css、图片等资源
- 浏览器对页面进行渲染并呈现给用户
- 断开TCP连接（四次挥手）
07. html页面渲染过程
总体过程：
- 解析html文件，创建DOM树
- 解析css，生成CSSOM（CSS Object Model），即CSS对象模型
- dom和css合并，构建渲染树（render tree）
- layout 布局（渲染）
- 依照盒子模型，计算每个节点在屏幕中的尺寸和位置
- painting 绘制（渲染）
- 按照计算出来的规则，通过显卡，将内容画到屏幕上
- 重新渲染
- 重排（即重新layout）：当课件节点位置或者尺寸发生变化事会发生重排
- 重绘（即重新paint）：改变某个元素的背景色、文字颜色等不影响它周围或内部布局的属性时，屏幕的一部分需要重画，但是元素的尺寸没有改变
- 特点：重绘不一定导致重排；重排一定会导致重绘，因为重绘是浏览器渲染页面的最后一步
