浏览器
浏览器内核和JS引擎
| 浏览器/RunTime | 内核（渲染引擎） | JavaScript 引擎 |
|---|---|---|
| Chrome(谷歌) | Blink（28~）\Webkit（Chrome 27） | V8 |
| FireFox(火狐) | Gecko(开源也叫Firofox) | SpiderMonkey |
| Safari(苹果) | Webkit | JavaScriptCore |
| Edge | EdgeHTML | Chakra(for JavaScript) |
| IE | Trident | Chakra(for JScript) |
| Node | V8 |
缓存区别
| 缓存 | 时效 | 大小 | 与服务器端通信 |
|---|---|---|---|
| cookie | 如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，设置过期时间关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。，在所有的同源窗口共享 | 4kb | 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 |
| sessionStorage | 仅在当前会话下有效，关闭页面或浏览器后被清除，不在不同的浏览器窗口中共享，即是同一个页面共享 | 一般为5MB | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 |
| localStorage | 除非被清除，否则永久保存，在所有的同源窗口共享 | 一般为5MB | 仅在客户端（即浏览器）中保存，不参与和服务器的通信 |
| indexedDB（以前叫Web Sql） | 除非被清除，否则永久保存 | 一般来说不少于 250MB，甚至没有上限 | 不参与 |
| html5离线缓存 | 除非被清除，否则永久保存 | 单地址页面 | |
| 其它框架存储(vuex,React-redux) | 随生命周期，关闭而结束 |
HTML&CSS
1.模型
box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。 1.盒模型(怪异盒模型)
标签得实际宽度 = 设置的宽度 如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。
- W3C盒模型（标准盒模型）
标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度
2.常用布局
| 布局 | 方式 | 优点 | 缺点 |
|---|---|---|---|
| 文本布局 | text | 文档流本质是 nomal flow （普通流、常规流）通俗易懂 | 缺乏可变性 |
| 浮动布局 | float | 兼容性好，计较简单容易上手 | 脱离文档流，需要清除浮动，高度塌陷 |
| 定位布局 | position | 让元素拥有了 inline-block 宽高限制 | 脱离文档流，会导致后续元素全部脱离文档流，可用行差 |
| 流式布局 | streaming元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。 | 兼容性比较好，当屏幕分辨率变化时元素大小不变布局也不变 | 如果尺度过大或者过小在屏幕上就不能正常显示 |
| 弹性布局 | rem/em | 适应性强，在做不同屏幕分辨率的界面时非常使用，可以随意按照宽度，比列划分元素的宽高，实现快捷，易维护。简单，方便，快速 | 浏览器的兼容性比较差只能到ie9以及以上。 |
| 自适应布局 | adaptation(@media媒体查询) | 屏幕分辨率变化时，页面里面元素的位置变化而大小不会变化 | 如果需要不同页面那么还需要写多页的代码 |
| 响应式布局 | BootStrap(CSS3的Grid类似)栅格布局 | 适应pc和移动端，如果只够的耐心，效果会很完美。 | 媒体查询是有限的，也就是可以枚举出来的，只能 适应主流的宽高，要匹配足够的屏幕大小，工作量比较大，设计也需要多个版本 |
H5C3
html5+文档 - HTML5+ API Reference(推荐学习网址) www.html5plus.org/doc/h5p.htm… (主要为H5APP需学习的地址，查询手机设备)
CSS3属性和选择器 tool.oschina.net/apidocs/api…
H5新特性：
- h5新语义元素（有利于代码可读性和SEO）新语义元素：header,footer,nav,aside,article,section
- 地理定位 即通过window.navigator.geolocation来实现访问 getCurrentPosition()watchPosition() clearWatch()
- 本地存储提供了sessionStorage、localStorage和indexedDB加强本地存储setItem (key, value) getItem (key)、removeItem (key)、clear () 、key (index)
- audio标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理
- 和Audio很像，标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，
- Canvas画布caibaojian.com/canvas/ CSS3动画(Animation)
- 关键帧(@keyframes) - 定义动画在不同阶段的状态
- 动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器）
- css属性 - 就是css元素不同关键帧下的状态
如：
.list div:first-child { animation: dropdown 8s linear infinite; }
@keyframes dropdown { 0% { margin-top: 0px;} /** 暂停效果 */ 10% { margin-top: 0px;} 50% { margin-top: -100px;} 60% { margin-top: -100px;} 90% { margin-top: -200px;} 100% { margin-top: -200px;} }
SVG矢量图
- 存储多个logo或者其它小图标,通过background-image调用background-repeat是否平铺 background-position调整距离，主要注意距离
- 如同icon小图标，小图标参考阿里巴巴www.iconfont.cn/
面试问题
- 如何垂直居中?
- 行高同高行内元素line-height
- display：inline-block;verticle-align:middle
- display:flex;align-self:center;
- display:table;display：table-cell
- position:relative;top:50%;transform:tranglateY(-50%) 6.父级通过伪元素:before 挤压，还可以隐藏元素挤压
- 如何水平居中?
- margin: 0 auto; text-align: center
- 父元素display: flex;flex-direction:column; 子justify-content: center
- display:inline-block和text-align:center
- position:relative;left:50%;transform:tranglateX(-50%)
- 父元素display:table-cell 子元素margin
- 父元素position:relative，给子元素float:left和margin-left
- 挤压 隐藏元素或者伪元素:before
- 谈谈cookie,localstoarge,sessionStorage 如上表格所属
- H5C3谈谈你的理解和用过那些属性
- 根据情况回答，挑熟的 水太深 特别Canvas
