![](https://img-blog.csdnimg.cn/20201202110536476.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
性能优化
文章平均质量分 90
性能优化相关
皮蛋很白
没有什么难点是一觉醒来解决不了的
展开
-
前端性能优化学习 09 其它参考文章
前端性能优化清单[译] 2019 前端性能优化年度总结 — 第一部分2020 前端性能优化清单2020前端性能优化清单(一)2020前端性能优化清单(二)2020前端性能优化清单(三)2020前端性能优化清单(四)2020前端性能优化清单(五)2020前端性能优化清单(六)2021 前端性能清单(原文)谷歌开发者 - Web 性能优化https://web.dev/rail/Web 性能 | MDNWeb页面全链路性能优化指南我是如何将网页性能提升5倍的 — 构建优.原创 2022-05-23 16:17:27 · 279 阅读 · 0 评论 -
前端性能优化学习 08 资源加载优化
图片延迟加载什么是延迟加载首先来想象一个场景,当浏览一个内容丰富的网站时,比如电商的商品列表页、主流视频网站的节目列表等,由于屏幕尺寸的限制,每次只能查看到视窗中的那部分内容,而要浏览完页面所包含的全部信息,就需要滚动页面,让屏幕视窗依次展示出整个页面的所有局部内容。显而易见,对于首屏之外的内容,特别是图片和视频,一方面由于资源文件很大,若是全部加载完,既费时又费力,还容易阻塞渲染引起卡顿;另一方面,就算加载完成,用户也不一定会滚动屏幕浏览到全部页面内容,如果首屏内容没能吸引住用户,那么很可能整个页面原创 2022-05-23 16:17:02 · 1181 阅读 · 0 评论 -
前端性能优化学习 07 图片优化
图片优化前端大部分的工作都围绕在 JavaScript 和 CSS 上,考虑如何更快地下载文件,如何提供给用户复杂而优雅的交互,如何高效合理地应用有限的处理和传输资源等,这些是用户感知的全部吗?当然,他们在前端开发和性能优化中的地位举足轻重,但 JavaScript 和 CSS 对用户感知而言,并不是最重要的部分,图像才是。我们在公众号发布文章或用 PPT 进行演讲时,都知道一条高效传递信息的原则:字不如表,表不如图。网站作为一种信息传递的媒介,且如今各类 Web 项目中,图像资源的使用占比也越来越大原创 2022-05-23 16:16:16 · 2286 阅读 · 0 评论 -
前端性能优化学习 06 渲染优化 03 页面布局与重绘优化、合成处理、小结
页面布局与重绘优化页面布局也叫作重排和回流,指的是浏览器对页面元素的几何属性进行计算并将最终结果绘制出来的过程。凡是元素的宽高尺寸、在页面中的位置及隐藏或显示等信息发生改变时,都会触发页面的重新布局。通常页面布局的作用范围会涉及整个文档,所以这个环节会带来大量的性能开销,我们在开发过程中,应当从代码层面出发,尽量避免页面布局或最小化其处理次数。如果仅修改了 DOM 元素的样式,而未影响其几何属性时,则浏览器会跳过页面布局的计算环节,直接进入重绘阶段。虽然重绘的性能开销不及页面布局高,但为了更高的性能体原创 2022-05-17 10:59:33 · 493 阅读 · 0 评论 -
前端性能优化学习 06 渲染优化 02 JavaScript 执行优化、计算样式优化
JavaScript 执行优化实现动画效果前端实现动画效果的方法有很多,比如在 CSS 中可以通过 transition 和 animation 来实现,在 HTML 中可以通过 canvas 来实现,而利用 JavaScript 通常最容易想到的方式是利用定时器 setInterval 或 setTimeout 来实现,即通过设置一个间隔时间来不断地改变目标图像地位置来达到视觉变化的效果。实践经验告诉我们,使用定时器实现的动画会在一些低端机器上出现抖动或者卡顿的现象,这主要是因为浏览器无法确定定时器原创 2022-05-17 10:58:20 · 536 阅读 · 0 评论 -
前端性能优化学习 06 渲染优化 01 渲染优化介绍、关键渲染路径
渲染优化如果把浏览器呈现页面的整个过程一分为二,前面所讲的主要是浏览器为呈现页面请求所需资源的部分;本章将主要关注浏览器获取到资源后,进行渲染部分的相关优化内容。在前面的前端页面的生命周期章节中,介绍过关键渲染路径的概念,浏览器通过这个过程对 HTML、CSS、JavaScript 等资源文件进行解析,然后组织渲染出最终的页面。本章将以此为基础,对渲染过程进行更深入的讨论,不仅包括打开一个网站的首次渲染,还有用户与页面进行交互后导致页面更改的渲染,即所谓的重绘与重排。其中除了对渲染过程的充分介绍,更重要原创 2022-05-17 10:56:17 · 1168 阅读 · 0 评论 -
前端性能优化学习 05 请求和响应优化 02(HTTP 缓存[强缓存、协商缓存、缓存策略等]、CDN 缓存)
HTTP 缓存在任何一个前端项目中,访问服务器获取数据都是很常见的事情,但是如果相同的数据被重复请求了不止一次,那么多余的请求次数必然会浪费网络带宽,以及延迟浏览器渲染所要处理的内容,从而影响用户的使用体验。如果用户使用的是按量计费的方式访问网络,那么多余的请求还会隐性地增加用户的网络流量资费。因此考虑使用缓存技术对已获取的资源进行重用,是一种提升网站性能与用户体验的有效策略。缓存的原理是在首次请求后保存一份请求资源的响应副本,当用户再次发起相同请求后,如果判断缓存命中则拦截请求,将之前存储的响应副本返原创 2022-05-16 11:47:00 · 1257 阅读 · 1 评论 -
前端性能优化学习 05 请求和响应优化 01(DNS 解析、HTTP 长连接、HTTP2、避免重定向、压缩传输的数据资源)
请求和响应优化**目的:**更快的内容到达时间。核心思路:更好的连接传输效率更少的请求数控i昂更小的资源大小合适的缓存策略最佳实践:减少 DNS 查找:每次主机名的解析都需要一次网络往返,从而增加了请求的延迟时间,同时还会阻塞后续的请求。重用 TCP 连接:尽可能的使用持久连接,以消除因 TCP 握手和慢启动导致的延迟。减少 HTTP 重定向:HTTP 重定向需要额外的 DNS 查询、TCP 握手等非常耗时,最佳的重定向次数为0。压缩传输的资源:比如 Gzip、图片压缩。使用缓原创 2022-05-16 11:39:39 · 1600 阅读 · 1 评论 -
前端性能优化学习 04 前端页面的生命周期
前端页面的生命周期性能问题呈现给用户的感受往往是简单而直接的:加载资源缓慢、运行过程卡顿或响应交互迟缓等,当把这些问题呈现到前端工程师面前时,却是另一种系统级别复杂的图景。从域名解析、TCP 建立连接到 HTTP 的请求与响应,以及从资源请求、文件解析到关键渲染路径等,每一个环节都有可能因为设计不当、考虑不周、运行出错而产生性能不佳的体验。作为前端工程师,为了能在遇到性能问题时快速而准确地定位问题所在,并设计可行的优化方案,熟悉前端页面的生命周期是一堂必修课。下面从一道常见的前端面试题开始,通过对此问原创 2022-05-13 16:07:37 · 799 阅读 · 0 评论 -
前端性能优化学习 03 Web 性能测试
Web 性能测试作为网站应用的开发者或维护者,我们需要时常关注网站当前的健康状况,譬如在主流程运行正常的情况下,各方面性能体验是否满足期望,是否存在改进与提升的空间,如何进行快速且准确的问题定位等,为了满足这些诉求,我们需要进行全面且客观的性能检测。性能检测的认知性能检测作为性能优化过程中的一环,它的目的通常是给后续优化工作提供指导方向、参考基线及前后对比的依据。性能检测并不是一次性执行结束后就完成的工作,它会在检测、记录和改进的迭代过程中不断重复,来协助网站的性能优化不断接近期望的效果。在展开介绍原创 2022-05-13 11:46:49 · 1935 阅读 · 1 评论 -
前端性能优化学习 02 Web 性能指标
Web 性能指标我们已经直到性能的重要性,但当我们讨论性能的时候,让一个网页变得更快,具体指哪些内容?事实上性能是相对的:对于一个用户而言,一个站点可能速度很快(在具有功能强大的设备的快速网络上),而对于另一个用户而言,一个站点可能会较慢(在具有低端设备的慢速网络上)。两个站点可能会在完全相同的时间内加载,但一个站点似乎加载速度会更快(如果它逐步加载内容,而不是等到最后显示所有内容)。一个网站可能加载很快,但在后来的用户交互会很慢。所以在讨论性能的时候,精确的、可量化的指标很重要。但是,一原创 2022-05-13 11:39:39 · 2289 阅读 · 0 评论 -
前端性能优化学习 01 前端性能优化介绍
前端性能优化介绍什么是 Web 性能MDN:Web 性能(web performance)是网站或应用程序的客观度量和可感知的用户体验。**减少总体加载时间:**减少文件体积,减少 HTTP 请求数量、使用预加载**使网站尽快可用:**仅加载首屏内容,其他内容根据需要进行懒加载**平滑和交互性:**使用 css 动画代替 js 动画、减少 UI 重绘**感知表现:**耗时操作要给用户反馈,比如 loading 动画、进度条、股价平等提示信息**性能测定:**性能指标、性能测试、性能监控持续优原创 2022-05-13 11:36:46 · 479 阅读 · 0 评论 -
React 项目性能优化最佳实践
React 是用来构建用户界面的,所以 React 性能优化的核心是减少渲染真实 DOM 节点的频率,减少 Virtual DOM diff 的频率。1 组件卸载前进行清理操作在组件中为 window 注册的全局事件,以及定时器,在组件卸载前要清理掉,放置组件卸载后继续执行影响应用性能。// App.jsimport { useState, useEffect } from 'react'import ReactDOM from 'react-dom'function App() { let原创 2021-06-22 16:51:55 · 642 阅读 · 0 评论 -
JS从代码执行流程解析性能优化
JSBenchJSBench 是在线测试JS执行效率的网站。其他工具还有 JSPerf ,但已停止维护。使用 JSBench 进行测试的时候,建议只打开一个标签页,因为浏览器是支持多线程的,随着打开的标签页越来越多,其他标签页会抢占当前标签页的资源。在运行测试的时候,最好保持在当前页面,或者说当前的进程不要关掉,因为操作系统是可以同时进行多件事情的,代码的执行是需要消耗时间的,如果将当前页面关闭(最小化)去做其他事情,它有可能会被挂起,等到再回来看的时候,计算的时间不一定是准确的。另外做测试的时原创 2021-04-22 12:42:43 · 363 阅读 · 0 评论 -
网页加速优化简单总结
加速优化常见问题静态资源图片、CSS、JS等代码编码效率、内存泄漏、页面卡死线程阻塞页面渲染的代码,例如 alert服务器带宽小、处理慢等网站性能优化常见优化的地方一般做好 网站性能优化 常见的几个优化即可。图片控制单张图片大小在 200kb 以内(根据服务器带宽可适当调大)将图片大小控制在服务器带宽加载速度以内,如 1Mbps=1024Kbps=1024/8KBps=128KB/s非透明背景图片格式均改为 .jpg.jpg 比 .png原创 2020-12-07 11:50:12 · 331 阅读 · 0 评论 -
打包优化 - 为什么现在打包不用 DLL
现在很少用 DLL,那是 Vue CLI 3 时候的优化,现在已经过时。Vue CLI 和 create-react-app 的源码中都删除了 DLL 配置的代码。理由是 Webpack 4 的打包性能足够好,dll 没有继续维护的必要。主要说的就是 Webpack 4 的代码拆分优化(splitChunks)。官方解释:Vue CLI issueBuilddll option will be removed. Webpack 4 should provide good enough原创 2020-12-02 11:40:43 · 419 阅读 · 0 评论 -
打包优化 - CDN引入不想被打包的第三方库
目的webpack 默认会将使用的模块全部打包成本地文件,除了使用代码拆分(code split)优化打包,也可以使用 CDN,减少打包的内容,享受 CDN 缓存的优势。webpack 的 externals 配置可以将指定的第三方库移除打包清单,减少打包时间和体积,但又不影响使用模块化的方式导入第三方库,例如 import。例如,使用 CDN 引入 element-ui,依然使用 import ElementUI from 'element-ui' 导入。CDN 引入 element-ui以 V原创 2020-12-02 11:08:25 · 1914 阅读 · 0 评论