前端性能优化汇总

news2025/1/13 2:41:46

1.减少HTTP请求次数和请求的大小 (三大类)
文件的合并和压缩:(1)(6)
延迟加载:(3)(4)
用新的文件格式代替传统文件格式:(2)(5)(8)
在这里插入图片描述

//=>栈溢出:死递归
function func(){
	func();
}
func();
//=>解决方案
function func(){
	setTimeout(func,0);
}
func();

//=>相互引用:引用类型之间的相互调用,形成嵌套式内存 (高程三)
let obj1={
	name:'OBJ1'
};
let obj2={
	name:'OBJ2',
	x:obj1
};
obj1.x=obj2;

2.建立缓存机制
网络缓存:(1)(2)(3)(6)(7)
本地缓存:(4)
加服务器:(5)

(1)把不经常更改的静态资源做缓存处理(一般做的是 304 或者 ETAG 等协商缓存)
(2)建立 Cache-Control 和 Expires HTTP 的强缓存
(3)DNS 缓存或者预处理(DNS PREFETCH),减少 DNS 的查找
(4)设置本地的离线存储(manifest)或者把一些不经常更改的数据做本地存储(webstorage、indexdb)等
(5)有钱就做 CDN(地域分布式服务器),还有一个财大气粗的方式:加服务器
(6)建立 Connection:keep-alive TCP 长连接
(7)使用 HTTP2 版本协议(现在用的一般都是 HTTP1.1), 可以多条 TCP 通道共存 =>管道化链接
(8)一个项目分为不同的域(不同的服务器),例如:资源 WEB 服务器、数据服务器、图片服务器、视频服务器等,这样合理利用服务器资源,但是导致过多的 DNS 解析

3.代码上的优化
重点记住:(1)~(8)

(1)减少直接对 DOM 的操作(原因是减少 DOM 的回流和重绘…),当代项目基本上都是基于 mvvm/mvc 数据驱动视图渲染的,对 DOM 的操作框架本身完成,性能要好很多
(2)低耦合高内聚(基于封装的方式:方法封装、插件、组件、框架、类库等封装,减少页面中的冗余代码,提高代码使用率)
(3)减少对闭包的使用(因为过多使用闭包会产生很多不销毁的内存,处理不好的话,会导致内存溢出“栈溢出”),减少闭包的嵌套(减少作用域链的查找层级)
(4)对于动画来说:能用 CSS 解决的不用 JS(能够用 transform 处理的,不用传统的 css 样式,因为 transform 开启硬件加速,不会引发回流,再或者使用定位的元素也会好很多,因为定位的元素脱离文档流,不会对其它元素的位置造成影响),能用requestAnimationFrame 解决的不用定时器 (requestAnimationFrame 还有一个好处,当页面处于休眠无访问状态,动画会自己暂停,直到恢复访问才开始,而定时器是不论什么状态,只要页面不管,就一直处理)
(5)尽可能使用事件委托
(6)函数的防抖和节流
(7)避免出现死循环或者嵌套循环(嵌套循环会成倍增加循环的次数)
(8)项目中尽可能使用异步编程来模拟出多线程的效果,避免主线程阻塞(异步操作基于 PROMISE 设计模式来管理)
(9)避免使用 iframe(因为 iframe 会嵌入其它页面,这样父页面渲染的时候,还要同时把子页面也渲染了,渲染进度会变慢)
(10)JS 中不要使用 with
(11)避免使用 CSS 表达式
(12)减少使用 eval(主要原因是防止压缩代码的时候,由于符号书写不合规,导致代码混乱)
(13)减少 filter 滤镜的使用
(14)尽可能减少选择器的层级(选择器是从右向左解析) .box a{} 和 a{}
(15)尽可能减少 TABLE 布局
(16)手动回收堆栈内存(赋值为 null)

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

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

相关文章

百度SEO优化基本原理(掌握SEO基础,提高网站排名)

随着互联网的迅速发展,越来越多的企业开始意识到网站优化的重要性,其中百度SEO优化是企业不可忽视的一项工作。本文将介绍百度SEO优化的基本概念、步骤、原理、解决方法和提升网站标题优化的方法。蘑菇号-www.mooogu.cn 百度SEO优化是指针对百度搜索引擎…

[源码系列:手写spring] AOP第一节:切点表达式

在本专栏之前的文章中已经带大家熟悉了Spirng中核心概念IOC的原理以及手写了核心代码,接下来将继续介绍Spring中另一核心概念AOP。 AOP即切面编程是Spring框架中的一个关键概念,它允许开发者在应用程序中优雅地处理横切关注点,如日志…

c++程序内存区域划分

目录 内存区域划分 例题: malloc,calloc和realloc的区别 new和delete 申请空间并初始化 申请多个空间: new和delete对于自定义类型的处理: new和delete一定要匹配 new和malloc以及delete和free的区别 抛异常的使用方法&…

ubuntu 开启笔记本摄像头并修复画面颠倒问题

文章目录 基本环境状况: 没找到摄像头检查 opencv检查系统应用 键盘右侧,硬件层面开启摄像头画面镜像问题 基本环境 笔记本: 联想拯救者 系统: ubuntu 22.04 状况: 没找到摄像头 检查 opencv 使用 cv::VideoCaptu…

vue elemnt封装文件上传 +根据后台接口来上传文件

1.创建一个新的子页面,放文件上传 <template> <div><el-uploadaction"https://jsonplaceholder.typicode.com/posts/"list-type"picture-card":on-preview"handlePictureCardPreview":on-remove"handleRemove">&l…

7.网络原理之TCP_IP

文章目录 1.网络基础1.1认识IP地址1.2子网掩码1.3认识MAC地址1.4一跳一跳的网络数据传输1.5总结IP地址和MAC地址1.6网络设备及相关技术1.6.1集线器&#xff1a;转发所有端口1.6.2交换机&#xff1a;MAC地址转换表转发对应端口1.6.3主机&#xff1a;网络分层从上到下封装1.6.4主…

交换机技术综述(第十一课)

交换机技术综述基础 1 Vlan技术的学习 三大接口 Vlan技术实操(第四课)_IHOPEDREAM的博客-CSDN博客https://drean.blog.csdn.net/article/details/132455765?spm=1001.2014.3001.5502

论文阅读:DisCO Portrait Distortion Correction with Perspective-Aware 3D GANs

论文阅读&#xff1a;DisCO Portrait Distortion Correction with Perspective-Aware 3D GANs 今天介绍一篇比较有趣的文章&#xff0c;通过 3D GAN inversion 来解决成像的透视畸变问题 Abstract 文章的摘要&#xff0c;一开始就介绍说&#xff0c;近距离成像的时候&#x…

【3维视觉】20230922_网格编码最新进展

网格编码技术研究进展 1. VDMC编码技术 1.1 VDMC介绍 1.1.1 编码对象 具有时变拓扑的动态网格 1.1.2 技术细节 VDMC的编码和解码过程的高层框图如图2所示[4][5]。预处理模块提供了更好的率失真( Rate-Distortion&#xff0c;RD )性能&#xff0c;支持可伸缩解码和渐进传输…

Minecraft 1.20.x Forge模组开发 06.建筑生成

我们本次尝试在主世界生成一个自定义的建筑。 效果展示 效果展示 效果展示 由于版本更新缘故,1.20的建筑生成将不涉及任何Java包的代码编写,只需要在数据包中对建筑生成进行自定义。 1.首先我们要使用游戏中的结构方块制作一个建筑,结构方块使用教程参考1.16.5自定义建筑生…

记一次hyperf框架封装swoole自定义进程

背景 公司准备引入swoole和rabbitmq来处理公司业务。因此&#xff0c;我引入hyperf框架&#xff0c;想用swoole的多进程来实现。 自定义启动服务封装 <?php /*** 进程启动服务【manager】*/ declare(strict_types1);namespace App\Command;use Swoole; use Swoole\Proce…

软考知识产权基础知识

商标权可以根据需要无限延长 根据《商标法》的规定&#xff0c;商标的有效期为10年&#xff0c;自商标注册之日起计算。有效期届满后&#xff0c;可以递交商标续展申请。每次续展的有效期为10年。但是&#xff0c;商标续展仅限于最后一年有效期也就是期满前六个月内提交申请。…

服务注册发现_actuator微服务信息完善

SpringCloud体系里的&#xff0c;服务实体向eureka注册时&#xff0c;注册名默认是IP名:应用名:应用端口名。 问题&#xff1a; 自定义服务在Eureka上的实例名怎么弄呢 在服务提供者pom中配置Actuator依赖 <!-- actuator监控信息完善 --> <dependency><groupId…

011_第一代软件开发(三)

第一代软件开发(三) 文章目录 第一代软件开发(三)项目介绍带下知识点系统日志滤波器陷波滤波器带通滤波器 打印初始化调用打印机打印文件保存到PDF 总结一下 关键字&#xff1a; Qt、 Qml、 日志、 打印、 滤波器 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这…

排序算法:非比较排序(计数排序)

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关排序算法的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通…

2018 国际AIOps挑战赛单指标数据集分析

关于数据集 2018年国际AIOps 由中国建设银行、清华大学以及必示科技公司联合举办&#xff0c;尽管已经过去了这么长时间&#xff0c;其提供的比赛数据依然被用于智能运维相关算法的研究。这里我们对此数据集做简单的分析&#xff0c;把一些常用的数据分析方法在这里进行略微地…

Spring面试题13:Spring中ApplicationContext实现有哪些?Bean工厂和Applicationcontext有什么区别

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Spring中ApplicationContext实现有哪些? 在Spring框架中,有以下几种ApplicationContext的实现: ClassPathXmlApplicationContext:从类路径下的…

基于springboot消防员招录系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

​Segment-and-Track Anything——通用智能视频分割、跟踪、编辑算法解读与源码部署

一、 万物分割 随着Meta发布的Segment Anything Model (万物分割)的论文并开源了相关的算法&#xff0c;我们可以从中看到&#xff0c;SAM与GPT-4类似&#xff0c;这篇论文的目标是&#xff08;零样本&#xff09;分割一切&#xff0c;将自然语言处理&#xff08;NLP&#xff…

【数据结构】二叉排序树;平衡二叉树的知识点学习总结

目录 1、二叉排序树 1.1 定义 1.2 查找操作 1.3 插入操作 1.4 删除操作 1.5 C语言实现二叉排序树的基本操作 2、平衡二叉树的知识点总结 2.1 定义 2.2 插入操作 2.3 调整“不平衡” 2.4 删除操作 1、二叉排序树 1.1 定义 二叉排序树&#xff08;Binary Search …