面试前知识点准备但当我们遇到，多个组件共享状态，单项数据流很容易被破坏。所以新的思路是，把共享状态抽离出来，进行独立管理

盒模型

W3C标准:

元素空间尺寸：width = margin-left + border-left + padding-left + content + padding-right + border-right + margin-right

元素尺寸：width = border-left + padding-left + content + padding-right + border-right

css3 box-sizing 属性元素尺寸

1、content-box 单指内容【padding,border不参与计算】类似W3C规范
2、border-box 【padding、border参与计算】类似IE的规范
3、padding-box 【padding参与计算】

常用布局

Flex布局

浏览器资源加载、渲染

浏览器和移动设备兼容性

浏览器的资源加载、渲染机制

资源加载过程

三次握手四次挥手

渲染机制

html解析成dom
css解析成cssom
dom 与 cssom合并生成渲染树（Rander-tree）
计算渲染树的布局
将布局渲染到屏幕上

网站性能优化、体验优化

浏览器缓存

网页首次加载时，强缓存
再次加载时，如果浏览器命中强缓存，缓存没有过期，直接从缓存在加载数据
如果缓存已经过期，向服务器发送验证请求
验证服务器是否更新了，如果已经更新，发送数据请求
如果没有更新，协商缓存，返回304状态码，从浏览器获取数据

减少请求数、减小请求资源体积、提升网络传输速率

压缩JS
压缩html
压缩css
服务器端压缩文本类大文件 Gzip

图片优化

不要在HTML里缩放图像
使用雪碧图（CSS Sprite）
使用字体图标（iconfont）

使用CDN

使用CDN存放静态资源，避免带宽爆炸以及加快资源下载.

页面渲染性能优化

减少重绘和回流
减少页面重新渲染以及Dom嵌套
内存泄漏

负载均衡

使用PM2管理多进程
Nginx做反向代理
Docker管理多个容器

ES6常用

ES7常用

W3C标准与规范

前端语义化、工程化、性能、模块化开发深入理解

Vue通讯

组件间的父子之间的传值
非父子组件通信
sessionStorage，localStorage缓存传值
路由带参数跳转进行传值
跨组件跨模块通信【状态管理模式（中间件Vuex通信）】

vuex状态管理

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

state，驱动应用的数据源；
view，以声明方式将state映射到视图；
actions，响应在视图（view）上，用户输入导致的状态变化。

上面是个“单项数据流”的理念

但当我们遇到，多个组件共享状态，单项数据流很容易被破坏。所以新的思路是，把共享状态抽离出来，进行独立管理，进行全局单例模式管理，任何组件都能获取状态或触发行为

Vuex就是解决上面的问题

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

Vuex基本思想，借鉴了Flux、Redux。数据响应机制，实现高效的状态管理。图示：

使用场景：

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

除了解决状态高效管理之外，还有什么好处

实现能做到记录变更(mutation)
保存状态快照
历史回滚/时光旅行的先进的调试工具【Dev-tool】

使用vuex遵循的规则：

Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：
应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。

熟练配置webpack、gulp、git

segmentfault.com/a/119000000… gulp

webpack

熟悉Canvas、SVG、NodeJS、TypeScript、Electron

JavaScript bind、call与apply

共同点：

改变函数执行时的上下文（改变this的指向），并且是立即执行的。【一个函数借用另一个函数的方法】

不同点：传递参数不同例：

var a = {
    name: 'demo',
    fn: function (age, age2) {
        console.log(this.name)
        console.log(age) 
        console.log(age2)
    }
}
a.fn.call(a,5,6) // demo 5 6
a.fn.call(a,[5,6]) // demo 5 6
a.fn.bind(a, 5, 6)() // demo 5 6

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elemens);
console.info(array); // ["a", "b", 0, 1, 2]

// min/max number in an array
var numbers = [5, 6, 2, 3, 7];

// using Math.min/Math.max apply
var max = Math.max.apply(null, numbers); 
// Export Out: 7

猫吃鱼，狗吃肉，奥特曼打小怪兽。
有天狗想吃鱼了
猫.吃鱼.call(狗，鱼)
狗就吃到鱼了
猫成精了，想打小怪兽
奥特曼.打小怪兽.call(猫，小怪兽)
猫也可以打小怪兽了

面试前知识点准备

盒模型