当前位置: 首页 > news >正文

前端性能优化-纲领篇

前端性能优化

本模块将梳理前端性能优化的相关知识点

从浏览器输入 URL 到页面展示发生了什么

完整版请查看[Browser_网络_安全]的部分,这里只是简单的梳理一下

  1. DNS 解析
  2. TCP 连接
  3. 浏览器发出 HTTP 请求
  4. 服务器处理请求并返回 HTTP 报文
  5. 浏览器解析渲染页面

性能优化的过程,就是对上述各个环节进行优化的过程, 比如 DNS 的解析时间,可以通过 DNS 缓存、DNS 预解析、减少 DNS 查询次数等方式来优化
又比如 TCP 连接,可以通过减少 TCP 连接次数、TCP 连接复用等方式来优化

对于前两者,前端能做的事情有限,因此我们主要把精力放在后两者上

前端性能优化

主要分为网络层和渲染层的优化

网络层的优化

主要的目标是减少 HTTP 请求次数和减少 HTTP 请求大小,具体的优化手段有:

  • webpack 打包体积优化(代码压缩、Tree Shaking、Scope Hoisting、代码分割、按需加载)
  • Gzip 压缩开启
  • 使用 CDN(内容分发网络)加速资源加载
  • 使用资源预加载和懒加载
  • 使用合适的图片格式、图片压缩
  • 使用浏览器缓存(HTTP 缓存,Local Storage, Session Storage, Cookie)

渲染层的优化

主要涉及日常的前端开发,主要的目标是减少页面的渲染时间,具体的优化手段有:

  • CSS 优化(选择器优化、CSS 预处理器、CSS 属性优化、CSS 动画优化)
  • JS 优化(减少 DOM 操作、减少重绘重排、JS 异步加载、JS 压缩、JS 懒执行、使用 Web Worker)
  • 回流重绘优化(减少 DOM 操作、使用 CSS3 动画、CSS3 硬件加速、使用 requestAnimationFrame)
  • 使用 Chrome Performance 工具进行性能分析
  • 异步更新 DOM(虚拟 DOM、Diff 算法)

性能评估指标与工具

  • Chrome Performance 面板
  • user-centric-performance-metrics
  • WebPageTest
  • web-vitals

本文首发于个人博客前端开发笔记,由于笔者能力有限,文章难免有疏漏之处,欢迎指正

相关文章:

前端性能优化-纲领篇

前端性能优化 本模块将梳理前端性能优化的相关知识点 从浏览器输入 URL 到页面展示发生了什么 完整版请查看[Browser_网络_安全]的部分,这里只是简单的梳理一下 DNS 解析TCP 连接浏览器发出 HTTP 请求服务器处理请求并返回 HTTP 报文浏览器解析渲染页面 性能优…...

深度学习-----------数值稳定性

目录 神经网络的梯度数值稳定性的常见两个问题例子:MLP 梯度爆炸梯度爆炸的问题 梯度消失梯度消失的问题 总结模型初始化和激活函数让训练更加稳定让每层的方差是一个常数 权重初始化正向均值和方差正向均值正向方差 反向均值和方差Xavier初始正向和反向的均值和方差…...

SpringBoot项目接口可以承受的调用次数

一个Spring Boot接口能够承受的调用次数主要取决于几个因素,包括但不限于: 服务器硬件:CPU、内存、硬盘I/O速度以及网络带宽都会直接影响接口的处理能力和并发量。操作系统和JVM配置:操作系统调度策略、JVM的内存分配、垃圾回收机…...

抽象代数精解【8】

文章目录 希尔密码矩阵矩阵基本概念行列式基本概念特殊矩阵关于乘法运算构成群 加解密原理密钥加密函数解密函数 Z 26 上的运算( Z 256 与此类似) Z_{26}上的运算(Z_{256}与此类似) Z26​上的运算(Z256​与此类似&…...

数据结构与算法 - 二叉树

1. 概述 二叉树是这么一种树状结构:每个节点最多有两个孩子,左孩子和右孩子 完全二叉树:是一种二叉树结构,除了最后一层以外,每一层都必须填满,填充时要遵循从左到右 平衡二叉树:是一种二叉树…...

Spring Cloud Gateway如何给一个请求加请求头

在Spring Cloud Gateway中,可以通过编写一个GlobalFilter来给所有请求加请求头,或者通过编写一个SpecificFilter来给特定路径的请求加请求头。 全局过滤器(GlobalFilter)的实现方式如下: Configuration public class…...

chromedriver版本下载地址汇总chromedriver所有版本下载地址汇总国内源下载

谷歌浏览器版本经常会升级,chromedriver 也得下载匹配的版本 chromedriver 114以前版本下载地址https://registry.npmmirror.com/binary.html?pathchromedriver/ windows版本请访问链接:https://blog.csdn.net/FL1768317420/article/details/139712108 …...

Go语言与Windows系统

1.获取屏幕尺寸 源自:Golang通过使用GetSystemMetrics获取系统的分辨率 - 完美代码 (perfcode.com) package mainimport ("syscall""fmt" )const (SM_CXSCREEN uintptr(0) // X Size of screenSM_CYSCREEN uintptr(1) // Y Size of screen …...

JAVA—面向对象编程高级

学习了一定基础后,开始更加深入的学习面向对象,包含static,final两个关键字,面向对象编程三大特征之继承和多态。以及对于抽象类,内部类,接口,枚举,泛型的学习。 目录 1.static (…...

[BJDCTF2020]Mark loves cat1

打开题目 发现这么多链接,以为要一点点去找功能上的漏洞。当你源代码,dirsearch,抓包等等操作之后,发现什么都没有。所以这题又是一道源码泄露题,上GItHack。扫描结果如下 http://63f29a80-e08b-43ae-a6d0-8e70fb02ea…...

微信答题小程序产品研发-用户操作流程设计

在答题小程序中,用户流程是指用户从进入小程序开始,到完成答题、查看结果、进行练习等一系列操作的步骤。 这里我画了一张用户流程图,展示用户在小程序中的主要操作流程。以及对每个步骤的详细说明。这里分两种角色,用户和管理员…...

目标检测——YOLOv10: Real-Time End-to-End Object Detection

YOLOv10是在YOLOv8的基础上,借鉴了RT-DETR的一些创新点改进出来的 标题:YOLOv10: Real-Time End-to-End Object Detection论文:https://arxiv.org/pdf/2405.14458源码:https://github.com/THU-MIG/yolov10 1. 论文介绍 在过去的几…...

堡垒机简单介绍

堡垒机(Bastion Host),也被称为跳板机、跳板服务器或堡垒服务器,是一种在网络安全中扮演重要角色的设备或服务。以下是关于堡垒机的详细介绍: 一、定义与功能 堡垒机是一种用于控制和管理网络安全的重要工具&#xf…...

【星闪开发连载】WS63E 星闪开发板和hi3861开发板的对比

此次星闪开发者体验官活动使用的开发板都是NearLink_DK_WS63E开发板,它和NearLink_DK_WS63开发板的区别在于具有雷达感知功能。从开发板的照片也可以看到WS63E有一个雷达天线接口。 我们把WS63E开发板和hi3861开发板的功能做了简单的对比,见下表。 参数…...

Python接口自动化测试框架(实战篇)-- Jenkins持续集成

文章目录 一、前言二、[Jenkins](https://www.jenkins.io/)2.1、环境搭建2.2、插件准备2.3、创建job2.4、小结2.5、构建策略2.6、报告展示2.7、扩展三、总结一、前言 温馨提示:在框架需要集成jenkins的时候,一定要注意环境切换问题,如果jenkins和开发环境是同样的系统且都有…...

【leetcode】根据二叉树创建字符串、二叉树的前中后遍历(非递归链表实现二叉树)

Hi~!这里是奋斗的明志,很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~~ 🌱🌱个人主页:奋斗的明志 🌱🌱所属专栏:数据结构、LeetCode专栏 📚本系…...

【RabbitMQ】RabbitMQ交换机概述

一、交换机的类型 RabbitMQ提供了以下四种主要类型的交换机: 直连交换机(Direct Exchange) 特点:直连交换机是最基本的交换机类型,它根据完全匹配的路由键(Routing Key)将消息路由到绑定的队列…...

ROS2从入门到精通4-6:路径平滑插件开发案例(以B样条曲线平滑为例)

目录 0 专栏介绍1 ROS2路径平滑器介绍2 平滑器插件编写模板2.1 构造平滑器插件类2.2 注册并导出插件2.3 编译与使用插件 3 基于B样条曲线的路径平滑 0 专栏介绍 本专栏旨在通过对ROS2的系统学习,掌握ROS2底层基本分布式原理,并具有机器人建模和应用ROS2…...

Tensorflow训练视觉模型(CPU)

目录 零、模型下载 一、清理C盘 二、 配置环境 三、运行项目前提操作 (1)根据自己的项目设置路径。每次激活虚拟环境(tensorflow115)都得重设一次 (2)执行setup 这个项目的路径移动了位置也需要重设一…...

从根儿上学习spring 十 之run方法启动第四段(4)

我们接着上一节已经准备开始分析AbstractAutowireCapableBeanFactory#doCreateBean方法,该方法是spring真正开始创建bean实例并初始化bean的入口方法,属于核心逻辑,所以我们新开一节开始分析。 图12 图12-530到536行 这几行的主要就是创建b…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

2025季度云服务器排行榜

在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...

【LeetCode】3309. 连接二进制表示可形成的最大数值(递归|回溯|位运算)

LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 题目描述解题思路Java代码 题目描述 题目链接:LeetCode 3309. 连接二进制表示可形成的最大数值(中等) 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

DiscuzX3.5发帖json api

参考文章:PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下,适配我自己的需求 有一个站点存在多个采集站,我想通过主站拿标题,采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix,按照"之"字形的方式打印这个矩阵,例如: 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为:1,…...