FrankKai

### webpack 常用命令 - webpack --profile 这个命令可以输出编译每一阶段的时间损耗。 - factory 收集模块元数据时间。（例如，解析文件时间） - building 构建模块时间。（例如，loader和解析） - dependencies 识别并连接到模块依赖的时间。 - webpack --progress 百分比式打印编译进度。

### webpack 疑问汇总 - v4中的mode是什么？ webpack根据环境(development，production)开启内部的optimization，提升性能。 - resolve中的extentions是什么意思？ 引入文件无需增加后缀名。import Foo from './foo.js' -> import Foo from './foo'; ```js webpack解析里的扩展配置: resolve: { extensions: ['.wasm', '.js', '.vue', '.json'] } ``` 详细资料可以看这里：https://webpack.js.org/configuration/resolve/#resolveextensions -...

> ExtractTextPlugin是抽离css的吧 是的，2年前的理解有误。 已经改过来了

### 浅谈Chrome架构 #### 浏览器可以是哪种架构？ 浏览器本质上也是一个软件，它运行于操作系统之上，一般来说会在特定的一个端口开启一个进程去运行这个软件，开启进程之后，计算机为这个进程分配CPU资源、运行时内存，磁盘空间以及网络资源等等，通常会为其指定一个PID来代表它。 先来看看我的机器上运行的**微信和Chrome的进程详情**： |软件|CPU(%)|线程|PID|内存|端口| |--|--|--|--|--|--| |微信|0.1|46|587|555MB|124301| |Chrome|7.9|48|481|603MB|1487| 如果自己设计一个浏览器，浏览器可以是那种架构呢？ - 单进程架构（线程间通信） - 多进程架构（进程间IPC通信） 如果**浏览器单进程架构的话，需要在一个进程内做到网络、调度、UI、存储、GPU、设备、渲染、插件等等任务**，通常来说可以为每个任务开启一个线程，形成单进程多线程的浏览器架构。 但是由于这些功能的日益复杂，例如将网络，存储，UI放在一个线程中的话，执行效率和性能越来越地下，**不能再向下拆分出类似“线程”的子空间**。 因此，**为了逐渐强化浏览器的功能，于是产生了多进程架构的浏览器，可以将网络、调度、UI、存储、GPU、设备、渲染、插件等等任务分配给多个单独的进程，在每一个单独的进程内，又可以拆分出多个子线程，极大程度地强化了浏览器。** #### 如何理解Chrome的多进程架构？ Chrome作为浏览器届里的一哥，他也是多进程IPC架构的。  Chrome多进程架构主要包括以下4个进程： - Browser进程（负责地址栏、书签栏、前进后退、网络请求、文件访问等） - Renderer进程（**负责一个Tab内所有和网页渲染有关的所有事情，是最核心的进程**） - GPU进程（负责GPU相关的任务） -...

### 浅谈单线程js #### js引擎图 应用程序（实现） | 方言和最后版本 | ECMAScript版本 -- | -- | -- Google Chrome，V8引擎 | JavaScript | ECMA-262，版本6 Mozilla Firefox，Gecko排版引擎，SpiderMonkey和Rhino | JavaScript 1.8.5 | ECMA-262，版本6 Safari，Nitro引擎 | JavaScript...

### 事件循环 #### 什么是事件循环？ 事件循环英文名叫做Event Loop，是一个在前端届老生常谈的话题。 我也简单说一下我对事件循环的认识： 事件循环可以拆为“事件”+“循环”。 先来聊聊“事件”： 如果你有一定的前端开发经验，对于下面的“事件”一定不陌生： - click、mouseover等等交互事件 - 事件冒泡、事件捕获、事件委托等等 - addEventListener、removeEventListener() - CustomEvent（自定义事件实现自定义交互） - EventEmitter、EventBus（on，emit，once，off，这种东西经常出面试题） - 第三方库的事件系统 有事件，就有**事件处理器**：在事件处理器中，我们会应对这个事件做一些特殊操作。 那么浏览器怎么知道有事件发生了呢？怎么知道用户对某个button做了一次click呢？ 如果我们的主线程只是静态的，没有循环的话，可以用js伪代码将其表述为： ```js function mainThread() { console.log("Hello...

### 宏任务和微任务 - 哪些属于宏任务？ - 哪些属于微任务？ - 事件循环，消息队列与宏任务、微任务之间的关系是什么？ - 微任务添加和执行流程示意图 #### 哪些属于宏任务？ - setTimeout - setInterval - setImmediate - requestAnimationFrame - I/O - UI渲染 #### 哪些属于微任务？ - Promise - MutationObserver...

### 浏览器页面循环系统原理图 以下所有图均来自[极客时间《《浏览器工作原理与实践》- 浏览器中的页面循环系统》](https://time.geekbang.org/column/article/132931)，可以帮助理解消息队列，事件循环，宏任务和微任务。 - 消息队列和事件循环 - setTimeout - XMLHttpRequest - 宏任务 #### 消息队列和事件循环 线程的一次执行  在线程中引入事件循环  渲染进程线程之间发送任务   线程模型：队列 + 循环  跨进程发送消息  单个任务执行时间过久  ####...

### 参考资料 - https://www.infoq.cn/article/CS9-WZQlNR5h05HHDo1b - https://developers.google.com/web/updates/2018/09/inside-browser-part3 - https://juejin.im/post/5a7bf0acf265da4e9449a4b1 - https://time.geekbang.org/column/article/132931 - https://segmentfault.com/a/1190000012925872 - https://zh.wikipedia.org/wiki/JavaScript%E5%BC%95%E6%93%8E 如果文中有不对的地方，欢迎指正和交流~

### 执行表现 - 如果此时this.a = 0，foo()如何计算？ - 如果此时this.b = 2，foo()如何计算？ - 如果a的初始值为-1，执行this.a = 1，foo()如何计算？ #### 如果此时this.a = 0，foo()如何计算？ foo()的返回值会从this.a变为this.b+this.c，2。 vue会重新执行一遍evaluate，得到返回值this.b+this.c。 #### 如果此时this.b = 2，foo()如何计算？ foo()的返回值仍旧为this.a，1。 vue会跳过evaluate的阶段，直接得到返回值this.a。 #### 如果a的初始值为-1，执行this.a = 1，foo()如何计算？...