面试题是一系列问题，然后给出一定的答案
学习面试题，有什么用?
- 面试用。。
- 增强知识基础，是快速补充知识点的途径之一 让自己知识点得到全方位补充，理解一定的原理。快速解决项目中遇到的问题
- link位于html文件，所以会在内联js执行完成后就会下载。而@import是位于css文件内部，所以它需要在宿主CSS文件加载后，才会去下载。
- 并如果把宿主内容全部移动到@import文件中，页面加载会导致闪烁。（利用这种机制，我们可以尝试区分优先级资源）
- link兼容性好，@import版本IE5以上。其实现在都不是问题了。
- JS动态加载CSS，是通过创建link标签实现的
- title是图片加载后显示时的说明，alt时图片不能加载的说明。
优点：
a. 解决加载缓慢的第三方内容如图标和广告等的加载问题。因为是隔离开的，第三方内容缓慢不会阻塞我们的网页内容
b. iframe无刷新文件上传 原理是定义一个回调函数在客户端JS，form表单提交数据的时候把客户端JS的回调函数名字传到后端。然后后端完成请求逻辑后，返回一个标签响应，里面携带者响应参数作为回调函数的参数，然后浏览器会执行客户端函数，并且把参数传进会回调函数。这个类似get的跨域请求方案JSONP。
https://jasonhzy.github.io/2016/05/25/iframe-upload/
c. iframe跨域通信。还是使用CROS或者JSONP吧 https://segmentfault.com/a/1190000014901853
d. iframe也可以用于类似websocket的使用。不断接受服务器发过来的数据，只要服务器不完成请求。类似向下兼容websocket的大致原理。。
缺点：
a. iframe会阻塞主页面的Onload事件。阻塞完成事件回调 ，影响原来页面的逻辑
b. 无法被一些搜索引擎索引到
c. 页面会增加服务器的http请求
d. 会产生很多页面，不容易管理。
- 页面头部必须有meta声明的viewport，不然无法定义视口宽度，从而不知道当前的width是多少
缩小
p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是缩放比例
- 因为以前的HTML都是浏览器引用DTD来查询定义识别标签，现在已经统一格式为doctype来识别
更多的权限
-
数据持久化增强 3：离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存
9：客户端数据存储，localstoage sessionstoage 11：本地数据库
12：索引数据库
6：websocket，一种更加高效的数据传输方式
-
渲染增强 1：canvas渲染
-
交互增强 2：媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。) 4：文档编辑，应该是更好的支持对文档的编辑。
5：拖动，可以将文件拖动到某些区域上传
-
硬件访问增强 10：地理位置共享
区别： 不仅仅是输出层的缓存，应用程序缓存是整个app可以离线使用。从manifest文件得到功能支持
custom{
Font-family：simhei;
Color:pink
}
组成
SVG：XML描述点线面的属性
Canvas：通过API渲染
更新数据源
SVG：能响应变化
Canvas：需要代码触发重新渲染
交互事件
SVG：支持
Canvas：不支持。可以通过父元素支持
1.通过 visibility state的值得检测页面当前是否可见，以及打开网页的时间。 2.在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。
共同点：都是一种针对同源网址的持久化方案
区别
- 大小特征不同。 cookie保存的数据很小，不能超过4k,而 Isessionstorage和 ocal storage保存 的数据大，可达到5M.
- 时效不同。cookie一般生效为过期时间之前，sessionstorage为tab的声明周期， localstorage始终有效
- 场景不同。cookie和localstorage同源网址就生效数据共享（除了隐身模式），sessionstorage不与其它tab共享数据
- 行为不同。HTTP会默认带上cookie，其它持久化不会
主要分成两部分：渲染引擎（ Layout Engine!或 Rendering Engine)和S引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算
网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，
所以渲染的效果也不相同。
JS引擎：解析和执行 avascript?来实现网页的动态效果。
最开始渲染引擎和S引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
在线情况下，浏览器发现HTML头部有 manifest属性，它会请求 manifest文件，如果是第一次访问，那么 浏览器就会根据 manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经 离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的 manifest文件与日的 manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件 中的资源，并且进行离线存储。例如，
在页面头部加入 manifest属性
<html manifest= 'cache manifest>
在 cache. manifest文件中编写离线存储的资源
CACHE MANIFEST
ve.11
CACHE
js/app is
css/style. css
NETWORK
Resourse/logo. png
FALLBACK
//offline.html
17、display:none和visibility:hidden的区别？
是否存在的区别，影响布局结构
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
https://juejin.cn/post/6844903504545316877
-
浮动元素是脱离文档流的，但是它的布局还是会影响其它元素的内容布局。(可以实现文字环绕功能) 自身的影响是 自己脱离文档流，并在会在最上层 对同级兄弟的影响是 同级兄弟位置逻辑（非clear）：把同级所有float元素都移除后的文档流位置布局。 同级兄弟渲染逻辑：得到最后自己的位置布局和所有同级不重叠，进行内容渲染。 同级兄弟对float兄弟的行为 禁止左边或者右边有float兄弟，从而影响文档流布局逻辑。使用clear：left 或者clear：right。
-
块级格式化上下文
BFC元素是什么？ 它是用来处理浮动相关的布局问题。因为float存在元素不按照普通文档流布局，处理浮动带来的影响（这个完全让用户自己控制，到底想不想要这个效果，其实float就是实现文字环绕的最好手段） 而BFC的意义，就是让对于float的效果的元素提供控制 BFC元素之内，遵从float布局和渲染。 BFC元素之外，需要获取内部的最大宽度和高度，提供外界的布局渲染环境。
如何创建BFC盒子？
overflow != visible
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；