前端性能优化(二)

简介: 前端性能优化(二)

为什么要进行前端性能优化?

  1. 提升用户体验:网页加载速度快、响应迅速可以使用户更加愿意停留在您的网站上。快速的用户界面可以提高用户满意度,使他们更容易完成所需的操作。
  2. 提高页面的可访问性:优化性能通常也意味着减少了页面的加载时间,这有助于在网络连接较慢或设备性能较差的情况下仍然为用户提供良好的访问体验。
  3. 增加网站流量和搜索排名:搜索引擎对网页加载速度有所重视,快速的网站通常在搜索结果中排名更高。此外,用户更喜欢加载速度快的网站,这也有助于提高页面的转化率。
  4. 减少资源浪费:优化前端性能通常意味着减少了不必要的HTTP请求、压缩和缓存静态资源等,这可以减少服务器和网络资源的使用,从而降低运营成本。

在上篇文章中我们讲了前端性能优化的四个点,今天我们来继续分享

5. 使用精灵图 (雪碧图)  --- 有效减少http请求

什么是精灵图呢?为什么我们使用精灵图可以有效减少http请求?我们先来看一个例子。

精灵图(雪碧图,Sprite Sheet)是一种将多个小图片(通常是图标或小图像)合并到一个单一的图像文件中的技术。它最初是为了提高网页或游戏的性能而设计的,因为加载一个大图像比加载多个小图像要快。

精灵图的优点:

  1. 减少HTTP请求:合并多个图像到一个文件中,可以减少HTTP请求的次数,从而提高页面加载速度。
  2. 提高渲染效率:当需要使用精灵图上的图像时,只需设置背景位置和大小,而不是单独加载和渲染每个图像,这可以减少浏览器的渲染时间。

我们打开豆瓣的官网:

image.png

来看看豆瓣的一个列表,我们通过检查可以发现,这里的每一项都是一张图片,而通过手段去设置背景位置和大小,将每一项的文本显示出来,这就是精灵图的一个经典应用。这达到了减少请求的作用,如果这里并不是一张大图,而是八张小图,那么我们就需要进行八次http请求,而使用精灵图只需要进行一次。

6. 压缩文件

1. 图片压缩:

图片通常是网页中占用大量空间的文件类型,因此图片压缩是非常关键的一步。

  • 无损压缩:使用工具如ImageOptimTinyPNGSquoosh等,这些工具可以在几乎不损失图片质量的情况下大幅减少文件大小。
  • 有损压缩:对于需要的图片,可以考虑使用有损压缩工具如JPEG Optimizer(用于JPEG图像)或ImageMagick(用于多种格式)。

2. CSS和JS压缩:

  • 压缩工具:使用工具如UglifyJSTerser对JavaScript进行压缩,使用CSSNanoCleanCSS对CSS进行压缩。
  • CSS预处理器和模块化:使用Less、Sass等预处理器,并结合工具如Autoprefixer来自动添加浏览器前缀,然后再进行压缩。

3. HTML压缩:

  • HTML压缩工具:使用工具如HTMLMinifier来压缩HTML文件,去除空格、注释、删除不必要的属性等。

4. 字体优化:

  • 字体子集化:使用工具如Font SquirrelFont Subsetter,仅包含需要的字符,以减少字体文件大小。
  • 字体格式选择:选择合适的字体格式(如WOFF、WOFF2),以便在不同的设备和浏览器中提供最佳的兼容性和性能。

5. 文件合并:

  • 资源合并:将多个小文件合并为一个大文件(如CSS和JS文件),减少HTTP请求次数。但要注意,合并文件的过程需要考虑文件的依赖关系,以避免潜在的问题。

7. 使用webp格式的图片 (更优秀的图像压缩算法)

使用 WebP 格式的图片是前端优化中非常有效的方式,因为它提供了比 JPEG 和 PNG 更优秀的图像压缩算法,可以显著减少图片的文件大小,同时保持高质量的图像输出。

8. if-else vs  switch-case

let color = 'pink'
if (color = 'red') {
    
} else if (color = 'blue') {
    
} else if (color = 'green') {
    
} else if (color = 'yellow') {
    
} else if (color = 'pink') {
    
} else {
    
}
switch (color) {
    case 'red':
        
        break
    case 'blue':
        
        break
    case 'green':
        
        break
    case 'yellow':
        
        break
    case 'pink':
        
        break
    default:
}

如这段代码,我们使用哪一个语句造成的性能消耗更多呢?

我们先来看看if-else语句,这里我们的color为pink,if-else语句开始执行时,从上往下,直到找到color='pink'为止,如果当判断的语句够多时,多执行一些没有必要的代码是十分浪费时间的。

如果是 switch-case语句的话,当我们将pink传进去时,switch语句会直接去找到 case的值为pink,而不必从上往下查找,去执行多余的代码。

9.css 选择器复杂性

我们使用选择器的复杂性应该越低越好,我来举一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app .text p{
            
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="text">
            <p>hello</p>
        </div>
    </div>
</body>
</html>

如果我们通过这种选择器的方式去拿到<p>hello</p>,那么会造成十分不必要的性能消耗,先会去查询所有的p标签,然后再去查询在.text下的p标签,最后再去查询写在#app下的。

与其通过这种方式去添加样式,我们不如直接给这个p标签去设置一个类名,这样就能减少资源消耗。

10. 图片懒加载

图片懒加载是一种特定的懒加载技术,主要用于延迟加载网页中的图片,只有当图片即将进入用户的视野或用户即将浏览到它们时才进行加载。这种技术对于提高页面加载速度和减少带宽消耗特别有用。

图片懒加载的优势:

  1. 提高页面加载速度
  • 减少了初始加载时所需的图片数量和大小,加快了页面加载速度。
  1. 节省带宽
  • 只加载用户即将浏览的图片,减少了不必要的带宽消耗。
  1. 改善用户体验
  • 用户可以更快地看到页面的核心内容,提高了页面的响应性和用户满意度。
  1. 降低服务器负载
  • 减少了不必要的图片请求,降低了服务器的负载和成本。
相关文章
|
25天前
|
缓存 前端开发 JavaScript
cnblogs——从主题开发浅谈前端性能优化
cnblogs——从主题开发浅谈前端性能优化
26 0
|
14天前
|
缓存 前端开发 JavaScript
优化前端性能:从理论到实践的全面指南
前端性能优化是提升用户体验的关键环节,但这一过程常被技术细节和优化策略所困扰。本文将系统地探讨前端性能优化的理论基础及实践技巧,包括关键性能指标、有效的优化策略、以及常见工具的应用。我们将从最基本的优化方法入手,逐步深入到高级技巧,为开发者提供一套全面的性能提升方案,以实现更快的加载时间、更流畅的用户交互体验。
|
18天前
|
缓存 前端开发 JavaScript
微前端集成优化:让所有子应用体积更小,加载更快!
【8月更文挑战第17天】微前端集成优化:让所有子应用体积更小,加载更快!
31 1
微前端集成优化:让所有子应用体积更小,加载更快!
|
8天前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
19 1
|
21天前
|
缓存 前端开发 JavaScript
优化前端性能的十大最佳实践
在现代网页开发中,前端性能优化不仅仅是为了提升用户体验,还能显著提高网站的加载速度和响应时间。本文探讨了十大最佳实践,从优化资源加载到减少网络请求,再到提高页面渲染效率,每个实践都旨在解决常见的性能瓶颈。通过实现这些策略,开发者可以显著提升前端性能,提升用户满意度,并确保网站在各种设备上的流畅运行。
|
21天前
|
缓存 前端开发 JavaScript
深入探讨前端性能优化:从理论到实践
在现代Web开发中,前端性能优化已成为提升用户体验的关键因素。本文将探讨前端性能优化的基本理论,并结合实际案例,深入分析如何通过优化代码、资源管理和用户交互,显著提升网站和应用的响应速度。我们将介绍从理论到实践的多种方法,包括资源压缩、异步加载、缓存机制及工具的使用,帮助开发者构建更加高效和用户友好的前端应用。
|
21天前
|
缓存 编解码 前端开发
优化Web应用性能的前端技巧:从加载时间到用户体验
在现代Web开发中,提升前端性能不仅仅是为了缩短页面加载时间,更是为了提供更流畅的用户体验。本文将探讨几种有效的前端优化技术,包括懒加载、代码拆分、资源压缩以及浏览器缓存策略。通过具体实例和最佳实践,读者将能够掌握如何系统地提高Web应用的响应速度,减少资源消耗,并最终改善用户的整体体验。
|
1天前
|
前端开发 JavaScript API
前端性能优化-控制并发
【9月更文挑战第7天】前端性能优化-控制并发
11 0
|
24天前
|
缓存 前端开发 JavaScript
前端性能优化方案
【8月更文挑战第15天】前端性能优化方案
22 2
|
28天前
|
缓存 前端开发 API
优化前端性能的最佳实践
在构建高效的前端应用时,性能优化是不可忽视的关键因素。本文将探讨一些实用的前端性能优化策略,包括资源的懒加载、合理的缓存策略、代码分割以及异步数据加载等方法。通过实施这些最佳实践,可以显著提升应用的响应速度和用户体验。