浏览器多进程+多线程
DNS寻址方式,DNS 缓存, dns-prefetch
建立 tcp/ip 链接,三次握手,四次挥手,滑动窗口,接收窗口,收发帧的策略,为什么关闭要等待 2MSL,get post 区别,并发限制
传输数据,展开计算机网络 5 层/7 层模型,五层:http -> tcp/ip -> ip -> data frames -> 物理介质
服务器收到请求,负载均衡,tomcat 容器,后端统一拦截过滤
展开 http 报文,实体,http 1.0, 1,1 2之间的区别,gzip,长连接/短连接,展开 cookie 及优化,多子域名拆分等
展开 https 中 SSL/TLS 链接步骤
展开 http 缓存,强缓存,协商缓存,from memory/disk cache等
DOM 树的构建过程,bytes -> characters -> tokens -> nodes -> DOM
css rule tree: bytes -> characters -> tokens -> nodes -> CSSOM
renderTree 的构建,不可见元素,特殊元素等。
渲染:compute css -> construct frames -> layout -> paint
展开 reflow , repaint 已经对应优化方法
绘制中的简单图层与复合图层,开启硬件加速就是把对应节点丢到复合图层
css 盒模型,BFC,IFC
静态资源外链 css,js(defer, async),img
展开 loaded 和 domContentLoaded
JS 解释阶段: token -> AST -> bytecode -> machine code 然后扯到 JIT
JS 预处理阶段,变量提升,分号补全等。
JS 执行阶段,EC stack,EC,VO,AO,作用域链, this,原型,继承(组合寄生式继承,es6 继承),JS 事件循环,micortask,marcortask等
JS GC -> v8 GC

https://github.com/Advanced-Frontend/Daily-Interview-Question
https://muyiy.cn/question/
https://blog.csdn.net/liudianjia/article/details/104805503
https://blog.colafornia.me/post/2020/2020-interviews/

猿辅导

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

JSPromise

const p = fetch(/*…*/);

p.then(f1).catch(f2).then(f3); // p failed

() => {} vs function () {}

const obj = {‏‎ ‎

f1:‏‎ ‎() => console.log(this),

f2‏‎ ‎() { console.log(this) },

};

obj.f1() // {}

obj.f2() // obj

new obj.f1() // 报错
new obj.f2() // f1

<A>

<B />

</A>

a.created
b.created
a.mounted
b.mounted

Node { value: number; children: Node[] }

2 => 2

6, 3, 5 => 6+3+5=14

1; 2, 3, 4; 7, 8 => 1+2+3+4+7+8=25

// 告诉我多叉树每一层的和 [2, 14, 25]

function layerSum(root:Node) {
}


Vue

  1. vue双向绑定原理 -> angular与vue双向绑定的区别 -> 性能对比
  2. 讲讲虚拟Dom -> patch
  3. v-for key
  4. 数组或者对象变化检测问题与原因,一般要聊vue对数组做了劫持
  5. 组件生命周期,父子组件生命周期
  6. 路由实现原理,以及路由钩子相关内容
  7. 计算属性和方法,计算属性和watch区别
  8. nextTick原理
  9. mixin的钩子顺序
  10. 3.0有哪些变化

Js

  1. es6用过哪些? -> let/const promise await class module 很常问
  2. 继承的实现方法 -> es5继承和class区别
  3. 判断一个变量是不是数组有几种方法?isArray, toString,还有通过原型的构造函数等方法
  4. 什么是闭包,闭包的应用
  5. event loop
  6. for > forEach > map 区别,性能,注意参数
  7. this的考察,一般是给一段代码看输出然后让你详细讲讲this

webpack

  1. webpack原理
  2. loader,plugin作用,原理,区别,你有没有写过?
  3. 多页应用怎么配
  4. 你知道哪些loader/plugin,然后会问你他的作用是什么?例如css-loader,url-loader,我遇到一个变态问我postcss-loader,css-loader,style-loader,url-loader分别具体做了什么……
  5. publicPath 和 path的区别
  6. 热更新原理
  7. webpack优化/懒加载/分包设计

浏览器与网络

  1. 跨域问题
  2. 浏览器缓存,Cache-Control与expires区别,Cache-Control有哪些属性, 如何利用浏览器缓存?
  3. 输入一个url发生了什么,准备的详细一点,这里还会引出js的三种加载方式,还可能问每个阶段的优化
  4. http状态码
  5. https与http区别,https的混合加密,非对称加密与对称加密的过程, 非对称加密与对称加密算法性能
  6. cookie,session的区别,cookie有哪些属性,这里可以聊聊sameSite,httpOnly防xss攻击
  7. http请求有哪些头部信息?响应有哪些头部信息?Content-Type有哪些类型?
  8. xss,csrf是什么?怎么预防?
  9. http2.0 与 1.x的区别?
  10. CDN的特点, 分布式节点,回源, 缓存,cdn静态资源定期推送

css

  1. flex布局
  2. 水平垂直居中的几种方法
  3. 三栏/两栏布局
  4. 层叠上下文
  5. em, rem, vw 和vh, 移动端响应式布局方案
  6. 盒子模型
  7. css权重
  8. 实现三角形,梯形
  9. 动画

代码

  1. 二分查找
  2. 乱序算法
  3. 实现new, instanceOf,promise ,promise all啥的
  4. 两个有序数组合并
  5. 两数之和等于n
  6. 数组最大和
  7. 最大子串长度
  8. reduce用法, 用reduce实现map
  9. 排序 不太直接让你写排序算法,而是会做个结合题,给表格排序之类的,会和dom,css结合
  10. 实现深拷贝
  11. 实现new, instanceOf
  12. 实现并发限制,异步最多4个并发
  13. 实现延迟n秒重试,最大重试次数t, attempt(fn, times, delay)
  14. 实现LazyMan

// LazyMan(“Hank”);
// => Hi! This is Hank!

// LazyMan(“Hank”).sleep(2).eat(‘dinner’);
// => Hi! This is Hank!
// 等待10秒
// => Wake up after 10
// => Eat dinner.

// LazyMan(“Hank”).eat(‘dinner’).eat(‘supper’);
// => Hi! This is Hank!
// => Eat dinner.
// => Eat supper.

// LazyMan(“Hank”).sleepFirst(2).eat(‘supper’);
// 等待5秒
// => Hi! This is Hank!
// => Eat supper.