在前端开发中，可以采用哪些常见的优化策略和技巧来提升网页的加载性能与渲染性能？

回答思路

1. 【回答框架 1】加载性能优化的核心是减少资源传输量和请求数。常见手段包括静态资源压缩与合并、使用HTTP/2多路复用、按需加载与代码分割、利用浏览器缓存（强缓存与协商缓存）以及CDN分发。图片可选用WebP等现代格式，并按需进行懒加载。
2. 【回答框架 2】渲染性能优化的核心是减少关键渲染路径的阻塞与重排重绘。将CSS放在头部并避免内联脚本阻塞，JavaScript使用async或defer异步加载；减少DOM深度与节点数量，批量修改样式或使用现代框架的虚拟DOM；对高频事件（如滚动、输入）进行节流或防抖。
3. 【回答框架 3】可借助性能工具评估效果，例如Lighthouse可生成性能报告，Performance面板可分析主线程任务和长任务，Network面板用于查看资源加载瀑布图。这些工具能定位瓶颈，并验证优化是否有效。
4. 【回答框架 4】优化需要结合实际业务场景权衡，例如代码分割虽减少首屏负担，但增加构建复杂度；图片压缩可能带来视觉质量损失。建议设定性能预算，持续监控并回归，避免因功能迭代引入性能退化。
5. 【关键点 1】加载优化：压缩合并、缓存、CDN、懒加载。
6. 【关键点 2】渲染优化：CSS放头部、JS异步、减少重排。
7. 【关键点 3】工具：Lighthouse、Performance面板。
8. 【关键点 4】权衡：构建复杂度与体验、质量与加载速度。
9. 【关键点 5】持续监控与性能预算。
10. 【易错点 1】误以为减少请求数总是有利，过度合并可能破坏缓存复用。
11. 【易错点 2】忽略渲染阻塞：内联脚本或未异步的外部JS会阻塞关键渲染路径。
12. 【易错点 3】只关注加载时间而忽视长任务和帧率，导致交互卡顿。