如何优化网页性能？前端性能优化，以下是提高网站加载速度的5个技巧：
- 压缩和合并文件：压缩HTML、CSS、JavaScript，然后合并它们以减少HTTP请求。
- 延迟加载：只在需要时加载内容。
- 懒加载：在用户滚动页面时才加载图像和其他媒体。
- 使用缓存：使用浏览器缓存来减少资源加载时间。
- 压缩图像：使用压缩后的图片格式，如JPEG，以减少文件大小，从而加快加载速度。
1.压缩和合并文件
可以使用工具和插件（如Gulp、Grunt、Webpack等）来自动化压缩和合并文件。
HTML压缩：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML压缩示例</title>
</head>
<body>
<h1>这是标题</h1>
<p>这是一段文本</p>
</body>
</html>
CSS压缩：
body {
background-color: #f8f8f8;
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: #333;
font-size: 28px;
}
p {
color: #666;
font-size: 18px;
}
JavaScript压缩：
(function() {
var message = "Hello World!";
console.log(message);
}());
2.延迟加载
延迟加载可以使用JavaScript来实现。
<img data-src="image.jpg" alt="图片">
<script>
// 等待页面完全加载后再执行脚本
window.onload = function() {
// 获取所有图片标记
var images = document.querySelectorAll('img[data-src]');
// 遍历图片标记
Array.prototype.forEach.call(images, function(image) {
// 修改 src
image.setAttribute('src', image.getAttribute('data-src'));
});
};
</script>
3.懒加载
懒加载可以使用JavaScript和插件来实现。这里我们使用jQuery插件来实现懒加载。
<img data-src="image.jpg" alt="图片">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script>
$(function() {
$("img").lazyload({
effect: "fadeIn",
threshold: 200
});
});
</script>
4.使用缓存
可以使用HTTP缓存来缓存资源，以减少加载时间。
服务器端设置缓存：
<?php
$expires = 60 * 60 * 24 * 30; // 30天
header("Cache-Control: max-age={$expires}, public");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + $expires) . " GMT");
?>
客户端设置缓存：
<img src="image.jpg" alt="图片" width="300" height="200" />
<script>
if ('caches' in window && 'fetch' in window) { // 判断是否支持缓存和fetch API
caches.match('image.jpg').then(function(response) {
if (response) { // 从缓存加载图片
var img = document.querySelector('img');
img.src = response.url;
} else { // 请求图片并把它缓存
fetch('image.jpg').then(function(response) {
return caches.open('my-cache-name').then(function(cache) {
cache.put('image.jpg', response.clone());
var img = document.querySelector('img');
img.src = response.url;
});
});
}
});
}
</script>
5.压缩图像
可以使用工具和在线网站来压缩图像，如TinyPNG、Kraken等。
<img src="image.jpg" alt="图片" width="300" height="200" />
