摘要

158 阅读2分钟

1.data为啥是一个函数? 我们应以的.vue文件实质上是一个类/class,在别的地方使用的时候相当于实例化,用对象就会共享,用函数返回就不会影响,在闭包之中

2.何时使用beforeDestory 1.解绑自定义事件 event.$off 2.清除定时器 3.解绑自定义的DOM事件,如window scroll等

3.action和mutation的区别 c912ba66313b00d423946975881e445.png

4.V8引擎和代码执行顺序

微信图片_20220526192420.png

微信图片_20220526192426.png

5.数组扁平化 微信图片_20220526192507.png

6.排序

d8e37f8ebf275cce4fa745b59d2131a.png

7.浏览器页面加载过程

3e07af4ae6605691a7689326f1315a7.png

8.文档流布局方式

62bd131f3eef020c96ca8e875cb77d1.png

9.提问 48a6d12300436294c3a8fa2a10b4406.png 解决方式:

b1ecf70a77c08eef8b1f490191b6b89.png

10.flex布局

d4a6f06def13f74ae87c30754ed183c.png

11.Grid布局

d1c3ddd88f456963e3724cf35285e05.png

12.prototype和_proto_

5111941b7b49257720698949400288c.png

13.JS引擎如何执行js代码

58e0dbb503db3419220b116d1638500.png

14.this指向

aa873501870c115d23cdb276ba80bb3.png

15.js编译阶段

377764770b7eeb274c3497dbcac61b4.png 16.在执行阶段,变量对象会被激活为活动对象

8bc296347bfcef0eec007e777e056f4.png js在执行过程中每进入一个不同的运行环境时都会创建一个相应的执行上下文

17.同步任务与函数调用栈

74b0967587c5ddb8ed7eed06b5bea53.png 18.异步任务与回调队列

0c37033b10cb4dd19b312f06aba05e5.png 19.浏览器的EventLoop

2a0494c53c424b7d35aee6b369324d1.png 2. fa6793664098b1c9653f06c7077bb14.png 4756a8e3e02b23205f4ce21556810b4.png 19e6cb140dc4202c21559ae9e99bf1b.png

59bff059a3e5604fa5b41278ddbbd47.png

20.Node.js中的Event Loop

5dccf9ea3d86888ee1e935c34868989.png

21.异步任务中宏任务和微任务

c5df15ed869a614e3ae20a44d695e86.png

938b279e38612f82397e80b7271f699.png

22.创建变量声明

8935bd993d839b1dbc890699372df9b.png

23.作用域

cce6da5060fcd8cc2b4cd3f1a3be4e5.png

24.作用域链

de1c19f8035c64570bf4f023655b56a.png

b7b7f99e618b50a4589c302d2f89ce9.png

25.页面的请求过程

236e987c3ff6d2a13b494db6226a997.png

f7a9120d9400002b544d86a919488b4.png 26.DNS解析

8fc03c20e00352e684516cc2754cd05.png

27.跨域解决方案

840ee012eb62418d3854ba5f22c5b62.png

7f85aa297aba9e9855dd470663dc10b.png 28.TCP连接

4486350272320fc24334843f70f6d63.png 29.网络请求

4e23b662ae87877298259ab955371ab.png 30.网络请求过程

e0c63ff0defb4286bb33b1ecad535ae.png 31.HTTP协议(通过HTTP协议,可以看出:请求是否成功/错误原因是哪些/请求是否使用了缓存/请求和相应数据是否符合预期)

0f54e72d2bdc8f53fbe3e1ceb23e44d.png 32.HTTP演变

569f381a30dfea1b014e6bbf8aa4cb2.png

04a38fcc3f134bbc8d6d62ba44344e2.png

a3988d776fceef820ef3e8cc8bb8aa5.png 33.HTTP Cookie

398dbf243367dba2738a5737c656999.png 34.web安全隐患

f04a9e4780ec3ab79e8b740b10a7c35.png 35.CSRF

69f6b110981f0385d9a88156496526c.png 辅助检验手段

5edca5a2a39dcbeb525408b8ce5e8c1.png 方法

0afa641288f6c9b741720eeb0c733ed.png 36.HTTP缓存

d46daa2e6d9d3622586c03584ddfa03.png 37.客户端服务端双向通信

60e0cf4afc6248e67a7bfd07f72d833.png 38.短轮询

4ab67c9abe8945439327641bf90ff84.png 39.长轮询

2546c483e72500fdf344e39550b75f0.png 40.Websoket通信连接

3bcb3ab52d025fe3ae88a9449c17279.png

013e6fdc529878e9084d10fc7c6c81c.png 41.双向通信总结

2a35d115d1150c7831a0e5f0f2899d2.png 42.浏览器的内部结构

434ffe79cc937f060c9e800bb4b3c40.png 43.Chrome多进程架构

d329f4269204ec025e8b38a9f49ab6a.png

c1b0e81f908fa01de6842af760433b9.png 44.浏览器中页面渲染全过程 1.解析(解析HTML/CSS/JavaScript代码) 2.布局(定位坐标和大小、是否换行;各种position/overflow/z-index等属性) 3.绘制(判断元素渲染层级顺序) 4.光栅化(将计算后的信息转换为屏幕上的像素)

45.注意点:

fe8bd1f5bc553db60cd842039a4f0ac.png

9506d459ac4135f8ff545e11502cac4.png

7aceec039b5cbd2051807bffb9cfa13.png

46.光栅化 现代浏览器采用合成的方式

8086a919f55ec0464a55fbf990a70a3.png

269b3b4555c1462a04601314e6ec75d.png