![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端性能优化
文章平均质量分 72
三水草肃
爱前端
展开
-
用performance监控web性能
监控的指标:google开发者提出了一种RAIL模型来衡量应用性能。Response:响应用户输入,Animation:动画或者滚动需在10ms内产生下一帧,Ilde:最大化空闲时间,Load:页面加载时长不超过5秒。Animation,Idle,Load,分别代码web应用生命周期的四个不同方面。以用户为中心,最终目标是不是让你的网站在任何特定设备上都能运行很快,而是让用户满意,立即响应用户,在100毫秒以内确认用户输入,设置动画或滚动时,在10毫秒以内生转载 2022-02-13 20:58:54 · 1582 阅读 · 0 评论 -
解决localstorage容量大导致页面加载变慢
项目场景:提示:性能优化之localstorage的大容量导致加载变慢:例如:我负责一个项目,原先的数百条数据是存储在localstorage里面,但是localstorage容量标准是5MB问题描述:问题:我负责的项目localstorage存储的数据量太大,高达200+条。而且每条数据很长,所以每次页面加载/更新慢的让人受不了 原因分析:原因:localstorage容量标准是5MB,我负责的项目原先的存储在localstorage的数据量太大,导致性能低下。解决方案:我的解决原创 2021-09-05 14:44:53 · 2820 阅读 · 51 评论 -
前端性能优化方案总结~~干货满满!!!
图片格式和应用场景介绍jpg 存储和传输照片 有损压缩,加载快,体积小,不支持透明适合颜色丰富的照片,banner图,背景图png 透明,无损,体积大。适用于小logo,颜色简单且对比强烈的图片Gif动画,图标,不适合彩色图片,支持透明和不透明Webp适用于图形和半透明图像,提供有损和无损压缩不适用于彩色图片,图片压缩压缩png: node-pngquant-a=native跨平台,压缩比高,压缩png24非常好压缩 jpg: jpegtran压缩 gifGifsicle改变每原创 2021-06-05 16:37:35 · 340 阅读 · 46 评论