前端面试题复习 - 性能优化

图片加载优化

  • 很多修饰类图片完全可以用css代替
  • 对于移动端来说,很多图片都可以用CDN加载
  • 小图使用base64格式
  • 使用雪碧图
  • 能够显示WebP格式的浏览器尽量使用WebP格式。因为WebP格式具有更好的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量,缺点就是兼容性不好
  • 图标尽量用SVG格式

DNS预解析

DNS解析也需要时间,可以用预解析来预先获得域名所对应的IP

<link rel = "dns-prefetch" href="yuchengkai.cn">

CDN

尽量用CDN加载静态资源,同时因为浏览器对于单个域名有并发请求上限,可以考虑使用多个CDN域名

懒加载

懒加载就是将不关键的资源延后加载

懒加载的原理就是只加载自定义区域(通常是可视区域,也可以是即将进入可视区域)内需要加载的东西。对于图片来说,先设置图片标签的src属性为一张占位图,将真实的图片资源放入一个自定义属性中,当进入自定义区域时,就将自定义属性替换为src属性,这样图片就会去下载资源,实现了图片懒加载

懒加载不仅可以用于图片,也可以使用在别的资源上,比如进入可视区域才开始播放视频

懒执行

懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化,对于某些耗时逻辑并不需要再首屏就使用的,就可以使用懒执行。懒执行需要唤醒,一般可以通过定时器或者事件的调用来唤醒

预渲染

可以通过预渲染将下载的文件预先在后台渲染

<link rel="prerender" href="http://example.com">

预渲染虽然可以提高页面的加载速度,但是要确保该页面大概率会被用户在之后打开,否则就是白白浪费资源去渲染

节流

例如滚动会发送网络请求,但我们并不希望用户在滚动过程中一直发送请求,而是每隔一段时间发起一次,对于这种情况就可以使用节流

防抖

例如某个按钮点击会触发网络请求,但是我们并序希望每次点击都发送网络请求,而是用户点击按钮一段时间后再次点击的情况才会去发送网络请求,对于这种情况我们就可以使用防抖。

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

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

相关文章

3、用Vue快雕塑搭建一个管理系统的页面布局框架

3.2.顶部栏header 在el-header标签里对标签栏header进行样式定义 <template><div id"app"><el-container><el-header style"background-color: #4c535a"><img src"/assets/logo.png" alt"" style"w…

贪心+数学

一、题目 1、题目描述 给你一个下标从 0 开始的整数数组 tasks &#xff0c;其中 tasks[i] 表示任务的难度级别。在每一轮中&#xff0c;你可以完成 2 个或者 3 个 相同难度级别 的任务。 返回完成所有任务需要的 最少 轮数&#xff0c;如果无法完成所有任务&#xff0c;返回 …

运维别卷系列 - 云原生监控平台 之 05.prometheus alertManager 实践

文章目录 [toc]Alertmanager 简介Alertmanager 实现的核心概念GroupingInhibitionSilencesClient behaviorHigh Availability Alertmanager 配置文件globaltemplatesrouteinhibit_rulesreceivers Alertmanager 部署创建 cm创建 svc创建 stsPrometheus 配置告警Prometheus 配置文…

Frida-RPC 调用

demo frida-rpc通过调用已加载到内存中的函数,直接获取到结果: import fridardev = frida.get_remote_device() session = rdev.attach("大姨妈")scr = """rpc.exports = { encrypt(j2, str){var res;Java.perform(function () {var Crypt = Ja…

K-means 算法【python,算法,机器学习】

K-means 算法试图将数据集中的样本划分为若干个子集&#xff0c;每个子集称为一个簇&#xff0c;通过该算法使得每个聚类内的数据点尽可能相似&#xff08;即距离该聚类的中心点最近&#xff09;&#xff0c;而不同聚类之间的数据点尽可能不相似。 算法步骤如下&#xff1a; 从…

Kubernetes 的命令行工具kubectl介绍

目录 1. 查看资源状态2. 创建资源3. 描述资源4. 更新资源5. 删除资源6. 暴露服务7. 状态检查与故障排查8. 扩缩容9. 自动补全10. 上下文管理11. 查看事件12. 资源编辑 kubectl 是 Kubernetes 的命令行工具&#xff0c;它用于与 Kubernetes 集群进行交互&#xff0c;执行各种管理…

Vu2之使用provide与inject传递数据案例

Vu2之使用provide与inject传递数据案例 在Vue 2中&#xff0c;provide 和 inject 是一对用于在组件树中传递数据的高级选项。它们允许祖先组件向其所有子孙后代组件提供数据&#xff0c;而无需显式地通过 props 或事件进行传递。 provide 选项是在祖先组件中声明的&#xff0c;…

运维别卷系列 - 云原生监控平台 之 03.prometheus label 实践

文章目录 [toc]label 简介自定义标签relabel_configsregexrelabel_action metric_relabel_configs两者的区别 实践 label 简介 label 对于 Prometheus 来说&#xff0c;属于数据处理的方式&#xff0c;Prometheus 是通过指定的 label 来查询数据 Prometheus 的 target 中实例&…

css 步骤条虚线渐变色效果实现

效果如图所示&#xff1a; 思路&#xff1a; 使用元素覆盖的方式实现视觉上虚线的效果 实现代码&#xff1a; html布局 <ul class"details-cont"><li class"details-li" v-for"item in 3" :key"item"><div class&qu…

(教程)gpt-4o如何使用,怎么体验?gpt-4o和gpt-4-turbo的区别

今天OpenAI发布了gpt-4o&#xff0c;我体验之后&#xff0c;gpt-4o简直逆天了。中文能力也挺别强。速度比现在的gpt4还要快。 早在 5 月 11 日&#xff0c;Sam 就在推文中表示&#xff1a;OpenAI 并没有推出 GPT-5&#xff0c;或搜索引擎&#xff0c;但团队一直在努力研发一些…

Git版本控制工具的原理及应用详解(一)

本系列文章简介&#xff1a; 随着软件开发的复杂性不断增加&#xff0c;版本控制成为了开发团队中不可或缺的工具之一。在过去的几十年里&#xff0c;版本控制工具经历了各种发展和演变&#xff0c;其中Git无疑是目前最受欢迎和广泛应用的版本控制工具之一。 Git的出现为开发者…

Nodejs 第七十章(OSS)

OSS OSS&#xff08;Object Storage Service&#xff09;是一种云存储服务&#xff0c;提供了一种高度可扩展的、安全可靠的对象存储解决方案 OSS 对象存储以对象为基本存储单元&#xff0c;每个对象都有唯一的标识符&#xff08;称为对象键&#xff09;和数据。这些对象可以…

【保姆级介绍下运维】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

编译安装Python3

1、源码安装 1、安装依赖软件包 yum -y install gcc gcc-c zlib-devel bzip2-devel openssl-devel sqlite-devel readline-devel libffi-devel # python3.7版本安装 2、下载 curl -o python3.6.5.tgz https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz // 或者 w…

2024年小学生古诗文大会备考:吃透历年真题和知识点(持续)

根据往年的安排&#xff0c;2024年小学生古诗文大会预计这个月就将启动。该如何备考2024年小学生古诗文大会呢&#xff1f;根据往期的经验&#xff0c;只要吃透这些真题和背后的知识点&#xff0c;通过上海小学生古诗文大会的初选&#xff08;初赛&#xff09;一点问题都没有。…

数据库SQL语言实战(八)

目录 练习题 题目一 题目二 题目三 题目四 题目五 题目六 题目七 题目八 题目九 题目十 练习题 题目一 找出年龄小于20岁且是“物理学院”的学生的学号、姓名、院系名称,按学号排序 create or replace view test6_01 as select S.sid,S.name,S.dname fr…

Myql 数据库采用RAID存储带来电池充放电问题原因以及处理方式

一. 背景 Mysql作为数据库, 在某些特定情况下会采用RAID&#xff08;冗余磁盘阵列&#xff09;进行存储. 以保证数据库的性能以及可靠性. 1.1. RAID种类 RAID&#xff08;冗余磁盘阵列&#xff0c;Redundant Array of Independent Disks&#xff09;是一种用于数据存储的技术…

浅析Free RTOS中Queue的应用

目录 概述 1 认识Queue 1.1 Queue定义 1.2 FreeRTOS中的Queue 1.3 Queue状态 1.4 Queue内容 1.5 发送和接收Message 1.5.1 发送message 1.5.2 接收Message 2 Queue的特性 2.1 数据存储 2.2 可被多任务存取 2.3 读Queue时阻塞 2.4 写Queue时阻塞 3 使用Queue 3.1…

怎么把图片上的字去掉

将图片上的字去掉通常需要使用图像编辑软件或在线工具。以下是一些常用的方法和步骤&#xff1a; 使用Adobe Photoshop&#xff1a; 打开Photoshop&#xff0c;导入需要编辑的图片。 选择“橡皮擦工具”或“克隆图章工具”。 如果使用“橡皮擦工具”&#xff0c;调整橡皮擦的…

YOLOv9改进策略 | 低照度图像篇 | 2024最新改进CPA-Enhancer链式思考网络(适用低照度、图像去雾、雨天、雪天)

一、本文介绍 本文给大家带来的2024.3月份最新改进机制&#xff0c;由CPA-Enhancer: Chain-of-Thought Prompted Adaptive Enhancer for Object Detection under Unknown Degradations论文提出的CPA-Enhancer链式思考网络&#xff0c;CPA-Enhancer通过引入链式思考提示机制&am…