-
1、图片优化
- 1、减少像素点
- 2、减少每个像素点能够显示的颜色
-
2、图片加载优化
- 不用图片,对于修饰类的图片,完全可以用CSS代替
- 对于移动端,图片用CDN加载,计算出适应屏幕的宽度,请求相应裁剪好的图片
- 小图使用
base64
格式 - 将多个图标文件整合到一张图中
- 选择正确的文件格式
- 能显示
WebP
格式的浏览器尽量使用WebP
格式 - 小图使用
PNG
,对于图标,可以用SVG
代替 - 照片使用JPEG
- 能显示
-
3、DNS预解析
-
DNS解析也需要时间,可以通过预解析的方式来预先获得域名所对应的IP
<link rel="dns-prefetch" href="//XXX">
-
-
4、节流
-
滚动事件中发起网络请求,但不希望一直发起请求,而是隔一段时间发起一次
/** * func 是用户传入需要防抖的函数 * wait 是等待时间 */ const throttle = (func, wait = 50) =>{ // 上一次执行该函数的时间 let lastTime = 0 return function(...args){ // 当前时间 let now = +new Date() // 将当前时间和上一次时间对比,如果差值大于设置的等待时间就执行函数 if (now - lastTime > wait){ lastTime = now func.apply(this, args) } } } setInterval(throttle(()=>{ console.log(1) }, 500), 1)
-
-
5、防抖
-
按钮点击后一段时间没有再次点击才发起网路请求
// func 是用户传入需要防抖的函数 // wait 是等待时间 const debounce = (func, wait = 50) =>{ // 缓存一个定时器id let timer = 0 // 返回每次用户实际调用的防抖函数, // 如果已有定时器就清空,否则开始新的定时器,延迟执行用户传入的方法 return function(...args){ if (timer) clearTimeout(timer) timer = setTimeout(() =>{ func.apply(this, args) }, wait) } }
-
-
6、预加载
-
资源不需要马上用到,但希望尽早获取
-
预加载其实就是声明式的fetch,强制浏览器请求资源,并且不会阻塞
onload
事件<link rel="preload" href="http://XXX">
-
一定程度上降低首屏加载事件,可以将不影响首屏但重要的文件延后加载,但兼容性不好
-
-
7、预渲染
-
将下载的文件预先在后台渲染
<link rel="prerender" href="http://XXX">
-
提高页面加载速度,但要确保用户大概率打开页面,否则浪费资源
-
-
8、懒执行
- 将某些逻辑延迟到使用时再计算,可以用于首屏优化,对于某些耗时逻辑并不需要在首屏使用,就可以懒执行,懒执行需要唤醒,一般定时器或事件调用来唤醒
-
9、懒加载
- 将不关键的资源延后加载
- 只加载自定义区域(通常是可视区域,也可以是即将进入可视区域)内需要加载的东西。对于图片,设置图片
src
属性为一张占位图,将真实的图片资源放入一个自定义属性中,当进入自定义区域时,就将自定义属性替换成src
属性,这样图片就会去下载资源,实现图片懒加载 - 还可以用于其他资源上,如进入可视区域才播放视频等
-
10、CDN
- 尽可能地在各个地方分布机房缓存数据,就是根服务器在国外,国内用户也可以通过国内机房迅速加载资源
- 静态资源尽量使用
CDN
加载,浏览器对单个域名有并发请求上线,可以考虑使用多个CDN
域名,对于CDN
加载静态资源要注意CDN
域名与主站不同,否在每次请求都会带上主站Cookie
,平白消耗流量
前端性能优化
最新推荐文章于 2024-09-22 11:17:00 发布