前端技能树，面试复习第 17 天—— 怎么对项目做性能优化（1）：图片优化 | CDN | 懒加载 | 回流重绘 | 动画

已于 2022-07-14 08:12:08 修改
阅读量200 收藏 1
点赞数 3
分类专栏： 前端面试复习笔记 文章标签： 前端 面试 性能优化
于 2022-07-04 21:26:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ImagineCode/article/details/125608770
版权
本文介绍了前端性能优化的重要手段，包括CDN（内容分发网络）的概念、作用、原理及使用场景，懒加载的概念、特点、与预加载的区别及其实现原理，以及如何避免回流与重绘以优化动画性能。同时探讨了如何对项目中的图片进行优化，如使用正确的图片格式、尺寸和CDN等策略。
摘要由CSDN通过智能技术生成

1. CDN的概念

CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

典型的CDN系统由下面三个部分组成：

  • 分发服务系统：最基本的工作单元就是 Cache 设备，Cache（边缘 Cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户。同时 Cache 还负责与源站点进行内容同步，把更新的内容以及本地没有的内容从源站点获取并保存在本地。Cache 设备的数量、规模、总服务能力是衡量一个 CDN 系统服务能力的最基本的指标。
  • 负载均衡系统：主要功能是负责对所有发起服务请求的用户进行访问调度，确定提供给用户的最终实际访问地址。两级调度体系分为全局负载
了解本专栏 订阅专栏 解锁全文 超级会员免费看
编程轨迹_
关注
专栏目录
订阅专栏
17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲
cYang2030的博客
12-09 5976
本文首发于17张思维导图，最全前端复习资料总结，转载请联系作者 前言 2020年最后一个月了，熬夜多天整理出17张思维导图，对前端面试复习知识点进行了最全的总结，分享给大家。每个知识点都尽量找到最好的文章来解释，通过思维导图的形式进行展示。 给大家准备了高清的思维导图和食用更加方便的PDF文档，全部聚合思维导图一张，分类思维导图17张，涉及前端开发的方方面面面，JS基础，工程化，性能优化，安全，框架等。如果您是准备面试，或者享扩展前端知识，都可以通过这个目录进行学习。 废话不多说，下面分类展开来说，收藏.
在项目中如何做图片优化
weixin_45457515的博客
08-05 863
（1）、降低图片的大小 我们的目的是降低图片的大小kb，有很多方法可以做，压缩图片，选择更小kb的图片格式，以达到最优的显示效果,找在线压缩图的网站如TinyPNG:一个压缩PNG的神站 ​ （2）、选择适当的图片宽度尺寸（即响应式图片） ** （3）减少HTTP的网络资源请求 考虑CSSSprites(背景精灵图/雪碧图)** 怎么使用精灵图？ 利用CSS的background-imag...
016、Vue-启动优化-压缩、CDN、懒加载
༺ bestcxx的专栏 ༻
11-07 550
Vue 优化
vue项目打包优化之CDN和路由懒加载
qq_34455363的博客
06-05 2054
路由懒加载 一.前言 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 让组件按需加载 1.修改 router/index.js 中导入组件的语法 2 **修改 /build/webpack.prod.conf.js 中的chunkFilename CDN优化第三包的...
前端的 发包压缩（gzip压缩）、资源懒加载、CDN加速 简单理解
不二喵老师
02-18 894
1. 发包压缩（gzip压缩） 主要是压缩你js的资源大小 a)引入compression webpack plugin插件 npm i -D compression-webpack-plugin b)vue cli3.0 可在vue.config.js中 如下配置： const path = require("path"); const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件 co...
使用CDN优化首页加载速度
FanMLei的博客
12-17 4018
之前使用vue构建的前端页面每次加载都需要十几秒的时间，最初的时候因为浏览器有缓存一直没有发现这个问题，后来换用设备访问的时候才发现。不想花费太多的时间去优化vue的代码，感觉作用不大，毕竟服务器带宽只有1M，再怎么压缩文件大小都需要很长时间传输，所以使用CDN去加速静态资源 先看一下之前的加载速度，简直惨不忍睹 首先需要在云服务商那购买CDN服务，我的服务器是腾讯云的正好腾讯云也有免费的CD...
前端面试复习6---web前端性能优化
EthanSmile
08-18 240
前端性能优化是提升用户体验的关键。通过压缩和合并文件、减少网络请求、延迟加载图片等优化，可以加快网页加载速度。优化关键渲染路径、减少回流重绘，提升交互响应。优化资源缓存、使用CDN加速，减少服务器请求。合理使用缓存、压缩和分块传输，减少资源大小。持续监测性能，优化前端代码和设计。最终目标是提高用户体验，让用户感受到更快、流畅的网页加载和交互。
【性能优化】 ------ 前端面试必备 --- 复习专用
qq_45359288的博客
06-11 250
重绘不⼀定重排，重排必定重绘 布局发生了改变就会触发重排（回流），样式发生了改变就会触发重绘重绘：一个元素的 样式/ 几何属性发生改变（例如背景色、文字颜色），但是没有改变布局属性（元素外观重新展示）重排（回流）：元素布局位置发生变化，倒回去重新渲染display：none会触发重排，visibility：hidden会触发重绘回流触发条件回答总结！！！ 重排和重绘是浏览器关键渲染路径上的两个节点， 浏览器的关键渲染路径就是 DOM 和 CSSOM 生成渲染树，然后根据渲染树通过一个布局(也叫 layout
2020年前端面试复习必读精选文章【赠复习导图】
xb's area
04-10 3575
前言 之前写过一篇 一年半经验如何准备阿里巴巴前端面试，给大家分享了一个面试复习导图，有很多朋友说希望能够针对每个 case 提供一个参考答案。 写答案就算了，一是精力有限，二是我觉得大家还是需要自己理解总结会比较好。 给大家整理了一下每个 case 一些还算不错的文章吧（还包括一些躺在我收藏夹里的好文章），大家可以自己看文章总结一下答案，这样也会理解更深刻。 并不是所有文章都需要看，希望是一个...
2020年前端面试复习必读文章【超百篇文章赠复习导图】，移动开发工程师的发展路线
m0_64319112的博客
11-29 389
重新认识构造函数、原型和原型链 JavaScript深入之从原型到原型链 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（一） 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（二） 最详尽的 JS 原型与原型链终极详解，没有「可能是」。（三） JavaScript 引擎基础：原型优化 Prototypes in JavaScript JavaScript深入之创建对象的多种方式以及优缺点 详解JS原型链与继承 从__proto__和prototype来深入理解JS对象和原型链 代码复用模式.
2020年前端面试复习必读精选文章，必看!!
webqianduan1的博客
07-06 2956
建议收藏文章，结合复习导图食用，效果更佳。 1. JavaScript 基础 1.1 执行上下文/作用域链/闭包 理解 JavaScript 中的执行上下文和执行栈 JavaScript深入之执行上下文栈 一道js面试题引发的思考 JavaScript深入之词法作用域和动态作用域 JavaScript深入之作用域链 发现 JavaScript 中闭包的强大威力 JavaScript闭包的底层运行机制 我从来不理解JavaScript闭包，直到有人这样向我解释它... ..
懒加载的原理及实现
热门推荐
bury_的博客
03-11 3万+
1.懒加载概念 对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。 2.懒加载实现原理 2.1监听onscroll事件判断资源位置 首先为所有懒加载的静态资源添加自定义属性字段，比如如果是图片，可以指定data-src为真实的图片地址，src指向loading的图片。 然后当资源进入视口的时候，...
前端图片加载优化，懒加载，按需加载，webp格式兼容性处理
晨露
03-04 4021
背景 网页中存在很多存储于腾讯云的CDN形式的高清图，大多为PNG格式，大小从几百kb到几十M不等，张数由1张到上百张不等。由此导致页面的图片加载缓慢。 前端解决方案: png格式转为webp格式（无损压缩） 图片按需加载。 针对以上两个方案需要注意的点如下： webp格式的兼容性 图片按需加载的更优方案 ...
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 234
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
【笔记】Day2.3.1DTO对象
最新发布
2301_81538937的博客
10-11 115
当前端传来的数据中包含后端数据库没有的字段时，DTO 可以对这些数据进行转换和映射，以确保后端可以正常接收并处理这些数据。就传到（经过）DTO DTO对前端数据进行转换，使得后端数据库得以正常接收前端传回的数据。当前端传回的数据中含有后端数据库没有的字段时。DTO是一个联系前端数据和后端数据库的桥梁。一个默认前提：前端传回数据到数据库。存着后端数据库中没有的实体字段。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
分享有趣的、贴近生活的CS知识
10-07 903
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
昆虫分类与检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
qunshankeji的博客
10-08 1331
数据集信息展示在昆虫分类与检测的研究领域，数据集的构建与应用至关重要。本项目采用的数据集名为“Bug Gan”，其设计旨在为改进YOLOv8模型提供丰富的训练素材，以实现更高效的昆虫识别与分类。该数据集包含29个不同的昆虫类别，涵盖了广泛的生物多样性，能够有效支持深度学习模型在复杂环境中的学习与推理。
基于Java(Jsp+Sevlet）+MySql 实现的（Web）成绩管理系统
神仙别闹的自留地
10-08 1633
如果能把负责学生成绩管理的模块独立出来形成一个独立的系统，便可以有效降低教务系统的数据量，不仅可以方便管理员对于所有学生的信息进行系统的管理，而且便于教师对学生成绩进行查询和修改，学生也可以查询自己的成绩。因此，开发一套合适的、兼容性好的系统是很有必要的。：DAO层主要是做数据持久层的工作，负责与数据库进行联络的一些任务都封装在此，DAO层的设计首先是设计DAO的接口，然后定义此接口的实现类，然后就可在模块中调用此接口来进行数据业务的处理，而不用关心此接口的具体实现类是哪个类，显得结构非常清晰。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程轨迹_

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值