前端主要是交互，那么其优化是为了响应更快，展示更快
1.做（三省）：懒
能不能不做？
不变的：减少渲染+缓存静态资源；
如果要做，能不能拖延？
紧急缓慢/万一不用做了
增改的：
延迟非必要+预处理必要；
拖不下去的时候，能不能少做？
少做：压缩体积，多路复用
2.能否更快更好
SEO搜索引擎优化_搜索引擎seo中keywords-CSDN博客
3.预防
目录
使用 CDN（内容分发网络）：托管全球分布的 CDN 服务器
React：lazy懒加载、Suspense组件包裹异步组件
不变：不做
静态资源
React.memo
缓存
使用 CDN（内容分发网络）：托管全球分布的 CDN 服务器
就近访问： 当用户请求访问某个静态资源时，CDN 会自动将用户请求路由到离用户最近的边缘服务器。这样可以减少网络延迟，提高资源的加载速度。
负载均衡： CDN 使用负载均衡算法确保各个边缘服务器之间的负载均衡，避免某个服务器过载，提高整体性能。
拖延
类似“即时编译”（Just-In-Time Compilation, JIT）：
广泛应用于现代解释型语言，
如 Java 的 JVM（Java Virtual Machine）和 JavaScript 的 V8 引擎。
JIT 编译器会将经常执行的代码编译，提高程序运行的性能。
组件动态导入import
React：lazy懒加载、Suspense组件包裹异步组件
返回一个懒加载组件包装器，内部包含一个动态
import()函数。当应用程序首次渲染时，懒加载组件包装器会被渲染为一个空占位符，而不会立即加载真正的组件代码。
当应用程序运行到需要渲染懒加载组件的代码时，动态
import()函数才会被触发，开始异步加载实际的组件代码。这个过程是非阻塞的，所以应用程序可以继续进行其他操作。一旦组件代码加载完成，
React.lazy会自动渲染实际的组件内容，替换之前的占位符。
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
OtherComponent只有在其首次需要渲染时才会被加载，组件加载期间，用户将看到 "Loading..." 消息
()=>import（）：路由懒加载
通过import()的方式导入，webpack在打包时会单独将它列为一个块，
当符合判断条件时才会尝试去加载这个文件。
const RouterView = () => import('./components/RouterView.vue');
const router = new VueRouter({
routes: [
{ path: '/path', component: RouterView }
]
});