前端性能优化的解决方案

-----1.资源合并压缩,减少http请求,减小资源大小
-----2.图片优化,精灵图(雪碧图),内联图片【造成浏览器不会缓存,若图片过大,加载速度慢,兼容性差】,webp【图片后缀格式】
-----3.浏览器渲染引擎与阻塞【js文件的解析和css文件的解析互相排斥的,存在先后顺序,】
-----4.懒加载和预加载【一般用于图片和列表】
-----5.减少重绘回流【layout】
1.使用translate替代top等属性来改变位置;
2.使用opacity替代visibility;
3.将多次改变DOM元素样式属性的操作合并成一次操作
4.把DOM离线后再修改;
5.不要把获取某些DOM节点的属性值放在一个循环里当成循环的变量;
6.不要使用table布局;
7.启用GPU硬件加速;
8.动画实现速度的选择;
9.为动画元素新建图层,提高动画元素的z-index;
10.为动画元素新建图层,提高动画元素的z-index;
-----6.函数防抖与节流【定时器】
-----7.浏览器存储优化【Cookie/Web Storage/IndexedDB/PWA/Service Worker】
Cookie:将存放静态资源的CDN服务器域名与主站的域名独立开来。这样每次请求静态文件的时候就不需要携带Cookie,从而可以节省很多流量。
-----8.HTTP通用缓存策略
一般情况使用前6个居多

发布了6 篇原创文章 · 获赞 0 · 访问量 235

猜你喜欢

转载自blog.csdn.net/qq_43538389/article/details/105483858