前端性能优化大厂的考核内容。
如果我现在想要面试大厂前端岗需要学习一些什么内容，到达什么程度才可以够到(P8）阿里这个层次。
一、性能指标与评测标准
关键用户体验指标
- LCP（最大内容渲染时间） ：衡量首屏核心内容加载速度（如Banner、标题），优化方案：资源预加载、图片压缩、SSR 。
- FID（首次输入延迟） ：用户首次交互（点击/输入）到响应的延迟，需控制在<100ms。优化：代码分割、异步加载非关键JS 。
- CLS（累积布局偏移） ：避免动态插入内容导致页面跳动。优化：为图片/广告位预留空间尺寸。
性能评测工具
- Lighthouse：生成性能报告并给出优化建议（如TTI、FCP）。
- Chrome DevTools：分析网络请求瀑布图、内存泄漏、渲染性能（Performance面板）。
二、核心优化策略
-
资源加载优化
- 减少HTTP请求：合并CSS/JS文件、雪碧图（CSS Sprites）、内联关键CSS 。
- 异步加载：非关键资源用
async/defer加载脚本，动态import()按需加载组件。 - CDN加速：静态资源分发至边缘节点，减少传输延迟
-
渲染性能优化
-
减少重排（Reflow）与重绘（Repaint） ：
- 批量DOM操作（使用
DocumentFragment） - 使用
transform/opacity触发GPU加速（避免布局变更）。
- 批量DOM操作（使用
-
懒加载（Lazy Loading） ：图片/组件进入视口再加载（Intersection Observer API）。
-
-
代码与构建优化
- Tree Shaking：移除未使用代码（Webpack/Rollup支持）。
- 代码分割（Code Splitting） ：路由级/组件级分割，加速首屏加载 。
- 压缩与Gzip：JS/CSS文件压缩，服务端开启Gzip（体积减少70%）。
三、缓存技术与工程化优化
-
缓存策略
-
HTTP缓存：
Cache-Control: max-age=31536000（长缓存静态资源）+ 文件名Hash 。 -
本地存储：
localStorage：存储用户配置等轻量数据 。- IndexedDB：缓存结构化数据（如聊天记录）。
-
Service Worker：实现离线缓存（PWA核心）。
-
-
工程化实践
-
SSR/SSG：Next.js/Nuxt.js服务端渲染，提升首屏速度与SEO 。
-
Vite优化配置：CSS代码分割 + 异步加载（减少首屏阻塞）：
// vite.config.js export default defineConfig({ build: { cssCodeSplit: true, // 开启CSS分割 rollupOptions: { output: { manualChunks: (id) => id.includes('node_modules') ? 'vendor' : null } } } });
-
四、框架级优化
-
虚拟DOM与Diff算法
- 原理：通过JS对象模拟DOM树，Diff算法计算最小变更，减少真实DOM操作 。
- 面试考点：React/Vue的Diff策略（同层比较、Key的作用）。
-
状态管理与副作用控制
- 避免滥用全局状态，按组件粒度管理数据（如Recoil、Pinia）。
- 及时销毁定时器/事件监听，防止内存泄漏
五、性能监控与进阶场景
-
性能监控体系
- 关键指标上报：通过
Performance API采集FCP/FID等数据 。 - 异常监控：Sentry捕获运行时错误，结合SourceMap定位源码 。
- 关键指标上报：通过
-
复杂场景优化
- 长列表渲染：虚拟滚动（React Virtualized/Vue Virtual Scroller）。
- 大文件上传：分片上传 + 断点续传（Web Worker处理计算）
大厂面试更关注原理理解与落地经验，建议结合项目说明优化前后的量化指标（如LCP从3s→1s）。同时关注新兴趋势：如Rust构建工具（Turbopack）对性能的影响
面试题区域
1.script标签放在header里和放在body底部里有什么区别？
2.前端性能优化指标有哪些？怎么进行性能检测？
3.SPA（单页应用）首屏加载速度慢怎么解决？
4.如果使用CSS提高页面性能？
5.怎么进行站点内的图片性能优化？
6.虚拟DOM一定更快吗?
7.有些框架不用虚拟dom，但是他们的性能也不错是为什么？
8.如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
9.讲一下png8、png16、png32的区别，并简单讲讲 png的压缩原理
10.页面加载的过程中，JS文件是不是一定会阻塞DOM和CSSOM的构...
11.React.memo()和useMemo()的用法是什么，有哪些区别?
12.导致页面加载白屏时间长的原因有哪些，怎么进行优化？
13.如果一个列表有100000个数据，这个该怎么进行展示？
14.DNS预解析是什么？怎么实现？
15.在React中可以做哪些性能优化?
16.浏览器为什么要请求并发数限制？
17.如何确定页面的可用性时间，什么是PerformanceAPI?
18.谈谈对window.requestAnimationFrame的理解
19.css加载会造成阻塞吗？
20.什么是内存泄漏？什么原因会导致呢？
21.如何用webpack来优化前端性能
22.说说常规的前端性能优化手段
23.什么是CSS Sprites?
24.CSS优化、提高性能的方法有哪些？
25.script标签中，async和defer两个属性有什么用途和区别?
1.script标签放在header里和放在body底部里有什么区别?
参考答案: 将script标签放在head和body底部，会对页面的加载和性能产生不同的影响： script标签放head部分
优点：
1.预加载：浏览器在渲染页面之前，会先下载和解析所有在head部分的脚本文件。这样可以确保脚本在页面加载过程中随时可以被调用。
2，全局可用性：一些脚本，特别是需要在页面一加载就运行的脚本，适合放head中。
缺点:
1．阻塞渲染：浏览器在遇到script标签时会暂停HTML的解析和渲染，直到脚本下载并执行完毕。这可能会导致页面加载变慢，尤其是当脚本文件较大或者需要从远程服务器下载时。
2.页面白屏时间延长：用户可能会看到页面在加载过程中有一段时间的白屏，直到脚本加载完成。 script标签放在body底部
优点：
1.非阻塞渲染：将script标签放在body底部意味着浏览器可以优先下载和渲染HTML内容，这样用户可以更快地看到页面内容。
2.更好的用户体验：用户不会因为等待脚本加载而长时间看到空白页面。页面内容会先显示出来，然后再执行脚本，这提高了页面的响应速度和用户体验。
缺点：
1.延迟脚本执行：如果某些脚本需要在页面加载之前运行（如某些初始化脚本），放在body底部可能会导致这些脚本运行延迟，影响功能。
现代优化技术
1.defer属性：在head部分使用script标签时,可以添加defer属性。这个属性会告诉浏览器异 步下载脚本，但在页面解析完成后再执行脚本。这样既可以保持脚本全局可用，又不会阻塞页面渲染。
2.async属性：async属性也用于异步加载脚本，但它会在脚本下载完成后立即执行，不考虑页面的解析进度。这对某些独立的、不会依赖于其他脚本或DOM结构的脚本很有用。
总结
head部分：适合需要立即执行的脚本，但可能阻塞页面渲染。 body底部：适合一般脚本，能提高页面加载性能和用户体验。 使用defer或async：。现代浏览器支持这些属性，可以同时兼顾性能和功能需求。
因为面试题复制出错，就先展示到这里，后面的面试题都有对应答案源码，可以点击这里，拿
