-
资源合并:
- 减少http请求数量
- 减少请求资源大小
- html压缩
- js压缩
- 文件合并
-
图片相关优化
- 业务场景:
- jpg-大部分不需要透明图片的场景
- png-大部分需要透明图片的场景
- webp-安卓全部
- svg矢量图-图片样式相对简单的业务场景
- 使用css精灵图优化
- 原理:将多个小图标使用精灵图技术拼接成一张大图,图片请求只需要一次就可以完成
- Image inline
- 将图片的内容内嵌到html当中(将图片转为base64编码加载)
- 减少http请求数量
- 使用矢量图:
- 使用SVG进行矢量图的绘制
- 使用iconfont解决icon问题
- 在安卓下使用webp图片格式
- 业务场景:
-
缓存优化
- 浏览器缓存:
- 强制缓存
- 初次发送请求时,浏览器会向服务器发起请求,服务器收到浏览器请求后,返回资源中有一个Cache-Control给客户端,Cache-Control一般用来设置缓存最大的时间。当浏览器再次发送请求时,判断Cache-Control是否过期,如果没有过期,直接从缓存中拉去资源。
- 协商缓存
- 当强制缓存过期后,进入协商缓存;在第一次给浏览器发送请求时返回一个Etag和Last-Modified,浏览器会使用If-None-Match,并且保存在浏览器的请求头中,之后发送请求时,服务器会判断If-None-Match是否与自己最后一次修改的Etag相等,如果相等,则返回304,表示数据并未修改,如果不相等,则返回200,并返回新的资源和新的Etag值。
- 强制缓存
- 应用缓存:
- 实现应用级别缓存,用户在无网络情况下也能访问应用程序?
- 如何实现应用缓存?
- 在需要缓存的地方,先判断是否有缓存,如果有缓存读取显示,继续调用接口更新缓存数据
- 使用请求拦截器将数据缓存到本地,利用find方法查询时更新缓存数据还是添加缓存数据
-
// 保存应用缓存 export const cache = (url: string, data: any) => { const cache = localStorage.getItem('CACHE-DATA') || '[]' const cacheList = JSON.parse(cache) const obj = {name: url, content: data} if(cacheList) { const cacheItem = cacheList.find((item: any) => item.name === url) if(cacheItem) { cacheItem.content = data } else { cacheList.push(obj) } } else { cacheList.push(obj) } localStorage.setItem('CACHE-DATA', JSON.stringify(cacheList)) } // 获取应用缓存 export const getCache = (url: string) => { const cacheList = JSON.parse(localStorage.getItem('CACHE-DATA') || '[]') const cacheItem = cacheList?.find((item: any) => item.name == url ) return cacheItem.content }
- 浏览器缓存:
-
减少重排与重绘
- 使用translate替代top
- 使用opacity替换visibility
- 不要一条一条地修改 DOM 的样式,预先定义好 class,然后修改 DOM 的 className
- 把 DOM 离线后修改,比如:先把 DOM 给 display:none (有一次 Reflow),然后你修改100次,然后再把它显示出来
- 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
- 动画实现的速度的选择
- 对于动画新建图层
- 启用硬件GPU加速
-
第一次加载访问比较慢,出现白屏问题解决方案
- 组件按需引入
- 路由懒加载
- 开启浏览器gzip压缩
- 应用程序使用script加载第三方包减少主包,异步下载第三方包
网站性能优化
于 2023-03-22 17:13:23 首次发布
文章介绍了Web性能优化的各种技术,包括减少HTTP请求数量、压缩资源、使用精灵图和SVG矢量图。还详细讨论了浏览器的缓存机制,如强制缓存、协商缓存以及应用缓存的实现,并提供了JavaScript代码示例来管理本地缓存。此外,文章还提到了减少重排与重绘的技巧以及解决页面加载速度问题的方法,如路由懒加载和开启gzip压缩。
摘要由CSDN通过智能技术生成