无论在工作中还是面试中，会遇到下面的相关的问题：
- 首屏加载白屏如何进行优化？
- 页面加载时间很长怎么处理？
- 站点内图片怎么优化？
- 页面操作卡顿怎么办？
- 页面闪烁应该怎么处理？
上述相关问题总结起来就是两个字：性能。一般来说，前端性能问题主要受到三个方面的影响：资源加载过慢、JavaScript执行阻塞、渲染延迟。那么，就可以从这三方面进行优化。
一、优化资源加载
1.减少资源体积
- 代码压缩
- Tree Shaking
- 图片优化
2.按需加载
- 代码分割（Code Splitting）
- 第三方库按需加载
3.使用 CDN 加速
4.预加载关键资源
5.使用 HTTP/2
二、优化 JavaScript 执行
1.减少主线程阻塞
- 异步加载脚本：使用 async 或 defer 属性加载非关键 JavaScript。
- Web Workers：将复杂计算任务放到 Web Workers 中执行，避免阻塞主线程。
2 优化首屏渲染逻辑
- SSR（服务端渲染）：使用 Next.js、Nuxt.js 等框架实现服务端渲染，减少首屏白屏时间。
- CSR + Skeleton Screen：在客户端渲染（CSR）中，使用骨架屏（Skeleton Screen）提升用户体验。
三、优化渲染
1.优化 CSS
- 内联关键 CSS
- 避免 CSS 阻塞：使用 预加载 CSS 文件
- 减少 CSS 复杂度：避免深层嵌套选择器，减少样式计算时间。
2.优化 HTML
- 减少 DOM 数量
- 使用语义化标签
- 避免同步布局
上述列出的只是部分常见优化手段，围绕三个大点进行细化。
总结
前端性能就三个关键点： 资源加载， 脚本执行， 页面渲染。
补充：怎么进行站点内的图片性能优化?
- 选择合适的图片格式
- 压缩图片
- 使用响应式图片：使用 和
的 srcset 属性，根据设备屏幕尺寸加载不同大小的图片。
- 懒加载图片：使用 loading="lazy" 属性延迟加载图片，直到用户滚动到它们附近。
- 使用CDN加速
- 启用浏览器缓存
- 使用图片精灵（Sprite）
- 优化CSS和JavaScript
