性能优化

1. 用户感知优化 友好错误提示 friendly-errors-webpack-plugin 进度条 progress-bar-webpack-plugin 编译完成弹出通知 webpack-bui

1. 性能指标和优化目标 理解加载瀑布图 基于HAR存储与重建性能信息 速度指数(Speed Index) 重要测量指标 瀑布图 蓝色线为dom加载完成时间，红色线为页面所有声明资源加载完成时间 鼠标

1. JS开销和如何缩短解析时间 体积相同情况下，JS性能开销是远大于图片等文件的，如下图所示： JS要经过编译、解析、执行过程，而图片只需要解码与绘制 1.1 尽量减少主线程工作量 避免长任务 避免

1. 资源压缩与合并 为什么要压缩&合并？ 减少http请求数量 减少请求资源的大小 1.1 JavaScript 1. tree shaking tree shaking也是通过检测源码中不会被使用

浏览器打开页面过程： 如上图所示，我们来看看每一部分分别都做了什么： -- prompt for unload: 卸载旧页面，请求新页面 ---- navigationStart: 开始记时，开始处理

构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree；构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树

以下是对前端性能监控的部分见解以及部分项目源码，欢迎一起讨论、交流。 页面的性能怎么衡量？首先我们需要知道一个页面从开始输入网址回车到完全呈现中间都干了什么。下面是一张完整的图，来分析一下： 简单来说，任何在浏览器中执行超过 50 ms 的任务，都是 long task。 lo…