笔面试复习索引

最新补充

1. 箭头函数的指向（定义时所处对象）
2. 为什么会有变量提升？
3. XSRF
4. 模型拾取算法
5. 闭包（好处与坏处）->垃圾回收（标记清除、引用计数）
6. 为什么离开现在的公司
7. canvas绘图

需要复习和参考的书

【Javascript高级编程】-原型链、闭包、事件流
【JavaScript设计模式与开发实践】-订阅发布模式、单例模式、
【深入浅出Webpack】-打包逻辑、热更新、tree-shaking
【深入浅出vue.js】-很多
【WebGL编程指南】-着色器使用、图形学基础
【ECMAScript6入门】-各种扩展新方法、解构赋值、模板字符串、扩展运算符、Proxy

考点清单（精华版）

• 事件循环Event Loop
• Promise例题
  1. 解决了嵌套回调和合并多个任务的问题
  2. 缺点是不能取消和Promise 会吃掉错误
• 实现Promise
  1. 如果p1的resolve(p2)那么p2会替代p1完成后序的链式调用
  2. .then和.catch都返回一个新的promise方便后序链式调用
  3. .catch能捕获在它调用之前的reject错误
  4. 如果对链式调用赋值，得到的是最后一次调用的promise
  5. then中的返回值会传递到下一个then链式调用，如果then的参数为空，会忽略并向后传递值穿透
• ES module
  1. 模块化解决了模块关系不明确，作用域污染的问题
  2. CommonJS是JS模块化的社区实现，ES Module是官方规范
  3. 两者的使用方式不同。CJS是单值导出，ESM是多值导出
  4. ESM在编译阶段就会确定引用关系，CJS则是运行阶段。所以ESM可以做tree-shaking
• 原型链
  1. 对象的__proto__指向原型对象，person.__proto__。访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。
  2. 构造函数的prototype指向原型对象，可以在上面添加公共的属性和方法，不要添加引用类型。Person.prototype
  3. 原型对象的constructor指向构造函数。
  4. 在构造函数中运行另一个构造函数call将this传递过去可以实现属性继承
  5. 方法继承

Teacher.prototype = Object.create(Person.prototype)
Teacher.prototype.constructor = Teacher

• 闭包
  闭包是指一个函数有权访问另一个函数作用域中的变量，常见于编程题，考循环的编码输出
• 网页渲染
  解析HTML构建DOM树->获取外部资源->解析CSS构建CSSOM树->执行JavaScript(JS解析器)->合并DOM和CSSOM构造渲染树->计算布局和绘制(渲染引擎)
• 重排与重绘
  涉及盒子大小、宽高、位置、内容的改变会导致重排、改变发生后，浏览器会重新构建渲染树（重排）然后重新绘制改变的部分（重绘）。
  如果改变不涉及几何属性会导致重绘
  多次重排和重绘会合并为一次（渲染队列），读取盒子位置信息时会先清空渲染队列
• 节流与防抖
  如果时间间隔是1s，防抖是多次触发，只有最后一次1s后会生效。节流是1s均匀触发一次。
• BFC
• 跨域
• 性能优化
  1. 分页降低渲染开销
  2. v-if和v-show
  3. v-for添加唯一key
  4. 图片懒加载预加载
  5. 接口分模块调用
  6. 路由懒加载component赋值为函数（函数是惰性的）
  7. 插件按需引入
  8. webpack（自带）：图片压缩、公共代码提取、tree-shaking等
  9. 静态资源使用CDN服务
• 算法
• 设计模式
  1. 单例模式（惰性单例模式）：保证一个类仅有一个实例，并提供一个访问它的全局访问点。 惰性：仅在使用时才实例化。-标记框的例子
  2. 发布订阅模式（观察者模式）：收集依赖、然后广播变化。Vue和Promise的例子
• Webpack
  1. 作用：代码转换、文件优化和合并、代码分割、热更新、代码校验
  2. loader用于处理各种文件，会从入口解析各种引入并用loader处理
  3. plugin向各个生命周期注入钩子函数，比如css-loader和style-loader处理done的时候将css提取到单独的文件
  4. tree-shaking：通过ES module分析出真正用到的代码，剔除无用的死代码
  5. 模块热替换：向网页中注入一个代理客户端来连接本地服务
• ES
  1. 各种扩展新方法
  2. 解构赋值
  3. 模板字符串
  4. 扩展运算符
  5. Proxy

• Vue

  1. 变化侦测（对象）：defineObject，在getter中收集依赖，在setter中触发依赖。添加和删除属性的操作监听不到
  2. 变化侦测（数组）：拦截原生方法。监听不到直接针对下标的数据修改。
  3. 模板编译：将template代码变成渲染函数的过程，渲染函数的执行结果就是虚拟DOM树。过程包括：解析文本成抽象语法树->标记静态节点->生成渲染函数
  4. 虚拟DOM：虚拟的节点树，更新时会用新的和旧的做对比，最小程度的更新DOM树
  5. VNode：节点描述对象，可以组成虚拟DOM
  6. patch算法：增：老树不存在的就新增，新树不存在的就删除，都存在会根据类型不同执行替换操作
  7. patch更新操作：当新旧节点都存在，且节点是元素节点且有children时，进行对比操作，具体流程如下：遍历新节点，针对每一个新节点去遍历旧节点，如果找不到就增，如果找到了但位置不对就移否则就更新，最后删除没有用到的旧节点。
  8. 优化策略：新旧两个列表，共4个指针，从两端向中间对比，先根据下标对比，如果匹配到就向中间移动，没匹配到就采用6的双重循环对比

• WebGL

  1. 顶点着色器：用来描述位置和颜色的程序。片源着色器：根据绘制要求，对每个片元进行处理的程序。
  2. drawArrays进行基础图形绘制。drawElements根据顶点索引进行绘制。参考绘制正方体的例子。
  3. UV：纹理贴图坐标，跟纹理映射相关，纹理坐标与顶点坐标对应实现贴图。纹理坐标左下角是00
  4. uniform变量：不可改变的统一的变量。attribute变量：表示顶点信息的变量。varying变量：在顶点着色器和片元着色器之间传递数据的变量
  5. 平移旋转缩放：平移：所有坐标加一个分量；旋转：有一个推导公式；缩放：所有坐标乘一个分量
  6. 光栅化：顶点着色器的变量传到片元着色器的过程中会光栅化
  7. 传输数据过程：在着色器程序中定义变量，通过gl方法拿到变量地址，通过gl方法向地址传输数据。
  8. 缓冲区对象：将多个点写入缓冲区，然后将缓冲区一次性传给着色器，其他的对象还有纹理对象、帧缓冲区对象
  9. requestAnimationFrame是宏任务对象，在标签未激活状态下不执行
  10. 数据类型：int、float、bool以及矢量和矩阵类型
  11. 相机三要素：视点、观察点、头部上方
  12. 投影：正射投影和透视投影。设置参数生成对应的投影矩阵
  13. 隐藏面消除：使程序能正确的处理前后关系，默认是按绘制顺序
  14. PVM：投影矩阵（可是区域信息）、视图矩阵（相机信息）、模型矩阵（旋转偏移等）。视图矩阵是
  15. 将canvas坐标转换为webgl坐标

const width = 200;
const height = 200;
const x = y = 50;
const rx = x - width / 2;
const ry = -(y - height / 2); 

16. 多边形偏移：给深度值加一个偏移，解决深度值一样时产生的斑驳现象
17. 平行光、点光源、环境光。漫反射、环境反射。漫反射颜色：入射光颜色x表面基底色xcosa。环境反射：入射光颜色x表面基底色
18. 选中物体的逻辑，将物体绘制为单色，获取鼠标位置的颜色
19. 雾化：线性雾化，线性插值，越远的物体颜色越淡雾越重
20. 绘制圆：计算片元和圆心的距离，如果超过就discard
21. 阴影：两个着色器，一个的相机和光源一致，看不到的点即阴影
22. 对象拾取算法

其他考点

• 闭包的好处、坏处

• 标记清除和引用计数。

• nextTick，获取最新的渲染结果DOM然后执行函数回调

• 职业发展规划：一年内成为这个领域的专家、继续精进自己的技术、精进对架构和业务的理解

• 面试产品的行业背景和未来趋势

• 个人有何优势：借用领导评价、能不断的学习（终身学习）、好相处、努力上进

• CDN：更快的HTTP，将静态资源在全球分散部署，就近提供

• HTTP/HTTPS/TCP/UDP：HTTPS比HTTP更安全，需要申请证书。TCP需要先建立连接而UDP不需要，TCP能确保数据到达

• 输入 URL 到页面展示：解析域名->TCP建立连接->发送请求->处理请求->返回页面渲染

• type 和interface的区别：接口是通过继承的方式来扩展，类型别名是通过 & 来扩展。定义同名接口会自动合并，而同名类型会报错

• 前端安全：XSS脚本攻击、CSRF

• this指向：this总是指向，调用该函数的对象

• mutations和actions区别：调用方式不同、只有mutations能改变store的状态、mutations不能进行异步操作。

• 项目相关

  1. 项目的背景是什么
     传统巡检流程复杂不规范、电网巡检智能化
  2. 当前项目的目的是什么
     提高巡检效率、规范流程、方便数据处理
  3. 在开发过程中，你的角色是什么
     前端框架搭建、前端开发工作、以及网站基础样式和风格的把控、因为没有UI、参与业务讨论提供参考意见
  4. 在开发过程中有遇到过什么样的难题
     图片组件、热力图、杆塔绝缘子分离、模型加载的性能问题、转角推荐
  5. 遇到这些问题，你都是如何进行解决的
     去网上找解决方案，自己慢慢学习摸索，遇到这样的问题首先需要静下心来，不断的尝试和试错。如果自己解决不了就求助同事，我们的领导帮助我解决了不少难题。
  6. 项目完成之后，取得了哪些成果
     项目立项一年后，与西宁的公司达成了合作，系统卖了400多万。支撑了公司的日常业务，大概60人左右。任务800多个，图片250多万张，缺陷100多万条。每张图片和缺陷都是要经过平台的，我们的系统让巡检能力提高了3倍。以及九正那边的业务
  7. 保留精力好好面对每一场面试，每天最多两场