前端性能优化(二)

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

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

  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. 降低服务器负载
  • 减少了不必要的图片请求,降低了服务器的负载和成本。
相关文章
|
12天前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
2月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
1月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
93 3
|
2月前
|
前端开发 安全 UED
2024年前端性能优化新策略
2024年前端性能优化策略涵盖代码分割与环境变量管理。代码分割通过动态导入和按需加载CSS减少初始加载时间;环境变量管理则确保敏感信息安全,简化多环境配置。结合最新工具和技术,可大幅提升Web应用性能与用户体验。
|
1月前
|
缓存 监控 前端开发
探索前端性能优化:关键策略与代码实例
本文深入探讨前端性能优化的关键策略,结合实际代码示例,帮助开发者提升网页加载速度和用户体验,涵盖资源压缩、懒加载、缓存机制等技术。
|
2月前
|
搜索推荐 前端开发 定位技术
前端开发人员SEO优化技术方案
不同的搜索引擎提供了服务后台常见功能来优化网站搜索
53 2
|
2月前
|
数据采集 缓存 监控
如何优化前端框架的数据驱动方式以提高性能?
综上所述,通过多种手段的综合运用,可以有效地优化前端框架的数据驱动方式,提高应用的性能,为用户带来更好的体验。同时,随着技术的不断发展和进步,我们需要不断探索和创新,以找到更适合的优化方法和策略。
|
2月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
43 1
|
2月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
47 1
|
2月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
29 3

热门文章

最新文章