大家好，我是前端西瓜哥。今天带大家学习如何启用 gzip 来做前端性能优化。HTTP 上的 gzipgzip 是一种优秀的压缩算法，我们可以在 HTTP 请求上对一些文本文件，设置 gzip 压缩。服务端将响应头设置上 Content-Encoding: gzip，表示当前资源会使用 gzip 压缩，提示客户端解压使用。当然前提是客户端支持该压缩算法，服务端 …
最新内容
先为 `src` 赋值成一个通用的预览图，下拉时候再动态赋值成正式的图片。`preview.png`是预览图片，比较小，加载很快，而且很多图片都共用这个`preview.png`，加载一次即可。待页面下拉，图片显示出来时，再去替换`src`为`data-realsrc`的值。<img src="preview.png" data-rea …
大家好，我是前端西瓜哥。今天带大家来学习如何做 React 性能优化。使用 React.memo()一个组件可以通过 React.memo 方法得到一个添加了缓存功能的新组件。const Comp = props => { }const MemorizedComp&nbs …
1. 代码优化代码压缩与混淆工具：使用工具如 webpack、Rollup、esbuild 来压缩和混淆代码，减小文件体积。配置：开启 TerserPlugin 或 babel-minify 进行压缩。减少冗余代码删除未使用的代码（Dead Code）。使用动态 import() 按需加载模块。避免重复加载第三方库。Tree Shaking去除未使用的模块， …
上一篇文章介绍的是《浏览器缓存机制》，浏览器缓存是浏览器保存数据用于快速读取或避免请求重复资源，提升网页加载速度。缓存的数据到底放哪了呢？作为开发者，有时也需要检查一下缓存中的内容。所以介绍下缓存方法以及缓存内容在哪查找？1、http 缓存http缓存是存在于服务器与浏览器之间，是一种保存资源副本并在下次请求时直接使用该副本的技术。web缓存发现请求资源已经 …
「小墨是前端」专注分享前端技术，推荐优秀的开源项目，展示Github、Gitee上的创意作品，带你深入前端底层，一起成长。网页加载速度慢？用户体验差？请求超时让人崩溃？别慌！今天带来 Axios 和 Fetch 的取消请求秘籍，助你轻松掌控异步操作，让网页像火箭一样飞速！为什么需要取消请求？想象一下，用户搜索商品，触发一个耗时请求。但用户没耐心等，立马换了个 …
背景介绍：不知道你有没有碰到过这些情况：被通知下周一前一定要解决某个bug，现在已经是周五下午了；上线封版前一天被通知客户机器性能不行，打不开某个页面，当时已经是晚上10点了；晚上2点接到电话，某个系统现在运行不起来，但是明天要给客户领导演示，然后你还没带电脑回家...假如你也有这些情况，那么恭喜你，这只是开始...假如没有，那么也恭喜你，你迟早会遇到的.. …
1. 减少 HTTP 请求的数量和大小，合并、压缩、缓存静态资源，避免重复请求和无用请求。以下是一个使用 Node.js 和 Gulp 自动化构建工具来合并、压缩和缓存静态资源的示例：1. 安装 Gulp 和相关依赖：$ npm install gulp gulp-concat gulp-uglify gulp-rename gulp-cache2. 在项目 …
今天说的这6个技巧可以帮助我们写出更好，更简洁，更优雅的前端JavaScript代码。01. 字符串自动匹配当需要检查一个值是否满足我们要求的值的时候，常用的方法是使用`||`和`===`来判断和匹配。但是如果大量使用这种判断方式，我们的代码肯定会变得非常臃肿，写起来非常累。其实我们可以用Array.includes来帮助我们自动匹配，代码就是简洁很多。优化 …
概述PC优化手段在Mobile侧同样适用在Mobile侧我们提出三秒种渲染完成首屏指标基于第二点，首屏加载3秒完成或使用Loading基于联通3G网络平均338KBs(2.71Mbs），所以首屏资源不应超过1014KBMobile侧因手机配置原因，除加载外渲染速度也是优化重点基于第五点，要合理处理代码减少渲染损耗基于第二、第五点，所有影响首屏加载和渲染的代码 …