注：以下内容为随手笔记，属于暂未成形的文章，请勿参考

工程化

babel

Babel是一个将ECMAScript 2015+版本的代码转换成向下兼容JavaScript语法的编译器

运行原理

解析
- 词法分析，将字符串形式的代码转换成令牌（Token）流
- 语法分析，将令牌（Token）流转换成AST（抽象语法树）
转换，遍历AST，对各个节点进行添加、更新等操作
生成，将最终的AST转换成字符串形式的代码，同时创建和源码的映射

Babel只负责编译标准中新引入的语法，比如Class、ES Module等

它不会编译原生对象新引入的方法和API，比如Array.includes，Map，Set 等，这些需要通过Polyfill 来解决

webpack

webpack与grunt、gulp的不同

都是前端构建工具，但是构建的流程不同。

grunt、gulp需要将前端构建过程拆成一个个Task，并控制Task各自之间的调用顺序

webpack则基于入口，加载所需要的资源，然后用不同的Loader处理不同的文件

常见Loader

babel-loader：把 ES6 转换成 ES5 css-loader：加载 CSS，支持模块化、压缩、文件导入等特性 style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS image-loader：加载并且压缩图片文件

常见Plugin

uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码 define-plugin：定义环境变量

Loader和Plugin的不同

Loader让webpack打包非JavaScript文件

"插件"。Plugin可以扩展webpack的功能

webpack构建流程

初始化参数 从配置文件和Shell语句中读取与合并参数，得出最终的参数
开始编译 用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译
确定入口 根据配置中的entry找出所有的入口文件
编译模块 从入口文件出发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
完成模块编译 在经过第4步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
输出资源 根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
输出完成 在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

HMR原理

webpack在watch模式下检测文件的变化，重新编译打包。webpack-dev-server通过中间件webpack-dev-middleware根据webpack暴露的接口，监听到文件变化，将重新编译后的文件放到内存中。
webpack-dev-server通过 sockjs在浏览器端和服务端之间建立一个 websocket 长连接。传递打包阶段的hash值
HMR.runtime 接收到传递给他的新模块的hash值,JsonpMainTemplate.runtime向server端发送 Ajax 请求取得所有要更新的模块的 hash 值再次通过 jsonp 请求，获取到最新的模块代码
HotModulePlugin 将会对新旧模块进行对比，决定是否更新模块

利用webpack优化前端性能

压缩代码
--optimize-minimize删除死代码
提取公共代码

参考

性能优化

页面渲染

CSS对页面加载的影响

不会阻塞DOM的解析（DOM Tree和CSSOM并行），但会阻塞DOM渲染（Render Tree要等DOM Tree和CSSOM完成）
会阻塞JS的执行（JS会操作元素的样式和布局）

JS对页面加载的影响

阻塞DOM解析（同上，GUI渲染和JS引擎互斥）

async和defer

相同点：

HTML解析和JS脚本的加载是并行的

不同点：

defer，HTML解析和JS脚本加载都完成时，执行JS。然后触发DOMContentLoad事件
async，只要JS脚本加载完就会执行，会阻塞load事件

DOMContentLoaded和load

DOMContentLoaded事件触发时：仅当DOM解析完成后，不包括样式表，图片等资源
onload 事件触发时,页面上所有的 DOM,样式表,脚本,图片等资源已经加载完毕

重绘和回流

重绘：当节点需要更改外观而不会影响布局的，比如改变color

回流/重排：布局或者几何属性需要改变就称为回流。回流必定会发生重绘，重绘不一定会引发回流。

触发操作：

添加或者删除可见的DOM元素
元素尺寸改变
浏览器窗口尺寸改变
color
border-style
background
outline
visibility

减少重绘和回流：

使用 transform 替代 top
使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流
CSS 选择符从右往左匹配查找，避免节点层级过多
不要把节点的属性值放在一个循环里当成循环里的变量

图片懒加载

rAF

不使用框架实现单页应用

www.ruanyifeng.com/blog/2019/0… www.jianshu.com/p/d5cbd25b6… juejin.cn/post/684490…

单页应用首页白屏优化

服务端开启gzip压缩
图片、字体等放CDN
路由按需加载
图片懒加载

大文件切片上传

juejin.cn/post/684490…

代码分割

代码分割

【知识梳理】5.工程化和性能优化_4.22

工程化