动态加载

简介

ES2020提案引入import()函数，支持动态加载模块。

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

举例

setTimeout(() => {
  import("./format.js").then((res) => {
    console.log(res);
  });
}, 1000);

上面的例子中，定时器一秒后，才会请求format.js并解析执行，利用这个特性，可以将优先级较低的内容使用动态加载，这样当使用webpack之类的打包器的时候，可以将异步加载的代码抽离出来，减少主bundle包的大小，优化首屏加载速度。

应用

在spa应用里面，可以做路由懒加载，可以提高首屏速度。因为spa应用里面只有一个页面，根据监听地址栏的变化而改变页面，但是一般情况来说我们不需要在首次加载应用就加载所有的路由数据，因为即使加载了所有路由的数据，如果我们不切换路由的话，其实是看不到的，反而因为加载了所有路由数据导致首屏加载速度变慢了。因此只需要加载我们当前路由的数据，然后根据切换不同路由加载不同路由的数据，通过按需加载的方式加载路由数据，可以提高首屏的加载速度。
其他的各种异步加载，减少主包的大小。

缺点

请求变多（原本一个js请求所有数据，使用动态加载后会将一个js拆分成几个）。
如果是使用类似nuxt或者nest之类的服务端渲染框架，使用动态加载会导致即使有数据，但是由于使用了动态加载，会导致最终打包出来的静态文件没有那部分动态加载的数据，会影响seo。

网络优化

减少http请求

一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。

如果一个请求获取的数据很小，那么真正下载数据的时间对于http请求过程中的所耗费的总时间来说，占比是很小的。因此可以将多个小的请求合并一个大的请求，从根本上减少http请求，这样就会减少http耗时。

https://juejin.cn/post/6892994632968306702#heading-0

使用http2

解析更快。
多路复用，多个请求公用一个tcp，更高的并发。
首部压缩。
优先级。
流量控制。
服务器推送。

CDN加载静态资源

cdn无需多说。

使用服务端渲染

客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。

优点：首屏渲染快，SEO 好。
缺点：配置麻烦，增加了服务器的计算压力。

图片优化

图片懒加载

手动计算实现

getBoundingClientRect实现

IntersectionObserver实现

使用webp格式图片

Iphone-IOS系统14以下不兼容webp

图片压缩

https://tinypng.com

减少重排重绘

图片预留宽高。
使用文档碎片（DocumentFragement）。

合并css操作。

var box = document.querySelector('.box');
//下面每一次操作，在浏览器没有优化的情况下，都会进行一次重排
box.style.width = '100px';
box.style.height = '100px';
box.style.margin = 10px;
box.style.padding = "5px";

//只进行一次重排：
//box.style.cssText = 'width: 100px; height: 100px; margin: 10px; padding: 5px;';

//或者直接修改class类名
.mybox {
  width: 100px;
  height: 100;
  margin: 30px;
  padding: 10px;
}
box.className = 'mybox '

使用 transform 和 opacity 属性更改来实现动画，在 CSS 中，transforms 和 opacity 这两个属性更改不会触发重排与重绘。
https://developers.google.com/speed/docs/insights/browser-reflow?hl=zh-cn

事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

前端性能优化