「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。
1. JS开销在哪里
2. 相同大小的资源的时间开销
- js 的时间开销要远大于 其他资源
- js 除了需要下载外，编译解析执行也要花费时间
- js 会阻塞整个页面，导致慢
如上图 都是170KB的资源，
| 类型 | 开销 | 总计 |
|---|---|---|
| js | 编译/解析 大约2s， 执行 大约1.5s | 3.5s |
| 图片 | 解码0.064秒，绘制 总耗时 0.028s | 0.092s |
3. 对 网站进行简单的数据分析
以 electronics-vr-gaming-dcode.myallvalue.com/ 为例 在Main（1） 主线程 找到 解析脚本（2）的任务 的
Summary找到我们主要解析的JS
然后我们看它具体做了哪些事情，耗时多久
我们是不是可以对一些第三方的库进行优化下，比如lodash、moment 等
4. 解决方案
- code splitting 代码拆分
- 需要的时候在进行加载，不加载无用的代码
- 按需加载 tree shaking 代码减重
- 打的包里不包含不需要的东西
4.1 JavaScript 优化：
加载：减少传输的体积，进行压缩
4.2 解析编译：
- Code splitting 代码拆分，按需加载
- Tree shaking 代码减重
4.3 减少主线程工作量：
-
避免长任务
- 任务越长，占据执行阻塞的时间就越久
- 这个文章# 常用性能测量APIs（关键时间节点、观察长任务、网络状态）有讲对长任务的观察
-
避免超过 1kb 的行间脚本
- （浏览器无法对行间脚本进行有效的优化，减少行间脚本的使用）
-
使用 rAF 和 rIC 进行时间调度
4.4 Progressive Bootstrapping 渐进式启动
可见不可交互 vs 最小可交互资源
- 减少首屏的资源量
5. Loading is a Journey is it happening？
虽然未来网速会越来越快，但是总会有网络不好的情况存在 Loading is a Journey is it happening？
- First Contentful Paint 尽快告诉用户访问成功
- is it useful？First Meaningful Paint 这个网站是否是有用的
- is it usable？time to interactive 什么时候可以交互
