面试要点.md

• 浏览器渲染(输入url后的流程 重排 重绘)

  • 重排重绘
  • 输入url后的整个过程
  • css加载不会阻塞dom解析，但会阻塞dom渲染，也会阻塞js执行
  • [js会阻塞dom解析，也会阻塞dom渲染]
  • async defer defer会按顺序在dom解析完才执行，async会在下载完成后立即执行，顺序不确定，也可能阻塞dom解析
  • 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
  • 图层

• 缓存

  • 缓存
  • 缓存
  • google http chche

• 优化

  • 雅虎35规则
  • 优化
  • WebView性能、体验分析与优化
  • VasSonic
  • preload

• es6 module和commonjs区别

  • blog
  • You can mix require and export. You can't mix import and module.exports.

• xss csrf webshell ifarme sql注入 远程代码执行 上传漏洞

  • 安全
  • 安全
  • 原型污染

• 强缓存和弱缓存

• https

  • ssl连接过程

• Event Loop

  • setTimeout setImmediate nextTick
  • event loop

• css居中

• css选择器权重

  • 权重

• 负margin布局

• margin无法撑开 BFC

  • https://www.jianshu.com/p/fc1d61dace7b

• 闭包

  • 闭包

• flex grid

• 图片优化（压缩 base64 缓存 响应式[srcset] 预加载 懒加载）

• 大数

  • number encoding
  • 双精度浮点数
  • 0.1 + 0.2 !== 0.3
  • Here is what you need to know about JavaScript’s Number type
  • Here is what you need to know about JavaScript’s Number type 中文版

• http2 socket

• css4

• 原型继承 es678

  • 原型关系图
  • 基于构造函数继承
  • 非构造函数的继承
  • TDZ

• Immutable

  • 使用immutable.js优化react程序，内部使用共享结构，使得diff过程更快结束
  • react immutable

• 类型转换

  • 隐式转换 valueOf toString
  • 双等号比较过程

• 基本算法

  • 快排
  • 树递归
  • 链表
  • 快排优化
  • 插入排序
  • 希尔排序
  • 动态规划
  • topK
  • 投票算法
  • 滑动窗口

• 计算机基础

  • 计算机基础

• vue 生命周期 vdom 双向绑定

  • diff算法
  • vdom
  • diff算法

• http协议 各种头

  • content-length 大小
  • content-type 数据类型
  • connection: keep-alive
  • cache-control: max-age=0 | no-chche |
  • accept-encoding: gzip
  • accept-language:
  • Transfer-Encoding: chunked
  • expires:
  • last modified(响应头)/if modified since(请求头) (配合cache-control使用)
  • etag(响应头)/if none match(请求头) (配合cache-control使用)

• 常见方法

  • curry compose deepcopy debounce throttle

• 常见编程题

  • 获取URL的查询参数

• 面试题

• checklist

• node
  • 消息队列

const q = {}
// ^有两种用法，限定开头和取反，当被[]包起来时表示取反
// [^?&=] 找到非?&=字符
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v)

• 组件库亮点
  • 更有扩展性，比如table的排序可自定义 过滤可自定义 form支持响应式布局
  • 打包体积更小 rollup
  • 内置的依赖组件也更灵活，可以自定义 充分利用v-bind语法
  • 功能更丰富 比如modal支持拖拽
  • 更友好的开发体验，开发环境的错误提示
  • 某些实现更优雅 比如像modal等组件可能会存在遮罩，这个遮罩大多是相同的，所以可以共用一个遮罩
  • tree组件海量数据不卡顿，按需渲染

设计模式原则 如何保证组件库质量 代码code review 过checklist来保证代码质量 单元测试覆盖所有功能 保证组件质量

组件库亮点：优化 树优化 多数据量做按需加载 能避免卡顿 对不变的数据做冻结 减少vue对其添加setter getter带来的时间花销 利用ssr 提高首屏时间， 组件的懒加载 部分数据本地存储 业务亮点：迅雷电影 首屏ssr优化 骨架屏 轮动列表做dom回收 组件懒加载

前端工程化怎么做 单元测试 文档 code review ci 好奇心 最近新技术的关注

• 为什么离职
  • 为什么离职
  • bat给你offer，你怎么选
  • 进来做的工作 发展空间 企业的重点发展方向是不是在

• es6 箭头函数 promise
• deepclone
• event loop
• 原型继承
• 闭包
• vue webpack diff
• 移动端适配
• css 居中
• 跨域

cors options请求 this指向 bind实现 函数劫持 v-for key 二叉树遍历 cookies service worker web worker vue双向绑定 怎么做挟持 加密算法 对称加密 非对称加密 RSA算法 https连接过程 扁平化数据和树结构的互转

什么是微服务 微服务如何通信 loader和plugin的区别 构建如何优化 打断点定位 promisify实现 proxy介绍 event loop microtask macrotask 做了什么优化

开发组件库的理念 设计 结构是怎么样的 3年规划 定一个目标 怎么努力 怎么安排去实现 提高知识储备、知识深度 广度 最近有没关注什么新技术 serverless 你对这份工作的期望与目标何在？

为什么选择离职

设计模式原则 如何保证组件库质量 代码code review 过checklist来保证代码质量 单元测试覆盖所有功能 保证组件质量

组件库亮点：优化 树优化 多数据量做按需加载 能避免卡顿 对不变的数据做冻结 减少vue对其添加setter getter带来的时间花销 利用ssr 提高首屏时间， 组件的懒加载 部分数据本地存储 业务亮点：迅雷电影 首屏ssr优化 骨架屏 轮动列表做dom回收 组件懒加载

前端工程化怎么做 单元测试 文档 code review ci 好奇心 最近新技术的关注

2. 请说出以下代码打印的结果

async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); }

async function async2() { console.log('async2 start'); return new Promise((resolve, reject) => { resolve(); console.log('async2 promise'); }) }

console.log('script start');

setTimeout(function() { console.log('setTimeout'); }, 0);

async1();

new Promise(function(resolve) { console.log('promise1'); resolve(); }).then(function() { console.log('promise2'); }).then(function() { console.log('promise3'); });

console.log('script end');

3.使用JS实现一个repeat方法，输入输出如下： // 实现 function repeat (func, times, wait) {}，

// 输入 const repeatFunc = repeat(alert, 4, 3000);

// 输出 调用这个 repeatedFunc("hellworld")，会alert4次 helloworld, 每次间隔3秒

4.请用ES5实现你认为最好的组合继承

5.模拟实现loadash中的_.get()函数，实现如下传入参数取值效果 function get() { // 请补全函数参数和实现逻辑 } const obj = { selector: { to: { toutiao: 'FE coder' } }, target: [1, 2, { name: 'byted' }] };// 运行代码 get(obj, 'selector.to.toutiao', 'target[0]', 'target[2].name')

// 输出结果：// ['FE coder', 1, 'byted']

算法题： 如何在数组中找到两个数的和为指定的数(https://leetcode-cn.com/problems/two-sum/)

头条checklist

1. vue和react区别 vue基于数据可变行实现 react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，推崇结合immutable来实现数据不可变 react推崇all in js ,jsx jss vue 单文件组件 也有jsx react class型的组件写法， vue是声明式的写法 都只关注视图层，将其他交给其他库去解决，比如路由、状态管理 都有跨端解决方案 使用 Virtual DOM， 组件化思想

2. 常见js工具函数实现

3. 常见算法 排序 遍历 topk 动态规划

4. 前端错误监控

5. 离职原因 梦之舵: 刚毕业觉得最近一两年应该是进步最快的时候，觉得不应该只做一些内部管理系统，应该去接触更多的东西，所以选择离职 国双: 想要一个更大的平台，为了以后更好的职业发展

6. vue响应式 Vue 的 mount 过程是通过 mountComponent 函数， 在这里会实例化一个 watcher，执行watcher的构造函数逻辑，然后会执行watcher上的get方法，然后再执行 pushTarget 方法，这个方法会把当前这个watcher赋值到Dep的一个target的静态属性上，接着会执行实例化watcher时传入的回调函数，其实就是执行内部的update方法，在这个方法上还会先执行render方法，render方法是用来生成vnode并返回的，在render方法中会访问到vm上的各种数据，也就相当于触发数据的getter方法，vue在这之前会对数据做响应式劫持，设置了getter和setter，而且每一个属性还会存在一个dep对象，当getter被访问时，会判断这个dep对象上是否存在watcher实例，如果存在，就将它收集起来，最后执行popTarget完成依赖收集

当对数据做修改时，会触发setter，这里会对数据做判断，如果更新了，会触发dep上的notify方法，这里会去执行之前收集起来的所有watcher上的update方法，接下去会进入一个队列，不会直接执行watcher上的回调，等到下个nextTick的时候再去清空等个队列，在清空队列之前，需要做排序，因为组件的更新是由父到子的，所以需要保证先执行父的watcher再执行子的watcher。然后清空队列，执行所有watcher上的回调，如果是渲染watcher，便是执行之前传入的update、render方法进行更新的派发

6. 计算属性的实现 vue初始化的时候，遇到computed属性是会单独处理的，会遍历computed中的属性，依次初始化一个计算watcher，这个watcher跟渲染watcher不同，它不会立刻求值，计算watcher有缓存的作用，同时会持有一个dep实例，当render函数被执行，访问到这个计算属性的getter时，这里的getter已经被vue挟持，会执行wacther上的depend操作，会把当前的渲染watcher收集起来，拿到当前计算属性的值，这样完成了当计算属性变化时，也能进行更新派发的操作，另外还需要做另一种收集，也就是计算属性依赖的其他数据更新时，计算属性会自动更新的依赖。当计算属性被访问时，会去执行getter，也就是我们自定义的函数，在这里会访问到所依赖的其他属性，而这些属性他们也是响应式的，也会触发他们的getter，会做依赖收集，也就是当前的计算watcher会被其他属性收集起来，这样实现了当其他属性变化能，能通知计算属性做更新。

vuex思想 mpvue设计

组件库的构建 单元测试 上线 gitlab ci