性能优化
文章平均质量分 80
英子的搬砖日志
人生就像超级玛丽,在你没加蘑菇之前,一个小王八就能整死你!
展开
-
vue项目:webpack打包优化实践
详细介绍了vue2项目中使用webpack打包,项目性能优化遇到的问题及解决方案。原创 2024-03-12 11:39:34 · 913 阅读 · 0 评论 -
Lighthouse(灯塔)—— Chrome浏览器强大的性能测试工具
详细介绍chrome浏览器的Lighthouse使用方法,及测试结果分析解读原创 2023-11-27 18:00:08 · 5042 阅读 · 1 评论 -
在vue3+ts+vite2项目中引入并使用打包分析插件
相比webpack打包时,用webpack-bundle-analyzer插件来进行打包体积大小的分析,在vite打包中,由于vite实际用的是rollup 打包,本文就介绍如何在项目中接入rollup-plugin-visualizer插件。1、安装插件npm install rollup-plugin-visualizer --save-dev安装完毕,在package.json中会看到对应的版本,如下:2、在vite.confg.ts引入插件并使用// 引入import { visua原创 2022-01-04 15:19:54 · 3808 阅读 · 2 评论 -
前端缓存之HTTP缓存
Web 缓存大致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN 缓存)、浏览器缓存。浏览器缓存有 http缓存、indexDB、cookie、localstorage 等。本次我们重点理解http缓存相关问题。http缓存,主要分为强缓存和协商缓存。1、浏览器加载一个页面资源的简单流程为:浏览器根据这个资源的http头信息来判断是否命中强缓存,如果命中强缓存就直接加载在缓存中的资源,并且不会讲请求发送到服务端。(强缓存)如果没有命中强缓存,则浏览器会将资源加载请求发送到服务器,服务原创 2021-04-25 12:49:46 · 461 阅读 · 0 评论 -
关于防抖(debounce)和节流(throttling)
在JS中,当事件触发很频繁,浏览器来不及处理时,就会导致页面出现卡顿的现象,解决这种卡顿问题,就需要用到了防抖和节流。防抖和节流就是针对响应跟不上触发频率这类问题解决方案。1、含义防抖(debounce) 策略是,当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作。节流(throttle) 策略是,在固定周期内,只执行一次动作,若有新事件触发,不执行,周期结束后,又有事件触发,开始新的周期。即:高频事件触发,但是在n秒内只会执行一次,会稀释函数的执行频率原创 2020-11-16 18:06:08 · 720 阅读 · 0 评论 -
CSS Sprite 学习笔记
CSS Sprite 译为图片精灵,由称“雪碧图”,是一种网页图片应用的处理方式,简单来说就是把几张图拼成一张图而已。它提供了一种把很多小图片拼成一张大图片的,从而在低并发的浏览器上达到快速传输并呈现内容的目的原创 2017-07-20 20:11:23 · 537 阅读 · 0 评论 -
前端性能优化笔记
前端性能优化原创 2017-07-25 13:47:39 · 402 阅读 · 0 评论 -
《高性能网站建设指南》之14个性能黄金法则
本文简单的总结了《高性能网站建设指南》这本书中的14条性能黄金法则,描述的十分的简单,如果想要深入了解这些规则的原理,就需要仔细去阅读这本书,本文仅提供了简单的记录和个人理解O(∩_∩)O~。但是不得不说,这是一本每个从事前端开发工作者都应该必读的工具书,书中说得非常非常的好,页数也不多,可以反复的阅读深入理解,在本文底部也有提供电子版的pdf。规则一、减少HTTP请求HTTP是一种客户端/...原创 2019-04-29 11:33:13 · 570 阅读 · 0 评论