【前端性能优化】前端优化解锁技巧，助力提高页面性能和用户交互体验
前端之究极新能优化
- 前言
- 一、网络性能优化
-
- 1. 压缩资源
- 2. 合并资源
- 3. CDN 加速
- 二、页面渲染性能优化
-
- 1. 图片优化使用
-
- a、图片选择
- b、使用 WebP 格式图片
- c、使用图片懒加载
- 2. HTML、CSS 和 JavaScript 的优化处理
- 3. 渲染过程的优化处理
- 三、JavaScript执行效率优化
-
- 1. 减少函数调用次数
- 2. 合理选择循环方式
- 3. 使用对象池
- 四、移动端性能优化
-
- 1. 图片优化
- 2. 选用合适的 CSS 规则
- 3. 压缩文件
- 五、一些具体优化实现的例子：
-
- 1. 压缩 JavaScript 和 CSS
- 2. 合并 JavaScript 和 CSS
- 3. 图片优化
- 4. CDN 加速
- 5、优化FCP指标
- 6、优化LCP指标
- 7、优化CSS
- 8、优化您的图像
- 9、确保文本在网页字体加载期间保持可见
- 10、优化WebFont加载和渲染
- 11、优化您的JavaScript(针对客户端渲染的网站)
- 总结：
前言
随着 Web 应用的不断发展，前端性能优化 逐渐成为移动端和 PC 端开发的必修课，而在真实的业务场景中，优化把控在毫秒之间，不同维度的优化需要不同专业领域和技术功底的结合，才能真正做到精益求精，不断提升页面性能。
那么，前端性能优化有哪些层面的优化点？又可以从哪些方面做进一步提升呢？
一、网络性能优化
Web 应用的性能瓶颈往往出现在“三军未动粮草先行”的两个方面：首先是 Web 应用所需的资源数量，以及每个资源的请求大小。这是因为 HTTP 协议本身的限制，它采用了明文的方式传输数据，而不可避免的产生了一些性能瓶颈。
那么，在网络性能优化方面，我们可以从以下几个方面着手：
1. 压缩资源
在 Web 开发过程中，我们可以通过 HTML、CSS、JavaScript 以及 JSON 等资源的压缩，减少下载的时间和传输流量，同时，通过对这些压缩资源的缓存，可以进一步提高用户的访问速度。
2. 合并资源
Web 开发中的优化经验告诉我们，在资源合并这一点上做的越好，能够减少很多重复请求产生的延迟。因此，在项目中，需要采取一些 合并资源 的策略，比如，将多个 CSS 或 JS 文件合并成一个，减少 HTTP 请求，加快页面的加载速度，缩短浏览器的响应时间。
3. CDN 加速
使用 CDN 可以更快地传送内容，同时降低成本。CDN 的核心优势在于每个访问者都下载了最接近他们的物理位置的内容，这大大缩短了文件下载的时间和 latency(延迟)，优化了网络连接层，加速了整个网站的访问速度。
二、页面渲染性能优化
在网络性能达到最优的情况下，我们可以从以下三方面来进一步优化页面渲染性能。
1. 图片优化使用
a、图片选择
- 对于不同分辨率、像素密度的设备，
选择合适的图片格式和大小，避免过大或者过小的图片出现不清晰的情况，特别是在移动设备上优化图片，减少下载时间和占用空间。
b、使用 WebP 格式图片
WebP 格式是一种结合了JPEG，PNG，GIF优点于一身的一种新型图片格式,它有更好的压缩效果，同时对于中大型图片的加载启动会有更好的优化，可以大大缩短页面的加载时间。总的来说，使用WebP格式可以有效地优化页面的渲染性能。
c、使用图片懒加载
在移动端网页的图片展示中，图片懒加载思想 就几乎成了通用规范。如果页面中需要展示大量图片的话，完全一开始打开页面时把所有的图片都加载是很浪费资源且影响页面的加载速度，此时可以尝试使用图片懒加载的方式，等到该图片快要出现在屏幕内时再触发加载，进而加快页面渲染速度。
2. HTML、CSS 和 JavaScript 的优化处理
- 在处理
HTML、CSS和JavaScript的过程中，减少DOM元素的数量，优化代码逻辑，减少不必要的计算，尽量减少操作和触发。 - 对于
JavaScript优化，要尽量减少类和函数的使用，尽量使用原生 JavaScript 内置方法。 - 对于
CSS优化，可以考虑使用BEM等格式化方案等优秀的方法。
3. 渲染过程的优化处理
- 通过把 DOM 操作的数量减少到最小，以及选择合适的渲染方式，避免过度的重绘和重排操作。
- 优化一些昂贵的操作：比如布局和大小计算，处理和优化过程以及自定义渲染模式等问题。
- 我们在开发过程中，还可以采用很多成熟的框架和库，使得我们可以更加方便地实现优化，在保证效果的前提下，我们用更加简单的方式去编写优化。
例如，对于引入的数据，我们可以采用流媒体传输协议(
TCP)，使用React Native开发原生应用，使用JPEGXR格式的图片，以及使用WebP格式的图片等等。并且，在实现过程中，我们可以选择使用webpack等打包工具和前端库来提高开发的效率
- DOM片段化更新：如果对于非常庞大并且更新次数较多的
DOM（例如JSON 树的形式），不仅每次操作都会导致大量的重排和重绘，也会消耗大量的性能资源，此时可以采用 DOM 操作的片段化更新方式。也就是将 DOM 结构按照某种方式拆分成若干小块，对其进行更新。这样，可以实现精细化操作，减少不必要的资源消耗。
三、JavaScript执行效率优化
JavaScript 优化是其中的一部分，专注于如何使脚本的运行更快。这里提供的一些技巧和方法可以优化 JavaScript 代码的执行效率。
1. 减少函数调用次数
JS 函数调用次数是造成性能下降的一个重要缘由，因此，在编写 JavaScript 代码时，我们应该尽量减少函数调用的次数。在处理循环的过程中，如果不调用函数，而是在循环内直接运行代码，通常会更快。
2. 合理选择循环方式
在 JavaScript 中，我们有多种循环方式，比如，for、for in、while 等。在对数组或对象进行操作时，应该选择最恰当的循环方式。对于数组遍历操作，使用 for 循环明显比 for in、forEach 更快，而对于对象遍历操作，for in 比 for 更快。
3. 使用对象池
在 JavaScript 中，创建和销毁对象是非常常见的。但是，创建和销毁大规模的对象会消耗很多内存，进而影响代码的性能。此时，使用对象池可以缓存已经创建的对象，避免重复创建。
四、移动端性能优化
在 Web 开发中，移动端性能优化对于许多开发者来说可能会是一块难以逾越的难关。移动端性能优化要点大致分为以下几个方面：
1. 图片优化
对于移动设备而言，它们的分辨率以及像素密度与传统 PC 设备是有所不同的。因此，通过针对不同分辨率和像素密度优化图片可以在大大减少需传输图片的大小和网络负荷的同时，保证图片在移动设备上的显示效果。
2. 选用合适的 CSS 规则
在移动端网页中，CSS 规则的应用是非常重要的。合理应用 CSS 样式可以大大提升页面渲染的性能。因此，在移动端优化中，我们应该尽可能避免样式的嵌套使用和不必要的重复定义。
3. 压缩文件
针对移动设备的特性，可以使用 Gzip 等压缩文件的方式，进一步减少传输数据量和网络负荷。特别是对 JS 和 CSS 表示优化处理更为有效，在一定程度上可以减小传输数据的大小。
程中，我们可以选择使用 webpack 等打包工具和前端库来提高开发的效率。
五、一些具体优化实现的例子：
1. 压缩 JavaScript 和 CSS
在 webpack 构建过程中，可以使用 uglifyjs-webpack-plugin 插件来压缩 javascript 代码，以及使用 extract-text-webpack-plugin 插件来提取 css 构建单独的文件并压缩。
2. 合并 JavaScript 和 CSS
在 webpack 构建过程中，可以使用 webpack-merge 插件来合并不同 JSON 文件，合并各个页面的单独的 css 和 js 文件，减少 HTTP 请求次数，优化页面渲染性能。
3. 图片优化
可以使用 image-webpack-loader 来压缩和优化图片，提供 pixelsize 和 quality 函数，进一步控制图片的大小和质量，优化页面渲染性能。
4. CDN 加速
在使用 CDN 时，可以添加 https://cdn.example.com/ 前缀，避免其他域名浪费时间，优化网站性能。
5、优化FCP指标
- 消除阻塞资源
- 缩小 CSS
- 移除未使用的CSS
- 预连接到所需的来源
- 减少服务端响应时间（TTFB）
- 避免多个页面重定向
- 预加载关键请求
- 避免巨大的网络负载
- 如何使用高效缓存策略去缓存静态资源
- 避免 DOM 过大
- 最小化关键请求深度
- 确保文本在网页字体加载期间保持可见
- 保持较少的请求数以及较小的传输大小
6、优化LCP指标
LCP主要受四个因素影响：
- 缓慢的服务器响应速度
- JavaScript 和 CSS 渲染阻塞
- 资源加载时间
- 客户端渲染
实现方案：
- 使用PRPL模式做到即时加载
- 优化关键渲染路径
7、优化CSS
- 推迟非关键CSS
- 缩小CSS
- 提取关键CSS
- 优化CSS背景图像与媒体查询
8、优化您的图像
- 选择正确的图像格式
- 选择正确的压缩级别
- 使用Imagemin压缩图像
- 用视频代替gif动画，加快页面加载速度
- 提供响应式图像
- 提供尺寸正确的图像
- 使用WebP图像
- 使用图像cdn来优化图像优化网页字体
9、确保文本在网页字体加载期间保持可见
- 在字体加载过程中避免不可见的文本
10、优化WebFont加载和渲染
- 减小网页字体大小
11、优化您的JavaScript(针对客户端渲染的网站)
- 使用 PRPL 模式做到即时加载
- 缩小 JavaScript 体积
- 减少 JavaScript 执行时间
- 通过代码分割减少JavaScript的有效负载
- 移除未使用的代码
总结：
前端性能优化 是 Web 开发中一个重要的方面。它的目标是提升页面响应速度、加快页面加载速度、减少页面操作所需的时间和提高用户体验。在优化效果不明显可以逐一排除的情况下，最优的方法是 从整体出发，从多个方面入手，并结合实际的业务场景和实践，注重效率的提升 ，才能真正做到精益求精，性能优化的进一步提升。
前端性能优化可以从优化网络性能和页面渲染性能两个方面着手，包括资源的压缩和合并，使用 CDN 加速，图片的优化处理以及 HTML、CSS 和 JavaScript 的优化处理，优化渲染过程，采用成熟的工具和框架以及提供高性能的云服务等。在构建项目时，可以通过优化 CSS、JavaScript 和 HTML，优化 webpack 打包文件，采用 WebP、Woff、JPEGXR 等前端技术，在提供更好的用户体验的前提下，进一步提高页面性能和用户交互体验。