前端面试必须知道的技术点

1、diff算法（列表渲染key）

2、原型和class

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this

1. promise和async的区别

promise链式调用

promise.all()

promise和async的错误处理机制

1. 事件循环机制

setTimeout promise async执行顺序 宏任务队列 微任务队列

1. bind call apply
2. instanceof  typeof  toString
3. http2.0 多路复用
4. 虚拟dom

Virtual DOM render + diff 显然比渲染 html 字符串要慢，但是！它依然是纯 js 层面的计算，比起后面的 DOM 操作来说，依然便宜了太多。可以看到，innerHTML 的总计算量不管是 js 计算还是 DOM 操作都是和整个界面的大小相关，但 Virtual DOM 的计算量里面，只有 js 计算和界面大小相关，DOM 操作是和数据的变动量相关的。前面说了，和 DOM 操作比起来，js 计算是极其便宜的。这才是为什么要有 Virtual DOM：它保证了 1）不管你的数据变化多少，每次重绘的性能都可以接受；2) 你依然可以用类似 innerHTML 的思路去写你的应用。

1. session,cookie,token
2. 浏览器缓存机制（强制缓存cache-control,expires、协商缓存if-modified,if-modified-since,ETag）

10、服务端渲染

11、this的几种绑定类型

12、数据类型（基本数据类型null,undefined,Number,Boolean,String,Symblo,引用数据类型：object）

(1)浮点数精度问题（EPSILON，0.1+0.2=?）

    (2)数据类型强制转换（if，for，==….）

13、https ssl加密+证书+完整性检验

14、输入url之后的过程(TCP三次握手+浏览器渲染原理)

15、浏览器渲染原理（解析html生成dom树->解析css 生成cssdom树->计算盒子模型，生成渲染树->绘制在页面上）

   1、javascript阻塞html下载解析，因此放在body后面，也可用defer和动态异步加载

   2、动态加载

16、重排和重绘，重排一定会导致重绘，重排会重新计算盒子模型和位置，所以一定会导致重绘（见浏览器渲染如案例）

17、优化性能：

1、引用cdn

2、减少http请求数：例如合并js，雪碧图等

3、缓存（强制缓存，协商缓存），webWorker

4、图片懒加载

5、图片优化

  （1）合适格式的图片，无需细节要求高的选jpeg，如果兼容性满足的情况下使用webp，有损压缩

（2）有细节要求选Png，png8，png32，png 24

    （3）小图标，使用矢量图svg

  (4) 使用CDN根据屏幕加载合适大小的图片

 6、文件压缩

 7、代码上的：

   （1）减少单个修改样式，可用class，createDocumentFragment不会回流

   （2）无需嵌套多层css

     3）算法缓存

     4）能用动画代替图片则用动画，动画定位用absolute等

18、post，get,head,put,delete等方法

19、animation基本了解一下(转圈圈，移动)

20、防抖和节流

   21、let const var区别

       暂时性死区、声明提升、不允许重复声明

       对于引用类型,const只是不能修改引用地址

   22、数组去重  set

   23、原型，继承，prototype和class继承的区别

       Prototype先定义自己的this，然后将自己父构造函数的this赋给它

       Class,直接调用父类的this，生成自己的this

   25、create() 复制原型

   26、原型链继承，组合继承、寄生组合继承

   27、babel相关知识(babel-core,babel-preset,….)

   28、cmd、amd(cmd就近加载，amd预先加载)

  29、webpack工作原理

   Enrty 入口

  Modules 用相应loader解析文件

  Css-loader,sass-loader,babel-loader,url-loader,vue-loader…

 Plugin 输出文本方式, html-webpack-plugin,commosChunkplugin，extractText….

Uglifyplugin….

 Output输出地址

30、xss和csrf

Xss攻击：反射性，存储型

31、跨域 jsop

CORS,通过设置Access-Control-Allow-Origin来进行的

32、移动端适配方案（rem，适口）

33、移动端1px问题

34、函数柯里化

35、BFC、弹性布局

 

 

Vue:

1. Vue双向绑定原理（数据劫持defineProperty+发布订阅模式）

Data属性get()添加watcher依赖  set通知相关订阅者更新

2、nextTick：Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。

当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

1. watch  deep，immidiate属性
2. extend 和 component的对比和区别
3. directive、filter
4. 生命周期（）
5. Computer 里面实际是get，还可以调用set方法
6. Filter，directive
7. vuex
8. vue-router导航守卫 beforeEach
9. computed（set,get），watch（deep，immeditate）

 

js、css编程题：

1. 实现call，apply，bind
2. 实现new
3. 实现

 

前端基础算法：

1. 快速排序、冒泡排序
2. 二分查找
3. 深度遍历、广度遍历

这是粗略的总结了前端大部分的基础技术点，欢迎一起来完善。。。。