前端面试题整理（性能优化）

1. 渲染顺序优化

• CSS样式表置于头部：CSS会一边加载一边渲染，确保页面在加载过程中逐步呈现样式，避免“白屏”现象。
• JS脚本置于尾部：JS在未加载完成之前会阻塞渲染，因此将其放在HTML尾部，可以确保HTML和CSS先加载完成，再进行JS执行。
• 使用外部样式表和脚本：优先加载出HTML结构，提高页面初始渲染速度。
• 关键JS、CSS代码内嵌：对于必要的、影响页面布局的关键JS和CSS代码，可以内嵌在HTML中，如rem动态设置。
• 避免使用iFrame：iFrame会增加页面加载时间和复杂度，尽量避免使用。
• 使用骨架屏：在内容加载前显示骨架屏，提升用户体验。

1. 加载优化

• 避免使用css的@import：@import会增加额外的HTTP请求，且会阻塞页面的渲染，应尽量避免。
• 避免使用通配符：通配符选择器会匹配所有元素，降低CSS解析效率。
• 避免使用!important：滥用!important会降低CSS的可维护性和优先级判断效率。
• 优化css reset：根据项目需求，避免使用过多的CSS reset样式。
• 避免使用css表达式：CSS表达式会增加页面计算负担，影响性能。

2. 动画优化

• 使用transform开启图形加速：transform等CSS3属性可以触发硬件加速，提高动画性能。
• 用translate取代left：translate不会触发页面重排，性能优于left属性。

3. 选择器优化

• 选择器嵌套不超过三层：嵌套过深的选择器会增加CSS解析时间。
• id选择器不嵌套：id选择器具有唯一性，嵌套使用会增加不必要的复杂性。

4. 体积优化

• 提取公共CSS：将多个页面中共同的CSS样式提取出来，减少重复代码，降低文件体积。

1. 运行速度优化

• 使用原生方法：原生方法通常比库方法更高效，如果没有兼容性问题，尽量使用原生方法。
• 考虑使用polyfill：根据兼容浏览器的最低版本，选择是否使用polyfill来补充缺失的功能。
• 优化switch语句：将case语句按照最可能到最不可能的顺序组织，提高匹配效率。
• 使用位运算：位运算操作比布尔运算和算数运算更快，适用于数字运算场景。
• 巧用布尔运算符：使用||和&&可以减少执行代码语句，提高运行效率。
• 字符串拼接优化：使用加号拼接字符串是最快的，其次是String()、.toString()、new String()。
• 定时器优化：使用setTimeout取代setInterval，避免setInterval一直占用内存。
• 动画优化：使用requestAnimationFrame取代setTimeout和setInterval，实现更平滑的动画效果。

2. 变量优化

• 避免全局查找：将需要访问的属性用变量保存，减少全局查找次数。
• 使用变量代替对象属性和数组元素：直接访问变量比通过对象属性和数组元素访问更快。
• 冻结对象：对于包含大量数据而不需要操作的对象，可以使用Object.freeze冻结对象，加快运行速度。

3. 减少无用操作

• 使用节流、防抖：对于频繁触发的事件，使用节流和防抖技术减少执行次数。
• 使用事件委托：通过事件委托减少大量事件的绑定，提高性能。
• 使用Fragment：若需要对DOM进行大量操作，可以使用DocumentFragment减少操作次数。

4. 减少未使用代码

• tree-shaking：通过构建工具（如Webpack）进行tree-shaking，删减未使用的代码。

5. 算法优化

• 添加key值：在React等框架中，添加key值可以最大效益地使用虚拟DOM，减少Diff时间。
• 使用benchmark测试：使用benchmark测试不同算法的性能，选择最优算法。

1. 请求数量优化

• 限制请求数量：每个网站最多允许同时6个请求，可以考虑将资源分类部署，减少并发请求数量。

2. 请求速度优化

• 使用CDN：CDN可以加速资源的请求速度，提高页面加载速度。

3. 加载时间分配

• 核心资源预加载：对于页面核心资源，如关键CSS和JS文件，进行预加载。
• 大体积资源按需加载：使用Webpack等工具进行代码拆分，实现大体积资源的按需加载。

4. 减少加载体积

• 压缩图片：使用图片压缩工具减少图片体积。
• 压缩HTML、CSS、JS代码：通过构建工具（如Gulp、Webpack）进行代码压缩。
• 开启网络压缩：如GZIP等压缩技术可以减少传输数据量。

5. 减少加载次数

• 制作精灵图：将多个小图片合并成一张精灵图，减少HTTP请求次数。
• base64编码：将小图片转换为base64字符串，直接嵌入CSS或HTML中。
• 使用浏览器缓存：利用浏览器缓存机制，减少重复资源的加载。
• 使用前端缓存：如LocalStorage、Cookie、SessionStorage等，存储不常变的数据。
• 减少重定向请求：避免不必要的重定向请求，如nginx反向代理的重定向。
• 避免使用服务端字体：服务端字体会增加HTTP请求次数和加载时间，尽量避免使用。