前端优化
网络层面
请求过程优化
-
减少 HTTP 请求
-
使用 HTTP2
-
使用服务端渲染
客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。 服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。
优点：首屏渲染快，SEO 好。
缺点：配置麻烦，增加了服务器的计算压力。 -
静态资源使用 CDN
-
DNS 预解析 （采用DNS Prefetch 一种DNS 预解析技术）
<link rel="dns-prefetch" href="www.baidu.com" />
//只有部分浏览器支持
6.压缩 (采用Gzip压缩)
减少不必要的请求（浏览器缓存）
- 强缓存
- 协商缓存（对比缓存）
- CDN缓存
- 预加载
<link rel='prefetch' href='main.js'>
//只有部分浏览器支持
5. 预渲染
<link rel='prerender' href='http://www.a.com'>
//只有部分浏览器支持
6. 应用缓存(Cookie,Storage,Service Worker)
浏览器渲染层面优化
1. 优化资源加载
- CSS文件放在head中，先外链，后本页
- JS文件放在body底部，先外链，后本页
- 异步script标签 （defer: 异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似async: 异步加载，加载完成后立即执行）
2.减少重绘回流
避免使用层级较深的选择器，避免使用CSS表达式，元素适当地定义高度或最小高度，给图片设置尺寸,不要使用table布局，能够使用CSS实现的效果，尽量使用CSS而不使用JS实现
面试简单版回答
1. 加载性能（关键指标：FP/FCP/LCP）
- 资源压缩：通过Webpack的TerserPlugin压缩JS，CSSNano压缩CSS，ImageMin压缩图片
- 按需加载：路由级(React.lazy)和组件级动态导入，第三方库按需引入(babel-plugin-import)
- 预加载策略：
<link rel="preload">关键资源，prefetch非关键资源 - CDN+HTTP/2：静态资源走CDN，利用HTTP/2多路复用特性
2. 运行时性能（关键指标：FID/CLS）
- 虚拟列表：使用react-window处理万级数据列表，DOM节点恒定
- 防抖节流：滚动/输入等高频事件必须优化，如lodash的实现
- CSS优化：减少选择器复杂度，避免频繁重排（如使用transform代替top/left）
- Web Worker：将大数据计算/解析移出主线程
- 动画性能：优先使用CSS transform/opacity属性，复杂动画使用requestAnimationFrame
3. 缓存策略
- Service Worker：实现离线缓存(PWA)，workbox-webpack-plugin简化开发
- HTTP缓存：强缓存(Cache-Control: max-age)+协商缓存(ETag)组合策略
- 数据缓存：接口数据合理使用IndexedDB/localStorage缓存
