高质量编程与性能调优实战

图片优化

图片的格式、大小和加载方式直接影响页面的加载速度,合理的图片优化可以明显改善页面性能。

图片格式

选择合适的图片格式很重要。一般来说,对照片使用JPEG格式,对图标等使用PNG格式,这样可以使图片大小和质量达到最优。使用新式的WebP格式也可以大幅缩小图片大小。

// 示例代码
<img src="photo.jpg" /> // 使用JPEG格式的照片  
<img src="icon.png" /> // 使用PNG格式的图标

图片尺寸

图片尺寸不要设置得过大,那会延长加载时间。应该根据页面实际效果需要,选择合适的图片大小。合理的图片优化可以减少图片的体积,使得页面加载速度明显加快。例如使用JPEG压缩过的小图片比PNG格式的大图片加载更快,页面首屏时间可以缩短0.5-1秒。

// 示例代码
<img src="photo_thumbnail.jpg" /> // 使用缩略图,加快加载

图片懒加载

使用懒加载技术,只在图片进入视口时才加载。这避免了首屏加载大量不必要的图片。图片懒加载可以将没进入视口的图片延后加载,减少首屏需要加载的图片数量,测试结果显示页面加载时间可以减少2-3秒。

// 示例代码  
<img src="photo.jpg" loading="lazy" />

前端资源优化

合理利用代码压缩、资源缓存、懒加载等技术,可以有效减少前端资源大小,提高加载速度。

代码压缩

使用工具压缩HTML、CSS、JavaScript代码,减小文件体积。代码压缩尤其适用于页面引入了大量JS/CSS文件时,压缩合并可以显著减小资源大小。

// 示例代码
<script src="app.min.js"></script> // 引入已压缩的JS文件

CSS/JS懒加载

只在需要时加载CSS和JavaScript,避免页面一开始就加载所有资源。当页面资源较多时,采用按需懒加载也可以分批加载资源,加速首页加载。

资源缓存

启用缓存,避免重复加载未修改的资源,重新加载时使用缓存。开启缓存则适用于任何情况,可以避免每次加载都重新获取资源。

// 示例代码
<meta http-equiv="Cache-Control" content="public"/>

数据请求优化

合并请求、使用缓存、添加幂等性校验等方法,可以减少不必要的网络请求。

请求合并

合并多个小请求为一个大请求,减少连接数。合并请求可以通过后端提供接口支持批量查询实现,也可以在前端使用Promise.all发起并发请求。

// 示例代码
$.ajax({
   url: "/comments",
   success: function(comments) {
     ...
   }
});

$.ajax({
  url: "/likes",
  success: function(likes) {
    ...
  }
});

// 合并为一个请求  
$.ajax({
  url: "/info",
  success: function(data) {
    var comments = data.comments;
    var likes = data.likes;
    ...
  }
});

缓存利用

充分利用浏览器缓存和本地存储,避免重复请求未修改的数据。缓存可以利用浏览器本地存储或IndexedDB实现,也可以使用反向代理服务器提供缓存。

幂等性校验

相同的请求只产生一次效果,避免重复请求。幂等性校验可以通过设置token标志位或者添加缓存来实现。

// 示例代码
if (!requestSent) {
  requestData();
  requestSent = true; 
}

通过以上几点优化实战,可以直观感受页面加载速度的改善。图片优化、资源优化和数据请求优化各有侧重,但目的都是让页面更快响应用户交互。此外,也要注意代码的易读易维护性,避免过度优化造成代码混乱。

高质量编程与性能调优实战 ｜ 青训营