2024年深度探秘web前端性能优化，2024年最新最新大厂前端社招面试经验汇总

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

比如：

1.while 循环快还是 for 循环快？

2.|0 是不是比 Math.floor 性能好？

3.if else 与三元运算符哪个更快？

很多人会认为以上三个问题就是性能优化的范畴了，会去纠结这些问题。然而实际上，这三个问题与性能优化毫无关系，不过是几个执行效率的问题罢了，纠结也无益。

3.什么才是前端的性能优化

总结来说，就是这三个方面

1.页面加载性能（加载的时间）

2.动画与操作性能（是否流畅无卡顿）

3.内存、电量消耗（内存占用，耗电量）

针对以上方面做性能优化

---

1.页面加载性能（加载的时间）

a.减少请求数

(1) js,css,打包到html，并为一个请求

(2) 精灵图，多个小图并为一个图片，只请求一次

(3) 小图片用字体图标代替，或者使用data-url

(4) js控制图片懒加载，异步加载，页面初始化的时候避免一次请求多张图片

b.减少传输体积

(1) js库存放在静态cdn上，项目执行的时候，一个链接拿过来就行

(2) 压缩策略，大图压缩(tinypng)，代码压缩(webpack,Gzip)

(3) 优雅降级，根据用户网络状况以及机型控制图片清晰度

(4) 清晰度低的图片，锐化处理，提高用户体验

c.缓存策略

(1)  图片缓存

(2) 数据缓存，常用的就是地址选项，省市区，不用重复请求，缓存至用户本地即可

2.动画与操作性能

a.避免操作过多dom元素

可采用数据驱动，操作虚拟dom，通过diff算法，最后比较转换成真实dom

b.避免去操作元素的top，left等位置的值

如果去改变元素的top与left等值，会导致dom回流，可以采用dom重绘

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。