【不变，拖延，少做分类】前端性能优化-优快云博客

前端主要是交互，那么其优化是为了响应更快，展示更快

1.做（三省）：懒

能不能不做？

不变的：减少渲染+缓存静态资源；

如果要做，能不能拖延？

紧急缓慢/万一不用做了

增改的：

延迟非必要+预处理必要；

拖不下去的时候，能不能少做？

少做：压缩体积，多路复用

2.能否更快更好

SEO搜索引擎优化_搜索引擎seo中keywords-优快云博客

3.预防

使用 CDN（内容分发网络）：托管全球分布的 CDN 服务器

拖延

组件动态导入import

React：lazy懒加载、Suspense组件包裹异步组件

不变：不做

静态资源

React.memo

缓存

使用 CDN（内容分发网络）：托管全球分布的 CDN 服务器

就近访问： 当用户请求访问某个静态资源时，CDN 会自动将用户请求路由到离用户最近的边缘服务器。这样可以减少网络延迟，提高资源的加载速度。
负载均衡： CDN 使用负载均衡算法确保各个边缘服务器之间的负载均衡，避免某个服务器过载，提高整体性能。

https://wos3.xxxcdn.com.cn/xYcUtSrQpxFD/localmeetingpic/1714985929235-2ceb4eda6e5

wos3：代表存储服务的版本或节点。
xxxcdn.com.cn：CDN 加速域名，通过分发网络加速图片加载。

wos 通常是 Web Object Storage（Web 对象存储）的缩写，指的是云存储服务，存储静态资源，通过 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 }
  ]
});