Web前端最全前端页面性能优化的几种方式(强烈推荐)，记一次字节跳动前端社招面试

最后

资料过多，篇幅有限

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

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

1、资源压缩合并，减少http请求

比如一些比较小的小于30k的图片可以直接使用base64来加载，这无疑可以减少很多http请求，图片转换成base64会比原来小三分之一左右，但是为什么要一些比较小的图片才转换呢，因为它转换为base64也是一串很长的字符串，当图片太大的时间，css文件将会很臃肿，这无疑也是增加了css的文件大小。

2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别

3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理

缓存是所有性能优化的方式中最重要的一步【重要】

有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。

4、使用CDN

浏览器第一次打开页面时，缓存是起不了作用的。这个时候，CDN就上场了。

5、DNS预解析

一、资源压缩合并，减少http请求

合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩

图片较多的页面也可以使用 lazyLoad 等技术进行优化。

精灵图等

二、非核心代码异步加载

异步加载的方式：（这里不说框架，只说原理）

动态脚本加载

defer

async

动态脚本加载

使用document.createElement创建一个script标签，即document.createElement(‘script’)，然后把这个标签加载到body上面去。

参考链接：

javascript 异步加载

defer

通过异步的方式加载defer1.js文件：

async

HTmL5新增特性。

通过异步的方式加载async1.js文件：

defer和async的区别

defer：在HTML解析完之后才会执行。如果是多个，则按照加载的顺序依次执行。

async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。

代码举例：

Document 上方打印的结果是：

同步任务

defer1

defer2

因为defer的加载是有顺序的，所以两个引入defer文件按顺序执行。如果把引入的文件改为async的方式加载，打印的结果可能是：

同步任务

async2

async1

参考链接：

浅谈script标签的defer和async

三、利用浏览器缓存

缓存：资源文件（比如图片）在本地存有副本，浏览器下次请求的时候，可能直接从本地磁盘里读取，而不会重新请求图片的url。

缓存分为：

强缓存

协商缓存

强缓存

强缓存：不用请求服务器，直接使用本地的缓存。

强缓存是利用 http 响应头中的Expires或Cache-Control实现的。【重要】

浏览器第一次请求一个资源时，服务器在返回该资源的同时，会把上面这两个属性放在response header中。比如：

注意：这两个response header属性可以只启用一个，也可以同时启用。当response header中，Expires和Cache-Control同时存在时，Cache-Control的优先级高于Expires。

下面讲一下二者的区别。

1、Expires：服务器返回的绝对时间。

是较老的强缓存管理 response header。浏览器再次请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前的请求时间比较，如果请求时间在Expires的时间之前，就能命中缓存，否则就不行。

如果缓存没有命中，浏览器直接从服务器请求资源时，Expires Header在重新请求的时候会被更新。

缺点：

由于Expires是服务器返回的一个绝对时间，存在的问题是：服务器的事件和客户端的事件可能不一致。在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如随意修改客户端时间，就能影响缓存命中的结果。所以，在http1.1中，提出了一个新的response header，就是Cache-Control。

2、Cache-Control：服务器返回的相对时间。

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-e35YbBDG-1715186644030)]

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】