Web性能优化:从基础到高级

💓 博客主页:瑕疵的CSDN主页
📝 Gitee主页:瑕疵的gitee主页
⏩ 文章专栏:《热点资讯》

Web性能优化:从基础到高级

Web性能优化:从基础到高级

  • Web性能优化:从基础到高级
    • 引言
    • 基础优化
      • 1. 减少 HTTP 请求
        • 文件合并
      • 2. 压缩资源
        • Gzip 压缩
      • 3. 使用 CDN
        • 内容分发网络
      • 4. 图片优化
        • 图片压缩
        • 使用现代图片格式
    • 高级优化
      • 1. 首屏加载优化
        • 优先加载关键资源
      • 2. 懒加载
        • 图片懒加载
      • 3. 代码分割
        • 动态导入
      • 4. 服务端渲染
        • SSR
      • 5. 缓存策略
        • HTTP 缓存
      • 6. 避免阻塞渲染的资源
        • 优化 CSS 和 JavaScript
    • 工具和框架
      • 1. Lighthouse
        • 性能审计工具
      • 2. Webpack
        • 模块打包工具
      • 3. React
        • 前端框架
      • 4. Vue.js
        • 前端框架
    • 实际案例
      • 1. 电商网站
      • 2. 新闻网站
      • 3. 企业级应用
    • 最佳实践
      • 1. 持续性能监测
      • 2. 用户体验优先
      • 3. 逐步优化
      • 4. 文档记录
    • 未来展望
      • 1. 技术创新
      • 2. 行业标准
      • 3. 普及应用
    • 结论
    • 参考文献
      • 代码示例
        • webpack.config.js
        • src/index.js

引言

随着互联网的快速发展,Web 应用的性能优化变得越来越重要。良好的性能不仅能够提升用户体验,还能提高搜索引擎排名,增加用户留存率。本文将详细介绍 Web 性能优化的方法,从基础到高级,涵盖各个方面,帮助开发者构建高效、流畅的 Web 应用。

基础优化

1. 减少 HTTP 请求

文件合并

通过合并 CSS 和 JavaScript 文件,减少 HTTP 请求次数。

<!-- 合并前 -->
<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">
<script src="script1.js"></script>
<script src="script2.js"></script><!-- 合并后 -->
<link rel="stylesheet" href="styles.min.css">
<script src="script.min.js"></script>

2. 压缩资源

Gzip 压缩

使用 Gzip 压缩可以显著减少文件大小,加快传输速度。

# Nginx 配置
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

3. 使用 CDN

内容分发网络

使用 CDN 可以将静态资源分发到全球各地的服务器,提高加载速度。

<!-- 使用 CDN 加载 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

4. 图片优化

图片压缩

使用工具(如 TinyPNG)压缩图片,减少文件大小。

# 使用 ImageOptim 压缩图片
imageoptim image.png
使用现代图片格式

使用现代图片格式(如 WebP)可以进一步减少图片大小。

<img src="image.webp" alt="Example Image">

高级优化

1. 首屏加载优化

优先加载关键资源

通过预加载和预渲染技术,优先加载首屏所需的资源。

<!-- 预加载 -->
<link rel="preload" href="/css/styles.css" as="style">
<link rel="preload" href="/js/app.js" as="script"><!-- 预渲染 -->
<link rel="prerender" href="/about">

2. 懒加载

图片懒加载

通过懒加载技术,延迟加载非首屏图片,减少初始加载时间。

<img src="placeholder.jpg" data-src="image.jpg" class="lazy"><script>
document.querySelectorAll('.lazy').forEach(img => {img.addEventListener('load', function() {img.classList.remove('lazy');});img.src = img.dataset.src;
});
</script>

3. 代码分割

动态导入

使用动态导入技术,按需加载代码,减少初始加载时间。

// 动态导入组件
import('./components/header').then(module => {const Header = module.default;render(<Header />, document.getElementById('root'));
});

4. 服务端渲染

SSR

使用服务端渲染技术,提前生成 HTML 内容,提高首屏加载速度。

// Next.js 服务端渲染
import { useRouter } from 'next/router';
import { useEffect } from 'react';function Home() {const router = useRouter();useEffect(() => {if (router.isFallback) {router.replace('/404');}}, [router]);return <div>Welcome to the Home Page!</div>;
}export default Home;

5. 缓存策略

HTTP 缓存

通过设置 HTTP 缓存头,实现资源的长期缓存。

# Nginx 配置
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {expires 30d;add_header Cache-Control "public, no-transform";
}

6. 避免阻塞渲染的资源

优化 CSS 和 JavaScript

通过内联关键 CSS 和异步加载 JavaScript,避免阻塞渲染。

<!-- 内联关键 CSS -->
<style>body { font-family: Arial, sans-serif; }
</style><!-- 异步加载 JavaScript -->
<script src="/js/app.js" defer></script>

工具和框架

1. Lighthouse

性能审计工具

Lighthouse 是一个开源的性能审计工具,可以帮助开发者发现和修复性能问题。

# 使用 Lighthouse 进行性能审计
lighthouse https://example.com --view

2. Webpack

模块打包工具

Webpack 是一个强大的模块打包工具,支持代码分割、懒加载等多种优化技术。

// webpack.config.js
module.exports = {entry: './src/index.js',output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist'),},optimization: {splitChunks: {chunks: 'all',},},
};

3. React

前端框架

React 是一个流行的前端框架,支持服务端渲染和代码分割,有助于提升性能。

// React 服务端渲染
import React from 'react';
import ReactDOMServer from 'react-dom/server';const App = () => <div>Hello, World!</div>;const html = ReactDOMServer.renderToString(<App />);
console.log(html);

4. Vue.js

前端框架

Vue.js 是另一个流行的前端框架,支持服务端渲染和懒加载,有助于提升性能。

// Vue.js 服务端渲染
import { createSSRApp } from 'vue';
import { renderToString } from 'vue/server-renderer';const app = createSSRApp({template: `<div>Hello, World!</div>`
});renderToString(app).then(html => {console.log(html);
});

实际案例

1. 电商网站

电商网站通常包含大量静态资源和动态内容,通过优化图片、使用 CDN 和代码分割,可以显著提升性能。
新闻网站的性能优化案例

2. 新闻网站

新闻网站通常需要快速加载首屏内容,通过服务端渲染和懒加载,可以提高首屏加载速度。

3. 企业级应用

企业级应用通常包含复杂的业务逻辑和大量的数据交互,通过优化 CSS 和 JavaScript,避免阻塞渲染,可以提升用户体验。

最佳实践

1. 持续性能监测

通过持续性能监测工具(如 New Relic),定期检查应用性能,及时发现和解决问题。

2. 用户体验优先

在性能优化过程中,始终将用户体验放在首位,确保优化措施不会影响用户体验。

3. 逐步优化

性能优化是一个逐步的过程,不要一次性进行大量改动,逐步优化,每次只解决一个问题。

4. 文档记录

记录优化过程和结果,形成文档,便于后续参考和团队协作。

未来展望

1. 技术创新

随着 Web 技术的不断发展,新的性能优化技术和工具将不断涌现,提高 Web 应用的性能和用户体验。

2. 行业标准

通过行业合作,共同制定 Web 性能优化的标准和规范,推动 Web 技术的广泛应用和发展。

3. 普及应用

随着技术的成熟和成本的降低,Web 性能优化将在更多的企业和平台中得到普及,成为主流的 Web 开发解决方案。

结论

Web 性能优化是提高用户体验和业务成功的关键。通过从基础到高级的优化方法,开发者可以构建高效、流畅的 Web 应用。然而,要充分发挥性能优化的潜力,还需要持续监测和逐步优化,确保每一步都符合用户体验的要求。未来,随着技术的不断进步和社会的共同努力,Web 性能优化将在 Web 开发中发挥更大的作用。

参考文献

  • Google Developers. (2021). Web Fundamentals.
  • Addy Osmani. (2019). Performance Patterns.
  • Steve Souders. (2013). High Performance Websites.
  • Paul Irish. (2019). 10 Tips for Better Web Performance.

代码示例

下面是一个简单的 Web 性能优化代码示例,演示如何使用 Webpack 进行代码分割和懒加载。

webpack.config.js
const path = require('path');module.exports = {entry: './src/index.js',output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist'),},optimization: {splitChunks: {chunks: 'all',},},
};
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';const App = () => {const loadComponent = async () => {const { default: LazyComponent } = await import('./LazyComponent');ReactDOM.render(<LazyComponent />, document.getElementById('root'));};return (<div><button onClick={loadComponent}>Load Lazy Component</button></div>);
};ReactDOM.render(<App />, document.getElementById('root'));

这个示例通过使用 Webpack,展示了如何进行代码分割和懒加载,实现按需加载代码,减少初始加载时间。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/60953.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

当 docker-compose.yaml 文件部署时,Dify 线上版本升级过程

如果线上 Dify 是通过 docker-compose.yaml 文件部署的&#xff0c;那么当 Dify 版本升级时该如何操作呢&#xff1f;官方已经给出了 Docker compose 和 Source Code 两种方式。相对而言&#xff0c;前者更简单些&#xff0c;至少不需要安装依赖包和迁移数据库文件。为了更加具…

如何让手机ip变成动态

在数字化浪潮中&#xff0c;手机已成为我们日常生活中不可或缺的一部分。无论是浏览网页、使用社交媒体还是进行在线购物&#xff0c;手机都扮演着举足轻重的角色。然而&#xff0c;在享受网络带来的便利时&#xff0c;我们也需要关注网络安全和隐私保护。静态IP地址可能让手机…

elementPlus + table 树形懒加载,子节点的刷新

文章目录 需求描述技术细节小结 需求描述 一个树形表格的增删查改 技术细节 刚开始想的很好&#xff0c;新增/编辑/删除时不调用接口&#xff0c;而是直接更改数据&#xff0c;如删除时&#xff0c;直接删除对应下标的数据 遇到的问题 实际业务中是否有子级&#xff0c;是不…

vue3 如何调用第三方npm包内部的 pinia 状态管理库方法

抛砖引玉: 如果在开发vue3项目是, 引用了npm第三方包 ,而且这个包内使用了Pinia 状态管理库,那我们如何去调用 npm内部的 Pinia 状态管理库呢? 实际遇到的问题: 今天在制作npm包时遇到的问题,之前Vue2版本的时候状态管理库用的Vuex ,当时调用npm包内的状态管理库很简单,直接引…

Linux笔记---调试工具GDB(gdb)

1. gdb的概念 GDB&#xff0c;全称GNU Debugger&#xff0c;是一个功能强大的开源调试工具&#xff0c;广泛用于Unix和类Unix系统&#xff0c;以及Microsoft Windows和macOS平台。GDB允许开发者在程序执行过程中查看内部运行情况&#xff0c;帮助定位和修复程序中的错误。 gd…

WSL2 ubuntu配置redis

安装redis sudo apt-get update sudo apt-get install redis启动redis-server sudo service redis-server start访问redis sudo redis-cli修改redis配置 su # root用户 vim /etc/redis/redis.conf找到# requirepass foobared&#xff0c;将这行去掉注释&#xff0c; fooba…

FFmpeg源码:avio_read_partial函数分析

AVIOContext结构体和其相关的函数分析&#xff1a; FFmpeg源码&#xff1a;avio_r8、avio_rl16、avio_rl24、avio_rl32、avio_rl64函数分析 FFmpeg源码&#xff1a;read_packet_wrapper、fill_buffer函数分析 FFmpeg源码&#xff1a;avio_read函数分析 FFmpeg源码&#xff…

编译器gcc/g++

gcc 只用来编译C g 编译C/C 1.预处理&#xff08;进行宏替换/去注释/条件编译/头文件展开等&#xff09; 先创建 code.c 文件 -E --> 从现在开始&#xff0c;进行程序的翻译&#xff0c;一旦预处理做完&#xff0c;就停下来 -o --> 表明 -o 后面的文件名称 code…

wordpress建DTC独立站为产品添加价格区间选择

要在WordPress中为DTC独立站的产品添加价格区间选择功能&#xff0c;可以通过以下步骤实现&#xff1a; 添加自定义字段&#xff1a;首先&#xff0c;需要在产品后台添加一个自定义字段&#xff0c;用于设置价格区间的最大值。这可以通过添加代码到子主题的 function.php 文件…

一.安装版本为19c的Oracle数据库管理系统(Oracle系列)

1.数据库版本信息&#xff1a; 版本信息&#xff1a; 或者直接由命令查出来&#xff1a; 2.操作系统的版本信息 3.安装包下载与上传 可以去oracle官网下载也可以从其他人的百度网盘链接中下载&#xff1a; 使用xftp工具或者其他的工具&#xff08;mobaxterm&#xff09;上传到l…

DimensionX 部署笔记

目录 生成视频用CogVideoX-5b-I2V 推理代码&#xff1a; DimensionX 生成视频用CogVideoX-5b-I2V 推理代码&#xff1a; 可以生成&#xff0c;从左向右旋转的&#xff0c;也可以生成从上往下旋转的&#xff1a; import torch from diffusers import CogVideoXImageToVideo…

uni-app移动端与PC端兼容预览PDF文件

过程遇到的问题 1、如果用的是最新的版本的pdfjs的话&#xff0c;就会报Promise.withResolvers 不是一个方法的错误&#xff0c;原因是Promise.withResolvers是ES15新特性&#xff0c;想了解可参考链接&#xff0c;这里的解决方案是将插件里的涉及到Promise.withResolvers的地…

Node.js | Yarn下载安装与环境配置

一、安装Node.js Yarn 是 Node.js 下的包管理工具&#xff0c;因此想要使用 Yarn 就必须先下载 Node.js。 推荐参考&#xff1a;Node.js | npm下载安装及环境配置教程 二、Yarn安装 打开cmd&#xff0c;输入以下命令&#xff1a; npm install -g yarn检查是否安装成功&…

简单的卡尔曼滤波器C#代码

用卡尔曼滤波来平滑温度数据&#xff0c;使得温度曲线变得更加平滑&#xff08;即去噪声&#xff0c;避免短期内的剧烈波动&#xff09;。在这种情况下&#xff0c;卡尔曼滤波的目标是基于传感器的噪声数据来估计真实的温度&#xff0c;从而降低噪声的影响。 简单的温度卡尔曼…

开源TTS语音克隆神器GPT-SoVITS_V2版本地整合包部署与远程使用生成音频

文章目录 前言1.GPT-SoVITS V2下载2.本地运行GPT-SoVITS V23.简单使用演示4.安装内网穿透工具4.1 创建远程连接公网地址 5. 固定远程访问公网地址 前言 本文主要介绍如何在Windows系统电脑使用整合包一键部署开源TTS语音克隆神器GPT-SoVITS&#xff0c;并结合cpolar内网穿透工…

分布式系统学习笔记

除了分布式爬虫系统&#xff0c;还有许多分布式系统值得学习和实践&#xff0c;它们在不同领域有广泛应用&#xff0c;积累相关经验对找工作非常有帮助。以下是一些常见的分布式系统类型及学习建议&#xff1a; 1. 分布式存储系统 应用场景&#xff1a; 大规模数据的存储与访…

[Docker#11] 容器编排 | .yml | up | 实验: 部署WordPress

目录 1. 什么是 Docker Compose 生活案例 2. 为什么要使用 Docker Compose Docker Compose 的安装 Docker Compose 的功能 使用步骤 核心功能 Docker Compose 使用场景 Docker Compose 文件&#xff08;docker-compose.yml&#xff09; 模仿示例 文件基本结构及常见…

鸿蒙NEXT应用示例:切换图片动画

【引言】 在鸿蒙NEXT应用开发中&#xff0c;实现图片切换动画是一项常见的需求。本文将介绍如何使用鸿蒙应用框架中的组件和动画功能&#xff0c;实现不同类型的图片切换动画效果。 【环境准备】 电脑系统&#xff1a;windows 10 开发工具&#xff1a;DevEco Studio NEXT B…

Spring Cloud Gateway(分发请求)

Spring Cloud Gateway 的过滤器和 Spring MVC 的拦截器的区别 过滤器用于整个微服务系统的网关层控制&#xff0c;拦截器则用于单个微服务内部的控制层请求处理。 1. 作用范围 Spring Cloud Gateway 过滤器&#xff1a;过滤器的作用范围是在网关层&#xff0c;主要在请求进入后…

【spring 】Spring Cloud Gateway 的Filter学习

介绍和使用场景 Spring Cloud Gateway 是一个基于 Spring Framework 5 和 Project Reactor 的 API 网关&#xff0c;它旨在为微服务架构提供一种简单而有效的方式来处理请求路由、过滤、限流等功能。在 Spring Cloud Gateway 中&#xff0c;Filter 扮演着非常重要的角色&#…