A2
1. 自我介绍，简述项目
您好，我叫付寅生，支付的付，因为寅时出生，所以叫付寅生。喜欢动漫、摄影和运动，最爱棒球，位置是一垒和投手。 目前就职于成都网思科平，做了威胁分析、robin文件检测，流量监控系统等，目前主要是负责EDR威胁响应系统，公司前端主要是webpack+vue技术栈。
2. React vue区别
react 和 vue 构建方式类似通过各自脚手架搭建用webpack打包，前后端分离的是现代前端框架
数据是否可变
- React整体是函数式思想，把组件设计为纯组件，状态和逻辑通过参数传入，在React中，是单向数据流，易记录状态变化，易追朔数据源
- Vue是响应式思想，基于数据可变，对每个属性进行依赖收集，通过watcher来监听
更新
- React setState 进入重新渲染流程，可用shouldComponentUpdate钩子控制是否更新
- Vue 当响应式属性变化时，有watcher派发nofity，触发patch进行前后virtual dom对比然后更新dom
编码和操作
- React 是all in js，jsx. 类的声明方式，易与ts搭配
- Vue vue-template单文件，自己的模版语法，
3. virsualDOM实现
描述真实DOM的JavaScript对象，tag, props, children
4. Diff算法为什么是O(n)复杂度而不是O(n^3)
因为框架都树节点的比较做了很大的前提假设，不做过于复杂的操作，所以降低了复杂度。
- 策略和前提假设，把O(n^3)复杂度问题转换成O(n)
- 通过分层求异策略，对tree diff进行算法优化
- 通过设置key的策略 对element diff进行算法优化
5. http code码?
- 2xx 成功
- 200 成功
- 204 无内容
- 3xx 重定向
- 301 永久重定向
- 302 临时重定向
- 304 未修改，服务端不返回资源
- 4xx 客户端错误
- 400 坏请求
- 401 未授权
- 403 被禁止的
- 404 未找到
- 5xx 服务端错误
- 500 内部错误
- 503 服务超时
6. 移动端rem布局如何实现? 简述原理?
- rem布局 vm + rem
- hotcss、flexible
根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成） 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果。
https://www.jianshu.com/p/b00cd3506782
7. JSbridge原理, js和native是如何通信的?
8. Rollup和webpack区别, treeshaking是什么?
- Rollup 是一个 JavaScript 模块打包器
- webpack 是一个现代js应用程序的静态模块打包器
通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export
9. TCP三次握手、四次挥手的过程, get post请求的区别 ?
三次握手
客户端 -> SYN 同步序列编号0 -> 服务端
服务端 -> SYN + ACK -> 客户端 客户端 -> ACK -> 服务端
四次挥手
客户端 -> FIN -> 服务器 服务器 -> ACK -> 客户端 服务器 -> 关闭连接 也发FIN -> 客户端 客户端 -> ACK -> 服务端 确认 序号+1
10.静态文件的浏览器缓存如何实现?
https://juejin.im/post/5a098b5bf265da431a42b227
- 浏览器自带HTTP缓存功能，需要服务器设置相应响应头。
- Cache-Control 缓存策略
- Expires 绝对（过期）时间
- Last-Modified 服务器最后一次修改时间
- Etag 唯一的资源标识
- HTML5离线缓存 - 编写manifest文件
- PWA - Service worker （生命周期：注册、安装(第1次)、激活(第n次)）
- LocalStorage
- CDN缓存
11.前端跨域方案
- jsonp 利用
<script>、<img>、<iframe>等标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的 - window.name(window.domain) + iframe
- postMessage
- nginx
- node proxy server
- CORS
- websocket
12.http 请求包含哪些字段 分别是什么意思
- General
- request url
- request method
- remote address
- status code
- referrer policy
- Request Headers
- origin cors跨域
- referrer 从哪个连接过来的
- user-agent 客户端环境
- Response Headers
- access-control-allow-origin 跨域
- date
- content-type
- content-length
- server
- Last-Modified
- If-None-Match
13.js 有哪些数据类型 如何判断? null 和 undefined区别 应用场景?
- 六种基本类型：Number、String、Boolean、null、undefined和Symbol，通过typeof
- null表示 无 的对象，转换数值为0，而undefined表示无的原始值，转换数值为NaN
14.new String('a') 和 'a' 是一样的么?
typeof new String('a') // object
typeof 'a' // string
15.移动端如何实现下拉到底部 跟随移动 结束后回弹的动画?
16.移动端如何优化首页白屏时间过长 ?
- 降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
- 加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。
- 缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。
- 渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。
17.ES6 generator函数简述
ES6早期异步解决方案， 是一个状态机，封装了多个内部状态。运行*函数返回一个遍历器对象
18.数组去重实现?
[...new Set([arr])]
19.js浮点数运算不精确 如何解决?
- IEEE754 双精度浮点数 造成的
- parseFloat(n.toFixed) https://github.com/nefe/number-precision
20.工作中最得意和出色的点, 头疼的点, 问题如何解决的
先讲一个小故事，团建活动之口口相传，作为执行者
出色的点
- 原有需求上，提出自己的意见和理解
- 1200定宽 改最小宽1200的响应式布局
- 图表数据雷达图 改为 饼图
头疼的点
- 技术难点、进程树关系图
- 搜索、整理、找组件，用three.js实现
21.为何换工作?
22.工作压力、企业文化等话题
平衡工作与生活，把学习当成生活的一部分，学会取舍与抉择
企业有自己独特的文化， 企业有独一无二的员工， 性格迥异的一堆人在共同的文化号召下为之一起努力。 这样的企业也是有魅力的， 我虽然做不到，但我能做到别人做不到的事。